@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/src/gestures/__tests__/browserNegotiation.test.ts

@@ -0,0 +1,293 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file browserNegotiation.test.ts
+ * @input Recognizer sets, touch-action strings, and jsdom elements with
+ *   scripted scroll metrics
+ * @output What the browser is told (touch-action and long-press styles) and
+ *   what the native scroll probe answers (edges, touch-action, chaining,
+ *   RTL)
+ * @position Unit tests of touchAction.ts and nativeScroll.ts
+ */
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {LongPressGestureRecognizer} from '../LongPressGestureRecognizer';
+import {createNativeScrollProbe, parseTouchAction} from '../nativeScroll';
+import {PanGestureRecognizer} from '../PanGestureRecognizer';
+import {PinchGestureRecognizer} from '../PinchGestureRecognizer';
+import {ScreenEdgePanGestureRecognizer} from '../ScreenEdgePanGestureRecognizer';
+import {SwipeGestureRecognizer} from '../SwipeGestureRecognizer';
+import {TapGestureRecognizer} from '../TapGestureRecognizer';
+import {
+  deriveTouchAction,
+  gestureHostStyle,
+  holdSelectionStyle,
+} from '../touchAction';
+
+describe('deriveTouchAction', () => {
+  it('needs nothing without touch recognizers', () => {
+    expect(deriveTouchAction([])).toBeNull();
+    expect(
+      deriveTouchAction([
+        new PanGestureRecognizer({allowedPointerTypes: ['mouse']}),
+      ]),
+    ).toBeNull();
+  });
+
+  it('removes only double-tap zoom for taps and long presses', () => {
+    expect(deriveTouchAction([new TapGestureRecognizer()])).toBe(
+      'manipulation',
+    );
+    expect(deriveTouchAction([new LongPressGestureRecognizer()])).toBe(
+      'manipulation',
+    );
+  });
+
+  it('gives the browser the other axis of a one-axis pan or swipe, and keeps pinch-zoom', () => {
+    expect(
+      deriveTouchAction([new PanGestureRecognizer({direction: 'horizontal'})]),
+    ).toBe('pan-y pinch-zoom');
+    expect(
+      deriveTouchAction([new PanGestureRecognizer({direction: 'vertical'})]),
+    ).toBe('pan-x pinch-zoom');
+    expect(deriveTouchAction([new PanGestureRecognizer()])).toBe('pinch-zoom');
+    expect(
+      deriveTouchAction([new SwipeGestureRecognizer({direction: 'left'})]),
+    ).toBe('pan-y pinch-zoom');
+  });
+
+  it('leaves the browser everything for a one-way pan, or one that shares native scrolling', () => {
+    // The other direction keeps scrolling natively; the pan claims its own
+    // by cancelling touchmove when it begins.
+    expect(
+      deriveTouchAction([new PanGestureRecognizer({direction: 'down'})]),
+    ).toBeNull();
+    // A screen-edge pan from one edge goes one way, inward (spec:AST-094 FR18).
+    expect(
+      deriveTouchAction([
+        new ScreenEdgePanGestureRecognizer({edges: ['leading']}),
+      ]),
+    ).toBeNull();
+    expect(
+      deriveTouchAction([
+        new PanGestureRecognizer({direction: 'down', scrollEdge: true}),
+      ]),
+    ).toBeNull();
+    expect(
+      deriveTouchAction([
+        new PanGestureRecognizer({direction: 'down', scrollEdge: true}),
+        new TapGestureRecognizer(),
+      ]),
+    ).toBe('manipulation');
+  });
+
+  it('takes pinch-zoom only for a pinch recognizer', () => {
+    expect(deriveTouchAction([new PinchGestureRecognizer()])).toBe(
+      'pan-x pan-y',
+    );
+    expect(
+      deriveTouchAction([
+        new PinchGestureRecognizer(),
+        new PanGestureRecognizer(),
+      ]),
+    ).toBe('none');
+  });
+
+  it('intersects every recognizer on the element', () => {
+    expect(
+      deriveTouchAction([
+        new TapGestureRecognizer(),
+        new PanGestureRecognizer({direction: 'horizontal'}),
+      ]),
+    ).toBe('pan-y pinch-zoom');
+  });
+
+  it('locks selection only for a held press, never on the element (spec:AST-094 FR41)', () => {
+    // The attached style is the touch-action alone: a mouse and a keyboard
+    // keep selecting (spec:AST-017 FR59).
+    expect(gestureHostStyle([new LongPressGestureRecognizer()])).toEqual({
+      touchAction: 'manipulation',
+    });
+    // The host applies this for one press, from touch-down to the lift.
+    expect(holdSelectionStyle([new LongPressGestureRecognizer()])).toEqual({
+      WebkitTouchCallout: 'none',
+      WebkitUserSelect: 'none',
+      userSelect: 'none',
+    });
+    // A hold that does nothing selects natively.
+    expect(holdSelectionStyle([new TapGestureRecognizer()])).toBeNull();
+  });
+});
+
+describe('parseTouchAction', () => {
+  it('reads the pans each value allows', () => {
+    expect(parseTouchAction('auto')).toEqual({x: true, y: true});
+    expect(parseTouchAction('manipulation')).toEqual({x: true, y: true});
+    expect(parseTouchAction('none')).toEqual({x: false, y: false});
+    expect(parseTouchAction('pan-y pinch-zoom')).toEqual({x: false, y: true});
+    expect(parseTouchAction('pan-left')).toEqual({x: true, y: false});
+    expect(parseTouchAction('pinch-zoom')).toEqual({x: false, y: false});
+  });
+});
+
+/** Give an element the scroll metrics jsdom cannot lay out. */
+function scroller(
+  element: HTMLElement,
+  metrics: {
+    scrollTop?: number;
+    scrollHeight?: number;
+    clientHeight?: number;
+    scrollLeft?: number;
+    scrollWidth?: number;
+    clientWidth?: number;
+  },
+): void {
+  for (const [key, value] of Object.entries(metrics)) {
+    Object.defineProperty(element, key, {configurable: true, value});
+  }
+}
+
+/**
+ * jsdom drops `touch-action` from styles, so the elements under test carry
+ * it in `data-touch-action` and computed style reports it from there.
+ */
+function withTouchActionFromData(): () => void {
+  const original = window.getComputedStyle.bind(window);
+  const spy = vi
+    .spyOn(window, 'getComputedStyle')
+    .mockImplementation((element: Element, pseudo?: string | null) => {
+      const style = original(element, pseudo);
+      const touchAction = element.getAttribute('data-touch-action');
+      if (touchAction == null) {
+        return style;
+      }
+      return new Proxy(style, {
+        get(target, key): string | number | object | null | undefined {
+          if (key === 'touchAction') {
+            return touchAction;
+          }
+          const value = Reflect.get(target, key) as
+            string | number | object | null | undefined;
+          return typeof value === 'function' ? value.bind(target) : value;
+        },
+      });
+    });
+  return () => spy.mockRestore();
+}
+
+describe('createNativeScrollProbe', () => {
+  let restore: () => void = () => {};
+  beforeEach(() => {
+    restore = withTouchActionFromData();
+  });
+  afterEach(() => {
+    restore();
+    document.body.innerHTML = '';
+    document.documentElement.style.overflow = '';
+  });
+
+  function setup(listStyle: string) {
+    // The page itself does not scroll in these cases.
+    document.documentElement.style.overflow = 'hidden';
+    document.body.innerHTML = `<div id="list" style="${listStyle}"><button id="row">Row</button></div>`;
+    const list = document.getElementById('list') as HTMLElement;
+    const row = document.getElementById('row') as HTMLElement;
+    return {list, row};
+  }
+
+  it('answers by edge: at the top a pull down scrolls nothing, a pull up does', () => {
+    const {list, row} = setup('overflow-y: auto');
+    scroller(list, {scrollTop: 0, scrollHeight: 1000, clientHeight: 400});
+    const probe = createNativeScrollProbe(row);
+    expect(probe.canScroll(0, 20)).toBe(false);
+    expect(probe.canScroll(0, -20)).toBe(true);
+    expect(probe.isInsideScroller).toBe(true);
+    scroller(list, {scrollTop: 600});
+    expect(probe.canScroll(0, -20)).toBe(false);
+    expect(probe.canScroll(0, 20)).toBe(true);
+  });
+
+  it('finds a scroller in a shadow tree around the slot a light-DOM row is slotted into', () => {
+    document.documentElement.style.overflow = 'hidden';
+    document.body.innerHTML =
+      '<div id="host"><button id="row">Row</button></div>';
+    const host = document.getElementById('host') as HTMLElement;
+    const row = document.getElementById('row') as HTMLElement;
+    const shadow = host.attachShadow({mode: 'open'});
+    shadow.innerHTML =
+      '<div id="list" style="overflow-y: auto"><slot></slot></div>';
+    const list = shadow.getElementById('list') as HTMLElement;
+    scroller(list, {scrollTop: 0, scrollHeight: 1000, clientHeight: 400});
+    const probe = createNativeScrollProbe(row);
+    expect(probe.isInsideScroller).toBe(true);
+    expect(probe.canScroll(0, -20)).toBe(true);
+  });
+
+  it('puts a control in a fixed bar outside the page it floats over (spec:AST-094 FR11)', () => {
+    document.body.innerHTML =
+      '<div id="bar" style="position: fixed"><button id="row">Row</button></div>';
+    const root = document.scrollingElement ?? document.documentElement;
+    scroller(root as HTMLElement, {
+      scrollTop: 0,
+      scrollHeight: 3000,
+      clientHeight: 800,
+    });
+    const probe = createNativeScrollProbe(document.getElementById('row'));
+    // The page still scrolls under a drag that starts on the bar, but the bar
+    // is not in a scroll view, so its control gets no content-touch delay.
+    expect(probe.isInsideScroller).toBe(false);
+    expect(probe.canScroll(0, -20)).toBe(true);
+    for (const key of ['scrollTop', 'scrollHeight', 'clientHeight']) {
+      Reflect.deleteProperty(root, key);
+    }
+  });
+
+  it('honors touch-action between the touch and the scroller', () => {
+    const {list, row} = setup('overflow-y: auto');
+    row.setAttribute('data-touch-action', 'pan-x');
+    scroller(list, {scrollTop: 100, scrollHeight: 1000, clientHeight: 400});
+    const probe = createNativeScrollProbe(row);
+    expect(probe.canScroll(0, 20)).toBe(false);
+    expect(probe.allowsNativePan).toBe(true);
+    row.setAttribute('data-touch-action', 'none');
+    expect(createNativeScrollProbe(row).allowsNativePan).toBe(false);
+  });
+
+  it('ignores the wobble of a mostly straight drag', () => {
+    const {list, row} = setup('overflow-x: auto; overflow-y: hidden');
+    scroller(list, {scrollLeft: 50, scrollWidth: 1000, clientWidth: 300});
+    const probe = createNativeScrollProbe(row);
+    expect(probe.canScroll(2, 30)).toBe(false);
+    expect(probe.canScroll(30, 2)).toBe(true);
+  });
+
+  it('follows the RTL scrollLeft range', () => {
+    const {list, row} = setup(
+      'overflow-x: auto; overflow-y: hidden; direction: rtl',
+    );
+    // RTL starts at 0 and runs negative toward the inline end (the left).
+    scroller(list, {scrollLeft: 0, scrollWidth: 1000, clientWidth: 300});
+    const probe = createNativeScrollProbe(row);
+    expect(probe.canScroll(30, 0)).toBe(true); // reveals content on the left
+    expect(probe.canScroll(-30, 0)).toBe(false);
+    scroller(list, {scrollLeft: -700});
+    expect(probe.canScroll(30, 0)).toBe(false);
+  });
+
+  it('stops the chain at overscroll-behavior: contain', () => {
+    document.documentElement.style.overflow = '';
+    document.body.innerHTML = `<div id="outer" style="overflow-y: auto"><div id="inner" style="overflow-y: auto; overscroll-behavior: contain"><span id="t">x</span></div></div>`;
+    const outer = document.getElementById('outer') as HTMLElement;
+    const inner = document.getElementById('inner') as HTMLElement;
+    scroller(outer, {scrollTop: 300, scrollHeight: 2000, clientHeight: 500});
+    scroller(inner, {scrollTop: 0, scrollHeight: 800, clientHeight: 400});
+    const probe = createNativeScrollProbe(document.getElementById('t'));
+    // The inner list is at its top and contains its overscroll: a pull
+    // down reaches nothing, though the outer one could scroll.
+    expect(probe.canScroll(0, 20)).toBe(false);
+    inner.style.overscrollBehavior = 'auto';
+    expect(
+      createNativeScrollProbe(document.getElementById('t')).canScroll(0, 20),
+    ).toBe(true);
+  });
+});

package/src/gestures/__tests__/haptics.test.ts

@@ -0,0 +1,187 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file haptics.test.ts
+ * @input playHaptic, attachTapHaptic and the support probes, with
+ *   navigator.vibrate stubbed or absent, in jsdom
+ * @output Vibration patterns per feedback kind where the platform vibrates,
+ *   nothing where it does not; the hidden switch iOS Safari plays its tap
+ *   haptic on: hidden from layout, touch and assistive technology, its click
+ *   and change kept inside, removed on release
+ * @position Unit tests of packages/core/src/gestures/haptics.ts
+ */
+
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {
+  HAPTIC_FEEDBACK_KINDS,
+  HAPTIC_VIBRATION_PATTERNS,
+} from '../../motion/uikit/gestures';
+import {
+  attachTapHaptic,
+  canVibrate,
+  HAPTIC_SWITCH_ATTRIBUTE,
+  playHaptic,
+  supportsSwitchControl,
+} from '../haptics';
+
+const original = Object.getOwnPropertyDescriptor(navigator, 'vibrate');
+
+function stubVibrate(implementation: (pattern: number[]) => boolean) {
+  const vibrate = vi.fn(implementation);
+  Object.defineProperty(navigator, 'vibrate', {
+    configurable: true,
+    value: vibrate,
+  });
+  return vibrate;
+}
+
+afterEach(() => {
+  if (original == null) {
+    delete (navigator as {vibrate?: unknown}).vibrate;
+  } else {
+    Object.defineProperty(navigator, 'vibrate', original);
+  }
+  document.body.innerHTML = '';
+});
+
+describe('playHaptic', () => {
+  it('vibrates each feedback kind with its own pattern', () => {
+    const vibrate = stubVibrate(() => true);
+    expect(canVibrate()).toBe(true);
+    for (const kind of HAPTIC_FEEDBACK_KINDS) {
+      expect(playHaptic(kind)).toBe(true);
+      expect(vibrate).toHaveBeenLastCalledWith([
+        ...HAPTIC_VIBRATION_PATTERNS[kind].value,
+      ]);
+    }
+  });
+
+  it('plays nothing where the platform cannot vibrate, or refuses', () => {
+    delete (navigator as {vibrate?: unknown}).vibrate;
+    expect(canVibrate()).toBe(false);
+    expect(playHaptic('impactLight')).toBe(false);
+    stubVibrate(() => false);
+    expect(playHaptic('selection')).toBe(false);
+  });
+
+  it('lets an error from the platform through: a vibrate that throws is not a refusal', () => {
+    stubVibrate(() => {
+      throw new Error('blocked');
+    });
+    expect(() => playHaptic('selection')).toThrow('blocked');
+  });
+});
+
+describe('attachTapHaptic', () => {
+  it('gives the label a hidden switch that keeps its own events inside', () => {
+    document.body.innerHTML = '<label id="tap">Tap</label>';
+    const label = document.getElementById('tap') as HTMLLabelElement;
+    const onClick = vi.fn();
+    const onChange = vi.fn();
+    label.addEventListener('click', onClick);
+    label.addEventListener('change', onChange);
+
+    const release = attachTapHaptic(label);
+    const input = label.querySelector(`[${HAPTIC_SWITCH_ATTRIBUTE}]`);
+    expect(input).toBeInstanceOf(HTMLInputElement);
+    const sw = input as HTMLInputElement;
+    expect(sw.type).toBe('checkbox');
+    expect(sw.hasAttribute('switch')).toBe(true);
+    expect(sw.getAttribute('aria-hidden')).toBe('true');
+    expect(sw.tabIndex).toBe(-1);
+    // It never takes the touch itself, so a pan starting on it still
+    // scrolls, and it takes no room.
+    expect(sw.style.pointerEvents).toBe('none');
+    expect(sw.style.position).toBe('absolute');
+
+    // The switch toggling (the label's activation) does not reach the
+    // control as a second click or a change.
+    sw.click();
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+
+    release();
+    expect(label.querySelector(`[${HAPTIC_SWITCH_ATTRIBUTE}]`)).toBeNull();
+  });
+
+  it('never leaves the focus on its hidden switch', () => {
+    document.body.innerHTML =
+      '<button id="before">Before</button><label id="tap">Tap</label>';
+    const before = document.getElementById('before') as HTMLButtonElement;
+    const label = document.getElementById('tap') as HTMLLabelElement;
+    const release = attachTapHaptic(label);
+    const sw = label.querySelector<HTMLInputElement>(
+      `[${HAPTIC_SWITCH_ATTRIBUTE}]`,
+    )!;
+    before.focus();
+    // Chromium focuses a label's control on its activation.
+    sw.focus();
+    expect(document.activeElement).not.toBe(sw);
+    expect(document.activeElement).toBe(before);
+    release();
+  });
+
+  it('keeps a label\u2019s own control: the tap plays and the control still toggles', () => {
+    document.body.innerHTML =
+      '<label id="tap"><input id="own" type="checkbox"> Remember me</label>';
+    const label = document.getElementById('tap') as HTMLLabelElement;
+    const own = document.getElementById('own') as HTMLInputElement;
+    const onOwnClick = vi.fn();
+    own.addEventListener('click', onOwnClick);
+    const release = attachTapHaptic(label);
+    const sw = label.querySelector<HTMLInputElement>(
+      `[${HAPTIC_SWITCH_ATTRIBUTE}]`,
+    )!;
+    // The switch takes the label's activation, so a tap plays.
+    expect(label.control).toBe(sw);
+    // The checkbox keeps its name: the label's text, through aria-labelledby.
+    expect(own).toHaveAccessibleName('Remember me');
+    sw.click();
+    expect(sw.checked).toBe(true);
+    expect(own.checked).toBe(true);
+    expect(onOwnClick).toHaveBeenCalledTimes(1);
+    release();
+    expect(label.control).toBe(own);
+    expect(own).not.toHaveAttribute('aria-labelledby');
+  });
+
+  it('gives a disabled control no feedback and leaves no focus on the switch (FR23)', () => {
+    document.body.innerHTML =
+      '<button id="before">Before</button>' +
+      '<label id="tap"><input id="own" type="checkbox" disabled> Remember me</label>';
+    const before = document.getElementById('before') as HTMLButtonElement;
+    const label = document.getElementById('tap') as HTMLLabelElement;
+    const own = document.getElementById('own') as HTMLInputElement;
+    const release = attachTapHaptic(label);
+    const sw = label.querySelector<HTMLInputElement>(
+      `[${HAPTIC_SWITCH_ATTRIBUTE}]`,
+    )!;
+    before.focus();
+    sw.focus();
+    sw.click();
+    // The switch did not toggle (nothing plays), the control did not change,
+    // and focus is not stranded on the hidden switch.
+    expect(sw.checked).toBe(false);
+    expect(own.checked).toBe(false);
+    expect(document.activeElement).toBe(before);
+    release();
+  });
+
+  it('leaves a label whose control is already a switch, or tied by for, as it is', () => {
+    document.body.innerHTML =
+      '<label id="a"><input type="checkbox" switch> Wi-Fi</label>' +
+      '<label id="b" for="c">Bluetooth</label><input id="c" type="checkbox">';
+    for (const id of ['a', 'b']) {
+      const label = document.getElementById(id) as HTMLLabelElement;
+      const release = attachTapHaptic(label);
+      expect(label.querySelector(`[${HAPTIC_SWITCH_ATTRIBUTE}]`)).toBeNull();
+      release();
+    }
+  });
+
+  it('reports whether the browser knows the switch control', () => {
+    // jsdom has no `switch` property on checkbox inputs, like browsers
+    // before Safari 17.4.
+    expect(supportsSwitchControl(document)).toBe(false);
+  });
+});

package/src/gestures/__tests__/harness.ts

@@ -40,7 +40,13 @@ export interface Harness {
   claims: number[];
   /** Deferred clicks as they resolved. */
   deferredClicks: {id: number; allowed: boolean; time: number}[];
-  environment: {width: number; height: number; rtl: boolean};
+  environment: {
+    width: number;
+    height: number;
+    rtl: boolean;
+    /** The box every recognizer's view measures, when a test sets one. */
+    view?: {left?: number; top?: number; width: number; height: number};
+  };
   finger(id: number): Finger;
   /** Advance the clock and run every timer due by `time`. */
   advance(time: number): void;
@@ -51,7 +57,11 @@ export function createHarness(): Harness {
   const log: string[] = [];
   const claims: number[] = [];
   const deferredClicks: Harness['deferredClicks'] = [];
-  const environment = {width: 390, height: 844, rtl: false};
+  const environment: Harness['environment'] = {
+    width: 390,
+    height: 844,
+    rtl: false,
+  };
   const fingers = new Map<number, Finger>();
   const env: GestureEnvironment = {
     viewportSize: () => ({
@@ -59,6 +69,15 @@ export function createHarness(): Harness {
       height: environment.height,
     }),
     isRtl: () => environment.rtl,
+    viewRect: () =>
+      environment.view == null
+        ? null
+        : {
+            left: environment.view.left ?? 0,
+            top: environment.view.top ?? 0,
+            width: environment.view.width,
+            height: environment.view.height,
+          },
   };
   const arena: GestureArena = new GestureArena({
     clock,

package/src/gestures/__tests__/recognizerKind.test.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file recognizerKind.test.ts
+ * @input Each recognizer of the family, and the sources of Core and Lab
+ * @output A recognizer is told apart by its `kind`, never by `instanceof`
+ *   (architecture:react-component-runtime INV13): each one reports its kind,
+ *   a screen-edge pan its own; and no source checks a recognizer's class
+ * @position Unit and source boundary test of packages/core/src/gestures
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {describe, expect, it} from 'vitest';
+import {LongPressGestureRecognizer} from '../LongPressGestureRecognizer';
+import {PanGestureRecognizer} from '../PanGestureRecognizer';
+import {PinchGestureRecognizer} from '../PinchGestureRecognizer';
+import {ScreenEdgePanGestureRecognizer} from '../ScreenEdgePanGestureRecognizer';
+import {SwipeGestureRecognizer} from '../SwipeGestureRecognizer';
+import {TapGestureRecognizer} from '../TapGestureRecognizer';
+
+const ROOT = path.resolve(__dirname, '../../../../..');
+
+function sourcesUnder(directory: string): string[] {
+  const files: string[] = [];
+  const visit = (current: string) => {
+    for (const entry of fs.readdirSync(current, {withFileTypes: true})) {
+      if (entry.name === 'node_modules' || entry.name.startsWith('.')) {
+        continue;
+      }
+      const full = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        visit(full);
+      } else if (/\.(m?[jt]sx?)$/.test(entry.name)) {
+        files.push(full);
+      }
+    }
+  };
+  if (fs.existsSync(directory)) {
+    visit(directory);
+  }
+  return files;
+}
+
+describe('recognizer kinds', () => {
+  it('each recognizer reports its kind, a screen-edge pan its own (architecture:react-component-runtime INV13)', () => {
+    const kinds = [
+      new TapGestureRecognizer(),
+      new LongPressGestureRecognizer(),
+      new PanGestureRecognizer(),
+      new ScreenEdgePanGestureRecognizer({edges: ['leading']}),
+      new SwipeGestureRecognizer(),
+      new PinchGestureRecognizer(),
+    ].map(recognizer => (recognizer as {kind?: string}).kind);
+    expect(kinds).toEqual([
+      'tap',
+      'longPress',
+      'pan',
+      'screenEdgePan',
+      'swipe',
+      'pinch',
+    ]);
+  });
+
+  it('is never told apart by instanceof in Core or Lab (architecture:react-component-runtime INV13)', () => {
+    // Built from parts, so this file does not match itself.
+    const check = new RegExp(
+      ['\\binstanceof\\s+', '[A-Za-z]*', 'GestureRecognizer\\b'].join(''),
+    );
+    const offenders = [
+      ...sourcesUnder(path.join(ROOT, 'packages/core/src')),
+      ...sourcesUnder(path.join(ROOT, 'packages/lab/src')),
+    ]
+      .filter(file => check.test(fs.readFileSync(file, 'utf8')))
+      .map(file => path.relative(ROOT, file));
+    expect(offenders).toEqual([]);
+  });
+});

package/src/gestures/__tests__/touchActionRule.test.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchActionRule.test.ts
+ * @input markTouchAction and unmarkTouchAction on a document
+ * @output Where the rule lives: an adopted constructable sheet where the
+ *   engine has one, a style element where it has none, and an error from a
+ *   constructable sheet that exists is not taken for a missing one
+ * @position Unit test of packages/core/src/gestures/touchActionRule.ts
+ */
+
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {markTouchAction, unmarkTouchAction} from '../touchActionRule';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = '';
+  document.head.innerHTML = '';
+});
+
+describe('touchActionRule', () => {
+  it('writes the rule into a style element where the engine has no constructable sheets', () => {
+    expect('adoptedStyleSheets' in document).toBe(false);
+    const element = document.createElement('div');
+    document.body.append(element);
+    expect(markTouchAction(element, 'pan-y')).toBe(true);
+    expect(document.head.querySelector('style')?.textContent).toContain(
+      'pan-y',
+    );
+    unmarkTouchAction(element);
+  });
+
+  it('lets an error from a constructable sheet that exists through, instead of taking it for a missing one', () => {
+    class BrokenSheet {
+      constructor() {
+        throw new Error('broken sheet');
+      }
+      replaceSync(): void {}
+    }
+    vi.stubGlobal('CSSStyleSheet', BrokenSheet);
+    Object.defineProperty(document, 'adoptedStyleSheets', {
+      configurable: true,
+      writable: true,
+      value: [],
+    });
+    try {
+      const element = document.createElement('div');
+      document.body.append(element);
+      expect(() => markTouchAction(element, 'pan-x')).toThrow('broken sheet');
+    } finally {
+      delete (document as {adoptedStyleSheets?: unknown}).adoptedStyleSheets;
+    }
+  });
+});