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) + }) +})