@astryxdesign/core 0.7.0 → 0.7.1-canary.0365e23

package/src/CodeBlock/tokenizer.test.ts

@@ -6,6 +6,9 @@ import {
   tokenizeAsync,
   tokenizeStreaming,
   flatTokensToLines,
+  diffLineKind,
+  parseFenceLanguage,
+  splitDiffLines,
 } from './tokenizer';
 import type {TokenLine} from './tokenizer';
 
@@ -166,3 +169,112 @@ describe('flatTokensToLines', () => {
     expect(result[1]).toContainEqual({type: 'number', start: 8, end: 9});
   });
 });
+
+describe('diffLineKind', () => {
+  it('classifies unified-diff lines by their first character', () => {
+    expect(diffLineKind('+added line')).toBe('added');
+    expect(diffLineKind('-removed line')).toBe('removed');
+    expect(diffLineKind(' context line')).toBe('context');
+    expect(diffLineKind('')).toBe('context');
+  });
+
+  it('keeps hunk headers out of the change rows; a lone --- or +++ is a change', () => {
+    expect(diffLineKind('@@ -1,3 +1,4 @@')).toBe('header');
+    expect(diffLineKind('--- a/file.ts')).toBe('removed');
+    expect(diffLineKind('+++ b/file.ts')).toBe('added');
+    // Lines with no glyph are context, whatever tool wrote them.
+    expect(diffLineKind('diff --git a/x b/x')).toBe('context');
+    expect(diffLineKind('index 83db48f..bf269f4 100644')).toBe('context');
+  });
+
+  it('splits the glyph column from the code the base language sees', () => {
+    const {kinds, glyphs, content} = splitDiffLines([
+      '@@ -1 +1 @@',
+      '-  const a = 1;',
+      '+  const a = 2;',
+      '   const b = 3;',
+      '',
+    ]);
+    expect(kinds).toEqual(['header', 'removed', 'added', 'context', 'context']);
+    expect(glyphs).toEqual(['', '-', '+', ' ', '']);
+    expect(content).toEqual([
+      '',
+      '  const a = 1;',
+      '  const a = 2;',
+      '  const b = 3;',
+      '',
+    ]);
+  });
+
+  it('treats a ---/+++ pair directly before @@ as a file header anywhere, and keeps unindented context whole', () => {
+    const {kinds, glyphs, content} = splitDiffLines([
+      '--- a/x.ts',
+      '+++ b/x.ts',
+      '@@ -1 +1 @@',
+      '--x;',
+      '---',
+      '+++y;',
+      'plain',
+      '--- a/y.ts',
+      '+++ b/y.ts',
+      '@@ -1 +1 @@',
+      '-old',
+    ]);
+    expect(kinds).toEqual([
+      'header',
+      'header',
+      'header',
+      'removed',
+      'removed',
+      'added',
+      'context',
+      'header',
+      'header',
+      'header',
+      'removed',
+    ]);
+    expect(glyphs.slice(0, 7)).toEqual(['', '', '', '-', '-', '+', '']);
+    expect(content.slice(3, 7)).toEqual(['-x;', '--', '++y;', 'plain']);
+    // No hunk after the pair: both lines are changes, not headers.
+    expect(splitDiffLines(['--- gone', '+++ here', ' same']).kinds).toEqual([
+      'removed',
+      'added',
+      'context',
+    ]);
+    // A hunk ending in `---i;` / `+++i;` right before the next `@@` is code,
+    // not a file header: the header form has a space after the signs.
+    expect(
+      splitDiffLines(['@@ -1 +1 @@', '---i;', '+++i;', '@@ -9 +9 @@', ' x'])
+        .kinds,
+    ).toEqual(['header', 'removed', 'added', 'header', 'context']);
+    expect(diffLineKind('--- a/x.ts')).toBe('removed');
+    expect(diffLineKind('--- a/x.ts', {isFileHeader: true})).toBe('header');
+  });
+
+  it('tokenizes the code past the glyph with the base language', () => {
+    const {content} = splitDiffLines(['-const a = 1;', '+const a = 2;']);
+    const lines = tokenize(content.join('\n'), 'typescript');
+    expect(lines[0][0]).toEqual({type: 'keyword', start: 0, end: 5});
+    expect(lines[1][0]).toEqual({type: 'keyword', start: 0, end: 5});
+  });
+
+  it('reads fence info strings: diff, diff-<lang>, and a plain language (patch is just a language)', () => {
+    expect(parseFenceLanguage('diff')).toEqual({
+      language: 'plaintext',
+      isDiff: true,
+    });
+    expect(parseFenceLanguage('patch')).toEqual({
+      language: 'patch',
+      isDiff: false,
+    });
+    expect(parseFenceLanguage('diff-tsx')).toEqual({
+      language: 'tsx',
+      isDiff: true,
+    });
+    expect(parseFenceLanguage('tsx')).toEqual({language: 'tsx', isDiff: false});
+    expect(parseFenceLanguage(undefined)).toEqual({
+      language: 'plaintext',
+      isDiff: false,
+    });
+  });
+});

package/src/CodeBlock/tokenizer.ts

@@ -313,6 +313,112 @@ function buildLanguagePatterns(lang: string): {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Diff lines
+// ---------------------------------------------------------------------------
+
+/** How a unified-diff line reads: what it adds, removes, frames, or keeps. */
+export type DiffLineKind = 'added' | 'removed' | 'header' | 'context';
+
+/**
+ * Read a Markdown fence info string the way CodeBlock renders it: `diff` is
+ * the diff layer over plaintext, `diff-<lang>` (the common convention) is the
+ * diff layer over `<lang>`, anything else is a language.
+ */
+export function parseFenceLanguage(info: string | undefined): {
+  language: string;
+  isDiff: boolean;
+} {
+  const value = (info ?? '').trim();
+  if (value === 'diff') {
+    return {language: 'plaintext', isDiff: true};
+  }
+  const layered = /^diff-(.+)$/.exec(value);
+  if (layered) {
+    return {language: layered[1], isDiff: true};
+  }
+  return {language: value || 'plaintext', isDiff: false};
+}
+
+/**
+ * Split a diff into the glyph column and the code the base language sees:
+ * every added, removed, or space-led context line loses its first character
+ * (the `+`, `-`, or space); a context line with no leading space keeps all
+ * of it; header lines contribute an empty line so offsets stay per line.
+ */
+export function splitDiffLines(lines: ReadonlyArray<string>): {
+  kinds: DiffLineKind[];
+  glyphs: string[];
+  content: string[];
+} {
+  const kinds: DiffLineKind[] = [];
+  const glyphs: string[] = [];
+  const content: string[] = [];
+  const fileHeaders = fileHeaderLines(lines);
+  lines.forEach((line, index) => {
+    const kind = diffLineKind(line, {isFileHeader: fileHeaders.has(index)});
+    kinds.push(kind);
+    if (kind === 'header') {
+      glyphs.push('');
+      content.push('');
+    } else if (kind === 'context' && !line.startsWith(' ')) {
+      // A context line without its leading space (an unindented diff, or
+      // an empty line) has no glyph: the marker column is empty and the
+      // whole line is code.
+      glyphs.push('');
+      content.push(line);
+    } else {
+      glyphs.push(line.slice(0, 1));
+      content.push(line.slice(1));
+    }
+  });
+  return {kinds, glyphs, content};
+}
+
+/**
+ * Classify one line of a unified diff by its first character: `+` added,
+ * `-` removed, `@@` header, anything else context. A `--- ` line (with its
+ * space) directly followed by a `+++ ` line and then an `@@` line is a file
+ * header (both lines), wherever it occurs; every other `---`/`+++` line is
+ * removed or added, so a removed line that starts with `--` — `---i;`
+ * included — is never misread. The glyph is part of the text and is never
+ * removed.
+ */
+export function diffLineKind(
+  line: string,
+  {isFileHeader = false}: {isFileHeader?: boolean} = {},
+): DiffLineKind {
+  if (line.startsWith('@@') || isFileHeader) {
+    return 'header';
+  }
+  if (line.startsWith('+')) {
+    return 'added';
+  }
+  if (line.startsWith('-')) {
+    return 'removed';
+  }
+  return 'context';
+}
+
+/**
+ * The indexes of the `--- `/`+++ ` lines (unified-diff form, with the space)
+ * that form a file header directly before an `@@`; `---i;` is a change.
+ */
+export function fileHeaderLines(lines: ReadonlyArray<string>): Set<number> {
+  const headers = new Set<number>();
+  for (let i = 0; i + 2 < lines.length; i++) {
+    if (
+      lines[i].startsWith('--- ') &&
+      lines[i + 1].startsWith('+++ ') &&
+      lines[i + 2].startsWith('@@')
+    ) {
+      headers.add(i);
+      headers.add(i + 1);
+    }
+  }
+  return headers;
+}
+
 // ---------------------------------------------------------------------------
 // Core tokenizer
 // ---------------------------------------------------------------------------

package/src/ContextMenu/ContextMenu.spec.md

@@ -146,7 +146,7 @@ the highlight is DOM focus per `module:DropdownMenu/useMenuPress` AR1.
 | Touch action row     | Presents one data-driven touch action or drill-in entry using ListItem.           | `component:List`               | Prominent         | FR1, FR3, FR4      |
 
 The `context-menu` target intentionally appears on both alternative painted
-menu surfaces. Trigger area content stays caller-owned and the zero-size cursor
+menu surfaces. Trigger area content stays caller-owned and the 1px cursor
 anchor is positioning infrastructure rather than consumer anatomy.
 
 ### Theming anatomy

package/src/ContextMenu/ContextMenu.test.tsx

@@ -658,7 +658,7 @@ describe('ContextMenu compound mode', () => {
   });
 
   describe('cursor anchor positioning (#3465)', () => {
-    // The menu is anchored to a zero-size element placed at the cursor point
+    // The menu is anchored to a 1px element placed at the cursor point
     // *inside the trigger*, so it is positioned relative to the trigger's
     // context (scroll-follow + auto-flip) rather than the viewport.
     function getCursorAnchor(trigger: HTMLElement): HTMLElement {
@@ -669,7 +669,7 @@ describe('ContextMenu compound mode', () => {
       return anchor;
     }
 
-    it('renders a zero-size cursor anchor inside the trigger', () => {
+    it('renders a 1px cursor anchor inside the trigger', () => {
       render(
         <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
           <div>Right-click me</div>
@@ -680,6 +680,9 @@ describe('ContextMenu compound mode', () => {
       // Carries an anchor-name so the menu can be anchored to it via CSS
       // anchor positioning (context mode), not fixed viewport coordinates.
       expect(anchor.style.anchorName).toMatch(/^--astryx-layer-/);
+      // Owns a box: WebKit counts an empty anchor box inside a scroll
+      // container as clipped, and `position-visibility` hides the menu.
+      expect(anchor).toHaveStyle({width: '1px', height: '1px'});
     });
 
     it('places the cursor anchor at the pointer position relative to the trigger', () => {
@@ -725,7 +728,37 @@ describe('ContextMenu compound mode', () => {
       fireEvent.contextMenu(trigger, {clientX: 0, clientY: 0, detail: 0});
       const anchor = getCursorAnchor(trigger);
       expect(anchor.style.left).toBe('0px');
-      expect(anchor.style.top).toBe('20px');
+      // The 1px anchor steps back into the trigger's last pixel row, so its
+      // bottom edge (where the menu starts) is still the trigger's bottom.
+      expect(anchor.style.top).toBe('19px');
+    });
+
+    it('keeps the anchor inside the trigger at its end edges, and nowhere else', () => {
+      render(
+        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
+          <div>Right-click me</div>
+        </ContextMenu>,
+      );
+      const trigger = screen.getByTestId('ctx');
+      trigger.getBoundingClientRect = () =>
+        ({
+          left: 100,
+          top: 50,
+          right: 300,
+          bottom: 150,
+          width: 200,
+          height: 100,
+        }) as DOMRect;
+      const anchor = getCursorAnchor(trigger);
+      // A point on the trigger's end edges steps back by the anchor's pixel.
+      fireEvent.contextMenu(trigger, {clientX: 300, clientY: 150, detail: 1});
+      expect(anchor.style.left).toBe('199px');
+      expect(anchor.style.top).toBe('99px');
+      // A point past the trigger (content overflowing it) stays at the
+      // pointer, as does a point on the trigger's start edges.
+      fireEvent.contextMenu(trigger, {clientX: 320, clientY: 50, detail: 1});
+      expect(anchor.style.left).toBe('220px');
+      expect(anchor.style.top).toBe('0px');
     });
   });
 });

package/src/ContextMenu/ContextMenu.tsx

@@ -9,7 +9,7 @@
  * @position Core implementation; consumed by index.ts
  *
  * Right-click context menu positioned at the cursor. The cursor point is
- * captured as an offset *inside the trigger* and materialized as a zero-size
+ * captured as an offset *inside the trigger* and materialized as a 1px
  * anchor element, so the menu is positioned relative to the trigger's context
  * (via CSS anchor positioning) rather than the viewport. It therefore follows
  * the content on scroll and auto-flips at viewport edges, while still appearing
@@ -112,14 +112,16 @@ const styles = stylex.create({
     WebkitUserSelect: 'none',
     userSelect: 'none',
   },
-  // Zero-size anchor placed at the cursor point within the trigger. The menu
-  // is anchored to this element, so it sits under the cursor yet is positioned
+  // 1px anchor placed at the cursor point within the trigger. The menu is
+  // anchored to this element, so it sits under the cursor yet is positioned
   // relative to the trigger's context — it follows the content on scroll and
-  // the browser can auto-flip it against the viewport edges.
+  // the browser can auto-flip it against the viewport edges. It owns a box
+  // because WebKit counts an empty anchor box as clipped, and the default
+  // `position-visibility: anchors-visible` then hides the menu.
   cursorAnchor: {
     position: 'absolute',
-    width: 0,
-    height: 0,
+    width: '1px',
+    height: '1px',
     pointerEvents: 'none',
   },
   menu: {
@@ -185,6 +187,17 @@ const styles = stylex.create({
   },
 });
 
+/**
+ * Keeps the 1px cursor anchor inside the trigger along one axis. A point in
+ * the trigger's last pixel (Shift+F10 opens on its bottom edge) steps back by
+ * that pixel: past the edge the anchor would add scrollable overflow, and a
+ * scroller whose edge meets the trigger's would clip it and hide the menu.
+ * Any other point, inside the trigger or not, stays where it is.
+ */
+function keepAnchorInside(offset: number, size: number): number {
+  return offset > size - 1 && offset <= size ? Math.max(size - 1, 0) : offset;
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -324,7 +337,7 @@ export function ContextMenu({
 
   const menuId = useId();
   // Cursor point in the trigger's local coordinate space (offset from the
-  // trigger's top-left, in-flow). Stored here and written to the zero-size
+  // trigger's top-left, in-flow). Stored here and written to the cursor
   // anchor element so the menu is positioned relative to the trigger context
   // — it scrolls with the content instead of sitting at a fixed viewport point.
   const positionRef = useRef({x: 0, y: 0});
@@ -520,18 +533,21 @@ export function ContextMenu({
     [listNavKeyDown, closeMenu, typeahead, ownsEvent],
   );
 
-  // Place the zero-size cursor anchor at a point in the trigger's local
+  // Place the 1px cursor anchor at a point in the trigger's local
   // coordinate space and open the menu. Positioning the anchor inside the
   // trigger (rather than storing viewport coordinates on the menu itself) is
   // what makes the menu context-relative: it scrolls with the content and the
   // browser auto-flips it against the viewport edges via CSS anchor positioning.
   const openAtLocalPoint = useCallback(
     (localX: number, localY: number, focusEl: HTMLElement | null) => {
-      positionRef.current = {x: localX, y: localY};
+      const rect = triggerRef.current?.getBoundingClientRect();
+      const x = rect ? keepAnchorInside(localX, rect.width) : localX;
+      const y = rect ? keepAnchorInside(localY, rect.height) : localY;
+      positionRef.current = {x, y};
       const anchorEl = cursorAnchorRef.current;
       if (anchorEl) {
-        anchorEl.style.left = `${localX}px`;
-        anchorEl.style.top = `${localY}px`;
+        anchorEl.style.left = `${x}px`;
+        anchorEl.style.top = `${y}px`;
       }
       // Remember the element focused before opening so we can restore it on
       // close (Escape or outside-click), instead of dropping focus to <body>.

package/src/ContextMenu/__tests__/ContextMenuCursorAnchor.a11y.browser.spec.ts

@@ -0,0 +1,153 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ContextMenuCursorAnchor.a11y.browser.spec.ts
+ * @input The built "Inside a scroll container" ContextMenu story and real
+ *   Chromium/WebKit layout and paint
+ * @output Browser evidence that the menu paints at its cursor anchor inside a
+ *   scroll container, hides while the container clips that anchor, and that
+ *   the anchor adds no scrollable overflow
+ * @position Cross-browser proof; jsdom has no layout, anchor positioning or
+ *   paint.
+ *
+ * The menu is anchored to a box at the pointer. The initial
+ * `position-visibility: anchors-visible` hides an anchored box whose anchor
+ * is clipped, and WebKit counts an empty anchor box inside a scroll container
+ * as clipped. Whether the menu painted is read from pixels: WebKit still
+ * hit-tests, and reports as visible, a box that rule hides.
+ */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** Mounts the story with the trigger scrolled fully into the box. */
+async function mount(
+  page: Page,
+): Promise<{trigger: Locator; scroller: Locator}> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-contextmenu--in-scroll-container&viewMode=story`,
+  );
+  await holdMotionStill(page);
+  const scroller = page.getByTestId('context-menu-scroller');
+  // The trigger is the box's last child: at the end of the scroll its bottom
+  // edge is the box's bottom edge.
+  await scroller.evaluate(el => {
+    el.scrollTop = el.scrollHeight;
+  });
+  return {trigger: page.getByText('Right-click this area'), scroller};
+}
+
+/** Right-clicks the trigger 40px in and 30px down; returns that point. */
+async function rightClick(
+  page: Page,
+  trigger: Locator,
+): Promise<{x: number; y: number}> {
+  const box = await trigger.boundingBox();
+  const point = {
+    x: Math.round(box?.x ?? 0) + 40,
+    y: Math.round(box?.y ?? 0) + 30,
+  };
+  await page.mouse.click(point.x, point.y, {button: 'right'});
+  return point;
+}
+
+/** Whether the open menu is on screen: hiding it must change the pixels. */
+async function menuPainted(page: Page): Promise<boolean> {
+  const layer = page.locator('[popover]:has(> [role="menu"])');
+  const clip = await layer.boundingBox();
+  if (clip == null) {
+    return false;
+  }
+  const shown = await page.screenshot({clip});
+  await layer.evaluate(el => {
+    el.style.visibility = 'hidden';
+  });
+  const hidden = await page.screenshot({clip});
+  await layer.evaluate(el => {
+    el.style.visibility = '';
+  });
+  return !shown.equals(hidden);
+}
+
+test('a right-click inside a scroll container paints the menu at the pointer', async ({
+  page,
+}) => {
+  const {trigger} = await mount(page);
+  const point = await rightClick(page, trigger);
+  await expect(page.getByRole('menu')).toBeVisible();
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+
+  const anchor = await page
+    .locator('span[aria-hidden="true"][style*="anchor-name"]')
+    .boundingBox();
+  // The anchor owns a box, so WebKit does not count it as clipped.
+  expect(anchor).toMatchObject({width: 1, height: 1});
+  expect(anchor?.x).toBeCloseTo(point.x, 0);
+  expect(anchor?.y).toBeCloseTo(point.y, 0);
+});
+
+test('the menu hides while the box scrolls its anchor out of view, and returns with it', async ({
+  page,
+}) => {
+  const {trigger, scroller} = await mount(page);
+  await rightClick(page, trigger);
+  await expect(page.getByRole('menu')).toBeVisible();
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+
+  await scroller.evaluate(el => {
+    el.scrollTop -= el.clientHeight;
+  });
+  await expect(page.getByRole('menu')).toBeAttached();
+  await expect.poll(async () => menuPainted(page)).toBe(false);
+
+  await scroller.evaluate(el => {
+    el.scrollTop = el.scrollHeight;
+  });
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+});
+
+test('a keyboard open on the bottom edge paints and adds no scrollable overflow', async ({
+  page,
+}) => {
+  const {trigger, scroller} = await mount(page);
+  const scrollHeight = await scroller.evaluate(el => el.scrollHeight);
+  // Several browsers report Shift+F10 as a contextmenu at (0, 0), which
+  // anchors the menu to the trigger's bottom edge, here the box's own edge.
+  await trigger.evaluate(el => {
+    el.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 0,
+        clientY: 0,
+        detail: 0,
+      }),
+    );
+  });
+  await expect(page.getByRole('menu')).toBeVisible();
+  const anchor = await page
+    .locator('span[aria-hidden="true"][style*="anchor-name"]')
+    .boundingBox();
+  const area = await trigger.boundingBox();
+  expect((anchor?.y ?? 0) + (anchor?.height ?? 0)).toBeCloseTo(
+    (area?.y ?? 0) + (area?.height ?? 0),
+    0,
+  );
+  await expect.poll(async () => menuPainted(page)).toBe(true);
+  expect(await scroller.evaluate(el => el.scrollHeight)).toBe(scrollHeight);
+});

package/src/Dialog/Dialog.tsx

@@ -70,38 +70,10 @@ import {DialogContext} from './DialogContext';
 import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
+import {focusForLastInput} from '../utils/focusReturn';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
-/**
- * Move focus programmatically so its ring follows the last input. Dialog does
- * not render the element that opened it or the consumer's autofocus target, so
- * the browser's focus option is the one way to reach them.
- */
-function focusForLastInput(element: HTMLElement): void {
-  // A text-entry field paints its own focus treatment to show where typing
-  // goes, and an extra blur there can run validation or mark it touched.
-  const isTextEntry =
-    element instanceof HTMLInputElement ||
-    element instanceof HTMLTextAreaElement ||
-    element instanceof HTMLSelectElement ||
-    element.isContentEditable;
-  if (isTextEntry || getInteractionModality() !== 'pointer') {
-    element.focus();
-    return;
-  }
-  // Focusing the element that already has focus does nothing, so a ring the
-  // browser already drew would stay. WebKit draws one when showModal() or its
-  // native close moves focus itself, so clear that focus first.
-  if (element.matches(':focus-visible')) {
-    element.blur();
-  }
-  element.focus({focusVisible: false});
-}
-
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport

package/src/Dialog/__tests__/Dialog.a11y.chromium.spec.ts

@@ -180,25 +180,17 @@ async function runState(
   });
 }
 
-test('every expectation is exercised and every known failure matches once', async ({
-  page,
-}) => {
-  test.setTimeout(5 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of DIALOG_MODAL_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(DIALOG_MODAL_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
-});
+// Each state's result, recorded by its own test below so the whole-suite check
+// at the end reads it instead of measuring every state a second time. A state
+// whose test did not run in this worker (a filtered run, or a worker restarted
+// after a failure) is measured by the whole-suite check itself.
+const recorded = new Map<string, BindingResult>();
 
 for (const state of DIALOG_MODAL_BINDING_STATES) {
   test(`Dialog [${state.id}] — ${state.summary}`, async ({page}) => {
     const cdp = await page.context().newCDPSession(page);
     const result = await runState(page, cdp, state);
+    recorded.set(state.id, result);
     const report = summarize(MODAL_DIALOG_PATTERN, [result]);
     // eslint-disable-next-line no-console -- the report is this run's artifact
     console.log(formatReport(report));
@@ -208,3 +200,18 @@ for (const state of DIALOG_MODAL_BINDING_STATES) {
     expect(report.counts.unexpectedPass).toBe(0);
   });
 }
+
+test('every expectation is exercised and every known failure matches once', async ({
+  page,
+}) => {
+  test.setTimeout(5 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of DIALOG_MODAL_BINDING_STATES) {
+    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(DIALOG_MODAL_KNOWN_FAILURES, results)).toEqual(
+    [],
+  );
+});