microsoft/hve-core
Publicmirrored fromhttps://github.com/microsoft/hve-coreAvailable
docs/docusaurus/e2e/reflow.spec.ts
56lines · modecode
| 1 | import { test, expect } from '@playwright/test'; |
| 2 | |
| 3 | // Curated key pages mirrored from .pa11yci for page parity (the 404 entry is |
| 4 | // omitted because reflow/resize assertions target real content pages). |
| 5 | const PAGES = [ |
| 6 | { name: 'home', path: '/hve-core/' }, |
| 7 | { name: 'docs', path: '/hve-core/docs/' }, |
| 8 | { name: 'getting-started', path: '/hve-core/docs/getting-started/' }, |
| 9 | { name: 'content (task-researcher)', path: '/hve-core/docs/rpi/task-researcher/' }, |
| 10 | ]; |
| 11 | |
| 12 | // Sub-pixel rounding can leave scrollWidth one pixel beyond clientWidth on |
| 13 | // otherwise-conformant layouts, so a 1px tolerance absorbs that noise. |
| 14 | const hasNoHorizontalScroll = () => |
| 15 | document.documentElement.scrollWidth <= document.documentElement.clientWidth + 1; |
| 16 | |
| 17 | // WCAG 1.4.10 Reflow: at 320 CSS px wide, content must not require horizontal |
| 18 | // scrolling. The assertion is scoped to the document root — Infima legitimately |
| 19 | // allows internal horizontal scroll on code blocks (`pre`) and wide tables, so |
| 20 | // those descendants are intentionally excluded to avoid false positives. |
| 21 | test.describe('Reflow at 320 CSS px (WCAG 1.4.10)', () => { |
| 22 | test.use({ viewport: { width: 320, height: 856 } }); |
| 23 | |
| 24 | for (const { name, path } of PAGES) { |
| 25 | test(`${name} has no horizontal scroll`, async ({ page }) => { |
| 26 | await page.goto(path); |
| 27 | |
| 28 | await expect(page.getByRole('main')).toBeVisible(); |
| 29 | expect(await page.evaluate(hasNoHorizontalScroll)).toBeTruthy(); |
| 30 | }); |
| 31 | } |
| 32 | }); |
| 33 | |
| 34 | // WCAG 1.4.4 Resize Text: at the default viewport, enlarging text to 200% must |
| 35 | // not clip or obscure primary content. Font-size is reset after each assertion |
| 36 | // so the shared page state does not leak between checks. |
| 37 | test.describe('Resize text to 200% (WCAG 1.4.4)', () => { |
| 38 | for (const { name, path } of PAGES) { |
| 39 | test(`${name} stays usable at 200% text size`, async ({ page }) => { |
| 40 | await page.goto(path); |
| 41 | |
| 42 | await page.evaluate(() => { |
| 43 | document.documentElement.style.fontSize = '200%'; |
| 44 | }); |
| 45 | |
| 46 | try { |
| 47 | await expect(page.getByRole('main')).toBeVisible(); |
| 48 | expect(await page.evaluate(hasNoHorizontalScroll)).toBeTruthy(); |
| 49 | } finally { |
| 50 | await page.evaluate(() => { |
| 51 | document.documentElement.style.fontSize = ''; |
| 52 | }); |
| 53 | } |
| 54 | }); |
| 55 | } |
| 56 | }); |
| 57 | |