feat(interaction): a rendering trace records why styles recalculated, and countBetween can leave out Chrome's own compositor animation update

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, storyboards). 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

@@ -16,10 +16,19 @@
  * docker daemon the container runs as the invoking user (rootless podman and
  * rootless docker already map it), so the `test-results/` it writes into the
  * mounted checkout stay the host user's and the next host run can clear them.
+ *
+ * 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';
 
@@ -42,6 +51,19 @@ if (engine == null) {
   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',
@@ -79,6 +101,10 @@ const command = [
   '--ipc=host',
   '-v',
   `${root}:${root}`,
+  '-v',
+  `${shaderCache}:${containerShaderCache}`,
+  '-e',
+  `MESA_SHADER_CACHE_DIR=${containerShaderCache}`,
   '-w',
   root,
   ...env,

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,
+];