v1.1.0: pooled runtime, 959 tests, production hardening (0 squash)

examples/state-test.js

@@ -0,0 +1,45 @@
+// examples/state-test.js
+// State materialization test: verify geometry changes between default, hover,
+// and focus-visible states.
+//
+// Imhotep can materialize CSS pseudo-states without manual interaction
+// choreography. This is useful for testing focus rings, hover expansions,
+// and active press states.
+
+const { test, expect } = require('@playwright/test')
+const { imhotep } = require('imhotep-playwright')
+
+test('button state geometry', async ({ page }) => {
+  await page.goto('https://example.com')
+  const ui = await imhotep(page)
+
+  // Default state
+  await ui.materializeState('.button', 'default')
+  const defaultData = await ui.extract('.button')
+  const defaultRect = defaultData[0].rect
+
+  // Hover state
+  await ui.materializeState('.button', 'hover')
+  const hoverData = await ui.extract('.button')
+  const hoverRect = hoverData[0].rect
+
+  // Focus-visible state
+  await ui.materializeState('.button', 'focus-visible')
+  const focusData = await ui.extract('.button')
+  const focusRect = focusData[0].rect
+
+  // Hover should not shrink the button
+  expect(hoverRect.width).toBeGreaterThanOrEqual(defaultRect.width)
+
+  // Focus-visible should show an outline (geometry may expand)
+  expect(focusRect.width).toBeGreaterThanOrEqual(defaultRect.width)
+
+  // Active state (pressed)
+  await ui.materializeState('.button', 'active')
+  const activeData = await ui.extract('.button')
+  const activeRect = activeData[0].rect
+
+  // Active should not collapse to zero
+  expect(activeRect.width).toBeGreaterThan(0)
+  expect(activeRect.height).toBeGreaterThan(0)
+})