u

code/g3soft-libs/packages/ui/e2e/rtl.spec.ts

@@ -148,4 +148,47 @@ test.describe('RTL 镜像（几何）', () => {
     const box = (await panel.boundingBox())!
     expect(box.x + box.width).toBeGreaterThanOrEqual(viewport.width - 2)
   })
+
+  test('ColorPicker：取色区与色相条在 RTL 下不镜像（横轴是颜色空间，不是行内方向）', async ({
+    page,
+  }) => {
+    /**
+     * 这条锁的是「刻意不镜像」：取色区底下是 `linear-gradient(to right, …)`（物理方向，
+     * [dir='rtl'] 不翻转），所以 JS 的取值方向必须与渲染同向。
+     * 若后人"顺手"把 left 改成 inset-inline-start，光标就会和它底下的颜色对不上。
+     */
+    for (const dir of ['ltr', 'rtl'] as const) {
+      await gotoDir(page, dir)
+      // 用组件自己的类名定位：G3ColorPicker 根是 G3Popover（多根：触发器 + Teleport），
+      // 多根组件不做 attr 透传，data-testid 会被 Vue 丢弃，不能作为定位锚点。
+      await page.locator('#s-color-picker .g3-color-picker').first().click()
+
+      const area = page.locator('.g3-color-picker__area')
+      await expect(area).toBeVisible()
+
+      // 取色区左下角应是低饱和 / 低明度（接近黑），右上角是高饱和高明度
+      const readAt = async (fx: number, fy: number) => {
+        const box = (await area.boundingBox())!
+        await page.mouse.click(box.x + box.width * fx, box.y + box.height * fy)
+        return page.locator('.g3-color-picker__hex-input').inputValue()
+      }
+
+      // 左端取色 → 饱和度低；右端取色 → 饱和度高。两个方向都要是「左低右高」
+      const left = await readAt(0.02, 0.5)
+      const right = await readAt(0.98, 0.5)
+      const satOf = (hex: string) => {
+        const n = parseInt(hex.slice(1), 16)
+        const r = (n >> 16) & 255
+        const g = (n >> 8) & 255
+        const b = n & 255
+        const max = Math.max(r, g, b)
+        const min = Math.min(r, g, b)
+        return max === min ? 0 : (max - min) / max
+      }
+
+      expect(satOf(right), `${dir}: 右端应比左端饱和`).toBeGreaterThan(satOf(left))
+
+      await page.keyboard.press('Escape')
+    }
+  })
 })