test(interaction): frame evidence

internal/interaction-harness/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "description": "Internal: Playwright helpers for touch interaction and animation proofs (real touch input, curve sampling). Never published.",
+  "description": "Internal: Playwright helpers for touch interaction and animation proofs (real touch input, frame evidence, curve sampling, storyboards). Never published.",
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",

internal/interaction-harness/scripts/webkit-container.mjs

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Runs the interaction proofs' WebKit project inside the official Playwright
+ * container image, for hosts where WebKit cannot launch (Playwright's Linux
+ * WebKit build needs newer system libraries than some distributions ship).
+ *
+ *   node internal/interaction-harness/scripts/webkit-container.mjs [playwright test args…]
+ *
+ * The repository is mounted at the same path, so node_modules, the built
+ * Storybook and the evidence directory are the host's own. The image tag
+ * matches the installed playwright, so its browsers match the client.
+ * Uses podman when present, else docker. `--network=host` lets the specs'
+ * local Storybook server and the browser reach each other.
+ *
+ * WebKit composites through Mesa's software GL in the image, which compiles
+ * each shader variant the first time a page draws it: 450–700 ms for the
+ * first frame of a blurred or newly animated layer, long enough for a short
+ * animation to end before it is ever presented. Mesa caches what it compiles,
+ * and the cache is kept on the host (`~/.cache/astryx-webkit-shaders/<image>`,
+ * or `ASTRYX_WEBKIT_SHADER_CACHE`), so a run starts with every shader an
+ * earlier run compiled instead of paying for them in its first tests.
+ */
+import {spawnSync} from 'node:child_process';
+import fs from 'node:fs';
+import {createRequire} from 'node:module';
+import os from 'node:os';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const root = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../..',
+);
+const require = createRequire(path.join(root, 'package.json'));
+const {version} = JSON.parse(
+  fs.readFileSync(require.resolve('playwright/package.json'), 'utf8'),
+);
+const image =
+  process.env.PLAYWRIGHT_IMAGE ??
+  `mcr.microsoft.com/playwright:v${version}-noble`;
+const engine = ['podman', 'docker'].find(
+  cmd => spawnSync(cmd, ['--version'], {stdio: 'ignore'}).status === 0,
+);
+if (engine == null) {
+  console.error('webkit-container: neither podman nor docker is installed');
+  process.exit(1);
+}
+const args = process.argv.slice(2);
+// Where the container sees the host's shader cache (see the header).
+const containerShaderCache = '/astryx-shader-cache';
+const shaderCache =
+  process.env.ASTRYX_WEBKIT_SHADER_CACHE ??
+  path.join(
+    os.homedir(),
+    '.cache',
+    'astryx-webkit-shaders',
+    image.replace(/[^\w.-]+/g, '_'),
+  );
+fs.mkdirSync(shaderCache, {recursive: true});
+// The harness self-test reads this marker inside the container.
+fs.writeFileSync(path.join(shaderCache, 'ASTRYX-SHADER-CACHE'), `${image}\n`);
+const env = [
+  'ASTRYX_STORYBOOK_DIR',
+  'ASTRYX_INTERACTION_EVIDENCE',
+  'INTERACTION_WORKERS',
+  'CI',
+]
+  .filter(name => process.env[name] != null)
+  .flatMap(name => ['-e', `${name}=${process.env[name]}`]);
+const command = [
+  'run',
+  '--rm',
+  '--network=host',
+  '--ipc=host',
+  '-v',
+  `${root}:${root}`,
+  '-v',
+  `${shaderCache}:${containerShaderCache}`,
+  '-e',
+  `MESA_SHADER_CACHE_DIR=${containerShaderCache}`,
+  '-w',
+  root,
+  ...env,
+  image,
+  'node',
+  path.join(root, 'node_modules/@playwright/test/cli.js'),
+  'test',
+  '--config',
+  'playwright.interaction.config.ts',
+  '--project',
+  'webkit',
+  ...args,
+];
+console.log(`${engine} ${command.join(' ')}`);
+const result = spawnSync(engine, command, {stdio: 'inherit'});
+process.exit(result.status ?? 1);

internal/interaction-harness/src/busy.skip.fixture.ts

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file busy.skip.fixture.ts
+ * @input One recorded busy-main-thread run in headless Chromium under
+ *   parallel load: a compositor coast through a 566 ms block
+ * @output `frames`: the screencast frames the marker was tracked in, as
+ *   [ms after the block started, y in CSS px, or null where the marker was not
+ *   found]; `presented`: when the compositor presented each frame
+ *   (`Display::FrameDisplayed`), ms after the block started; `block`: the
+ *   block's span on the same clock. The screencast skipped frames at about
+ *   +366 and +466 ms while the compositor kept presenting every 16.7 ms.
+ * @position Fixture for busy.test.ts
+ */
+
+export const block = {from: 0, to: 566.1};
+
+export const frames: ReadonlyArray<readonly [number, number | null]> = [
+  [-1145.8, null],
+  [-1114, null],
+  [-1063.9, null],
+  [-1031.1, null],
+  [-996.6, null],
+  [-964.3, null],
+  [-930.7, null],
+  [-896.7, null],
+  [-864, null],
+  [-830.6, null],
+  [-797.8, null],
+  [-762.7, null],
+  [-731.3, null],
+  [-686.5, null],
+  [-680.8, null],
+  [-651, null],
+  [-634.1, null],
+  [-620.7, null],
+  [-615.8, null],
+  [-514.4, null],
+  [-495, null],
+  [-472.4, null],
+  [-465.3, null],
+  [-448.5, null],
+  [-430.3, null],
+  [-414.8, null],
+  [-398.3, null],
+  [-379.5, null],
+  [-364.2, null],
+  [-348.3, null],
+  [-330.6, null],
+  [-315, null],
+  [-297.6, null],
+  [-281.9, null],
+  [-265.1, null],
+  [-247.6, null],
+  [-230.8, null],
+  [-215.3, null],
+  [-198.6, null],
+  [-181, null],
+  [-165.3, null],
+  [-147.7, null],
+  [-132, null],
+  [-115.4, null],
+  [-98.5, null],
+  [-81.2, 504],
+  [-65.2, 500],
+  [-48.5, 496],
+  [-30.9, 491],
+  [-15.2, 487],
+  [1.3, 484],
+  [32.8, 480],
+  [49.8, 476],
+  [66.3, 473],
+  [82.8, 469],
+  [99.7, 466],
+  [116.1, 463],
+  [132.9, 460],
+  [149.5, 457],
+  [166.3, 454],
+  [182.9, 451],
+  [199.4, 448],
+  [216.2, 446],
+  [232.8, 443],
+  [249.4, 441],
+  [266.1, 438],
+  [282.7, 436],
+  [299.5, 434],
+  [316, 432],
+  [332.7, 430],
+  [349.5, 428],
+  [366.1, 426],
+  [433.1, 418],
+  [449.7, 417],
+  [466.2, 415],
+  [516.2, 411],
+  [532.8, 409],
+  [549.5, 408],
+  [566.2, 407],
+  [650.6, 401],
+  [666.2, 400],
+  [682.9, 399],
+  [699.6, 398],
+  [716.3, 397],
+  [816.1, 391],
+  [832.8, 391],
+  [849.5, 390],
+  [866.2, 389],
+  [882.9, 388],
+  [899.5, 388],
+  [916.1, 387],
+  [1033.8, 383],
+  [1050.1, 383],
+  [1066.7, 382],
+  [1083.3, 382],
+  [1099.5, 381],
+  [1117.3, 381],
+  [1134.2, 380],
+  [1149.5, 380],
+];
+
+export const presented: readonly number[] = [
+  -98.7, -81.3, -65.3, -48.7, -31.1, -15.3, 1.3, 32.5, 49.6, 66.1, 82.7, 99.6,
+  115.9, 132.6, 149.3, 166.1, 182.6, 199.3, 216, 232.6, 249.3, 266, 282.6,
+  299.2, 315.8, 332.6, 349.3, 366, 381.5, 398.3, 415.1, 432.9, 449.6, 466.1,
+  481.5, 498.3, 516, 532.6, 549.4, 566.1, 581.7, 598.4, 615, 631.6, 650.3, 666,
+];