@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

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

@@ -1,293 +0,0 @@
-// 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__/fixtures/pointer-streams/README.md

@@ -1,82 +0,0 @@
-# Pointer streams
-
-What real browsers delivered for one moving contact, as the page saw it.
-`VelocityTracker.streams.test.ts` replays them (spec:AST-100 FR4).
-
-| Files                                  | Browser                                              | Pointer           | Input                                                         |
-| -------------------------------------- | ---------------------------------------------------- | ----------------- | ------------------------------------------------------------- |
-| `android-chromium-*`                   | Chromium 158 on an Android 15 emulator               | touch             | 120 Hz through a uinput touchscreen                           |
-| `android-firefox-*`                    | Firefox 158 on the same emulator                     | touch             | the same                                                      |
-| `ios-safari-*`                         | Safari 26.2 on an iOS 26.2 simulator (iPhone 17 Pro) | touch             | HID through idb, about one move every 30 ms                   |
-| `desktop-chromium-{mouse,pen,touch}-*` | headless Chromium 149                                | mouse, pen, touch | CDP input at 120 Hz, each event stamped at its scheduled time |
-
-Each source has three gestures:
-
-- `slow`: 200 px down at 200 px/s, lifted while moving;
-- `fling`: 300 px down at 2,000 px/s, lifted while moving;
-- `stop-release`: 200 px in 400 ms, then still for 300 ms (longer than the
-  40 ms stillness interval), then lifted.
-
-On iOS the simulator paces the moves itself, so its recordings differ: Safari
-delivered 194 px at 183.5 px/s for the slow drag, 240 px at 2,400 px/s for the
-fling, and the stop-then-release's moves over about 2.2 s before its still
-300 ms. Each fixture's `injected.speed` is what Safari delivered.
-
-## Format (schema 1)
-
-- `events`: `[type, t, x, y]` for each pointer and touch event, with `t` in ms
-  after the pointerdown's `timeStamp` and `x`, `y` in CSS px from where the
-  contact went down. A `pointermove` adds its `getCoalescedEvents()` samples
-  (`[t, x, y]` each) and its `getPredictedEvents()` count.
-- `injected`: the ground truth. `speed` is px/s along y while the contact
-  moved; a source injected at a set rate also has its `hz` and `points`.
-- `release`: where the replay releases (`pointerup`, or `lastMove` with a
-  `note` saying why) and, for a stream whose release misses the injected
-  speed by more than 10%, `check: "shape"`: it is not velocity evidence, and
-  only its direction and axis are checked.
-- `caveat`: what the input is not (below).
-
-## Caveat
-
-Rig input is synthetic, not a finger: Android injects at 120 Hz through a
-uinput touchscreen and desktop through CDP, each through the browser's real
-input pipeline; iOS input is HID through idb on a leased simulator, which
-delivers a move every ~30 ms (not 120 Hz), so iOS speeds are the distance
-Safari delivered between the first and last moving pointermove, over that time.
-A physical finger's 120–240 Hz jittered sampling is not reproduced.
-
-## What the replay feeds
-
-Each `pointermove` event's own position and time, one sample per event, as
-`PanGestureRecognizer` reads them (it does not read `getCoalescedEvents()`).
-The coalesced samples are the input the browser received: the replay also
-models a busy main thread from them, one event per four input samples at the
-latest of them, as a browser coalesces input while its handlers run late.
-
-## What the streams show
-
-- Chromium on Android coalesces one to three samples into each `pointermove`
-  at 120 Hz input; Firefox dispatches about 60 a second, each with a one-entry
-  coalesced list.
-- For CDP-dispatched input, desktop Chromium returns an empty
-  `getCoalescedEvents()` list, so the busy-thread replay uses the events
-  themselves.
-- Safari on the simulator merged two moves that arrived in one frame into a
-  single `pointermove` whose coalesced list had one entry (one 120 px step).
-- idb lifts 58–85 ms after the last move, longer than the stillness interval,
-  so the iOS slow drag and fling release at their last move. The simulator
-  delivers their steps 29–44 ms apart, and against the speed Safari delivered
-  each misses 10% on one of its two releases: the slow
-  drag's pan reads 22.9% under (its scroll 2.3% over), the fling's scroll
-  12.2% under (its pan 7.2% under, from six samples). Neither is velocity
-  evidence; both are checked for direction and axis only.
-- iOS input at 120 Hz would need XCTest's own event synthesis
-  (`press(forDuration:thenDragTo:withVelocity:thenHoldForDuration:)`), which
-  these streams do not use.
-
-## Capturing a stream
-
-`capture.html` records one contact: open it in the browser, drive one gesture
-over it, and read the record from `window.__streams` (or have the page post
-it with `?post=probe` or `?post=beacon`). A fixture is that record plus the
-injected ground truth and the fields above.

package/src/gestures/__tests__/fixtures/pointer-streams/android-chromium-fling.json

@@ -1,130 +0,0 @@
-{
-  "schema": 1,
-  "platform": "Android 15 emulator",
-  "browser": "Chromium 158.0.8123.0",
-  "ua": "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/158.0.0.0 Mobile Safari/537.36",
-  "dpr": 1.75,
-  "pointerType": "touch",
-  "coarse": true,
-  "gesture": "fling",
-  "caveat": "Rig input is synthetic, not a finger: Android injects at 120 Hz through a uinput touchscreen and desktop through CDP, each through the browser's real input pipeline; iOS input is HID through idb on a leased simulator, which delivers a move every ~30 ms (not 120 Hz), so iOS speeds are the distance Safari delivered between the first and last moving pointermove, over that time. A physical finger's 120–240 Hz jittered sampling is not reproduced.",
-  "injected": {
-    "source": "one continuous touch through a uinput touchscreen (no stylus) at 120 Hz, Android 15 emulator, panel 720×1600",
-    "hz": 120,
-    "speed": 2000,
-    "restMs": 0,
-    "points": [
-      [0, 0, 0],
-      [8.333, 0, 16.677],
-      [16.667, 0, 33.354],
-      [25, 0, 50.032],
-      [33.333, 0, 66.709],
-      [41.667, 0, 83.386],
-      [50, 0, 100.063],
-      [58.333, 0, 116.741],
-      [66.667, 0, 133.418],
-      [75, 0, 150.095],
-      [83.333, 0, 166.772],
-      [91.667, 0, 183.45],
-      [100, 0, 200.127],
-      [108.333, 0, 216.804],
-      [116.667, 0, 233.481],
-      [125, 0, 250.159],
-      [133.333, 0, 266.836],
-      [141.667, 0, 283.513],
-      [150, 0, 300.19]
-    ]
-  },
-  "release": {
-    "at": "pointerup"
-  },
-  "liftAfterLastMoveMs": 0,
-  "events": [
-    ["pointerdown", 0, 0, 0],
-    ["touchstart", 0, 0, 0],
-    ["pointermove", 0, 0, 16.685, [[0, 0, 16.685]], 0],
-    ["touchmove", 0, 0, 16.685],
-    ["pointermove", 4.5, 0, 33.343, [[4.5, 0, 33.343]], 0],
-    ["touchmove", 4.5, 0, 33.343],
-    [
-      "pointermove",
-      21.3,
-      0,
-      66.713,
-      [
-        [13.1, 0, 50.028],
-        [21.3, 0, 66.713]
-      ],
-      3
-    ],
-    ["touchmove", 21.3, 0, 66.713],
-    [
-      "pointermove",
-      38,
-      0,
-      100.056,
-      [
-        [29.9, 0, 83.398],
-        [38, 0, 100.056]
-      ],
-      3
-    ],
-    ["touchmove", 38, 0, 100.056],
-    ["pointermove", 46.5, 0, 116.741, [[46.5, 0, 116.741]], 3],
-    ["touchmove", 46.5, 0, 116.741],
-    [
-      "pointermove",
-      71.6,
-      0,
-      166.769,
-      [
-        [55, 0, 133.426],
-        [63.5, 0, 150.112],
-        [71.6, 0, 166.769]
-      ],
-      3
-    ],
-    ["touchmove", 71.6, 0, 166.769],
-    [
-      "pointermove",
-      88.4,
-      0,
-      200.139,
-      [
-        [80.1, 0, 183.454],
-        [88.4, 0, 200.139]
-      ],
-      3
-    ],
-    ["touchmove", 88.4, 0, 200.139],
-    [
-      "pointermove",
-      104.9,
-      0,
-      233.482,
-      [
-        [96.6, 0, 216.797],
-        [104.9, 0, 233.482]
-      ],
-      3
-    ],
-    ["touchmove", 104.9, 0, 233.482],
-    ["pointermove", 113.2, 0, 250.167, [[113.2, 0, 250.167]], 3],
-    ["touchmove", 113.2, 0, 250.167],
-    [
-      "pointermove",
-      138.4,
-      0,
-      300.195,
-      [
-        [121.8, 0, 266.853],
-        [130, 0, 283.51],
-        [138.4, 0, 300.195]
-      ],
-      3
-    ],
-    ["touchmove", 138.4, 0, 300.195],
-    ["pointerup", 138.4, 0, 300.195],
-    ["touchend", 138.4, 0, 300.195]
-  ]
-}