buninu-browser 0.5.1 → 0.7.0

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(); }

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

@@ -0,0 +1,113 @@
+// Isolated because host scripting 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 sleep = Bun.sleep, pipe = createBytePipe();
+pipe.append(new Uint8Array(1024));
+const decoders = [], messages = [], errors = [], outputs = [];
+let holdNext = false, finishOpen;
+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};
+      const decoder = {width: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() {},
+      };
+      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 currentPresentation = () => messages.filter(message=>message.type==='video-open').at(-1);
+const opens = () => messages.filter(message=>message.type==='video-open').length;
+const waitFor = async condition => {
+  for (let attempt=0;attempt<200;attempt++) {if(condition())return;await sleep(5);}
+  assert.fail(`timed out waiting for media transition: ${condition}; ${JSON.stringify({decoders, messages:messages.map(({type,id})=>({type,id})),errors})}`);
+};
+const clock = seconds => outputs.at(-1).listener({event:'timing',seconds,sentSeconds:10,sinkSeconds:10-seconds});
+const beginRefill = seconds => {
+  holdNext=true;finishOpen=null;
+  pipe.append(new Uint8Array(1024));
+  clock(seconds);
+  renderer.videoReport({id:currentPresentation().id,end:seconds});
+};
+try {
+  renderer.resize(240,180,1);renderer.setScripting('host');
+  await renderer.loadDocument({url:'https://refill.test/',contentType:'text/html',source:
+    '<style>body{margin:0}video{width:100px;height:60px;display:block}#second{display:none}</style><video id=v src="clip.mp4"></video><video id=second></video>'});
+  await renderer.whenLoaded();
+  await renderer.evaluate('document.getElementById("v").play()');
+  outputs.at(-1).listener({event:'request',bytes:20000});
+  await waitFor(()=>Boolean(currentPresentation()));
+  assert.equal(outputs.length,1);
+
+  // A real presentation refills without probing/decoding the same prefix on
+  // the page thread. Audio continues to own time and keeps its output stream.
+  const firstOpens=opens();
+  beginRefill(2);
+  await waitFor(()=>Boolean(finishOpen));
+  const resumed=decoders.at(-1);
+  finishOpen();
+  await waitFor(()=>opens()>firstOpens);
+  assert.deepEqual(resumed.seeks,[]);
+  assert.equal(resumed.frames,0);
+  assert.equal(currentPresentation().time,2);
+  assert.equal(await renderer.evaluate('document.getElementById("v").currentTime'),2);
+  assert.equal(outputs.length,1,'refilling does not reset the measured audio stream');
+
+  // Controls enabled during the async reopen prevent presentation: the lazy
+  // page decoder must seek before it can draw an ordinary local frame.
+  const controlOpens=opens();
+  beginRefill(3);
+  await waitFor(()=>Boolean(finishOpen));
+  await renderer.evaluate('document.getElementById("v").setAttribute("controls", "")');
+  const controls=decoders.at(-1);
+  finishOpen();
+  await waitFor(()=>controls.frames>0);
+  assert.ok(controls.seeks.length>0);
+  assert.equal(controls.seeks[0],3000);
+  assert.equal(opens(),controlOpens);
+  assert.equal(await renderer.evaluate('document.getElementById("v").currentTime'),3);
+
+  await renderer.evaluate('document.getElementById("v").removeAttribute("controls");document.getElementById("v").style.width="101px"');
+  await waitFor(()=>opens()>controlOpens);
+  const multipleOpens=opens();
+  beginRefill(4);
+  await waitFor(()=>Boolean(finishOpen));
+  await renderer.evaluate('document.getElementById("second").style.display="block"');
+  const multiple=decoders.at(-1);
+  finishOpen();
+  await waitFor(()=>multiple.frames>0);
+  assert.ok(multiple.seeks.length>0);
+  assert.equal(multiple.seeks[0],4000);
+  assert.equal(opens(),multipleOpens,'multiple visible videos retain local decoding');
+
+  await renderer.evaluate('document.getElementById("second").style.display="none"');
+  await waitFor(()=>opens()>multipleOpens);
+  const fallback=decoders.at(-1), beforeFallback=fallback.frames;
+  renderer.videoReport({id:currentPresentation().id,error:'simulated decoder failure'});
+  await waitFor(()=>fallback.frames>beforeFallback);
+  assert.ok(fallback.seeks.length>0,'failed presentation positions the page decoder');
+  await renderer.evaluate('document.getElementById("v").pause()');
+  const paused=await renderer.evaluate('document.getElementById("v").currentTime');
+  clock(5);
+  assert.equal(await renderer.evaluate('document.getElementById("v").currentTime'),paused);
+  assert.deepEqual(errors,[]);
+  process.stdout.write('presentation refill avoids duplicate page decode and preserves fallbacks\n');
+} finally {renderer.dispose();}

package/test/fixtures/media-probe.js

@@ -0,0 +1,148 @@
+// 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';
+
+const scenario = process.argv[2], sleep = Bun.sleep;
+const probes = [], pending = [], errors = [];
+let hold = scenario.startsWith('initial') && scenario !== 'initial-rejected';
+let failNext = scenario === 'initial-rejected';
+const renderer = await createPageRenderer({
+  reportError: error => errors.push(String(error)),
+  fetchResource: async () => ({ ok: true, contentType: 'video/mp4', body: new Uint8Array(8) }),
+  videoDecoder: {
+    async probe(bytes) {
+      const input = { length: bytes.length, hash: Bun.hash(bytes).toString() };
+      probes.push(input);
+      if (failNext) { failNext = false; throw Error('temporary probe failure'); }
+      if (hold) return new Promise(resolve => pending.push(resolve));
+      return metadata(bytes.length);
+    },
+    decode: async () => ({ width: 20, height: 12, fps: 1, close() {}, seek() {},
+      nextFrame: (w, h) => new Uint8Array(w * h * 4) }),
+  },
+});
+const metadata = duration => ({ duration, video: { width: 20, height: 12 } });
+const evaluate = code => renderer.evaluate(code);
+const waitFor = async condition => {
+  for (let attempt = 0; attempt < 150; attempt++) { if (await condition()) return; await sleep(5); }
+  assert.fail(`probe transition timed out: ${scenario}; ${JSON.stringify({ probes, pending: pending.length, errors })}`);
+};
+const append = buffer => evaluate(`new Promise(resolve => {
+  ${buffer}.addEventListener('updateend', resolve, {once:true});
+  ${buffer}.appendBuffer(new Uint8Array([0,0,0,8,102,114,101,101]));
+})`);
+const count = () => evaluate('metadataEvents');
+const duration = () => evaluate('v.duration');
+const finishInitial = async () => {
+  await waitFor(async () => await count() === 1);
+  await evaluate('v.pause()');
+  await sleep(10);
+};
+try {
+  renderer.setScripting('host'); renderer.resize(240, 180, 1);
+  await renderer.loadDocument({ url: 'https://probe.test/', contentType: 'text/html',
+    source: '<!doctype html><video id="v"></video>' });
+  await renderer.whenLoaded();
+  await evaluate(`new Promise(resolve => {
+    globalThis.metadataEvents=0; globalThis.v=document.getElementById('v');
+    v.addEventListener('loadedmetadata',()=>metadataEvents++);
+    globalThis.ms=new MediaSource();
+    ms.addEventListener('sourceopen',()=>{
+      globalThis.vb=ms.addSourceBuffer('video/mp4');
+      globalThis.ab=ms.addSourceBuffer('audio/mp4');
+      globalThis.probeWaits=0;
+      { const pipe=ms.streamPipes().video, original=pipe.waitFor;
+        pipe.waitFor=mark=>{probeWaits++;return original(mark)}; }
+      ${scenario.startsWith('epoch') ? `const pipe=ms.streamPipes().video, original=pipe.snapshotAt;
+      pipe.snapshotAt=seconds=>({...original(seconds),id:seconds>=2?'late':'early'});` : ''}
+      ${scenario === 'moving-snapshot' ? `const pipe=ms.streamPipes().video, original=pipe.snapshotAt;
+      pipe.snapshotAt=seconds=>({...original(seconds),startTime:Math.floor(seconds/0.02)*0.02});` : ''}
+      void v.play(); resolve();
+    },{once:true});
+    v.src=URL.createObjectURL(ms);
+  })`);
+  await append('vb');
+  if (scenario === 'initial-rejected') {
+    await waitFor(() => probes.length === 1);
+    await sleep(10);
+    const waits = await evaluate('probeWaits');
+    for (let i = 0; i < 5; i++) await append('ab');
+    await sleep(15);
+    assert.equal(probes.length, 1, 'unchanged rejected initial bytes wait for video growth');
+    assert.equal(await evaluate('probeWaits'), waits, 'audio appends do not accumulate pending video waiters');
+    await append('vb'); await finishInitial();
+    assert.equal(probes.length, 2); assert.equal(await count(), 1);
+  } else if (scenario.startsWith('initial')) {
+    await waitFor(() => pending.length === 1);
+    await append('ab'); await append('ab'); await sleep(15);
+    assert.equal(probes.length, 1, 'loadMedia and first append share one initial probe');
+    if (scenario === 'initial-growth') {
+      await append('vb'); await append('vb');
+      pending.shift()(metadata(8));
+      await waitFor(() => pending.length === 1);
+      assert.equal(probes.length, 2, 'one latest-input recheck after coalesced appends');
+      assert.equal(await count(), 0, 'obsolete initial input cannot publish metadata');
+      hold = false; pending.shift()(metadata(24));
+      await finishInitial(); assert.equal(await duration(), 24);
+    } else if (scenario === 'initial-source') {
+      await evaluate('v.src="replacement.mp4";v.load()');
+      hold = false; pending.shift()(metadata(123));
+      await sleep(25); assert.equal(await count(), 1);
+      assert.equal(await duration(), 8, 'only the replacement source can publish metadata');
+    } else {
+      hold = false; pending.shift()(metadata(8));
+      await finishInitial(); assert.equal(await count(), 1);
+      await append('ab'); await sleep(15);
+      assert.equal(probes.length, 1, 'initial probe does not leave a blocked duplicate waiter');
+    }
+  } else {
+    await finishInitial(); assert.equal(probes.length, 1);
+    if (scenario === 'audio-only') {
+      await append('vb'); await waitFor(() => probes.length === 2);
+      for (let i = 0; i < 5; i++) await append('ab');
+      await sleep(20); assert.equal(probes.length, 2, 'audio appends reuse unchanged video metadata');
+      assert.equal(await count(), 1);
+    } else if (scenario === 'refresh-growth' || scenario === 'pipe-change') {
+      hold = true; await append('vb'); await waitFor(() => pending.length === 1);
+      if (scenario === 'pipe-change') await evaluate('ms.removeSourceBuffer(vb);globalThis.vb=ms.addSourceBuffer("video/mp4")');
+      await append('vb'); await append('vb');
+      assert.equal(probes.length, 2, 'no parallel refresh');
+      pending.shift()(metadata(20));
+      await waitFor(() => pending.length === 1);
+      assert.equal(probes.length, 3); assert.equal(await duration(), 8, 'stale pipe/generation cannot overwrite metadata');
+      hold = false; pending.shift()(metadata(40));
+      await waitFor(async () => await duration() === 40);
+      assert.equal(await count(), 1);
+    } else if (scenario === 'failed-retry') {
+      failNext = true; await append('vb'); await waitFor(() => probes.length === 2);
+      await append('ab'); await waitFor(() => probes.length === 3);
+      assert.deepEqual(probes[1], probes[2], 'same failed snapshot is retryable');
+      await append('ab'); await sleep(15); assert.equal(probes.length, 3);
+    } else if (scenario === 'mime-change') {
+      await evaluate('vb.changeType("video/webm")'); await append('ab');
+      await waitFor(() => probes.length === 2);
+      assert.deepEqual(probes[0], probes[1], 'MIME change invalidates identical byte input');
+    } else if (scenario === 'epoch-inflight') {
+      hold = true; await append('vb'); await waitFor(() => pending.length === 1);
+      await evaluate('v.currentTime=3'); pending.shift()(metadata(20));
+      await waitFor(() => pending.length === 1);
+      assert.equal(probes.length, 3);
+      assert.equal(await duration(), 8, 'seek to another epoch rejects old in-flight metadata');
+      hold = false; pending.shift()(metadata(40));
+      await waitFor(async () => await duration() === 40);
+    } else if (scenario === 'moving-snapshot') {
+      hold = true; await append('vb'); await waitFor(() => pending.length === 1);
+      await evaluate('v.currentTime=3');
+      hold = false; pending.shift()(metadata(20));
+      await waitFor(async () => await duration() === 20);
+      await sleep(20);
+      assert.equal(probes.length, 2, 'clock movement alone cannot restart an in-flight snapshot probe');
+    } else if (scenario === 'epoch') {
+      await evaluate('v.currentTime=3'); await sleep(20); await append('ab');
+      await waitFor(() => probes.length === 2);
+      assert.deepEqual(probes[0], probes[1], 'snapshot epoch invalidates identical bytes and generation');
+    }
+  }
+  assert.deepEqual(errors, []);
+  process.stdout.write(`media probe ${scenario} passed\n`);
+} finally { renderer.dispose(); }

package/test/fixtures/media-refill-cancel.js

@@ -0,0 +1,79 @@
+// Host scripting globals are isolated from the test runner.
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+import {createBytePipe} from '../../lib/media/byte-pipe.js';
+
+const action = process.argv[2], sleep = Bun.sleep, pipe = createBytePipe();
+pipe.append(new Uint8Array(1024));
+let decodeCount = 0, rejectAudio;
+const outputs = [], errors = [];
+const renderer = await createPageRenderer({
+  onFrame() {}, onVideo() {}, reportError:error => errors.push(String(error)),
+  fetchResource:async () => ({ok:true, contentType:'video/mp4', body:pipe}),
+  videoDecoder:{
+    probe:async () => ({duration:30, video:{width:20,height:12}, audio:{sampleRate:1000}}),
+    decode:async () => ({width:20,height:12,fps:10, seek() {}, close() {},
+      nextFrame:(w,h) => new Uint8Array(w*h*4)}),
+    async decodeAudio() {
+      decodeCount++;
+      if (decodeCount === 2) await new Promise((resolve, reject) => {rejectAudio=reject;});
+      let position = 0;
+      return {sampleRate:1000,channels:1, close() {}, nextSamples() {
+        if (position >= 1000) return null;
+        position += 100;
+        return new Float32Array(100);
+      }};
+    },
+  },
+  audio:{
+    open(options, listener) {outputs.push({listener,bytes:0});return outputs.length;},
+    write(id, bytes) {outputs[id-1].bytes+=bytes.length;},
+    close(id) {return Promise.resolve(outputs[id-1].bytes);}, finish() {},
+  },
+});
+const waitFor = async condition => {
+  for(let n=0;n<200;n++) {if(condition())return;await sleep(5);}
+  assert.fail(`timed out: ${condition}`);
+};
+try {
+  renderer.resize(240,180,1);renderer.setScripting('host');
+  await renderer.loadDocument({url:'https://refill-cancel.test/',contentType:'text/html',source:
+    '<style>video{width:100px;height:60px;display:block}</style><video id=v src="clip.mp4"></video>'});
+  await renderer.whenLoaded();
+  await renderer.evaluate('globalThis.mediaEvents=[]; const v=document.getElementById("v"); v.addEventListener("error",()=>mediaEvents.push("error")); v.addEventListener("seeked",()=>mediaEvents.push("seeked")); v.play()');
+  // The old snapshot ends at sample 1000; the newer, now-complete input
+  // makes the replacement decoder's rejection a fatal error if still active.
+  pipe.finish();
+  outputs[0].listener({event:'request',bytes:3000});
+  await waitFor(() => Boolean(rejectAudio));
+
+  if (action === 'seek') await renderer.evaluate('document.getElementById("v").currentTime=0.2');
+  else if (action === 'pause') await renderer.evaluate('document.getElementById("v").pause()');
+  else if (action === 'navigate') {
+    // The replacement is a static page; it does not need another host realm.
+    renderer.setScripting('off');
+    await renderer.loadDocument({url:'https://refill-cancel.test/next',contentType:'text/html',source:'<p id=next>Next document</p>'});
+    await renderer.whenLoaded();
+  } else assert.fail(`unknown action: ${action}`);
+
+  rejectAudio(Error('obsolete failed audio refill'));
+  if (action === 'seek') {
+    for(let n=0;n<200;n++) {
+      if (await renderer.evaluate('mediaEvents.includes("seeked")')) break;
+      await sleep(5);
+    }
+    assert.equal(await renderer.evaluate('mediaEvents.includes("seeked")'),true);
+    assert.equal(await renderer.evaluate('document.getElementById("v").paused'),false);
+    assert.equal(await renderer.evaluate('document.getElementById("v").currentTime'),0.2);
+    assert.equal(await renderer.evaluate('mediaEvents.includes("error")'),false);
+  } else {
+    await sleep(80);
+    if (action === 'pause') {
+      assert.equal(await renderer.evaluate('document.getElementById("v").paused'),true);
+      assert.equal(await renderer.evaluate('mediaEvents.includes("error")'),false);
+    } else assert.equal(await renderer.evaluate('document.body.textContent'),'Next document');
+  }
+  assert.deepEqual(errors,[]);
+  assert.equal(decodeCount,2,'an obsolete rejection must not close and reopen the media');
+  process.stdout.write(`${action} ignores an obsolete refill rejection\n`);
+} finally {renderer.dispose();}

package/test/fixtures/media-repaint.js

@@ -0,0 +1,48 @@
+// Isolated because host scripting installs browser globals in this process.
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+const sleep=Bun.sleep, report=text=>process.stdout.write(text+'\n');
+const errors=[],frames=[],messages=[];
+let seeked=0;
+const renderer=await createPageRenderer({
+  renderMinInterval:80,
+  onFrame:frame=>frames.push(frame.tile),onVideo:message=>messages.push(message),
+  fetchResource:async url=>({ok:true,url,body:new Uint8Array([1]),contentType:'video/mp4'}),
+  reportError:error=>errors.push(String(error)),
+  videoDecoder:{
+    probe:async()=>({duration:10,video:{width:20,height:12}}),
+    decode:async()=>({width:20,height:12,fps:100,
+      nextFrame(w,h){const data=new Uint8Array(w*h*4);for(let i=0;i<data.length;i+=4)data.set([60+seeked,90,120,255],i);return data;},
+      seek(ms){seeked=Math.floor(ms/100);},close(){}}),
+  },
+});
+function pixel(tile,x,y){const at=(Math.round((y-tile.y)*tile.scale)*tile.pixelWidth+Math.round((x-tile.x)*tile.scale))*4;return [...tile.pixels.subarray(at,at+4)];}
+try{
+  renderer.resize(240,180,1);renderer.setScripting('host');
+  await renderer.loadDocument({url:'https://media.test/',contentType:'text/html',source:'<style>body{margin:0}video{display:block;width:200px;height:120px}#marker{width:20px;height:20px;background:red}</style><video id=v src="clip.mp4"></video><div id=marker></div><video id=native src="clip.mp4" controls style="display:none"></video>'});
+  await renderer.whenLoaded();
+  await renderer.evaluate('document.getElementById("v").play()');
+  await sleep(160);
+  assert.ok(messages.some(message=>message.type==='video-open'),'first metadata/play starts independent presentation');
+  assert.ok(frames.at(-1).videoLayer);
+  frames.length=0;
+  await renderer.evaluate('setTimeout(()=>{document.getElementById("marker").style.background="blue"},1)');
+  await sleep(180);
+  assert.ok(frames.length>0,'scheduled UI frame is still published');
+  assert.ok(frames.every(tile=>pixel(tile,5,125).join(',')==='0,0,255,255'),'media ticks must not publish stale red UI before the scheduled rebuild');
+  await renderer.evaluate('document.getElementById("v").pause()');
+  assert.ok(messages.some(message=>message.type==='video-stop'),'pause stops independent presentation');
+  assert.equal(frames.at(-1).videoLayer,null,'paused frame returns to normal raster');
+  await renderer.evaluate('document.getElementById("v").currentTime=3');
+  await sleep(80);
+  assert.ok(seeked>0,'paused seek positions the decoder');
+  assert.ok(pixel(frames.at(-1),5,5)[0]>60,'paused seek publishes its decoded picture');
+  await renderer.evaluate('document.getElementById("v").style.display="none";document.getElementById("native").style.display="block"');
+  await renderer.evaluate('document.getElementById("native").play()');
+  const before=frames.length;
+  await sleep(140);
+  assert.ok(frames.length>before,'native controls/local playback continue repainting');
+  assert.equal(frames.at(-1).videoLayer,null,'native controls retain the normal rendering path');
+  await renderer.evaluate('document.getElementById("native").pause()');
+  assert.deepEqual(errors,[]);report('media repaint integration passed');
+}finally{renderer.dispose();}