buninu-browser 0.5.1 → 0.6.0

package/test/fixtures/hidden-style-reentry.js

@@ -0,0 +1,232 @@
+import assert from "node:assert/strict";
+const root = new URL("../../", import.meta.url).pathname.replace(/\/$/, "");
+if (process.argv.includes("--ses")) {
+  await import(root + "/vendor/ses/dist/ses.mjs");
+  lockdown({
+    errorTaming: "safe",
+    overrideTaming: "severe",
+    consoleTaming: "unsafe",
+    localeTaming: "unsafe",
+    stackFiltering: "concise",
+    reporting: "none",
+  });
+}
+const { parseHTMLDocument } = await import(root + "/lib/happy-dom/parser.js");
+const { StyleEngine, computeElementStyle } = await import(
+  root + "/lib/style/computed-style.js"
+);
+let assertions = 0;
+function snapshot(engine, node) {
+  return {
+    width: engine.get(node).width,
+    fontSize: engine.get(node).fontSize,
+    custom: engine.customPropertiesOf(node).get("--x") ?? null,
+    pseudo: engine.getPseudo(node, "before")?.width ?? null,
+  };
+}
+function scenario(deferHidden, kind, warm = false) {
+  const f = parseHTMLDocument(
+    '<div id="hide" style="display:' +
+      (warm ? "block" : "none") +
+      '"><section id="parent" style="' +
+      (kind === "descendant" || kind === "parentpseudo"
+        ? "width:1ch;font-size:24px"
+        : "") +
+      '"><span id="target" style="font-size:30px;--x:value;width:1ch"></span></section></div>',
+  );
+  const target = f.document.getElementById("target"),
+    parent = f.document.getElementById("parent");
+  let calls = 0,
+    inner = [];
+  const sheets =
+    kind === "pseudo"
+      ? ['#target::before{content:"b";width:1ch}']
+      : kind === "parentpseudo"
+        ? ['#parent::before{content:"b";width:1ch}']
+        : [];
+  const engine = new StyleEngine({
+    deferHidden,
+    measureText() {
+      if (++calls > 5) throw Error("reentry was not bounded");
+      inner.push({
+        target: snapshot(engine, target),
+        parent: snapshot(engine, parent),
+      });
+      return kind === "pseudo" ? engine.get(target).fontSize : 7;
+    },
+  });
+  try {
+    engine.compute(f.document, sheets);
+    if (warm) {
+      f.document.getElementById("hide").style.display = "none";
+      target.style.fontSize = "40px";
+      calls = 0;
+      inner = [];
+      engine.compute(
+        f.document,
+        sheets,
+        {},
+        new Set([f.document.getElementById("hide")]),
+      );
+    }
+    const result = {
+      target: snapshot(engine, target),
+      parent: snapshot(engine, parent),
+      calls,
+      inner,
+    };
+    return result;
+  } finally {
+    f.window.happyDOM.abort();
+  }
+}
+for (const kind of ["same", "descendant", "pseudo", "parentpseudo"])
+  for (const warm of [false, true]) {
+    const eager = scenario(false, kind, warm),
+      lazy = scenario(true, kind, warm);
+    assert.deepEqual(
+      lazy,
+      eager,
+      kind + " reentrant values match eager snapshots",
+    );
+    assert.equal(
+      lazy.calls,
+      kind === "same" ? 1 : kind === "parentpseudo" ? 3 : 2,
+    );
+    assertions += 2;
+  }
+// Ownership begins before ancestor/key extraction as well as measurements.
+for (const ancestor of [false, true]) {
+  const f = parseHTMLDocument(
+    '<div id="hide" style="display:none"><span id="target" style="width:17px"></span></div>',
+  );
+  const target = f.document.getElementById("target"),
+    hooked = ancestor ? f.document.getElementById("hide") : target;
+  const engine = new StyleEngine({ deferHidden: true });
+  engine.compute(f.document);
+  let calls = 0,
+    inner = [];
+  const getAttribute = hooked.getAttribute;
+  Object.defineProperty(hooked, "getAttribute", {
+    configurable: true,
+    value(name) {
+      if (name === "id") {
+        if (++calls > 3) throw Error("key reentry was not bounded");
+        inner.push(engine.get(target).width);
+      }
+      return getAttribute.call(this, name);
+    },
+  });
+  try {
+    assert.equal(engine.get(target).width, 17);
+    assert.equal(calls, 1);
+    assert.deepEqual(inner, ["auto"]);
+    assertions += 3;
+  } finally {
+    delete hooked.getAttribute;
+    f.window.happyDOM.abort();
+  }
+}
+// A failure in a pseudo occurs after the principal values were stored. They
+// must not make the next query mistake that failed node for a complete result.
+{
+  const f = parseHTMLDocument(
+    '<html style="font-size:21px"><body><div id="hide" style="display:none"><span id="target" style="width:1ch"></span></div></body></html>',
+  );
+  const target = f.document.getElementById("target");
+  let calls = 0,
+    fail = true;
+  const engine = new StyleEngine({
+    deferHidden: true,
+    measureText() {
+      calls++;
+      if (fail && calls === 2)
+        Object.defineProperty(target, "matches", {
+          configurable: true,
+          get() {
+            throw Error("pseudo failure");
+          },
+        });
+      return 7;
+    },
+  });
+  try {
+    engine.compute(f.document, [
+      '#target::before{content:"b";width:1ch} #hide #target::after{content:"a"}',
+    ]);
+    let thrown = false;
+    try {
+      engine.get(target);
+    } catch (error) {
+      thrown = error.message === "pseudo failure";
+    }
+    assert.equal(thrown, true);
+    assert.equal(calls, 2);
+    delete target.matches;
+    fail = false;
+    const initial = f.document.createElement("i");
+    initial.style.width = "2rem";
+    assert.equal(computeElementStyle(initial).width, 32);
+    assert.equal(engine.get(target).width, 7);
+    assert.equal(engine.getPseudo(target, "before").width, 7);
+    assert.equal(engine.getPseudo(target, "after").content, "a");
+    assert.equal(calls, 4);
+    assertions += 7;
+  } finally {
+    f.window.happyDOM.abort();
+  }
+}
+// The guard belongs to an ensured generation, not the engine globally. A
+// callback may start another document or another compute of the same document.
+for (const sameDocument of [false, true]) {
+  const first = parseHTMLDocument(
+    '<div style="display:none;color:red"><span id="target" style="width:1ch;height:10vw"></span></div>',
+  );
+  const second = sameDocument
+    ? first
+    : parseHTMLDocument(
+        '<div style="display:none;color:blue"><span id="target" style="width:1ch;height:10vw"></span></div>',
+      );
+  const oldTarget = first.document.getElementById("target"),
+    newTarget = second.document.getElementById("target");
+  let calls = 0,
+    nested = null;
+  const engine = new StyleEngine({
+    deferHidden: true,
+    measureText() {
+      calls++;
+      if (calls === 1) {
+        engine.compute(second.document, [], { width: 400 });
+        nested = engine.get(newTarget);
+      }
+      return 7;
+    },
+  });
+  try {
+    engine.compute(first.document, [], { width: 800 });
+    engine.get(oldTarget);
+    assert.equal(calls, 2);
+    assert.equal(nested.width, 7);
+    assert.equal(nested.height, 40);
+    assert.equal(engine.get(newTarget), nested);
+    assert.equal(
+      engine.get(newTarget).color,
+      sameDocument ? "rgba(255, 0, 0, 1)" : "rgba(0, 0, 255, 1)",
+    );
+    assertions += 5;
+    if (!sameDocument) {
+      assert.equal(engine.get(oldTarget).width, "auto");
+      assertions++;
+    }
+  } finally {
+    first.window.happyDOM.abort();
+    if (!sameDocument) second.window.happyDOM.abort();
+  }
+}
+console.log(
+  JSON.stringify({
+    pass: true,
+    assertions,
+    mode: process.argv.includes("--ses") ? "ses" : "plain",
+  }),
+);

package/test/fixtures/hidden-style-renderer.js

@@ -0,0 +1,203 @@
+import assert from "node:assert/strict";
+const root = new URL("../../", import.meta.url).pathname.replace(/\/$/, ""),
+  mode = "ses";
+const { createPageRenderer } = await import(
+  root + "/lib/renderer/page-renderer.js"
+);
+const errors = [],
+  requests = [];
+const png = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+a6XQAAAAASUVORK5CYII=",
+  "base64",
+);
+const mono = await Bun.file(
+  root + "/usr/share/fonts/DejaVuSansMono.ttf",
+).bytes();
+const sans = await Bun.file(
+  root + "/usr/share/fonts/Roboto-Regular.ttf",
+).bytes();
+const options = {
+  reportError: (e) => errors.push(String(e)),
+  pageFetch: async ({ url }) => {
+    requests.push(url);
+    return {
+      status: 200,
+      body: url.endsWith("mono.ttf")
+        ? mono
+        : url.endsWith("sans.ttf")
+          ? sans
+          : png,
+    };
+  },
+  fetchResource: async (url) => {
+    requests.push(url);
+    return { ok: true, status: 200, url, body: png };
+  },
+};
+const renderer = await createPageRenderer(options);
+if (mode === "ses") {
+  await import(root + "/vendor/ses/dist/ses.mjs");
+  lockdown({
+    errorTaming: "safe",
+    overrideTaming: "severe",
+    consoleTaming: "unsafe",
+    localeTaming: "unsafe",
+    stackFiltering: "concise",
+    reporting: "none",
+  });
+}
+const phases = [];
+async function state(label, mutation = "") {
+  if (mutation) await renderer.evaluate(mutation);
+  const values = await renderer.evaluate(
+    `(() => {const ids=['outer','nested','leaf','grand','new','canvas'];return ids.map(id=>{const e=document.getElementById(id);if(!e)return null;const s=getComputedStyle(e);const b=e.getBoundingClientRect();return {id,color:s.color,width:s.width,height:s.height,padding:s.padding,fontSize:s.fontSize,display:s.display,custom:s.getPropertyValue('--tone'),rect:[b.x,b.y,b.width,b.height]};});})()`,
+  );
+  const saved = await renderer.evaluate(
+    `window.saved ? [saved.color,saved.width,saved.getPropertyValue('--tone'),saved.length,keys===Object.keys(saved).join('|')] : null`,
+  );
+  const image = await renderer.screenshot({ format: "rgba" });
+  phases.push({
+    label,
+    values,
+    saved,
+    pixelHash: new Bun.CryptoHasher("sha256")
+      .update(image.pixels)
+      .digest("hex"),
+  });
+  const source = await renderer.evaluate("document.documentElement.outerHTML");
+  const fresh = await createPageRenderer({
+    ...options,
+    pageFetch: async ({ url }) => ({
+      status: 200,
+      body: url.endsWith("mono.ttf")
+        ? mono
+        : url.endsWith("sans.ttf")
+          ? sans
+          : png,
+    }),
+    fetchResource: async (url) => ({ ok: true, status: 200, url, body: png }),
+  });
+  try {
+    fresh.setScripting(mode);
+    fresh.resize(
+      label === "viewport" ||
+        [
+          "remove-font",
+          "replace-font",
+          "replacement-ready",
+          "final-reveal",
+        ].includes(label)
+        ? 220
+        : 320,
+      180,
+      1,
+    );
+    await fresh.loadDocument({
+      url: "https://hidden.test/",
+      contentType: "text/html",
+      source,
+    });
+    await fresh.whenLoaded();
+    const expected = await fresh.screenshot({ format: "rgba" });
+    if (!Buffer.from(image.pixels).equals(Buffer.from(expected.pixels)))
+      throw new Error(
+        label +
+          " pixel mismatch " +
+          Bun.hash(image.pixels) +
+          "/" +
+          Bun.hash(expected.pixels),
+      );
+    const expectedGeometry = fresh.inspect(
+      "#outer,#nested,#leaf,#grand,#new,#canvas",
+      ["color", "width", "height", "fontSize", "display"],
+    );
+    const actualGeometry = renderer.inspect(
+      "#outer,#nested,#leaf,#grand,#new,#canvas",
+      ["color", "width", "height", "fontSize", "display"],
+    );
+    if (!Bun.deepEquals(actualGeometry, expectedGeometry, true))
+      throw new Error(
+        label +
+          " geometry mismatch " +
+          JSON.stringify({ actualGeometry, expectedGeometry }),
+      );
+  } finally {
+    fresh.dispose();
+  }
+}
+try {
+  renderer.setScripting(mode);
+  renderer.resize(320, 180, 1);
+  await renderer.loadDocument({
+    url: "https://hidden.test/",
+    contentType: "text/html",
+    source: `<!doctype html><style id="faces">@font-face{font-family:Probe;src:url(/mono.ttf)}</style><style id="rules">html{font-size:18px}body{margin:0}#visible{width:210px;background:yellow;color:purple;--tone:green}#outer{display:none;color:red;--tone:blue}#nested{display:none;font-size:20px}.child{display:inline-block;background:var(--tone);width:3ch;height:2em;padding:1rem;font-family:Probe,serif}.child::before{content:'x';color:orange}#outer:has(.active) .child{color:teal}@media(max-width:250px){.child{padding:3px}}</style><span style="font-family:Probe">0</span><div id="outer"><section id="nested"><i class="child" id="grand">grand</i></section><section id="chain"><span id="leaf" class="child">leaf</span><canvas id="canvas" width="30" height="20"></canvas><img src="/pixel.png" width="10" height="10"></section></div><div id="visible">visible</div>`,
+  });
+  await renderer.whenLoaded();
+  await renderer.evaluate(
+    `window.leaf=document.getElementById('leaf');window.saved=getComputedStyle(leaf);window.keys=Object.keys(saved).join('|')`,
+  );
+  await state("initial-hidden");
+  await state(
+    "hidden-values-mutate",
+    `document.getElementById('outer').style.cssText='display:none;color:green;--tone:pink';leaf.style.width='5ch';document.getElementById('nested').style.fontSize='31px'`,
+  );
+  await state("clean-repeat");
+  await state(
+    "insert",
+    `document.getElementById('chain').insertAdjacentHTML('beforeend','<em class="child" id="new" style="width:inherit">new</em>')`,
+  );
+  await state("selector-change", `leaf.classList.add('active')`);
+  await state(
+    "new-sheet",
+    `document.getElementById('rules').textContent+=' .child{border:2px solid currentColor}'`,
+  );
+  await state(
+    "nested-reveal-hidden",
+    `document.getElementById('nested').style.display='block'`,
+  );
+  await state(
+    "outer-reveal",
+    `document.getElementById('outer').style.display='block'`,
+  );
+  await state(
+    "hidden-again",
+    `document.getElementById('outer').style.display='none'`,
+  );
+  await state(
+    "move-leaf-visible",
+    `document.getElementById('visible').append(leaf)`,
+  );
+  await state("detached", `leaf.remove()`);
+  await state(
+    "detached-mutate",
+    `leaf.style.color='rgb(12,34,56)';leaf.style.width='77px'`,
+  );
+  await state(
+    "reattach-hidden",
+    `document.getElementById('chain').append(leaf)`,
+  );
+  await state("root-rem", `document.documentElement.style.fontSize='22px'`);
+  renderer.resize(220, 180, 1);
+  await state("viewport");
+  await state("remove-font", `document.getElementById('faces').textContent=''`);
+  await state(
+    "replace-font",
+    `document.getElementById('faces').textContent='@font-face{font-family:Probe;src:url(/sans.ttf)}'`,
+  );
+  await Bun.sleep(0);
+  await state("replacement-ready");
+  await state(
+    "final-reveal",
+    `document.getElementById('outer').style.display='block'`,
+  );
+  assert.deepEqual(errors, []);
+  assert.deepEqual(requests.map((x) => new URL(x).pathname).sort(), [
+    "/mono.ttf",
+    "/pixel.png",
+    "/sans.ttf",
+  ]);
+  console.log(JSON.stringify({ pass: true, states: phases.length }));
+} finally {
+  renderer.dispose();
+}

package/test/fixtures/layout-repaint.js

@@ -0,0 +1,69 @@
+import assert from 'node:assert/strict';
+import { createPageRenderer, loadGraphics } from '../../lib/renderer/page-renderer.js';
+import { LayoutEngine } from '../../lib/layout/text-layout.js';
+
+const original = LayoutEngine.prototype.layout;
+let layouts = 0;
+LayoutEngine.prototype.layout = function(...args) { layouts++; return original.apply(this, args); };
+const renderer = await createPageRenderer({});
+const { CanvasKit: kit } = await loadGraphics();
+const geometry = `Array.from(document.querySelectorAll('[data-check]'), e => {
+  const r=e.getBoundingClientRect(); return [e.id,r.x,r.y,r.width,r.height];
+})`;
+const pixels = async () => {
+  const encoded = await renderer.screenshot();
+  const image = kit.MakeImageFromEncoded(Buffer.from(encoded, 'base64'));
+  try {
+    return image.readPixels(0, 0, { width: 320, height: 240, colorType: kit.ColorType.RGBA_8888,
+      alphaType: kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB });
+  } finally { image.delete(); }
+};
+
+try {
+  renderer.setScripting('host');
+  renderer.resize(320, 240, 1);
+  await renderer.loadDocument({ url: 'https://repaint.test/', contentType: 'text/html', status: 200,
+    source: `<!doctype html><style>
+      body { margin:0; background:white; color:#123 }
+      #box { position:relative; z-index:2; width:140px; height:76px; overflow:hidden }
+      #nested { opacity:.5; background:#ffd; border:1px solid currentColor }
+      #behind { position:absolute; z-index:-1; left:5px; top:5px; background:#58a }
+      #above { position:absolute; z-index:3; left:30px; top:25px; background:#f80 }
+      #gradient { width:160px; background-image:linear-gradient(red,blue); background-clip:text; font-size:22px }
+      #wrap { width:100px } #decorated { background:#eee }
+      td { padding:3%; border:1px solid currentColor }
+    </style><div id="box" data-check>text <span id="nested" data-check>nested</span>
+      <span id="behind" data-check>behind</span><span id="above" data-check>above</span></div>
+    <div id="gradient" data-check>Gradient text</div>
+    <div id="wrap" data-check><span id="decorated" data-check>several wrapped words</span> <span id="plain" data-check>plain</span></div>
+    <table style="width:180px"><tr><td id="cell" data-check>table</td><td>other</td></tr></table>` });
+  await renderer.whenLoaded();
+  await pixels();
+
+  for (const [id, property, value, expectedLayouts] of [
+    ['box', 'opacity', '.45', 0], ['box', 'opacity', '0', 0], ['box', 'opacity', '1', 0],
+    ['box', 'backgroundColor', '#ade', 0], ['decorated', 'backgroundColor', '#fea', 0],
+    ['cell', 'backgroundColor', '#def', 0], ['gradient', 'opacity', '.6', 0],
+    ['gradient', 'backgroundSize', '40px 20px', 0],
+    ['plain', 'backgroundColor', '#fbc', 1], ['plain', 'backgroundColor', 'transparent', 1],
+    ['box', 'color', '#a30', 1], ['box', 'width', '150px', 1],
+  ]) {
+    const before = layouts;
+    const retainedGeometry = await renderer.evaluate(`(() => {
+      document.getElementById(${JSON.stringify(id)}).style[${JSON.stringify(property)}]=${JSON.stringify(value)};
+      return ${geometry};
+    })()`);
+    const label = `${id}.${property}=${value}`;
+    assert.equal(layouts - before, expectedLayouts, `${label}: layout calls while reading geometry`);
+    const retainedPixels = await pixels();
+    // Viewport invalidation forces a complete style/layout pass. Restore the
+    // original viewport before comparing every measured rect and raster pixel.
+    renderer.resize(321, 240, 1);
+    renderer.resize(320, 240, 1);
+    assert.deepEqual(await renderer.evaluate(geometry), retainedGeometry, `${label}: geometry`);
+    assert.deepEqual(await pixels(), retainedPixels, `${label}: pixels`);
+  }
+} finally {
+  renderer.dispose();
+  LayoutEngine.prototype.layout = original;
+}

package/test/fixtures/media-presentation-continuation.js

@@ -0,0 +1,141 @@
+// Isolated: the host realm installs browser globals in this process.
+import { strict as assert } from 'node:assert';
+import { createPageRenderer } from '../../lib/renderer/page-renderer.js';
+import { createBytePipe } from '../../lib/media/byte-pipe.js';
+
+const scenario = process.argv[2], sleep = Bun.sleep, pipe = createBytePipe();
+pipe.append(new Uint8Array(1024));
+const decoders = [], messages = [], errors = [], outputs = [];
+let holdNext = false, finishOpen, changeFormat = false;
+if (scenario === 'epoch') pipe.snapshotAt = time => ({
+  bytes: pipe.bytes(), id: pipe.generation > 1 && time >= 2 ? 'b' : 'a',
+  startTime: pipe.generation > 1 && time >= 2 ? 2 : 0,
+  endTime: pipe.generation > 1 && time < 2 ? 2 : Infinity,
+});
+const renderer = await createPageRenderer({
+  onFrame() {}, onVideo: message => messages.push(message),
+  fetchResource: async () => ({ ok: true, contentType: 'video/mp4', body: pipe }),
+  reportError: error => errors.push(String(error)),
+  videoDecoder: {
+    probe: async () => ({ duration: 30, video: { width: 20, height: 12 }, audio: { sampleRate: 1000 } }),
+    async decode() {
+      const record = { seeks: [], frames: 0, at: 0, closed: 0 };
+      const decoder = {
+        width: changeFormat ? 21 : 20, height: 12, fps: 10,
+        seek(ms) { record.seeks.push(ms); record.at = Math.floor(ms / 1000); },
+        nextFrame(w, h) {
+          record.frames++;
+          const bytes = new Uint8Array(w * h * 4).fill(20 + Math.floor(record.at));
+          record.at += 0.1;
+          return bytes;
+        },
+        close() { record.closed++; },
+      };
+      changeFormat = false;
+      decoders.push(record);
+      if (holdNext) { holdNext = false; await new Promise(resolve => { finishOpen = resolve; }); }
+      return decoder;
+    },
+    decodeAudio: async () => ({ sampleRate: 1000, channels: 1,
+      nextSamples: () => new Float32Array(100), close() {} }),
+  },
+  audio: {
+    open(options, listener) { outputs.push({ listener, samples: 0 }); return outputs.length; },
+    write(id, bytes) { outputs[id - 1].samples += bytes.length / 2; },
+    close(id) { return Promise.resolve(outputs[id - 1].samples * 2); },
+    finish() {},
+  },
+});
+const typed = type => messages.filter(message => message.type === type);
+const waitFor = async condition => {
+  for (let attempt = 0; attempt < 200; attempt++) { if (condition()) return; await sleep(5); }
+  assert.fail(`transition timed out (${scenario}): ${condition}; ${JSON.stringify({
+    messages: messages.map(({ type, id, revision }) => ({ type, id, revision })), decoders, errors,
+  })}`);
+};
+const evaluate = code => renderer.evaluate(code);
+const waiting = () => evaluate('globalThis.waitingEvents');
+try {
+  renderer.resize(240, 180, 1);
+  renderer.setScripting('host');
+  await renderer.loadDocument({ url: 'https://continuation.test/', contentType: 'text/html', source:
+    '<style>body{margin:0}video{width:100px;height:60px;display:block}</style><video id=v src="clip.mp4"></video>' });
+  await renderer.whenLoaded();
+  await evaluate('globalThis.waitingEvents=0;globalThis.v=document.getElementById("v");v.addEventListener("waiting",()=>waitingEvents++);v.play()');
+  outputs.at(-1).listener({ event: 'request', bytes: 20000 });
+  await waitFor(() => typed('video-open').length === 1);
+  const first = typed('video-open')[0], initial = decoders[0], beforeWaiting = await waiting();
+  outputs[0].listener({ event: 'timing', seconds: 1.5, sentSeconds: 10, sinkSeconds: 8.5 });
+  if (scenario !== 'no-growth') pipe.append(new Uint8Array(1024));
+  if (scenario === 'epoch' || scenario === 'no-growth') {
+    renderer.videoReport({ id: first.id, revision: 0, exhaustedAt: 2 });
+    await sleep(20);
+    assert.equal(typed('video-extend').length, 0);
+    assert.equal(decoders.length, 1, 'no speculative decoder for unavailable bytes/new epoch');
+    renderer.videoReport({ id: first.id, revision: 0, end: 2 });
+    await waitFor(() => typed('video-open').length > 1);
+    assert.equal(await waiting(), beforeWaiting + 1);
+  } else {
+    holdNext = true;
+    changeFormat = scenario === 'format';
+    renderer.videoReport({ id: first.id, revision: 0, exhaustedAt: 2 });
+    await waitFor(() => Boolean(finishOpen));
+    const staged = decoders.at(-1);
+    renderer.videoReport({ id: first.id, revision: 0, end: 2 });
+    renderer.videoReport({ id: first.id, revision: 0, exhaustedAt: 2 });
+    assert.equal(decoders.length, 2, 'one staged decoder');
+    assert.equal(await waiting(), beforeWaiting, 'queued EOF does not dispatch waiting');
+    assert.equal(typed('video-stop').length, 0);
+    if (scenario === 'pause' || scenario === 'controls' || scenario === 'seek' || scenario === 'source') {
+      const action = { pause: 'v.pause()', controls: 'v.setAttribute("controls","");v.style.width="101px"',
+        seek: 'v.currentTime=4', source: 'v.src="different.mp4";v.load()' }[scenario];
+      await evaluate(action);
+      await waitFor(() => typed('video-stop').length > 0);
+      finishOpen();
+      await waitFor(() => staged.closed === 1);
+      assert.equal(typed('video-extend').length, 0, 'canceled source/position/layout never extends');
+      assert.equal(staged.closed, 1);
+    } else {
+      finishOpen();
+      if (scenario === 'format') {
+        await waitFor(() => typed('video-open').length > 1);
+        assert.equal(staged.closed, 1);
+        assert.equal(typed('video-extend').length, 0);
+        assert.equal(await waiting(), beforeWaiting + 1);
+      } else {
+        await waitFor(() => typed('video-extend').length === 1);
+        const extension = typed('video-extend')[0];
+        assert.equal(extension.id, first.id);
+        assert.equal(extension.revision, 0);
+        assert.equal(extension.boundary, 2);
+        assert.equal(extension.generation, 2);
+        assert.equal(extension.bytes.length, 2048);
+        if (scenario === 'worker-failure') {
+          renderer.videoReport({ id: first.id, revision: 0, continuationError: 'decoder rejected snapshot' });
+          await waitFor(() => typed('video-open').length > 1);
+          assert.equal(staged.closed, 1);
+          assert.equal(await waiting(), beforeWaiting + 1);
+        } else {
+          renderer.videoReport({ id: first.id, revision: 1, continued: 2 });
+          assert.equal(initial.closed, 1, 'old lazy decoder released after ACK');
+          assert.equal(staged.closed, 0);
+          renderer.videoReport({ id: first.id, revision: 0, end: 2 });
+          renderer.videoReport({ id: first.id, revision: 0, exhaustedAt: 2 });
+          await sleep(20);
+          assert.equal(typed('video-open').length, 1);
+          assert.equal(typed('video-stop').length, 0);
+          assert.equal(await waiting(), beforeWaiting);
+          assert.equal(outputs.length, 1, 'same measured audio stream');
+          assert.equal(await evaluate('v.currentTime'), 1.5);
+          // Local fallback must use the newly opened snapshot, positioned lazily.
+          renderer.videoReport({ id: first.id, error: 'simulated worker close' });
+          await waitFor(() => staged.frames > 0);
+          assert.ok(staged.seeks.length > 0);
+          assert.equal(initial.frames, 1);
+        }
+      }
+    }
+  }
+  assert.deepEqual(errors, []);
+  process.stdout.write(`continuation ${scenario} passed\n`);
+} finally { renderer.dispose(); }