@astryxdesign/core 0.7.5 → 0.7.6-canary.0135af4

package/src/motion/animator.test.ts

@@ -1,2653 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file animator.test.ts
- * @input vitest (jsdom), the animator, a recording stand-in for
- *   Element.animate (jsdom runs no animations)
- * @output Checks what the animator hands the browser: keyframes that follow
- *   the analytic curves, the clock, the inline end state; and what it reads
- *   back: presentation values and velocities, retarget continuity, stop,
- *   completion, Reduced Motion substitutions, momentum curves (a coast with
- *   edges), late attach
- * @position Testing; what the compositor plays (frames advancing through a
- *   blocked main thread) needs a real browser, which these tests do not
- *   cover
- */
-
-import {execFileSync} from 'node:child_process';
-import fs from 'node:fs';
-import path from 'node:path';
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {
-  animatorFor,
-  createAnimator,
-  END_HOLD_MS,
-  PROMOTION_LINGER_MS,
-  type AnimatorOptions,
-} from './animator';
-import {cubicBezier} from './bezier';
-import {coast} from './coast';
-import {solveDecay} from './decay';
-import {solveSpring, solveSpringTowardRamp, toSpring} from './spring';
-import {scroll} from './uikit/scroll';
-import {springs} from './uikit/springs';
-import {timing} from './uikit/timing';
-
-interface Recorded {
-  element: Element;
-  keyframes: Keyframe[];
-  options: KeyframeAnimationOptions;
-  startTime: number | null;
-  /** The fake clock when it was created (a pending start reads from it). */
-  createdAt: number;
-  cancelled: boolean;
-  /** A sampler holding it (the interaction harness pauses to seek). */
-  paused: boolean;
-  /** Frames a resumed (play()) animation still waits for its start. */
-  startDelayFrames: number;
-  /** Finished from outside (a sampler's `finish()`), keeping its start. */
-  finished: boolean;
-  readonly playState: 'idle' | 'paused' | 'running' | 'finished';
-  ready: Promise<Recorded>;
-  commit(at: number): void;
-  finish(): void;
-  cancel(): void;
-}
-
-let clock = 1000;
-let recorded: Recorded[] = [];
-/** Callbacks waiting for the next animation frame (`requestFrame`). */
-let frameQueue: (() => void)[] = [];
-const requestFrame = (callback: () => void) => {
-  frameQueue.push(callback);
-};
-/**
- * What the page's stylesheet sets, by property. Computed style reads it
- * under the inline value (jsdom keeps stale computed values for these
- * properties, so the page is modeled here).
- */
-let stylesheet: Record<string, string> = {};
-
-beforeEach(() => {
-  clock = 1000;
-  recorded = [];
-  frameQueue = [];
-  stylesheet = {};
-  vi.spyOn(window, 'getComputedStyle').mockImplementation(
-    element =>
-      ({
-        getPropertyValue: (property: string) =>
-          (element as HTMLElement).style.getPropertyValue(property) ||
-          (stylesheet[property] ?? ''),
-      }) as unknown as CSSStyleDeclaration,
-  );
-  vi.useFakeTimers();
-  HTMLElement.prototype.animate = function (keyframes, options) {
-    let resolveReady: (a: Recorded) => void = () => {};
-    let rejectReady: (e: Error) => void = () => {};
-    const ready = new Promise<Recorded>((resolve, reject) => {
-      resolveReady = resolve;
-      rejectReady = reject;
-    });
-    // Like a browser: a pending animation (no start time) starts at the next
-    // committed frame; setting a start time, or a cancel, settles `ready`.
-    let start: number | null = null;
-    const animation: Recorded = {
-      element: this,
-      keyframes: keyframes as Keyframe[],
-      options: options as KeyframeAnimationOptions,
-      get startTime() {
-        return start;
-      },
-      set startTime(value) {
-        start = value;
-        resolveReady(animation);
-      },
-      createdAt: clock,
-      cancelled: false,
-      paused: false,
-      finished: false,
-      get playState() {
-        return this.cancelled
-          ? 'idle'
-          : this.finished
-            ? 'finished'
-            : this.paused
-              ? 'paused'
-              : 'running';
-      },
-      ready,
-      commit(at) {
-        // A paused animation's pending pause completes without a start; one
-        // resumed with play() gets its start a frame later.
-        if (this.startDelayFrames > 0) {
-          this.startDelayFrames -= 1;
-        } else if (!this.cancelled && start == null && !this.paused) {
-          start = at;
-        }
-        resolveReady(this);
-      },
-      startDelayFrames: 0,
-      finish() {
-        this.finished = true;
-      },
-      cancel() {
-        this.cancelled = true;
-        rejectReady(new Error('AbortError'));
-      },
-    };
-    recorded.push(animation);
-    return animation as unknown as Animation;
-  };
-});
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-  Reflect.deleteProperty(HTMLElement.prototype, 'animate');
-  vi.useRealTimers();
-  vi.restoreAllMocks();
-});
-
-/**
- * The person's settings, through `matchMedia` as the animator reads them: no
- * option overrides them.
- */
-function stubMedia(reduced: boolean, coarse: boolean) {
-  vi.stubGlobal('matchMedia', (query: string) => ({
-    matches: query.includes('prefers-reduced-motion')
-      ? reduced
-      : query.includes('pointer: coarse')
-        ? coarse
-        : false,
-    media: query,
-    onchange: null,
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    addListener: () => {},
-    removeListener: () => {},
-    dispatchEvent: () => false,
-  }));
-}
-
-function setup({
-  reduced = false,
-  coarse = false,
-  ...options
-}: AnimatorOptions & {reduced?: boolean; coarse?: boolean} = {}) {
-  stubMedia(reduced, coarse);
-  const element = document.createElement('div');
-  const animator = createAnimator(element, {
-    now: () => clock,
-    requestFrame,
-    ...options,
-  });
-  return {element, animator};
-}
-
-/** The browser commits a frame at `at`: pending animations start there. */
-async function commitFrame(at: number) {
-  for (const animation of recorded) {
-    if (animation.startTime == null && !animation.cancelled) {
-      animation.commit(at);
-    }
-  }
-  const frames = frameQueue;
-  frameQueue = [];
-  for (const callback of frames) {
-    callback();
-  }
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-/**
- * Advances the injected clock and the timers together. The browser commits
- * pending animations at the next frame, here at once.
- */
-async function advance(ms: number) {
-  await commitFrame(clock);
-  clock += ms;
-  await vi.advanceTimersByTimeAsync(ms);
-}
-
-function live(channel: string): Recorded[] {
-  return recorded.filter(
-    a => !a.cancelled && channel in (a.keyframes[0] ?? {}),
-  );
-}
-
-function parse(value: string | number | null | undefined): number[] {
-  return String(value)
-    .split(/\s+/)
-    .map(part => Number.parseFloat(part));
-}
-
-/** What the browser would show: the keyframes interpolated linearly at `time`. */
-function sampleAt(
-  animation: Recorded,
-  channel: string,
-  time: number,
-): number[] {
-  const duration = Number(animation.options.duration);
-  const offset = Math.min(
-    1,
-    Math.max(
-      0,
-      (time - (animation.startTime ?? animation.createdAt)) / duration,
-    ),
-  );
-  const frames = animation.keyframes;
-  for (let i = 0; i + 1 < frames.length; i++) {
-    const a = frames[i];
-    const b = frames[i + 1];
-    const oa = Number(a.offset);
-    const ob = Number(b.offset);
-    if (
-      offset >= oa &&
-      offset <= ob &&
-      !(
-        offset === ob &&
-        i + 2 < frames.length &&
-        Number(frames[i + 2].offset) === ob
-      )
-    ) {
-      const va = parse(a[channel]);
-      const vb = parse(b[channel]);
-      const f = ob === oa ? 1 : (offset - oa) / (ob - oa);
-      return va.map((v, k) => v + (vb[k] - v) * f);
-    }
-  }
-  return parse(frames[frames.length - 1][channel]);
-}
-
-describe('animate: keyframes on the compositor', () => {
-  it('bakes the spring into keyframes within a twentieth of a pixel of the curve', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    const [animation] = live('translate');
-    expect(animation).toBeDefined();
-    expect(animation.options).toMatchObject({
-      fill: 'both',
-      easing: 'linear',
-    });
-    // From rest, the browser sets the start when it commits the first frame.
-    expect(animation.startTime).toBeNull();
-    await commitFrame(1000);
-    expect(animation.startTime).toBe(1000);
-    const curve = solveSpring(toSpring(springs.settle), {from: 0, to: 300});
-    // The curve, then the end state held (END_HOLD_MS).
-    const duration = Number(animation.options.duration) - END_HOLD_MS;
-    expect(duration).toBeCloseTo(curve.settleTime(0.05) * 1000, 6);
-    for (let t = 0; t <= duration; t += 0.5) {
-      const [x, y] = sampleAt(animation, 'translate', 1000 + t);
-      expect(Math.abs(x - curve.value(t / 1000))).toBeLessThan(0.06);
-      expect(y).toBe(0);
-      expect(animator.get('x', 1000 + t)).toBeCloseTo(curve.value(t / 1000), 9);
-    }
-    // Then the end state, held through a main-thread block.
-    expect(
-      sampleAt(animation, 'translate', 1000 + duration + END_HOLD_MS / 2),
-    ).toEqual([300, 0]);
-  });
-
-  it('keeps the keyframe count modest (adaptive sampling)', () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    expect(live('translate')[0].keyframes.length).toBeLessThan(200);
-  });
-
-  it('clears an identity transform at rest, so a fixed child stays fixed', async () => {
-    const {animator, element} = setup();
-    animator.animate(
-      {x: 100, scale: 0.9, rotate: 10},
-      {spring: springs.quickChange},
-    );
-    expect(element.style.translate).toBe('100px 0px');
-    await advance(100);
-    animator.animate(
-      {x: 0, scale: 1, rotate: 0},
-      {spring: springs.quickChange},
-    );
-    // While the motion back runs, the end is never written 0px 0px: none, or
-    // nothing where the stylesheet agrees.
-    expect(live('translate')).toHaveLength(1);
-    for (const channel of ['translate', 'scale', 'rotate'] as const) {
-      expect(['', 'none']).toContain(element.style[channel]);
-    }
-    await advance(5000);
-    // At rest the identity leaves the element: translate 0px 0px would make
-    // the element a fixed child's containing block, and scale 1 stops a
-    // finger scrolling inside it on Mobile Safari.
-    expect(element.style.translate).toBe('');
-    expect(element.style.scale).toBe('');
-    expect(element.style.rotate).toBe('');
-    // The keyframes stay numeric, so the curve still interpolates.
-    animator.animate({x: 50}, {spring: springs.quickChange});
-    expect(live('translate')[0].keyframes[0].translate).toBe('0px 0px');
-  });
-
-  it('clears opacity back at 1, and an identity set at rest, and keeps any other value', async () => {
-    const {animator, element} = setup();
-    animator.set({opacity: 0});
-    animator.animate({opacity: 1}, {spring: springs.quickChange});
-    await advance(5000);
-    expect(element.style.opacity).toBe('');
-    animator.set({x: 12});
-    animator.set({x: 0});
-    expect(element.style.translate).toBe('');
-    animator.animate({opacity: 0.5, x: 20}, {spring: springs.quickChange});
-    await advance(5000);
-    expect(element.style.opacity).toBe('0.5');
-    expect(element.style.translate).toBe('20px 0px');
-  });
-
-  it('keeps an identity inline where the stylesheet would move the element', async () => {
-    const {animator, element} = setup();
-    stylesheet.scale = '0.5';
-    animator.animate({scale: 0.9}, {spring: springs.quickChange});
-    animator.animate({scale: 1}, {spring: springs.quickChange});
-    await advance(5000);
-    expect(element.style.scale).toBe('none');
-  });
-
-  it('writes the end values inline up front, so the last frame needs no main thread', () => {
-    const {animator, element} = setup();
-    animator.animate(
-      {x: 120, y: -40, scale: 1.1, rotate: 12, opacity: 0.25},
-      {spring: springs.quickChange},
-    );
-    expect(element.style.translate).toBe('120px -40px');
-    expect(element.style.scale).toBe('1.1 1.1');
-    expect(element.style.rotate).toBe('12deg');
-    expect(element.style.opacity).toBe('0.25');
-    for (const channel of ['translate', 'scale', 'rotate', 'opacity']) {
-      const [animation] = live(channel);
-      expect(animation.keyframes[animation.keyframes.length - 1][channel]).toBe(
-        (element.style as unknown as Record<string, string>)[channel],
-      );
-    }
-  });
-
-  it('keeps the end state in effect until the main thread drops the finished animation', async () => {
-    const {animator, element} = setup();
-    animator.animate({x: 120}, {spring: springs.quickChange});
-    const [animation] = live('translate');
-    expect(animation.options.fill).toBe('both');
-    // The animation outlasts its curve by END_HOLD_MS; the main thread drops
-    // it as soon as it runs after the curve's end.
-    const duration = Number(animation.options.duration) - END_HOLD_MS;
-    await advance(duration - 1);
-    expect(animation.cancelled).toBe(false);
-    await advance(2);
-    expect(animation.cancelled).toBe(true);
-    expect(element.style.translate).toBe(
-      animation.keyframes[animation.keyframes.length - 1].translate,
-    );
-  });
-
-  it('never retires an animation a sampler has paused', async () => {
-    const {animator} = setup();
-    animator.animate({x: 120}, {spring: springs.quickChange});
-    const [animation] = live('translate');
-    await commitFrame(1000);
-    const duration = Number(animation.options.duration) - END_HOLD_MS;
-    animation.paused = true;
-    await advance(duration + 500);
-    expect(animation.cancelled).toBe(false);
-    // Resumed: it leaves once the main thread looks again.
-    animation.paused = false;
-    await advance(150);
-    expect(animation.cancelled).toBe(true);
-  });
-
-  it('puts everything one call starts on one clock', async () => {
-    const {animator} = setup();
-    animator.animate({x: 100, opacity: 0.5}, {spring: springs.settle});
-    await commitFrame(1000);
-    const starts = recorded.map(a => a.startTime);
-    expect(starts).toEqual([1000, 1000]);
-    animator.animate({rotate: 90}, {spring: springs.settle}, {at: 1234.5});
-    expect(live('rotate')[0].startTime).toBe(1234.5);
-  });
-
-  it('expands scale onto both axes and reads it back', async () => {
-    const {animator} = setup();
-    animator.animate({scale: 0.5}, {spring: springs.settle});
-    await commitFrame(clock); // the browser starts it
-    clock += 5000;
-    expect(animator.get('scale')).toBe(0.5);
-    expect(animator.get('scaleY')).toBe(0.5);
-  });
-
-  it('does nothing for a value already at its target and at rest', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 0}, {spring: springs.settle});
-    expect(live('translate')).toHaveLength(0);
-    await expect(handle.finished).resolves.toBe(true);
-  });
-});
-
-describe('a call from rest starts at the commit, as Core Animation does', () => {
-  const curve = solveSpring(toSpring(springs.settle), {from: 0, to: 300});
-
-  it('a block before the first frame delays the motion instead of skipping into it', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 300}, {spring: springs.settle});
-    const [animation] = live('translate');
-    expect(animation.startTime).toBeNull();
-    // Until the commit the curve reads from the call time.
-    expect(animator.get('x', 1000)).toBe(0);
-    // The main thread was blocked for 300 ms: the first frame commits at 1300.
-    clock = 1300;
-    await commitFrame(1300);
-    await expect(handle.started).resolves.toBe(1300);
-    expect(animator.get('x', 1300)).toBeCloseTo(0, 9);
-    expect(animator.get('x', 1400)).toBeCloseTo(curve.value(0.1), 9);
-    expect(handle.value('x', 1400)).toBeCloseTo(curve.value(0.1), 9);
-    expect(sampleAt(animation, 'translate', 1400)[0]).toBeCloseTo(
-      curve.value(0.1),
-      1,
-    );
-  });
-
-  it('holds its start until the browser starts it', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    // Nothing has moved on screen yet, whatever the clock says; a time ahead
-    // reads the curve from the call's time, and the model is moving: a
-    // retarget carries this velocity.
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('x', 1100)).toBeCloseTo(curve.value(0.1), 9);
-    clock = 1100;
-    expect(animator.get('x')).toBe(0);
-    expect(animator.getVelocity('x', 1100)).toBeCloseTo(curve.velocity(0.1), 9);
-    clock = 1250;
-    await commitFrame(1250);
-    expect(animator.get('x', 1350)).toBeCloseTo(curve.value(0.1), 9);
-    expect(live('translate')[0].startTime).toBe(1250);
-  });
-
-  it('a companion sampling a waiting curve ahead follows its shape', async () => {
-    // A tab bar's counter-moving copy, sampled from the body's curve.
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    const at = clock;
-    const samples = [0, 50, 100, 200].map(t => animator.get('x', at + t));
-    expect(samples[0]).toBe(0);
-    expect(samples.slice(1).map((v, i) => v > samples[i])).toEqual([
-      true,
-      true,
-      true,
-    ]);
-    expect(samples[2]).toBeCloseTo(curve.value(0.1), 9);
-  });
-
-  it('finishes and drops the animation on the committed clock', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 300}, {spring: springs.settle});
-    const [animation] = live('translate');
-    const duration = Number(animation.options.duration) - END_HOLD_MS;
-    clock = 1300;
-    await commitFrame(1300);
-    let done = false;
-    void handle.finished.then(() => {
-      done = true;
-    });
-    await advance(duration - 1);
-    expect(done).toBe(false);
-    expect(animation.cancelled).toBe(false);
-    await advance(2);
-    expect(done).toBe(true);
-    expect(animation.cancelled).toBe(true);
-  });
-
-  it('a retarget mid-flight keeps an explicit start', async () => {
-    const {animator} = setup();
-    const first = animator.animate({x: 300}, {spring: springs.settle});
-    await advance(100);
-    await expect(first.started).resolves.toBe(1000);
-    const second = animator.animate({x: 0}, {spring: springs.settle});
-    expect(live('translate')[0].startTime).toBe(1100);
-    await expect(second.started).resolves.toBe(1100);
-  });
-
-  it('a call stopped before its first frame resolves at its own time', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 300}, {spring: springs.settle});
-    animator.stop();
-    clock = 1300;
-    await commitFrame(1300);
-    await expect(handle.started).resolves.toBe(1000);
-    await expect(handle.finished).resolves.toBe(false);
-  });
-
-  it('a second call before the first frame starts with the same commit', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    animator.animate({y: 300}, {spring: springs.settle});
-    const [animation] = live('translate');
-    expect(animation.startTime).toBeNull();
-    clock = 1300;
-    await commitFrame(1300);
-    expect(animator.get('x', 1400)).toBeCloseTo(curve.value(0.1), 9);
-    expect(animator.get('y', 1400)).toBeCloseTo(curve.value(0.1), 9);
-  });
-  it('an explicit clock after a waiting call was finished from outside keeps that clock, with no lead-in', async () => {
-    // A sampler holds a call from rest before the browser starts it, then
-    // finishes it (the interaction harness's release with finish): the call
-    // never gets a start time. A call on an explicit clock that follows plays
-    // from that clock instead of waiting on the finished call's start.
-    const {animator} = setup();
-    animator.animate({opacity: 0}, {spring: springs.settle});
-    const [held] = live('opacity');
-    expect(held.startTime).toBeNull();
-    held.paused = true;
-    held.finish();
-    clock += 9;
-    const at = clock - 4;
-    animator.animate({opacity: 1}, {spring: springs.settle}, {at});
-    const fade = recorded.filter(a => !a.cancelled && a !== held).at(-1);
-    expect(fade?.startTime).toBe(at);
-    // The curve moves from its first keyframe: no hold before it.
-    expect(fade?.keyframes[1].opacity).not.toBe(fade?.keyframes[0].opacity);
-  });
-});
-
-describe('review fixes', () => {
-  it('a retarget before the first frame starts from what is on screen', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    // A 150 ms block, then a second call on the same channel, all before the
-    // browser started the first.
-    clock = 1150;
-    animator.animate({x: 100}, {spring: springs.settle});
-    expect(animator.get('x')).toBe(0);
-    await commitFrame(1150);
-    // From where it is drawn, with the velocity the first curve had reached.
-    const first = solveSpring(toSpring(springs.settle), {from: 0, to: 300});
-    const from0 = solveSpring(toSpring(springs.settle), {
-      from: 0,
-      to: 100,
-      velocity: first.velocity(0.15),
-    });
-    expect(animator.get('x', 1250)).toBeCloseTo(from0.value(0.1), 9);
-  });
-
-  it('retargets the browser has not started keep a flick\u2019s velocity', async () => {
-    const {animator} = setup();
-    const tracking = {response: 0.08, dampingRatio: 1};
-    // Ten moves at 120 Hz retarget the tracking spring, and the browser starts
-    // none of them before the finger lifts.
-    for (let i = 1; i <= 10; i++) {
-      clock = 1000 + (i * 1000) / 120;
-      animator.animate({x: -12 * i}, {spring: tracking});
-    }
-    // Nothing has moved on screen, but the model is moving with the finger.
-    expect(animator.get('x')).toBe(0);
-    const velocity = animator.getVelocity('x');
-    expect(velocity).toBeLessThan(-100);
-    // The release springs with that velocity.
-    animator.animate({x: -200}, {spring: springs.settle});
-    await commitFrame(clock);
-    const release = solveSpring(toSpring(springs.settle), {
-      from: 0,
-      to: -200,
-      velocity,
-    });
-    expect(animator.get('x', clock + 50)).toBeCloseTo(release.value(0.05), 6);
-  });
-
-  it('a pager settle after drags the browser has not started is already moving', async () => {
-    const {animator} = setup();
-    const tracking = {response: 0.08, dampingRatio: 1};
-    // A page drag toward the next page, its moves all held.
-    for (let i = 1; i <= 6; i++) {
-      clock = 1000 + (i * 1000) / 60;
-      animator.animate({x: -20 * i}, {spring: tracking});
-    }
-    const velocity = animator.getVelocity('x');
-    expect(velocity).toBeLessThan(0);
-    // The settle to the next page starts with the drag's velocity.
-    animator.animate({x: -400}, {spring: springs.settle});
-    expect(animator.getVelocity('x')).toBeCloseTo(velocity, 6);
-    await commitFrame(clock);
-    const first = animator.get('x', clock + 16);
-    const settle = solveSpring(toSpring(springs.settle), {
-      from: 0,
-      to: -400,
-      velocity,
-    });
-    expect(first).toBeCloseTo(settle.value(0.016), 6);
-    expect(first).toBeLessThan(
-      solveSpring(toSpring(springs.settle), {from: 0, to: -400}).value(0.016),
-    );
-  });
-
-  it('a call adopted by a later same-task call starts with it', async () => {
-    const {animator} = setup();
-    const a = animator.animate({x: 300}, {spring: springs.settle});
-    const b = animator.animate({y: 300}, {spring: springs.settle});
-    clock = 1300;
-    await commitFrame(1300);
-    await expect(b.started).resolves.toBe(1300);
-    await expect(a.started).resolves.toBe(1300);
-  });
-
-  it('dispose settles every atRest() wait', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    await commitFrame(1000);
-    let rested = false;
-    void animator.atRest().then(() => {
-      rested = true;
-    });
-    animator.dispose();
-    for (let i = 0; i < 5; i++) {
-      await Promise.resolve();
-    }
-    expect(rested).toBe(true);
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it('rebasing a curve that waits for its first frame keeps it in its call', async () => {
-    const {animator} = setup();
-    animator.play({
-      opacity: {duration: 0.3, at: t => 1 - t, velocity: () => -1},
-      x: {duration: 0.3, at: t => 100 * t, velocity: () => 100},
-      rotate: {duration: 0.3, at: t => 90 * t, velocity: () => 90},
-    });
-    animator.rebase({x: -20});
-    animator.animate({y: 50}, {spring: springs.settle});
-    clock = 1300;
-    await commitFrame(1300);
-    // Every curve starts with the browser's start.
-    // 100 ms in: 9° (not the 27° of a curve dated at the call), x 10 − 20.
-    expect(animator.get('rotate', 1400)).toBeCloseTo(9, 6);
-    expect(animator.get('x', 1400)).toBeCloseTo(-10, 6);
-  });
-
-  it('a rebase and a retarget in the task of a drop from rest start on the browser\u2019s clock', async () => {
-    // A list row's drop: it springs home from where the finger left it.
-    const {animator} = setup();
-    animator.set({y: 30});
-    animator.animate({y: 0}, {spring: springs.settle, velocity: {y: 0}});
-    // The reorder commits in the same task, on the call's clock: the layout
-    // moved the row by 56 px, and the row springs home from there.
-    animator.rebase({y: 56}, {at: 1000});
-    const home = animator.animate({y: 0}, {spring: springs.settle}, {at: 1000});
-    clock = 1004;
-    await commitFrame(1004);
-    await expect(home.started).resolves.toBe(1004);
-    const curve = solveSpring(toSpring(springs.settle), {from: 86, to: 0});
-    for (const t of [0, 16, 50, 100, 200]) {
-      expect(animator.get('y', 1004 + t)).toBeCloseTo(curve.value(t / 1000), 6);
-    }
-  });
-
-  it('writing another axis before the first frame keeps the channel on the call\u2019s start', async () => {
-    const {animator} = setup();
-    animator.animate({opacity: 0.5, x: 100}, {spring: springs.settle});
-    animator.set({y: 10});
-    const [translate] = live('translate');
-    expect(translate.startTime).toBeNull();
-    clock = 1300;
-    await commitFrame(1300);
-    const x = solveSpring(toSpring(springs.settle), {from: 0, to: 100});
-    expect(animator.get('x', 1400)).toBeCloseTo(x.value(0.1), 6);
-    expect(sampleAt(live('translate')[0], 'translate', 1400)[0]).toBeCloseTo(
-      x.value(0.1),
-      1,
-    );
-  });
-
-  it('a same-task write that cancels the call\u2019s first animation still leaves the call on the browser\u2019s start', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 100}, {spring: springs.settle});
-    animator.set({y: 10});
-    // The cancelled animation's rejection runs before the first frame, as in
-    // a browser's task order.
-    await Promise.resolve();
-    await Promise.resolve();
-    clock = 1300;
-    await commitFrame(1300);
-    await expect(handle.started).resolves.toBe(1300);
-    const x = solveSpring(toSpring(springs.settle), {from: 0, to: 100});
-    expect(animator.get('x', 1316)).toBeCloseTo(x.value(0.016), 6);
-    expect(sampleAt(live('translate')[0], 'translate', 1316)[0]).toBeCloseTo(
-      x.value(0.016),
-      1,
-    );
-  });
-
-  it('a write later in the task samples the waiting call\u2019s curve from its start, so the screen and get() share one clock', async () => {
-    const {animator} = setup();
-    animator.animate({opacity: 0.5, x: 100}, {spring: springs.settle});
-    // 100 ms of work in the same task before another axis is written.
-    clock = 1100;
-    animator.set({y: 10});
-    clock = 1300;
-    await commitFrame(1300);
-    const x = solveSpring(toSpring(springs.settle), {from: 0, to: 100});
-    expect(animator.get('x', 1400)).toBeCloseTo(x.value(0.1), 6);
-    expect(sampleAt(live('translate')[0], 'translate', 1400)[0]).toBeCloseTo(
-      x.value(0.1),
-      1,
-    );
-  });
-
-  it('an earlier {at} on a channel whose other axis waits joins that call, so the screen and get() share its clock', async () => {
-    const {animator} = setup();
-    clock = 1020;
-    animator.animate({x: 100}, {spring: springs.settle});
-    // An event timestamp 20 ms before the waiting call's time.
-    animator.animate({y: 50}, {spring: springs.settle}, {at: 1000});
-    clock = 1300;
-    await commitFrame(1300);
-    const y = animator.get('y', 1316);
-    expect(sampleAt(live('translate')[0], 'translate', 1316)[1]).toBeCloseTo(
-      y,
-      1,
-    );
-  });
-
-  it('a later {at} than a call from rest still waiting keeps its own clock, with no hold', async () => {
-    const {animator} = setup();
-    animator.animate({opacity: 0}, {spring: springs.settle});
-    // A frame later the browser has still not started it (a busy compositor),
-    // and a tap's call names its own, later clock.
-    clock = 1011;
-    animator.animate({opacity: 1}, {spring: springs.settle}, {at: 1011});
-    const fade = recorded.filter(a => !a.cancelled).at(-1);
-    expect(fade?.startTime).toBe(1011);
-    // The curve moves from its first keyframe on.
-    expect(fade?.keyframes[1].opacity).not.toBe(fade?.keyframes[0].opacity);
-  });
-
-  it('a call adopted by a later same-task call starts at the commit, after the work between them', async () => {
-    const {animator} = setup();
-    const first = animator.animate({x: 100}, {spring: springs.settle});
-    // 300 ms of work in the same task, then another axis from rest.
-    clock = 1300;
-    animator.animate({y: 50}, {spring: springs.settle});
-    clock = 1310;
-    await commitFrame(1310);
-    await expect(first.started).resolves.toBe(1310);
-    expect(animator.get('x', 1310)).toBeCloseTo(0, 6);
-    expect(sampleAt(live('translate')[0], 'translate', 1310)[0]).toBeCloseTo(
-      0,
-      1,
-    );
-  });
-
-  it('under Reduced Motion on a fine pointer, a move leaves a running fade alone', async () => {
-    const {animator} = setup({
-      reduced: true,
-      coarse: false,
-    });
-    animator.set({opacity: 0});
-    animator.animate({opacity: 1}, {spring: springs.settle});
-    await advance(10_000);
-    animator.animate({x: 40}, {spring: springs.settle});
-    expect(animator.get('opacity')).toBe(1);
-    expect(animator.get('x')).toBe(40);
-  });
-});
-
-describe('animatorFor: one animator per element', () => {
-  it('gives every caller the same animator for an element', () => {
-    const a = document.createElement('div');
-    const b = document.createElement('div');
-    expect(animatorFor(a)).toBe(animatorFor(a));
-    expect(animatorFor(a)).not.toBe(animatorFor(b));
-  });
-
-  it('composes two callers’ axes in one translate track', async () => {
-    const row = document.createElement('div');
-    const options = {
-      now: () => clock,
-      requestFrame,
-    };
-    const swipe = animatorFor(row, options);
-    swipe.animate({x: -120}, {spring: springs.settle});
-    await advance(50);
-    const x = solveSpring(toSpring(springs.settle), {from: 0, to: -120});
-    const removal = animatorFor(row, options);
-    removal.animate({y: -44}, {spring: springs.settle});
-    const tracks = live('translate');
-    expect(tracks).toHaveLength(1);
-    // x stays on its curve; y starts its own.
-    expect(removal.get('x', clock + 30)).toBeCloseTo(x.value(0.08), 9);
-    const y = solveSpring(toSpring(springs.settle), {from: 0, to: -44});
-    expect(swipe.get('y', clock + 30)).toBeCloseTo(y.value(0.03), 9);
-    const [tx, ty] = sampleAt(tracks[0], 'translate', clock + 30);
-    expect(tx).toBeCloseTo(x.value(0.08), 1);
-    expect(ty).toBeCloseTo(y.value(0.03), 1);
-  });
-});
-
-describe('rebase: a layout shift under a moving element', () => {
-  it('keeps a spring’s spring, velocity and target', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({y: 100}, {spring: springs.settle});
-    await advance(60);
-    const value = animator.get('y');
-    const velocity = animator.getVelocity('y');
-    animator.rebase({y: -40});
-    expect(animator.get('y', clock)).toBeCloseTo(value - 40, 9);
-    expect(animator.getVelocity('y', clock)).toBeCloseTo(velocity, 6);
-    const curve = solveSpring(toSpring(springs.settle), {
-      from: value - 40,
-      to: 100,
-      velocity,
-    });
-    expect(animator.get('y', clock + 30)).toBeCloseTo(curve.value(0.03), 9);
-    expect(live('translate')).toHaveLength(1);
-    await advance(5000);
-    expect(animator.get('y')).toBe(100);
-    await expect(handle.finished).resolves.toBe(true);
-  });
-
-  it('offsets a resting value and starts nothing', () => {
-    const {animator, element} = setup();
-    animator.set({y: 10});
-    animator.rebase({y: -20});
-    expect(animator.get('y')).toBe(-10);
-    expect(live('translate')).toHaveLength(0);
-    expect(parse(element.style.translate)[1]).toBe(-10);
-  });
-});
-
-describe('promotion: a compositing layer while it moves', () => {
-  it('promotes the animated channels in the task that starts the motion, and ends it after rest', async () => {
-    const {animator, element} = setup();
-    animator.animate({x: 120, opacity: 0.5}, {spring: springs.settle});
-    expect(element.style.willChange).toBe('translate, opacity');
-    const end = Math.max(
-      ...live('translate').map(a => Number(a.options.duration) - END_HOLD_MS),
-      ...live('opacity').map(a => Number(a.options.duration) - END_HOLD_MS),
-    );
-    await advance(end + PROMOTION_LINGER_MS - 5);
-    expect(element.style.willChange).toBe('translate, opacity');
-    await advance(10);
-    expect(element.style.willChange).toBe('');
-  });
-
-  it('keeps the element’s own will-change', async () => {
-    const {animator, element} = setup();
-    element.style.willChange = 'contents';
-    animator.animate({y: 40}, {spring: springs.quickChange});
-    expect(element.style.willChange).toBe('contents, translate');
-    await advance(5000 + PROMOTION_LINGER_MS);
-    expect(element.style.willChange).toBe('contents');
-  });
-
-  it("keeps the stylesheet's will-change reasons while it promotes, and hands them back", async () => {
-    const {animator, element} = setup();
-    stylesheet = {'will-change': 'transform, opacity'};
-    animator.animate({y: 40, opacity: 0.5}, {spring: springs.quickChange});
-    expect(element.style.willChange).toBe('transform, translate, opacity');
-    await advance(5000 + PROMOTION_LINGER_MS);
-    expect(element.style.willChange).toBe('');
-  });
-
-  it('promotes during direct manipulation, until the writes stop', async () => {
-    const {animator, element} = setup();
-    animator.set({y: 10});
-    expect(element.style.willChange).toBe('translate');
-    await advance(PROMOTION_LINGER_MS - 10);
-    animator.set({y: 20});
-    await advance(PROMOTION_LINGER_MS - 10);
-    expect(element.style.willChange).toBe('translate');
-    await advance(20);
-    expect(element.style.willChange).toBe('');
-  });
-
-  it('ends promotion on the element it leaves', () => {
-    const {animator, element} = setup();
-    animator.animate({x: 50}, {spring: springs.settle});
-    expect(element.style.willChange).toBe('translate');
-    animator.attach(document.createElement('div'));
-    expect(element.style.willChange).toBe('');
-  });
-});
-
-describe('atRest: waiting out every curve', () => {
-  it('resolves when the last curve ends, retargets included', async () => {
-    const {animator} = setup();
-    animator.animate({y: 100}, {spring: springs.settle});
-    let rested = false;
-    void animator.atRest(['y']).then(() => {
-      rested = true;
-    });
-    await advance(100);
-    // Someone else retargets the row: the wait follows the new curve.
-    const second = animator.animate({y: 0}, {spring: springs.settle});
-    const [track] = live('translate');
-    const end = Number(track.options.duration) - END_HOLD_MS;
-    await advance(end - 1);
-    expect(rested).toBe(false);
-    await advance(2);
-    expect(rested).toBe(true);
-    await expect(second.finished).resolves.toBe(true);
-  });
-
-  it('resolves at once at rest', async () => {
-    const {animator} = setup();
-    await expect(animator.atRest()).resolves.toBeUndefined();
-  });
-});
-
-describe('presentation values, retargeting, velocity (spec:AST-094 FR6)', () => {
-  it('hands a release velocity to the spring', () => {
-    const {animator} = setup();
-    animator.set({y: 200});
-    animator.animate(
-      {y: 0},
-      {spring: springs.sheetDetent, velocity: {y: 1500}},
-    );
-    expect(animator.get('y')).toBe(200);
-    expect(animator.getVelocity('y')).toBeCloseTo(1500, 6);
-  });
-
-  it('a retarget starts from the value and the velocity on screen', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.emphasis, velocity: {x: 800}});
-    const first = live('translate')[0];
-    await advance(120);
-    const value = animator.get('x');
-    const velocity = animator.getVelocity('x');
-    animator.animate({x: -100}, {spring: springs.emphasis});
-    expect(first.cancelled).toBe(true);
-    const second = live('translate')[0];
-    expect(second.startTime).toBe(clock);
-    expect(animator.get('x', clock)).toBeCloseTo(value, 9);
-    expect(animator.getVelocity('x', clock)).toBeCloseTo(velocity, 6);
-    expect(sampleAt(second, 'translate', clock)[0]).toBeCloseTo(value, 2);
-    // And it really goes to the new target with that start.
-    const curve = solveSpring(toSpring(springs.emphasis), {
-      from: value,
-      to: -100,
-      velocity,
-    });
-    expect(animator.get('x', clock + 90)).toBeCloseTo(curve.value(0.09), 9);
-  });
-
-  it('velocity is continuous across a retarget (property sweep)', async () => {
-    for (const spring of [
-      springs.settle,
-      springs.quickChange,
-      springs.switchThumbMove,
-      springs.navigationPush,
-    ]) {
-      const {animator} = setup();
-      animator.animate({x: 200}, {spring});
-      for (const step of [16, 50, 120]) {
-        await advance(step);
-        const before = animator.getVelocity('x', clock);
-        const value = animator.get('x', clock);
-        animator.animate({x: value > 100 ? 0 : 200}, {spring});
-        expect(animator.getVelocity('x', clock)).toBeCloseTo(before, 6);
-        expect(animator.get('x', clock)).toBeCloseTo(value, 9);
-      }
-    }
-  });
-
-  it('a value that keeps moving through a rebuild stays on its curve', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300, y: 200}, {spring: springs.settle});
-    const yCurve = solveSpring(toSpring(springs.settle), {from: 0, to: 200});
-    await advance(100);
-    animator.animate({x: 0}, {spring: springs.settle});
-    const [animation] = live('translate');
-    for (let t = clock; t < clock + 400; t += 7) {
-      expect(sampleAt(animation, 'translate', t)[1]).toBeCloseTo(
-        yCurve.value((t - 1000) / 1000),
-        1,
-      );
-      expect(animator.get('y', t)).toBeCloseTo(
-        yCurve.value((t - 1000) / 1000),
-        9,
-      );
-    }
-  });
-
-  it('stop() freezes at the presentation value', async () => {
-    const {animator, element} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    await advance(80);
-    const value = animator.get('x');
-    animator.stop();
-    expect(live('translate')).toHaveLength(0);
-    expect(Number.parseFloat(element.style.translate)).toBeCloseTo(value, 3);
-    await advance(500);
-    expect(animator.get('x')).toBe(value);
-    expect(animator.getVelocity('x')).toBe(0);
-  });
-
-  it('a handle reads, retargets and stops its own properties', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 100}, {spring: springs.settle});
-    await advance(50);
-    expect(handle.value('x')).toBe(animator.get('x'));
-    expect(handle.velocity('x')).toBe(animator.getVelocity('x'));
-    const next = handle.retarget({x: 50});
-    await expect(handle.finished).resolves.toBe(false);
-    next.stop();
-    await expect(next.finished).resolves.toBe(false);
-  });
-});
-
-describe('set: direct manipulation', () => {
-  it('a commit that leaves several channels at identity reads the stylesheet once', () => {
-    // Each read after a write forces a style recalculation (a lifted menu
-    // that grows back to identity on translate, scale and opacity paid one
-    // per channel in its opening commit).
-    const {animator} = setup();
-    animator.set({x: 10, scale: 2, opacity: 0.5});
-    const reads = vi.mocked(window.getComputedStyle).mock.calls.length;
-    animator.set({x: 0, scale: 1, opacity: 1});
-    expect(vi.mocked(window.getComputedStyle).mock.calls.length - reads).toBe(
-      1,
-    );
-  });
-
-  it('writes one inline style per move and starts no animation', () => {
-    const {animator, element} = setup();
-    for (let x = 0; x < 30; x += 3) {
-      animator.set({x});
-      expect(element.style.translate).toBe(x === 0 ? '' : `${x}px 0px`);
-    }
-    expect(recorded).toHaveLength(0);
-  });
-
-  it('a drag on translate leaves a running scale alone', () => {
-    const {animator} = setup();
-    animator.animate({scale: 0.95}, {spring: springs.settle});
-    const scaleAnimation = live('scale')[0];
-    animator.set({x: 12});
-    animator.set({x: 20});
-    expect(scaleAnimation.cancelled).toBe(false);
-    expect(live('translate')).toHaveLength(0);
-  });
-});
-
-describe('finished', () => {
-  it('resolves true when the curve ends untouched', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 40}, {spring: springs.quickChange});
-    let result: boolean | undefined;
-    void handle.finished.then(value => {
-      result = value;
-    });
-    await advance(100);
-    expect(result).toBeUndefined();
-    await advance(5000);
-    expect(result).toBe(true);
-  });
-
-  it('resolves false as soon as a property is retargeted, set or stopped', async () => {
-    const {animator} = setup();
-    const a = animator.animate({x: 40}, {spring: springs.quickChange});
-    animator.animate({x: 80}, {spring: springs.quickChange});
-    await expect(a.finished).resolves.toBe(false);
-    const b = animator.animate({y: 40}, {spring: springs.quickChange});
-    animator.set({y: 3});
-    await expect(b.finished).resolves.toBe(false);
-    const c = animator.animate({rotate: 40}, {spring: springs.quickChange});
-    animator.stop(['rotate']);
-    await expect(c.finished).resolves.toBe(false);
-  });
-
-  it('dispose cancels and settles everything', async () => {
-    const {animator} = setup();
-    const handle = animator.animate(
-      {x: 40, opacity: 0},
-      {spring: springs.quickChange},
-    );
-    animator.dispose();
-    await expect(handle.finished).resolves.toBe(false);
-    expect(recorded.every(a => a.cancelled)).toBe(true);
-    expect(animator.element).toBeNull();
-  });
-});
-
-describe('Reduced Motion (design:reduced-motion)', () => {
-  // A coarse primary pointer, or a touch drag's release on any pointer,
-  // cross-fades (DR2); any other call completes at once (DR3).
-  const reduced = (coarse = true) => setup({reduced: true, coarse});
-  const fade = timing.reducedMotionCrossFadeMs;
-  const ease = cubicBezier(timing.curves.move);
-  /** Every animation the browser was handed changes opacity only. */
-  const opacityOnly = () =>
-    recorded.every(animation =>
-      animation.keyframes.every(keyframe =>
-        Object.keys(keyframe).every(key =>
-          ['opacity', 'offset', 'easing', 'composite'].includes(key),
-        ),
-      ),
-    );
-
-  it('an entrance after an outside finish starts from what is on screen', async () => {
-    const {animator} = reduced();
-    animator.animate(
-      {opacity: 0},
-      {spring: springs.settle},
-      {crossfadeAs: 'exit'},
-    );
-    await commitFrame(clock);
-    await advance(16);
-    // A test utility finishes the fade out: opacity 0 on screen, while the
-    // curve would still read about 0.93.
-    const [exit] = live('opacity');
-    exit.finish();
-    animator.animate(
-      {opacity: 1},
-      {spring: springs.settle},
-      {crossfadeAs: 'entrance'},
-    );
-    const fade = live('opacity').at(-1);
-    expect(fade?.keyframes[0].opacity).toBe('0');
-  });
-
-  it('fades for 200 ms at most', () => {
-    expect(fade).toBeGreaterThan(0);
-    expect(fade).toBeLessThanOrEqual(200);
-  });
-
-  it('never animates a transform, on either pointer', async () => {
-    for (const coarse of [true, false]) {
-      const {animator} = reduced(coarse);
-      animator.animate({x: 100}, {spring: springs.navigationPush});
-      animator.animate({y: 400, opacity: 0}, {spring: springs.sheetDismiss});
-      animator.animate(
-        {scale: 0.9},
-        {spring: springs.quickChange},
-        {crossfadeAs: 'exit'},
-      );
-      animator.play({
-        rotate: {duration: 0.3, at: t => 30 * t, velocity: () => 30},
-      });
-      await advance(1000);
-    }
-    expect(recorded.length).toBeGreaterThan(0);
-    expect(opacityOnly()).toBe(true);
-  });
-
-  it("a move with no opacity of its own dips from and back to the stylesheet's opacity, then hands it back", async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('opacity', 1000)).toBeCloseTo(0.6, 9);
-    const [out] = live('opacity');
-    expect(out.keyframes[0].opacity).toBe('0.6');
-    await advance(fade / 2);
-    // Landed while transparent, fading back in to the stylesheet's value.
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity', clock + fade / 2)).toBeCloseTo(0.6, 9);
-    await advance(fade / 2 + END_HOLD_MS + 1);
-    // No inline opacity is left behind: the stylesheet owns it again.
-    expect(element.style.opacity).toBe('');
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('overlapping dips on the stylesheet opacity never leave it pinned inline', async () => {
-    for (const at of ['fading out', 'fading back in'] as const) {
-      const {animator, element} = reduced();
-      stylesheet = {opacity: '0.6'};
-      animator.animate({x: 100}, {spring: springs.navigationPush});
-      await commitFrame(clock);
-      await advance(at === 'fading out' ? fade / 4 : fade / 2 + 20);
-      animator.animate({x: 200}, {spring: springs.navigationPush});
-      await commitFrame(clock);
-      await advance(fade * 2 + END_HOLD_MS + 1);
-      expect(animator.get('x')).toBe(200);
-      // The stylesheet owns opacity again.
-      expect(element.style.opacity).toBe('');
-      expect(animator.get('opacity')).toBe(1);
-    }
-  });
-
-  it('detaching and attaching a new node during a dip lands the move on it (React replacement)', async () => {
-    const {animator} = reduced();
-    const handle = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(50);
-    animator.attach(null);
-    const replacement = document.createElement('div');
-    animator.attach(replacement);
-    // The dip goes on on the new node: the move lands at its bottom.
-    await advance(fade);
-    expect(animator.get('x')).toBe(100);
-    expect(replacement.style.translate).toBe('100px 0px');
-    await expect(handle.finished).resolves.toBe(true);
-  });
-
-  it('a move that overlaps a running fade lands only once the element is invisible', async () => {
-    const {animator} = reduced();
-    animator.set({opacity: 0});
-    animator.animate({opacity: 1}, {spring: springs.navigationPush});
-    await advance(fade / 3);
-    const start = clock;
-    expect(animator.get('opacity')).toBeGreaterThan(0.1);
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    // Still where it was while it shows; it moves at the bottom of the dip.
-    await advance(fade / 2 - 2);
-    expect(clock - start).toBe(fade / 2 - 2);
-    expect(animator.get('x')).toBe(0);
-    await advance(4);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBeLessThan(0.1);
-    await advance(fade);
-    expect(animator.get('opacity')).toBeCloseTo(1, 9);
-  });
-
-  it("a second call's fade re-times the first call's pending jump to its own invisible moment", async () => {
-    const {animator} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    const start = clock;
-    // x still waits for the first dip's bottom; y starts a new dip now.
-    animator.animate({y: 50}, {spring: springs.navigationPush});
-    // Neither moves while the element shows: both land at the new dip's
-    // bottom.
-    await advance(fade / 2 - 2);
-    expect(clock - start).toBe(fade / 2 - 2);
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('y')).toBe(0);
-    await advance(4);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('y')).toBe(50);
-    expect(animator.get('opacity')).toBeLessThan(0.1);
-  });
-
-  it('a stop during a dip finishes the fade instead of freezing it', async () => {
-    const {animator} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 2 - 5);
-    expect(animator.get('opacity')).toBeLessThan(0.1);
-    animator.stop();
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it("a stop during a dip on the stylesheet's opacity hands it back", async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    animator.stop();
-    expect(element.style.opacity).toBe('');
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('a call that does not own opacity keeps a running borrowed dip handing it back', async () => {
-    // One that moves nothing.
-    const still = reduced();
-    stylesheet = {opacity: '0.6'};
-    still.animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    still.animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade + END_HOLD_MS + 1);
-    expect(still.element.style.opacity).toBe('');
-
-    // One that springs after Reduce Motion turned off mid-dip.
-    const changed = setup({reduced: true, coarse: true});
-    changed.animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    stubMedia(false, true);
-    changed.animator.animate({y: 20}, {spring: springs.navigationPush});
-    await advance(2000);
-    expect(changed.element.style.opacity).toBe('');
-  });
-
-  it('a borrowed dip that ends while detached hands the opacity back on the next attach', async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(25);
-    animator.attach(null);
-    await advance(fade + END_HOLD_MS + 1);
-    animator.attach(element);
-    expect(element.style.opacity).toBe('');
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('an unmount or dispose during a borrowed dip hands the opacity back to that element', async () => {
-    for (const end of ['detach', 'dispose'] as const) {
-      const {animator, element} = reduced();
-      stylesheet = {opacity: '0.6'};
-      animator.animate({x: 100}, {spring: springs.navigationPush});
-      await advance(25);
-      if (end === 'detach') {
-        animator.attach(null);
-      } else {
-        animator.dispose();
-      }
-      expect(element.style.opacity).toBe('');
-    }
-  });
-
-  it('a new element taking over mid-dip keeps the dip, so the move lands while invisible', async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate({x: 240}, {spring: springs.navigationPush});
-    await advance(25);
-    const next = document.createElement('div');
-    document.body.append(next);
-    animator.attach(next);
-    // The outgoing element follows its stylesheet again.
-    expect(element.style.opacity).toBe('');
-    const start = clock - 25;
-    for (let t = start; t <= start + fade; t += 2) {
-      if (animator.get('x', t) !== 0) {
-        expect(animator.get('opacity', t)).toBeCloseTo(0, 6);
-        break;
-      }
-    }
-    await advance(fade + END_HOLD_MS + 1);
-    expect(next.style.opacity).toBe('');
-    next.remove();
-  });
-
-  it('a node detached mid-dip and attached again in a later task shows the move landed and visible', async () => {
-    const {animator, element} = reduced();
-    // The call owns its opacity: its dip writes the low opacity inline.
-    animator.animate({x: 240, opacity: 1}, {spring: springs.navigationPush});
-    await advance(25);
-    expect(Number(element.style.opacity)).toBeLessThan(1);
-    animator.attach(null);
-    await advance(100);
-    animator.attach(element);
-    expect(animator.get('x')).toBe(240);
-    expect(animator.get('opacity')).toBe(1);
-    expect(element.style.opacity).not.toBe('0');
-    expect(Number(element.style.opacity || '1')).toBe(1);
-  });
-
-  it('a node detached mid-dip while another axis moves is left with no animation or promotion', async () => {
-    const {animator, element} = reduced();
-    animator.set({x: 0, y: 0});
-    // y coasts (momentum keeps its motion) while x waits in a dip.
-    const start = clock;
-    animator.decay(coast(animator, {y: 800}, {at: start}), {at: start});
-    animator.animate({x: 240}, {spring: springs.navigationPush});
-    await advance(25);
-    animator.attach(null);
-    await advance(1);
-    expect(
-      recorded.filter(
-        animation =>
-          animation.element === element &&
-          !animation.cancelled &&
-          animation.playState !== 'finished',
-      ),
-    ).toEqual([]);
-    expect(element.style.willChange).toBe('');
-  });
-
-  it('lands a waiting move on the latest node detached in the task, after a replacement too', async () => {
-    const {animator} = reduced();
-    animator.animate({x: 240, opacity: 1}, {spring: springs.navigationPush});
-    await advance(25);
-    const next = document.createElement('div');
-    document.body.append(next);
-    animator.attach(null);
-    animator.attach(next);
-    animator.attach(null);
-    await advance(100);
-    // The node attached last, then detached, is the one left visible.
-    expect(Number(next.style.opacity || '1')).toBe(1);
-    next.remove();
-  });
-
-  it('a dispose right after a detach lands the waiting move on that node', async () => {
-    const {animator, element} = reduced();
-    animator.animate({x: 240, opacity: 1}, {spring: springs.navigationPush});
-    await advance(25);
-    animator.attach(null);
-    animator.dispose();
-    await advance(100);
-    expect(Number(element.style.opacity || '1')).toBe(1);
-    expect(element.style.willChange).toBe('');
-  });
-
-  it('an identity held over a differing stylesheet follows a node replacement', () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0'};
-    animator.set({opacity: 1});
-    expect(element.style.opacity).toBe('1');
-    animator.attach(null);
-    const next = document.createElement('div');
-    document.body.append(next);
-    animator.attach(next);
-    expect(next.style.opacity).toBe('1');
-    expect(animator.get('opacity')).toBe(1);
-    next.remove();
-  });
-
-  it('a running dip survives any re-attach, so the move never passes in view', async () => {
-    const halfway = async (
-      animator: ReturnType<typeof createAnimator>,
-      start: number,
-    ): Promise<number> => {
-      // The plan lands by timer: step the clock to the landing.
-      while (clock <= start + fade) {
-        await advance(2);
-        if (animator.get('x') !== 0) {
-          return animator.get('opacity');
-        }
-      }
-      return Number.NaN;
-    };
-    // Detached and re-attached to the same element, no stylesheet opacity.
-    const same = reduced();
-    same.animator.animate({x: 240}, {spring: springs.navigationPush});
-    const start = clock;
-    await advance(25);
-    same.animator.attach(null);
-    same.animator.attach(same.element);
-    expect(await halfway(same.animator, start)).toBeCloseTo(0, 6);
-    // Handed to another element, no stylesheet opacity.
-    const other = reduced();
-    other.animator.animate({x: 240}, {spring: springs.navigationPush});
-    const start2 = clock;
-    await advance(25);
-    const next = document.createElement('div');
-    document.body.append(next);
-    other.animator.attach(next);
-    expect(await halfway(other.animator, start2)).toBeCloseTo(0, 6);
-    await advance(fade + END_HOLD_MS + 1);
-    expect(next.style.opacity).toBe('');
-    next.remove();
-  });
-
-  it('an opacity the animator wrote is owned: a dip returns to it, never to a hiding stylesheet', async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0'};
-    animator.set({opacity: 1});
-    expect(element.style.opacity).toBe('1');
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade + END_HOLD_MS + 1);
-    expect(element.style.opacity).toBe('1');
-  });
-
-  it('borrows nothing from a hidden element, so a later move still dips once it shows', async () => {
-    const {animator} = reduced();
-    stylesheet = {opacity: '0'};
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    // Invisible: the move lands at once, with no dip.
-    expect(animator.get('x')).toBe(100);
-    await advance(fade + END_HOLD_MS + 1);
-    stylesheet = {opacity: '1'};
-    animator.animate({x: 200}, {spring: springs.navigationPush});
-    const start = clock;
-    for (let t = start; t <= start + fade; t += 2) {
-      if (animator.get('x', t) !== 100) {
-        expect(animator.get('opacity', t)).toBeCloseTo(0, 6);
-        break;
-      }
-    }
-  });
-
-  it("a stop that finishes a dip's fade lands the move with it, never later in view", async () => {
-    const {animator} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    animator.stop(['opacity']);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('a release past an edge springs back as a cross-fade, not momentum (DR2)', async () => {
-    const {animator} = reduced();
-    animator.set({x: -80});
-    const start = clock;
-    animator.decay(
-      coast(animator, {x: 0}, {bounds: {x: {min: 0, max: 100}}, at: start}),
-      {at: start},
-    );
-    // The plan lands by timer: step the clock; it moves only while invisible.
-    let moved = false;
-    while (clock <= start + fade) {
-      await advance(2);
-      if (!moved && animator.get('x') !== -80) {
-        moved = true;
-        expect(animator.get('opacity')).toBeLessThan(0.1);
-      }
-    }
-    expect(moved).toBe(true);
-    expect(animator.get('x')).toBe(0);
-  });
-
-  it('a spring back a touch release starts cross-fades on a fine pointer too (DR2)', async () => {
-    const {animator} = reduced(false);
-    animator.set({x: -80});
-    const start = clock;
-    animator.decay(
-      coast(animator, {x: 0}, {bounds: {x: {min: 0, max: 100}}, at: start}),
-      {at: start, touchRelease: true},
-    );
-    // Not at once: it moves only while invisible.
-    expect(animator.get('x')).toBe(-80);
-    let moved = false;
-    while (clock <= start + fade) {
-      await advance(2);
-      if (!moved && animator.get('x') !== -80) {
-        moved = true;
-        expect(animator.get('opacity')).toBeLessThan(0.1);
-      }
-    }
-    expect(moved).toBe(true);
-    expect(animator.get('x')).toBe(0);
-  });
-
-  it('a release with one axis past an edge is one handle: stop() stops the cross-fade too', async () => {
-    const {animator} = reduced();
-    animator.set({x: -80, y: 0});
-    const start = clock;
-    const handle = animator.decay(
-      coast(
-        animator,
-        {x: 0, y: 500},
-        {bounds: {x: {min: 0, max: 100}}, at: start},
-      ),
-      {at: start},
-    );
-    expect(handle.properties).toEqual(expect.arrayContaining(['x', 'y']));
-    await advance(fade / 4);
-    handle.stop();
-    // A catch freezes the release where it is on screen (AST-094 FR6): x
-    // never lands at its edge, and the fade it was waiting in finishes.
-    const stopped = {x: animator.get('x'), y: animator.get('y')};
-    expect(stopped.x).toBe(-80);
-    expect(animator.get('opacity')).toBe(1);
-    await advance(fade + END_HOLD_MS + 1);
-    expect(animator.get('x')).toBe(-80);
-    expect(animator.get('y')).toBe(stopped.y);
-  });
-
-  it('a carried move keeps its own call: stopping or setting it settles that call, not the one carrying it', async () => {
-    for (const interrupt of ['set', 'stop'] as const) {
-      const {animator} = reduced();
-      const a = animator.animate({x: 100}, {spring: springs.navigationPush});
-      await advance(fade / 4);
-      const b = animator.animate({y: 50}, {spring: springs.navigationPush});
-      if (interrupt === 'set') {
-        animator.set({x: 40});
-      } else {
-        a.stop();
-      }
-      await advance(fade * 2 + END_HOLD_MS + 1);
-      await expect(a.finished).resolves.toBe(false);
-      await expect(b.finished).resolves.toBe(true);
-      expect(animator.get('x')).toBe(interrupt === 'set' ? 40 : 0);
-      expect(animator.get('y')).toBe(50);
-    }
-  });
-
-  it("an earlier handle's stop leaves a later call's move on the same property alone", async () => {
-    const {animator} = reduced();
-    const a = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    const b = animator.animate({x: 200}, {spring: springs.navigationPush});
-    a.stop();
-    await advance(fade * 2 + END_HOLD_MS + 1);
-    expect(animator.get('x')).toBe(200);
-    await expect(a.finished).resolves.toBe(false);
-    await expect(b.finished).resolves.toBe(true);
-  });
-
-  it('a retargeted call settles interrupted; its retarget lands', async () => {
-    const {animator} = reduced();
-    const a = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    const b = a.retarget({x: 150});
-    await advance(fade * 2 + END_HOLD_MS + 1);
-    expect(animator.get('x')).toBe(150);
-    await expect(a.finished).resolves.toBe(false);
-    await expect(b.finished).resolves.toBe(true);
-  });
-
-  it('a move whose animations are paused before their first frame still lands once released', async () => {
-    for (const release of ['resume', 'finish'] as const) {
-      const {animator} = reduced();
-      const handle = animator.animate(
-        {x: 100},
-        {spring: springs.navigationPush},
-      );
-      // Something pauses the call's animations in its own task.
-      for (const animation of recorded) {
-        animation.paused = true;
-      }
-      await commitFrame(clock);
-      clock += 30;
-      await commitFrame(clock);
-      for (const animation of recorded) {
-        if (release === 'resume') {
-          // play(): pending, so the start comes a frame later, after the
-          // frame's callbacks.
-          animation.paused = false;
-          animation.startDelayFrames = 1;
-        } else {
-          animation.finish();
-        }
-      }
-      // Frames keep coming: step the clock through the landing.
-      for (let step = 0; step < 16; step++) {
-        await advance(fade / 4);
-      }
-      expect(animator.get('x')).toBe(100);
-      expect(animator.get('opacity')).toBe(1);
-      await expect(handle.finished).resolves.toBe(true);
-    }
-  });
-
-  it('a waiting call whose own opacity a later call retargets settles interrupted', async () => {
-    const {animator} = reduced();
-    const dismiss = animator.animate(
-      {y: 800, opacity: 0},
-      {spring: springs.sheetDismiss},
-    );
-    await advance(fade / 4);
-    const show = animator.animate({opacity: 1}, {spring: springs.settle});
-    // The plan lands by timer: step the clock through the dip.
-    for (let step = 0; step < 12; step++) {
-      await advance(fade / 8);
-    }
-    expect(animator.get('opacity')).toBe(1);
-    await expect(dismiss.finished).resolves.toBe(false);
-    await expect(show.finished).resolves.toBe(true);
-  });
-
-  it('a move taken back mid-dip fades straight back up instead of finishing the dip', async () => {
-    const {animator} = reduced();
-    const move = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    const shown = animator.get('opacity');
-    expect(shown).toBeLessThan(1);
-    const back = animator.animate({x: 0}, {spring: springs.navigationPush});
-    let lowest = shown;
-    for (let step = 0; step < 12; step++) {
-      await advance(fade / 8);
-      lowest = Math.min(lowest, animator.get('opacity'));
-    }
-    expect(lowest).toBeGreaterThanOrEqual(shown - 1e-6);
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('opacity')).toBe(1);
-    await expect(move.finished).resolves.toBe(false);
-    await expect(back.finished).resolves.toBe(true);
-  });
-
-  it('an entrance by role caught mid-exit fades in from where the exit has it', async () => {
-    const {animator} = reduced();
-    animator.animate(
-      {y: 40},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'exit'},
-    );
-    await advance(fade / 4);
-    const shown = animator.get('opacity');
-    expect(shown).toBeLessThan(1);
-    animator.animate(
-      {y: 0},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'entrance'},
-    );
-    let lowest = shown;
-    for (let step = 0; step < 12; step++) {
-      await advance(fade / 8);
-      lowest = Math.min(lowest, animator.get('opacity'));
-    }
-    expect(lowest).toBeGreaterThanOrEqual(shown - 1e-6);
-    expect(animator.get('y')).toBe(0);
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('a caught dismissal fades straight back up: a call that sets every waiting value takes it over', async () => {
-    const {animator} = reduced();
-    const dismiss = animator.animate(
-      {y: 800, opacity: 0},
-      {spring: springs.sheetDismiss},
-    );
-    await advance(fade / 4);
-    const shown = animator.get('opacity');
-    const present = animator.animate(
-      {y: 0, opacity: 1},
-      {spring: springs.sheetPresent},
-    );
-    await commitFrame(clock);
-    // No dip: the opacity only rises from where it was.
-    let lowest = shown;
-    const start = clock;
-    while (clock <= start + fade * 2) {
-      await advance(2);
-      lowest = Math.min(lowest, animator.get('opacity'));
-    }
-    expect(lowest).toBeGreaterThanOrEqual(shown - 1e-6);
-    expect(animator.get('y')).toBe(0);
-    expect(animator.get('opacity')).toBe(1);
-    await expect(dismiss.finished).resolves.toBe(false);
-    await expect(present.finished).resolves.toBe(true);
-  });
-
-  it("a handle's stop mid-dip freezes its waiting travel where it is, as animator.stop() does (AST-094 FR6)", async () => {
-    const {animator} = reduced();
-    const handle = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    handle.stop();
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('opacity')).toBe(1);
-    await advance(fade + END_HOLD_MS + 1);
-    expect(animator.get('x')).toBe(0);
-    await expect(handle.finished).resolves.toBe(false);
-  });
-
-  it('a second move during a borrowed dip copies no stylesheet opacity inline', async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    animator.animate({y: 50}, {spring: springs.navigationPush});
-    await advance(fade / 2);
-    // Landed, and fading back in to the stylesheet's value.
-    expect(animator.get('opacity', clock + fade / 2)).toBeCloseTo(0.6, 9);
-    await advance(fade + END_HOLD_MS + 1);
-    expect(element.style.opacity).toBe('');
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('a stop during a dip whose opacity a call owns ends where the fade was heading', async () => {
-    const {animator} = reduced();
-    animator.set({opacity: 0.8});
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(50);
-    animator.stop();
-    expect(animator.get('opacity')).toBeCloseTo(0.8, 9);
-  });
-
-  it('an opacity change mid-dip lands the waiting move only once the element is invisible', async () => {
-    const {animator} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(20);
-    animator.animate({opacity: 0}, {spring: springs.navigationPush});
-    // Still where it was while it shows.
-    expect(animator.get('x')).toBe(0);
-    await advance(fade - 2);
-    expect(animator.get('x')).toBe(0);
-    await advance(4);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBeCloseTo(0, 9);
-  });
-
-  it('a second borrowed dip opens at the opacity on screen', async () => {
-    const {animator} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(fade / 4);
-    const before = animator.get('opacity');
-    expect(before).toBeLessThan(0.6);
-    animator.animate({x: 200}, {spring: springs.navigationPush});
-    expect(animator.get('opacity')).toBeCloseTo(before, 6);
-  });
-
-  it("a fade by role on a stylesheet's opacity ends on it and hands it back", async () => {
-    for (const role of ['entrance', 'exit'] as const) {
-      const {animator, element} = reduced();
-      stylesheet = {opacity: '0.6'};
-      animator.animate(
-        {x: 100},
-        {spring: springs.navigationPush},
-        {crossfadeAs: role},
-      );
-      await commitFrame(clock);
-      const [layer] = live('opacity');
-      const keyframes = layer.keyframes.map(k => Number(k.opacity));
-      expect(Math.max(...keyframes)).toBeCloseTo(0.6, 9);
-      await advance(fade * 2 + END_HOLD_MS + 1);
-      expect(animator.get('x')).toBe(100);
-      expect(element.style.opacity).toBe('');
-    }
-  });
-
-  it('a move set before its dip lands does not report finished', async () => {
-    const {animator} = reduced();
-    const handle = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(20);
-    animator.set({x: 40});
-    await expect(handle.finished).resolves.toBe(false);
-    await advance(fade + END_HOLD_MS + 1);
-    expect(animator.get('x')).toBe(40);
-  });
-
-  it('dispose settles a move still waiting to land, and the calls it carries, as interrupted', async () => {
-    const {animator} = reduced();
-    const first = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(10);
-    const second = animator.animate({y: 50}, {spring: springs.navigationPush});
-    await advance(10);
-    animator.dispose();
-    await expect(first.finished).resolves.toBe(false);
-    await expect(second.finished).resolves.toBe(false);
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it("a caught or replaced exit by role hands the stylesheet's opacity back", async () => {
-    // Caught: stop() 50 ms into the exit.
-    const caught = reduced();
-    stylesheet = {opacity: '0.6'};
-    caught.animator.animate(
-      {x: 100},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'exit'},
-    );
-    await commitFrame(clock);
-    await advance(50);
-    caught.animator.stop();
-    expect(caught.element.style.opacity).toBe('');
-    // Replaced: React swaps the node 50 ms into the exit.
-    const replaced = reduced();
-    stylesheet = {opacity: '0.6'};
-    replaced.animator.animate(
-      {x: 100},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'exit'},
-    );
-    await commitFrame(clock);
-    await advance(50);
-    replaced.animator.attach(null);
-    const node = document.createElement('div');
-    replaced.animator.attach(node);
-    expect(replaced.element.style.opacity).toBe('');
-    // The exit goes on on the new node, then hands the opacity back.
-    await advance(fade + END_HOLD_MS + 1);
-    expect(node.style.opacity).toBe('');
-    expect(replaced.animator.get('x')).toBe(100);
-  });
-
-  it('dispose mid-dip or mid-exit leaves the element visible where it was going', async () => {
-    // A dip on an owned opacity.
-    const dip = reduced();
-    dip.animator.set({opacity: 0.8});
-    dip.animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(50);
-    dip.animator.dispose();
-    expect(dip.element.style.opacity).toBe('0.8');
-    expect(dip.element.style.translate).toBe('100px 0px');
-    // An exit by role.
-    const exit = reduced();
-    exit.animator.animate(
-      {x: 100},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'exit'},
-    );
-    await commitFrame(clock);
-    await advance(50);
-    exit.animator.dispose();
-    expect(['', '1']).toContain(exit.element.style.opacity);
-    expect(exit.element.style.translate).toBe('100px 0px');
-  });
-
-  it('an unmount mid-dip leaves no compositing promotion on the element it leaves', async () => {
-    const {animator, element} = reduced();
-    animator.decay(coast(animator, {y: 1500}));
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(20);
-    animator.attach(null);
-    // The unmount is deferred to a microtask: read once it has run.
-    await Promise.resolve();
-    expect(element.style.willChange).toBe('');
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it("a new element taking over an exit by role leaves the stylesheet's opacity on the outgoing one", async () => {
-    const {animator, element} = reduced();
-    stylesheet = {opacity: '0.6'};
-    animator.animate(
-      {x: 100},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'exit'},
-    );
-    await commitFrame(clock);
-    await advance(50);
-    animator.attach(document.createElement('div'));
-    expect(element.style.opacity).toBe('');
-  });
-
-  it('an unmount mid-dip lands the move where it was going, so a later attach shows it visible there', async () => {
-    const {animator, element} = reduced();
-    animator.set({opacity: 0.8});
-    const handle = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    await advance(50);
-    animator.attach(null);
-    await Promise.resolve(); // the end of the task: an unmount
-    await expect(handle.finished).resolves.toBe(false);
-    await advance(fade);
-    animator.attach(element);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBeCloseTo(0.8, 9);
-    expect(element.style.opacity).toBe('0.8');
-    expect(element.style.translate).toBe('100px 0px');
-  });
-
-  it('a move dips: fades out, lands while transparent, fades back in', async () => {
-    const {animator, element} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock); // the browser starts it
-    // Fading out in place.
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('opacity', 1000 + fade / 4)).toBeCloseTo(
-      1 - ease(0.5),
-      9,
-    );
-    expect(live('translate')).toHaveLength(0);
-    await advance(fade / 2);
-    // Landed with a plain write at the bottom, and fading back in from there.
-    expect(animator.get('x')).toBe(100);
-    expect(element.style.translate).toBe('100px 0px');
-    expect(animator.get('opacity')).toBeCloseTo(0, 9);
-    expect(animator.get('opacity', clock + fade / 4)).toBeCloseTo(ease(0.5), 9);
-    expect(live('translate')).toHaveLength(0);
-    expect(opacityOnly()).toBe(true);
-  });
-
-  it('a landing a busy main thread runs late still ends the dip on time', async () => {
-    const {animator} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(1000);
-    // The task that lands it runs 80 ms late (the page's clock is ahead
-    // of the timer when it fires).
-    clock += fade / 2 + 80;
-    await vi.advanceTimersByTimeAsync(fade / 2);
-    // Landed while transparent, never shown in the wrong place.
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBeCloseTo(0, 9);
-    // The fade back in takes what is left: the dip ends when it was due.
-    expect(animator.get('opacity', 1000 + fade)).toBe(1);
-    expect(opacityOnly()).toBe(true);
-  });
-
-  it('a busy main thread keeps the element transparent longer, never in the wrong place', async () => {
-    const {animator} = reduced();
-    const handle = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(1000);
-    // The task that would land it runs 300 ms late.
-    clock += fade / 2 + 300;
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('opacity')).toBe(0);
-    await vi.advanceTimersByTimeAsync(fade / 2 + 300);
-    expect(animator.get('x')).toBe(100);
-    let finished: boolean | null = null;
-    void handle.finished.then(value => {
-      finished = value;
-    });
-    await advance(fade);
-    expect(animator.get('opacity')).toBe(1);
-    expect(finished).toBe(true);
-  });
-
-  it('two calls in one frame both land', async () => {
-    // A drag cancel: the position on one spring, the scale on another.
-    const {animator, element} = reduced();
-    animator.set({x: 6.3, y: 84, scale: 0.969});
-    const position = animator.animate(
-      {x: 0, y: 0},
-      {spring: springs.sheetPresent},
-      {touchRelease: true},
-    );
-    const scale = animator.animate(
-      {scale: 1},
-      {spring: springs.quickChange},
-      {touchRelease: true},
-    );
-    const settled: boolean[] = [];
-    void position.finished.then(value => settled.push(value));
-    void scale.finished.then(value => settled.push(value));
-    await commitFrame(clock);
-    // Both land at the bottom of one dip, then fade back in together.
-    await advance(fade / 2);
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('scaleX')).toBe(1);
-    expect(animator.get('opacity')).toBeCloseTo(0, 9);
-    await advance(fade);
-    expect(animator.get('x')).toBe(0);
-    expect(animator.get('y')).toBe(0);
-    expect(animator.get('scaleX')).toBe(1);
-    expect(animator.get('opacity')).toBe(1);
-    // Back at identity with nothing running: the inline value is gone.
-    expect(element.style.translate).toBe('');
-    expect(settled).toEqual([true, true]);
-    expect(opacityOnly()).toBe(true);
-  });
-
-  it('a move during a dip\u2019s fade out dips once more and ends visible', async () => {
-    const {animator} = reduced();
-    animator.animate({y: 100}, {spring: springs.sheetPresent});
-    await commitFrame(clock);
-    // Half-way down the first dip's fade out, a frame or more later.
-    await advance(fade / 4);
-    animator.animate({y: 120}, {spring: springs.sheetPresent});
-    await commitFrame(clock);
-    await advance(fade / 2);
-    await advance(fade);
-    expect(animator.get('y')).toBe(120);
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('a drop, its reorder\u2019s rebase and the move to the new slot in one task dip once', async () => {
-    // A list row's drop under Reduce Motion: the drop from where the finger
-    // left it, then the reorder's commit (the layout moved the row by 56 px)
-    // and the move to its new slot, in one task on one clock.
-    const {animator} = reduced();
-    animator.set({y: 30});
-    const at = clock;
-    animator.animate(
-      {y: 0},
-      {spring: springs.settle, velocity: {y: 0}},
-      {at, touchRelease: true},
-    );
-    // The commit comes a few ms later, once the first fade has begun.
-    clock += 8;
-    const at2 = clock;
-    animator.rebase({y: 56}, {at: at2});
-    animator.animate(
-      {y: 0},
-      {spring: springs.settle},
-      {at: at2, touchRelease: true},
-    );
-    await commitFrame(clock);
-    // It never moves while visible, and fades all the way out once.
-    let lowest = 1;
-    for (let t = 0; t <= fade / 2; t += 10) {
-      const opacity = animator.get('opacity', at2 + t);
-      lowest = Math.min(lowest, opacity);
-      if (opacity > 0.01) {
-        expect(animator.get('y', at2 + t)).toBe(86);
-      }
-    }
-    expect(lowest).toBeLessThanOrEqual(0.1);
-    await advance(fade / 2);
-    expect(animator.get('y')).toBe(0);
-    await advance(fade);
-    expect(animator.get('y')).toBe(0);
-    expect(animator.get('opacity')).toBe(1);
-  });
-
-  it('a later opacity change carries a waiting move to its own invisible moment instead of dropping it', async () => {
-    const {animator} = reduced();
-    const move = animator.animate({x: 100}, {spring: springs.navigationPush});
-    await commitFrame(clock);
-    animator.animate({opacity: 0.5}, {spring: springs.settle});
-    // Not while the element shows: at the bottom of the new call's dip.
-    expect(animator.get('x')).toBe(0);
-    const start = clock;
-    let landedAt: number | null = null;
-    while (clock <= start + fade * 2) {
-      await advance(2);
-      if (landedAt == null && animator.get('x') !== 0) {
-        landedAt = animator.get('opacity');
-      }
-    }
-    expect(landedAt).not.toBeNull();
-    expect(landedAt as number).toBeLessThan(0.05);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBeCloseTo(0.5, 9);
-    await expect(move.finished).resolves.toBe(true);
-  });
-
-  it('a move whose opacity rises from or falls to a visible value lands only while transparent (DR1, DR2)', async () => {
-    for (const [from, to] of [
-      [0.5, 1],
-      [1, 0.5],
-    ] as const) {
-      const {animator} = reduced();
-      animator.set({opacity: from});
-      animator.animate({x: 100, opacity: to}, {spring: springs.navigationPush});
-      expect(animator.get('x')).toBe(0);
-      const start = clock;
-      let landedAt: number | null = null;
-      while (clock <= start + fade * 2) {
-        await advance(2);
-        if (landedAt == null && animator.get('x') !== 0) {
-          landedAt = animator.get('opacity');
-        }
-      }
-      expect(landedAt).not.toBeNull();
-      expect(landedAt as number).toBeLessThan(0.05);
-      expect(animator.get('x')).toBe(100);
-      expect(animator.get('opacity')).toBeCloseTo(to, 9);
-    }
-  });
-
-  it('an entrance lands in place and fades in', async () => {
-    const {animator} = reduced();
-    animator.set({y: 400, opacity: 0});
-    animator.animate({y: 0, opacity: 1}, {spring: springs.sheetPresent});
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('y')).toBe(0);
-    expect(live('translate')).toHaveLength(0);
-    expect(animator.get('opacity', 1000 + fade / 2)).toBeCloseTo(ease(0.5), 9);
-    expect(Number(live('opacity')[0].options.duration)).toBeCloseTo(
-      fade + END_HOLD_MS,
-      6,
-    );
-  });
-
-  it('an exit fades out in place, then lands', async () => {
-    const {animator} = reduced();
-    animator.animate({y: 400, opacity: 0}, {spring: springs.sheetDismiss});
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('opacity', 1000 + fade / 2)).toBeCloseTo(
-      1 - ease(0.5),
-      9,
-    );
-    await advance(fade - 1);
-    expect(animator.get('y')).toBe(0);
-    await advance(1);
-    expect(animator.get('y')).toBe(400);
-    expect(animator.get('opacity')).toBe(0);
-    expect(opacityOnly()).toBe(true);
-  });
-
-  it('an opacity change on a spring becomes the timed fade, never the spring', async () => {
-    const {animator} = reduced();
-    animator.animate({opacity: 0}, {spring: springs.alertDismiss});
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('opacity', 1000 + fade / 2)).toBeCloseTo(
-      1 - ease(0.5),
-      9,
-    );
-    expect(animator.get('opacity', 1000 + fade)).toBe(0);
-    expect(Number(live('opacity')[0].options.duration)).toBeCloseTo(
-      fade + END_HOLD_MS,
-      6,
-    );
-  });
-
-  it('a played curve, opacity alone included, becomes the timed fade', async () => {
-    const {animator} = reduced();
-    // A long dim that would follow a sheet's spring.
-    animator.play({
-      opacity: {duration: 0.6, at: t => 1 - t / 0.6, velocity: () => -1 / 0.6},
-    });
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('opacity', 1000 + fade)).toBe(0);
-    expect(Number(live('opacity')[0].options.duration)).toBeCloseTo(
-      fade + END_HOLD_MS,
-      6,
-    );
-  });
-
-  it('a slide without opacity takes its direction from crossfadeAs', async () => {
-    const entrance = reduced().animator;
-    entrance.set({x: 300});
-    entrance.animate(
-      {x: 0},
-      {spring: springs.navigationPush},
-      {crossfadeAs: 'entrance'},
-    );
-    await commitFrame(clock); // the browser starts it
-    expect(entrance.get('x', 1000)).toBe(0);
-    expect(entrance.get('opacity', 1000)).toBe(0);
-    expect(entrance.get('opacity', 1000 + fade / 2)).toBeCloseTo(ease(0.5), 9);
-    expect(entrance.get('opacity', 1000 + fade)).toBe(1);
-
-    const exit = reduced().animator;
-    exit.animate(
-      {y: 800},
-      {spring: springs.sheetDismiss},
-      {crossfadeAs: 'exit'},
-    );
-    await commitFrame(clock); // the browser starts it
-    expect(exit.get('opacity', clock + fade / 2)).toBeCloseTo(1 - ease(0.5), 9);
-    await advance(fade);
-    // Lands, and the opacity returns to its value, in one plain write.
-    expect(exit.get('y')).toBe(800);
-    expect(exit.get('opacity')).toBe(1);
-  });
-
-  it('a later call before the landing takes the property over', async () => {
-    const {animator} = reduced();
-    animator.animate({x: 100}, {spring: springs.navigationPush});
-    await advance(fade / 4);
-    animator.set({x: 40});
-    await advance(fade);
-    expect(animator.get('x')).toBe(40);
-  });
-
-  it('completes at once on a fine pointer, opacity included', () => {
-    const {animator} = reduced(false);
-    animator.animate({x: 100, opacity: 0.5}, {spring: springs.navigationPush});
-    animator.play({
-      y: {duration: 0.4, at: t => 100 * t, velocity: () => 100},
-    });
-    expect(recorded).toHaveLength(0);
-    expect(animator.get('x')).toBe(100);
-    expect(animator.get('opacity')).toBe(0.5);
-    expect(animator.get('y')).toBeCloseTo(40, 9);
-  });
-
-  it('fades on a fine pointer when a touch release started the call', async () => {
-    const {animator} = reduced(false);
-    animator.animate(
-      {y: 400, opacity: 0},
-      {spring: springs.sheetDismiss},
-      {touchRelease: true},
-    );
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('opacity', 1000 + fade / 2)).toBeCloseTo(
-      1 - ease(0.5),
-      9,
-    );
-    await advance(fade);
-    expect(animator.get('y')).toBe(400);
-  });
-
-  it('no theme lengthens the fade', async () => {
-    const {animator, element} = reduced();
-    element.style.setProperty(
-      '--motion-timing-reduced-motion-cross-fade-ms',
-      '900ms',
-    );
-    document.documentElement.append(element);
-    animator.animate({opacity: 0}, {spring: springs.settle});
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('opacity', 1000 + fade)).toBe(0);
-    element.remove();
-  });
-
-  it('says what it makes of a call, for feedback with no fade of its own', () => {
-    expect(setup().animator.reducedMotion()).toBe('off');
-    expect(reduced().animator.reducedMotion()).toBe('crossfade');
-    expect(reduced(false).animator.reducedMotion()).toBe('instant');
-    expect(reduced(false).animator.reducedMotion({touchRelease: true})).toBe(
-      'crossfade',
-    );
-  });
-
-  it('crossfadeAs changes nothing without Reduced Motion', async () => {
-    const {animator} = setup();
-    animator.set({y: 800});
-    animator.animate(
-      {y: 0},
-      {spring: springs.sheetPresent},
-      {crossfadeAs: 'entrance'},
-    );
-    await commitFrame(clock); // the browser starts it
-    expect(live('opacity')).toHaveLength(0);
-    expect(animator.getVelocity('y', 1010)).toBeLessThan(0);
-  });
-});
-
-describe('play: any closed-form curve', () => {
-  // A press that keeps deepening: the scale's target falls at 0.16 per
-  // second and the presentation follows it on a spring.
-  const pressSpring = toSpring(springs.contextMenuLift);
-  const press = solveSpringTowardRamp(pressSpring, {
-    from: 1,
-    target: 1,
-    slope: -0.16,
-  });
-  const pressCurve = {
-    duration: 0.266,
-    at: (t: number) => press.value(t),
-    velocity: (t: number) => press.velocity(t),
-  };
-
-  it('bakes the curve into keyframes and reads it back', async () => {
-    const {animator, element} = setup();
-    animator.play({scale: pressCurve});
-    const [animation] = live('scale');
-    await commitFrame(1000);
-    expect(animation.startTime).toBe(1000);
-    expect(Number(animation.options.duration)).toBeCloseTo(
-      266 + END_HOLD_MS,
-      6,
-    );
-    // Up to the end: from then on the value rests where the curve ended.
-    for (let t = 0; t < 266; t += 0.5) {
-      const [sx, sy] = sampleAt(animation, 'scale', 1000 + t);
-      expect(Math.abs(sx - press.value(t / 1000))).toBeLessThan(0.001);
-      expect(sy).toBe(sx);
-      expect(animator.get('scale', 1000 + t)).toBeCloseTo(
-        press.value(t / 1000),
-        12,
-      );
-      expect(animator.getVelocity('scaleY', 1000 + t)).toBeCloseTo(
-        press.velocity(t / 1000),
-        12,
-      );
-    }
-    const end = press.value(0.266);
-    expect(animator.get('scale', 1266)).toBeCloseTo(end, 12);
-    expect(animator.getVelocity('scale', 1266)).toBe(0);
-    for (const axis of parse(element.style.scale)) {
-      expect(axis).toBeCloseTo(end, 4);
-    }
-  });
-
-  it('finishes true at its end, false when interrupted', async () => {
-    const {animator} = setup();
-    const done = animator.play({
-      x: {duration: 0.2, at: t => 100 * t, velocity: () => 100},
-    });
-    await advance(250);
-    await expect(done.finished).resolves.toBe(true);
-    const cut = animator.play({
-      x: {duration: 0.2, at: t => 20 + 100 * t, velocity: () => 100},
-    });
-    await advance(50);
-    animator.set({x: 0});
-    await expect(cut.finished).resolves.toBe(false);
-  });
-
-  it('a later animate starts from the played value and velocity', async () => {
-    const {animator} = setup();
-    animator.play({scale: pressCurve});
-    await advance(120);
-    const value = animator.get('scale');
-    const velocity = animator.getVelocity('scale');
-    expect(value).toBeCloseTo(press.value(0.12), 12);
-    animator.animate({scale: 1.06}, {spring: springs.contextMenuLift});
-    expect(animator.get('scale')).toBeCloseTo(value, 9);
-    expect(animator.getVelocity('scale')).toBeCloseTo(velocity, 9);
-  });
-
-  it('a zero-length curve puts the value in place', () => {
-    const {animator, element} = setup();
-    animator.play({opacity: {duration: 0, at: () => 0.4, velocity: () => 0}});
-    expect(live('opacity')).toHaveLength(0);
-    expect(animator.get('opacity')).toBe(0.4);
-    expect(element.style.opacity).toBe('0.4');
-  });
-
-  it('under Reduced Motion a played travel cross-fades to its end', async () => {
-    const reduced = setup({
-      reduced: true,
-      coarse: true,
-    });
-    reduced.animator.play({
-      x: {duration: 0.3, at: t => 300 * t, velocity: () => 300},
-    });
-    await commitFrame(clock); // the browser starts it
-    const [opacity] = live('opacity');
-    expect(opacity).toBeDefined();
-    expect(live('translate')).toHaveLength(0);
-    await advance(timing.reducedMotionCrossFadeMs);
-    expect(reduced.animator.get('x')).toBeCloseTo(90, 9);
-  });
-
-  it('its handle retargets only with a spring', () => {
-    const {animator} = setup();
-    const handle = animator.play({
-      x: {duration: 0.3, at: t => 300 * t, velocity: () => 300},
-    });
-    expect(() => handle.retarget({x: 0})).toThrow(/spring/);
-    handle.retarget({x: 0}, {spring: springs.settle});
-    expect(animator.getVelocity('x')).toBeCloseTo(300, 9);
-  });
-
-  it('lets an explicit axis win over scale, in either order', () => {
-    const {animator} = setup();
-    const flat = (value: number) => ({
-      duration: 0,
-      at: () => value,
-      velocity: () => 0,
-    });
-    animator.play({scaleY: flat(0.5), scale: flat(2)});
-    expect(animator.get('scaleX')).toBe(2);
-    expect(animator.get('scaleY')).toBe(0.5);
-    animator.play({scale: flat(3), scaleX: flat(0.25)});
-    expect(animator.get('scaleX')).toBe(0.25);
-    expect(animator.get('scaleY')).toBe(3);
-  });
-
-  it('rejects a curve without a finite duration', () => {
-    const {animator} = setup();
-    expect(() =>
-      animator.play({
-        x: {duration: Number.POSITIVE_INFINITY, at: () => 0, velocity: () => 0},
-      }),
-    ).toThrow(RangeError);
-  });
-});
-
-describe('decay: momentum curves (a coast)', () => {
-  it('plays a coast and comes to rest where it projects', async () => {
-    const {animator} = setup();
-    animator.decay(coast(animator, {y: -2400}));
-    await commitFrame(clock); // the browser starts it
-    const glide = solveDecay({from: 0, velocity: -2400});
-    for (const t of [0, 16, 100, 400, 1200]) {
-      expect(animator.get('y', 1000 + t)).toBeCloseTo(glide.value(t / 1000), 9);
-    }
-    const [animation] = live('translate');
-    for (let t = 0; t < 1500; t += 3) {
-      expect(
-        Math.abs(
-          sampleAt(animation, 'translate', 1000 + t)[1] - glide.value(t / 1000),
-        ),
-      ).toBeLessThan(0.11);
-    }
-    expect(animator.get('y', 1e7)).toBeCloseTo(glide.rest, 9);
-  });
-
-  it('a coast that reaches an edge hands its velocity to the edge spring', async () => {
-    const {animator} = setup();
-    animator.set({y: -100});
-    animator.decay(
-      coast(animator, {y: 3000}, {bounds: {y: {min: -2000, max: 0}}}),
-    );
-    await commitFrame(clock); // the browser starts it
-    const glide = solveDecay({from: -100, velocity: 3000});
-    const contact = 1000 + (glide.timeToReach(0) as number) * 1000;
-    expect(animator.get('y', contact)).toBeCloseTo(0, 6);
-    expect(animator.getVelocity('y', contact - 1e-6)).toBeCloseTo(
-      animator.getVelocity('y', contact + 1e-6),
-      2,
-    );
-    // It overshoots past the edge, then comes back to it.
-    expect(animator.get('y', contact + 60)).toBeGreaterThan(0);
-    expect(animator.get('y', 1e7)).toBe(0);
-  });
-
-  it('a release past an edge springs straight back with the release velocity', async () => {
-    const {animator} = setup();
-    animator.set({x: 60});
-    animator.decay(
-      coast(animator, {x: 400}, {bounds: {x: {min: -500, max: 0}}}),
-    );
-    await commitFrame(clock); // the browser starts it
-    expect(animator.getVelocity('x')).toBeCloseTo(400, 6);
-    const curve = solveSpring(toSpring(scroll.bounce), {
-      from: 60,
-      to: 0,
-      velocity: 400,
-    });
-    expect(animator.get('x', 1100)).toBeCloseTo(curve.value(0.1), 9);
-  });
-
-  it('a coast continues a running spring from its presentation value', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    await commitFrame(clock); // the browser starts it
-    clock += 80;
-    const from = animator.get('x');
-    expect(from).toBeGreaterThan(0);
-    animator.decay(coast(animator, {x: 900}));
-    await commitFrame(clock);
-    expect(animator.get('x', clock)).toBeCloseTo(from, 9);
-    expect(animator.getVelocity('x', clock)).toBeCloseTo(900, 6);
-  });
-
-  it('plays any curve as given, and a zero-length one rests at its value', async () => {
-    const {animator} = setup();
-    const linear = {
-      duration: 0.5,
-      at: (t: number) => 200 * t,
-      velocity: () => 200,
-    };
-    animator.decay({
-      x: linear,
-      y: {duration: 0, at: () => 5, velocity: () => 0},
-    });
-    await commitFrame(clock); // the browser starts it
-    expect(animator.get('x', 1250)).toBeCloseTo(50, 9);
-    expect(animator.get('x', 1e7)).toBeCloseTo(100, 9);
-    expect(animator.get('y')).toBe(5);
-  });
-
-  it('keeps moving under Reduced Motion: momentum continues the throw (DEC-2)', async () => {
-    const {animator, element} = setup({reduced: true});
-    animator.decay(coast(animator, {x: 1000}));
-    await commitFrame(clock); // the browser starts it
-    expect(animator.getVelocity('x', 1016)).toBeGreaterThan(900);
-    // No cross-fade: the coast moves the element and leaves opacity alone.
-    expect(live('translate')).toHaveLength(1);
-    expect(live('opacity')).toHaveLength(0);
-    expect(element.style.opacity).toBe('');
-  });
-
-  it('ships the Reduce Motion fade, not the rest of the timing table', () => {
-    // Bundled for a page, the animator and reducedMotionFade() read two
-    // timing values; the table's other rows stay out
-    // (architecture:component-style-authoring INV6).
-    // esbuild runs in its own process: it needs a native TextEncoder.
-    const script = [
-      "import {build} from 'esbuild';",
-      'const result = await build({',
-      `  entryPoints: ${JSON.stringify(['animator.ts', 'reducedMotion.ts'].map(file => path.resolve(__dirname, file)))},`,
-      '  outdir: "out",',
-      "  bundle: true, write: false, format: 'esm', logLevel: 'silent',",
-      '});',
-      'process.stdout.write(result.outputFiles.map(file => file.text).join("\\n"));',
-    ].join('\n');
-    const bundle = execFileSync(
-      process.execPath,
-      ['--input-type=module', '-e', script],
-      {cwd: path.resolve(__dirname, '../../../..'), encoding: 'utf8'},
-    );
-    expect(bundle).toContain('durationMs');
-    for (const row of [
-      'stateChangeMs',
-      'highlightOutMs',
-      'navigationBarHideShowMs',
-    ]) {
-      expect(bundle).not.toContain(row);
-    }
-  });
-
-  it('imports neither the coast math nor the scroll table', () => {
-    // Only a surface that coasts pays for them (coast.ts).
-    const source = fs.readFileSync(
-      path.resolve(__dirname, 'animator.ts'),
-      'utf8',
-    );
-    expect(source).not.toMatch(/from '\.\/decay'/);
-    expect(source).not.toMatch(/from '\.\/uikit\/scroll'/);
-  });
-});
-
-describe('attach', () => {
-  it('keeps state without an element and resumes the curve on attach', () => {
-    const animator = createAnimator(null, {
-      now: () => clock,
-    });
-    animator.animate({x: 300}, {spring: springs.settle});
-    expect(recorded).toHaveLength(0);
-    clock += 100;
-    const element = document.createElement('div');
-    animator.attach(element);
-    const [animation] = live('translate');
-    expect(animation.startTime).toBe(1100);
-    const curve = solveSpring(toSpring(springs.settle), {from: 0, to: 300});
-    expect(sampleAt(animation, 'translate', 1100)[0]).toBeCloseTo(
-      curve.value(0.1),
-      1,
-    );
-    expect(element.style.translate).toBe('300px 0px');
-  });
-
-  it('unmounting settles a pending atRest() wait and leaves no poll timer', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    const rest = animator.atRest();
-    animator.attach(null);
-    // Resolves without any timer running (none is advanced here).
-    await rest;
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it('unmounting settles every handle as interrupted and leaves no timer', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 300}, {spring: springs.settle});
-    expect(vi.getTimerCount()).toBeGreaterThan(0);
-    animator.attach(null);
-    // At the end of the task, once no node has replaced it.
-    await Promise.resolve();
-    expect(vi.getTimerCount()).toBe(0);
-    await expect(handle.finished).resolves.toBe(false);
-  });
-
-  it('a node replacement keeps every handle and atRest() wait: the motion goes on on the new node', async () => {
-    const {animator} = setup();
-    const handle = animator.animate({x: 300}, {spring: springs.settle});
-    let rested = false;
-    void animator.atRest().then(() => {
-      rested = true;
-    });
-    let finished: boolean | null = null;
-    void handle.finished.then(value => {
-      finished = value;
-    });
-    // React's replacement order: the old node detaches, the new one attaches.
-    animator.attach(null);
-    animator.attach(document.createElement('div'));
-    for (let tick = 0; tick < 5; tick++) {
-      await Promise.resolve();
-    }
-    expect(finished).toBeNull();
-    expect(rested).toBe(false);
-    await advance(5000);
-    expect(finished).toBe(true);
-    expect(rested).toBe(true);
-  });
-
-  it('unmounting settles every atRest() wait, as dispose() does', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    let rested = false;
-    void animator.atRest().then(() => {
-      rested = true;
-    });
-    animator.attach(null);
-    // Without advancing time: the curve has not ended.
-    for (let tick = 0; tick < 5; tick++) {
-      await Promise.resolve();
-    }
-    expect(rested).toBe(true);
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it('detaching cancels the running animations', async () => {
-    const {animator} = setup();
-    animator.animate({x: 300}, {spring: springs.settle});
-    await commitFrame(clock); // the browser starts it
-    animator.attach(null);
-    expect(recorded.every(a => a.cancelled)).toBe(true);
-    expect(animator.get('x', 1050)).toBeGreaterThan(0);
-  });
-
-  it('writes nothing for channels at identity', () => {
-    const element = document.createElement('div');
-    createAnimator(element);
-    expect(element.getAttribute('style')).toBeNull();
-  });
-});