|
| 1 | +import { expect, test } from '@playwright/test' |
| 2 | + |
| 3 | +function parseScale(transform: string): number | null { |
| 4 | + const m = transform.match(/matrix\(([^)]+)\)/) |
| 5 | + if (!m) return transform === 'none' ? 1 : null |
| 6 | + const parts = m[1].split(',').map((s) => parseFloat(s.trim())) |
| 7 | + if (parts.length < 4 || Number.isNaN(parts[0]) || Number.isNaN(parts[3])) return null |
| 8 | + return parts[0] |
| 9 | +} |
| 10 | + |
| 11 | +test.describe('AnimatePresence exit animation', () => { |
| 12 | + test('animates out when toggled off with preserved shape', async ({ page }) => { |
| 13 | + await page.goto( |
| 14 | + '/tests/motion/animate-presence?@humanspeak-svelte-motion-isPlaywright=true' |
| 15 | + ) |
| 16 | + |
| 17 | + const box = page.locator('[data-testid="box"]') |
| 18 | + const toggle = page.locator('[data-testid="toggle"]') |
| 19 | + |
| 20 | + await expect(box).toBeVisible() |
| 21 | + |
| 22 | + // Wait for enter animation to complete (size + opacity + scale = 1) |
| 23 | + // This is required - AnimatePresence only works if you wait for enter to finish |
| 24 | + await page.waitForFunction( |
| 25 | + () => { |
| 26 | + const el = document.querySelector('[data-testid="box"]') as HTMLElement | null |
| 27 | + if (!el) return false |
| 28 | + |
| 29 | + const rect = el.getBoundingClientRect() |
| 30 | + const styles = getComputedStyle(el) |
| 31 | + const opacity = parseFloat(styles.opacity) |
| 32 | + const transform = styles.transform |
| 33 | + |
| 34 | + // Must have full size (96px for size-24) |
| 35 | + if (rect.width < 90 || rect.height < 90) return false |
| 36 | + |
| 37 | + // Must be fully opaque |
| 38 | + if (opacity < 0.99) return false |
| 39 | + |
| 40 | + // Must be fully scaled in (scale = 1) |
| 41 | + if (transform === 'none') return true |
| 42 | + |
| 43 | + // scale(s) |
| 44 | + const scaleMatch = transform.match(/scale\(([^)]+)\)/) |
| 45 | + if (scaleMatch) { |
| 46 | + const scale = parseFloat(scaleMatch[1]) |
| 47 | + return scale >= 0.99 |
| 48 | + } |
| 49 | + |
| 50 | + // 2D matrix(a, b, c, d, tx, ty) → scaleX = a |
| 51 | + const matrixMatch = transform.match(/matrix\(([^)]+)\)/) |
| 52 | + if (matrixMatch) { |
| 53 | + const values = matrixMatch[1].split(',').map((v) => parseFloat(v.trim())) |
| 54 | + if (values.length >= 4) { |
| 55 | + const scaleX = values[0] |
| 56 | + return scaleX >= 0.99 |
| 57 | + } |
| 58 | + } |
| 59 | + |
| 60 | + // 3D matrix3d(m11, m12, ..., m33, tx, ty, tz) → scaleX=m11 (index 0), scaleY=m22 (index 5) |
| 61 | + const matrix3dMatch = transform.match(/matrix3d\(([^)]+)\)/) |
| 62 | + if (matrix3dMatch) { |
| 63 | + const values = matrix3dMatch[1].split(',').map((v) => parseFloat(v.trim())) |
| 64 | + if (values.length >= 16) { |
| 65 | + const scaleX = values[0] |
| 66 | + const scaleY = values[5] |
| 67 | + return scaleX >= 0.99 && scaleY >= 0.99 |
| 68 | + } |
| 69 | + } |
| 70 | + |
| 71 | + // Unknown transform → fail closed |
| 72 | + return false |
| 73 | + }, |
| 74 | + { timeout: 5000 } |
| 75 | + ) |
| 76 | + |
| 77 | + const boxRect = await box.evaluate((el) => el.getBoundingClientRect()) |
| 78 | + const boxStyles = await box.evaluate((el) => { |
| 79 | + const cs = getComputedStyle(el as HTMLElement) |
| 80 | + return { |
| 81 | + borderRadius: cs.borderRadius, |
| 82 | + clipPath: cs.clipPath, |
| 83 | + boxShadow: cs.boxShadow, |
| 84 | + transform: cs.transform |
| 85 | + } |
| 86 | + }) |
| 87 | + |
| 88 | + // Click hide button to trigger exit animation |
| 89 | + await toggle.click() |
| 90 | + |
| 91 | + // Wait for clone to appear and capture its properties immediately |
| 92 | + await page.waitForFunction(() => !!document.querySelector('[data-clone="true"]'), { |
| 93 | + timeout: 2000 |
| 94 | + }) |
| 95 | + |
| 96 | + // Capture clone properties as soon as it appears (before it animates out) |
| 97 | + const cloneData = await page.evaluate(() => { |
| 98 | + const clone = document.querySelector('[data-clone="true"]') as HTMLElement |
| 99 | + if (!clone) return null |
| 100 | + |
| 101 | + const rect = clone.getBoundingClientRect() |
| 102 | + const cs = getComputedStyle(clone) |
| 103 | + return { |
| 104 | + rect: { |
| 105 | + width: rect.width, |
| 106 | + height: rect.height, |
| 107 | + top: rect.top, |
| 108 | + left: rect.left |
| 109 | + }, |
| 110 | + styles: { |
| 111 | + borderRadius: cs.borderRadius, |
| 112 | + clipPath: cs.clipPath, |
| 113 | + boxShadow: cs.boxShadow, |
| 114 | + transform: cs.transform, |
| 115 | + opacity: cs.opacity |
| 116 | + } |
| 117 | + } |
| 118 | + }) |
| 119 | + |
| 120 | + expect(cloneData).toBeTruthy() |
| 121 | + expect(Math.abs(cloneData!.rect.width - boxRect.width)).toBeLessThanOrEqual(2) |
| 122 | + expect(Math.abs(cloneData!.rect.height - boxRect.height)).toBeLessThanOrEqual(2) |
| 123 | + expect(cloneData!.styles.borderRadius).toBe(boxStyles.borderRadius) |
| 124 | + expect(cloneData!.styles.clipPath).toBe(boxStyles.clipPath) |
| 125 | + expect(typeof cloneData!.styles.boxShadow).toBe('string') |
| 126 | + |
| 127 | + // Original box should eventually disappear from DOM after exit animation starts |
| 128 | + await expect(box).toHaveCount(0, { timeout: 2000 }) |
| 129 | + |
| 130 | + // Verify clone animates out and gets removed |
| 131 | + // Since the animation is fast, we'll check if clone eventually disappears |
| 132 | + const clone = page.locator('[data-clone="true"]') |
| 133 | + |
| 134 | + // Try to observe animation changes, but don't fail if clone disappears quickly |
| 135 | + const start = Date.now() |
| 136 | + let sawAnimation = false |
| 137 | + while (Date.now() - start < 1500 && !sawAnimation) { |
| 138 | + try { |
| 139 | + const animationData = await page.evaluate(() => { |
| 140 | + const cloneEl = document.querySelector('[data-clone="true"]') as HTMLElement |
| 141 | + if (!cloneEl) return null |
| 142 | + const cs = getComputedStyle(cloneEl) |
| 143 | + return { opacity: cs.opacity, transform: cs.transform } |
| 144 | + }) |
| 145 | + |
| 146 | + if (!animationData) break // Clone was removed |
| 147 | + |
| 148 | + const op = parseFloat(animationData.opacity) |
| 149 | + const scale = parseScale(animationData.transform) |
| 150 | + if (!Number.isNaN(op) && op < 1) sawAnimation = true |
| 151 | + if (scale !== null && scale < 1) sawAnimation = true |
| 152 | + } catch { |
| 153 | + break // Clone was removed during check |
| 154 | + } |
| 155 | + await page.waitForTimeout(50) |
| 156 | + } |
| 157 | + |
| 158 | + // Clone should eventually be removed (this is the key test) |
| 159 | + await expect(clone).toHaveCount(0, { timeout: 3000 }) |
| 160 | + }) |
| 161 | +}) |
0 commit comments