From adb96080a8d5d015226884e6c9aae06f1dc1bd4e Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Mon, 17 Nov 2025 20:48:24 +0900
Subject: [PATCH] =?UTF-8?q?E2E:=20=EB=A9=80=ED=8B=B0=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=ED=9A=8C=EC=A0=84=20=ED=9B=84=20=EA=B7=B8=EB=A3=B9=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88(N/S)=20=EC=8A=A4=EB=83=85=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80=20=EA=B2=80=EC=A6=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../e2e/wysiwyg-group-rotate-resize-ns.e2e.ts | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 tests/e2e/wysiwyg-group-rotate-resize-ns.e2e.ts

diff --git a/tests/e2e/wysiwyg-group-rotate-resize-ns.e2e.ts b/tests/e2e/wysiwyg-group-rotate-resize-ns.e2e.ts
new file mode 100644
index 0000000..7b2c3e8
--- /dev/null
+++ b/tests/e2e/wysiwyg-group-rotate-resize-ns.e2e.ts
@@ -0,0 +1,113 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+async function getBox(page: import('@playwright/test').Page, nth: number) {
+  const el = page.locator('[data-testid^="obj-text-"]').nth(nth)
+  const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10))
+  const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10))
+  const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10))
+  const height = await el.evaluate((n) => parseInt((n as HTMLElement).style.height || '0', 10))
+  return { left, top, width, height }
+}
+
+function snap8(v: number) { return Math.round(v / 8) * 8 }
+
+test.describe('WYSIWYG - Group rotate then resize (N/S) with snap', () => {
+  test('rotate ~15°, then group resize S by +16 (snap) — heights grow equally, top unchanged', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    // rotate to ~15°
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await page.mouse.up()
+
+    const b0 = await getBox(page, 0)
+    const b1 = await getBox(page, 1)
+
+    // resize south edge of the second by +16px
+    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const tbox = await target.boundingBox()
+    if (!tbox) throw new Error('target not found')
+    await page.mouse.move(tbox.x + 5, tbox.y + tbox.height - 3)
+    await page.mouse.down()
+    await page.mouse.move(tbox.x + 5, tbox.y + tbox.height + 16)
+    await page.mouse.up()
+
+    const a0 = await getBox(page, 0)
+    const a1 = await getBox(page, 1)
+
+    const dh = snap8(b1.height + 16) - b1.height
+    expect(a0.top).toBe(b0.top)
+    expect(a1.top).toBe(b1.top)
+    expect(a0.height).toBe(b0.height + dh)
+    expect(a1.height).toBe(b1.height + dh)
+  })
+
+  test('rotate ~15°, then group resize N by +16 (snap) — heights grow equally, top shifts equally', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    // rotate to ~15°
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await page.mouse.up()
+
+    const b0 = await getBox(page, 0)
+    const b1 = await getBox(page, 1)
+
+    // resize north edge of the first by -16px (drag up)
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const fbox = await first.boundingBox()
+    if (!fbox) throw new Error('first not found')
+    await page.mouse.move(fbox.x + 5, fbox.y + 3)
+    await page.mouse.down()
+    await page.mouse.move(fbox.x + 5, fbox.y - 16)
+    await page.mouse.up()
+
+    const a0 = await getBox(page, 0)
+    const a1 = await getBox(page, 1)
+
+    const dh = snap8(b0.height + 16) - b0.height
+    const dy = a0.top - b0.top
+    expect(a0.height).toBe(b0.height + dh)
+    expect(a1.height).toBe(b1.height + dh)
+    expect(dy).toBeLessThanOrEqual(-16)
+    expect(a1.top - b1.top).toBe(dy)
+  })
+})