buninu-browser 0.5.1 → 0.7.0

package/test/fixtures/observer-invalidation.js

@@ -0,0 +1,105 @@
+// Host scripting and the style-read counter stay outside the test runner.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { nodeOf } from "../../lib/renderer/bindings.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const font = await Bun.file(new URL("../../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+const sleep = Bun.sleep;
+let finishFont;
+const fontResponse = new Promise(resolve => { finishFont = resolve; });
+const renderer = await createPageRenderer({
+  fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+  pageFetch: () => fontResponse,
+});
+const evaluate = code => renderer.evaluate(code);
+const eventually = async (code, check, message) => {
+  for (let attempt = 0; attempt < 100; attempt++) {
+    const value = await evaluate(code);
+    if (check(value)) return value;
+    await sleep(10);
+  }
+  assert.fail(message);
+};
+const originalGet = StyleEngine.prototype.get;
+try {
+  renderer.resize(400, 300, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://observer.test/", contentType: "text/html", source: `<!doctype html>
+    <style id=sheet>body{margin:0}#box{width:100px;height:50px}
+      body[data-wide] #box{width:175px}
+      #viewport{width:50%;height:10px}
+      #scroller{position:absolute;top:80px;width:100px;height:100px;overflow:auto}
+      #inside{position:absolute;top:150px;width:20px;height:20px}
+      #below{position:absolute;top:500px;width:20px;height:20px}</style>
+    <div id=box></div><div id=viewport></div>
+    <div id=scroller><div style="position:relative;height:300px"><div id=inside></div></div></div>
+    <div id=below></div><div style="height:1000px"></div>` });
+  await renderer.whenLoaded();
+  await evaluate(`window.box=document.getElementById('box');window.sizes=[];window.intersections=[];
+    window.ro=new ResizeObserver(entries=>sizes.push(entries[0].contentRect.width));ro.observe(box);
+    window.io=new IntersectionObserver(entries=>intersections.push(entries[0].isIntersecting));io.observe(box);`);
+  await eventually("sizes.length===1&&intersections.length===1", Boolean, "initial observers should be delivered");
+  // Consume initial focus bookkeeping, then count actual style measurements
+  // of the observed box. Reading body geometry itself cannot touch this box.
+  await evaluate("document.body.setAttribute('data-warm','1');document.body.clientWidth");
+  await sleep(40);
+  const target = nodeOf(globalThis.document.getElementById("box"));
+  let measurements = 0;
+  StyleEngine.prototype.get = function (element) {
+    if (element === target) measurements++;
+    return originalGet.call(this, element);
+  };
+  for (let i = 0; i < 5; i++) {
+    await evaluate(`document.body.setAttribute('data-counter','${i}');document.body.clientWidth`);
+    await sleep(30);
+  }
+  assert.equal(measurements, 0, "metadata flushes must not remeasure unchanged observer targets");
+  assert.deepEqual(await evaluate("[sizes,intersections]"), [[100], [true]]);
+  StyleEngine.prototype.get = originalGet;
+
+  // observe() itself still queues a first measurement without a new version.
+  await evaluate("window.newSizes=[];window.newRO=new ResizeObserver(e=>newSizes.push(e[0].contentRect.width));newRO.observe(box)");
+  await eventually("newSizes[0]", value => value === 100, "new observers must not wait for invalidation");
+  await evaluate("box.style.width='150px';document.body.clientWidth");
+  await eventually("sizes.at(-1)", value => value === 150, "inline size changes must notify");
+  await evaluate("box.style.width='';document.body.setAttribute('data-wide','');document.body.clientWidth");
+  await eventually("sizes.at(-1)", value => value === 175, "selector-observed metadata must still invalidate");
+  await evaluate("document.getElementById('sheet').textContent+='body[data-wide] #box{width:190px}';document.body.clientWidth");
+  await eventually("sizes.at(-1)", value => value === 190, "stylesheet changes must notify");
+
+  await evaluate(`window.insideChanges=[];window.belowChanges=[];window.viewportSizes=[];window.deviceSizes=[];
+    window.insideIO=new IntersectionObserver(e=>insideChanges.push(e[0].isIntersecting));insideIO.observe(document.getElementById('inside'));
+    window.belowIO=new IntersectionObserver(e=>belowChanges.push(e[0].isIntersecting));belowIO.observe(document.getElementById('below'));
+    window.viewportRO=new ResizeObserver(e=>viewportSizes.push(e[0].contentRect.width));viewportRO.observe(document.getElementById('viewport'));
+    window.deviceRO=new ResizeObserver(e=>deviceSizes.push(e[0].devicePixelContentBoxSize[0].inlineSize));deviceRO.observe(box,{box:'device-pixel-content-box'});`);
+  await eventually("insideChanges.length===1&&belowChanges.length===1&&viewportSizes.length===1&&deviceSizes.length===1", Boolean,
+    "scroll/viewport observers should be initialized");
+  assert.deepEqual(await evaluate("[insideChanges,belowChanges,viewportSizes,deviceSizes]"), [[false], [false], [200], [190]]);
+  await evaluate("document.getElementById('scroller').scrollTop=100");
+  await eventually("insideChanges.at(-1)", Boolean, "element scrolling must notify");
+  renderer.scrollTo(0, 450);
+  await eventually("belowChanges.at(-1)", Boolean, "viewport scrolling must notify");
+  renderer.scrollTo(0, 0);
+  renderer.resize(400, 300, 2);
+  await eventually("deviceSizes.at(-1)", value => value === 380, "DPR-only changes must notify without layout invalidation");
+  renderer.resize(600, 300, 2);
+  await eventually("viewportSizes.at(-1)", value => value === 300, "viewport resizing must notify");
+  await evaluate("box.remove();document.body.clientWidth");
+  await eventually("sizes.at(-1)===0&&intersections.at(-1)===false", Boolean, "removing a target must notify");
+  await evaluate("document.body.prepend(box);document.body.clientWidth");
+  await eventually("sizes.at(-1)===190&&intersections.at(-1)===true", Boolean, "reattaching a target must notify");
+
+  // Font completion is a resource invalidation even with no DOM mutation.
+  await evaluate(`document.body.insertAdjacentHTML('beforeend',
+    '<span id=text style="display:inline-block;font-family:ObserverMono,sans-serif;font-size:30px">iiii</span>')`);
+  await evaluate("window.fontSizes=[];window.fontRO=new ResizeObserver(e=>fontSizes.push(e[0].contentRect.width));fontRO.observe(document.getElementById('text'))");
+  const before = await eventually("fontSizes[0]", value => value > 0, "fallback font should be measured");
+  await evaluate(`document.getElementById('sheet').textContent+='@font-face{font-family:ObserverMono;src:url(/font.ttf)}';document.body.clientWidth`);
+  finishFont({ status: 200, body: font });
+  await eventually("fontSizes.at(-1)", value => value > before * 2, "loaded font metrics must notify");
+  process.stdout.write("observer invalidation integration passed\n");
+} finally {
+  StyleEngine.prototype.get = originalGet;
+  renderer.dispose();
+}

package/test/fixtures/prepaint-scheduling.js

@@ -0,0 +1,73 @@
+// Host scripting installs browser globals, so each scenario runs separately.
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+
+const scenario = process.argv[2];
+const frames = [], errors = [], videos = [];
+let finishScript;
+const pendingScript = new Promise(resolve => { finishScript = resolve; });
+const renderer = await createPageRenderer({
+  renderMinInterval: 180,
+  onFrame: ({tile}) => frames.push(tile),
+  onVideo: message => videos.push(message),
+  reportError: error => errors.push(String(error)),
+  fetchResource: async url => {
+    if (url.endsWith('slow.js')) await pendingScript;
+    return {ok:true, url, body:new Uint8Array([32]), contentType:url.endsWith('.js') ? 'text/javascript' : 'video/mp4'};
+  },
+  videoDecoder: {
+    probe: async () => ({duration:10, video:{width:20, height:12}}),
+    decode: async () => ({width:20, height:12, fps:30,
+      nextFrame(w,h) { return new Uint8Array(w*h*4).fill(255); }, seek() {}, close() {}}),
+  },
+});
+
+try {
+  renderer.resize(64,36,1);
+  renderer.setScripting('host');
+  frames.length = 0;
+  const loading = scenario.startsWith('loading');
+  const media = scenario === 'video';
+  await renderer.loadDocument({url:'https://prepaint.test/', contentType:'text/html',
+    source:'<style>body{margin:0}#marker{height:500px;background:red}video{display:block;width:20px;height:12px}</style>'
+      + (media ? '<video id=v src="clip.mp4"></video>' : '') + '<div id=marker></div>'
+      + (loading ? '<script src="slow.js"></script>' : '')});
+
+  if (loading) {
+    await Bun.sleep(400);
+    assert(frames.length > 0);
+    assert(frames.every(tile => tile.height === 36), 'pending scripts must not expand an already visible tile');
+    if (scenario === 'loading-scroll') {
+      renderer.applyCompositorScroll(0,140);
+      await Bun.sleep(90);
+      assert(frames.some(tile => tile.y <= 140 && tile.y+tile.height >= 176),
+        'scrolling beyond the old tile must still paint while loading');
+    }
+    finishScript();
+    await renderer.whenLoaded();
+    // The script has no visual effect: refresh need not call render. The
+    // deferred prepaint still needs to wake and expand the unchanged tile.
+    await Bun.sleep(550);
+    assert(frames.some(tile => tile.height > 36), 'prepaint resumes after a no-op load settles');
+  } else {
+    await renderer.whenLoaded();
+    if (media) {
+      await renderer.evaluate('document.getElementById("v").play()');
+      await Bun.sleep(400);
+      assert(videos.some(message => message.type === 'video-open'));
+      assert(frames.some(tile => tile.height > 36 && tile.videoLayer),
+        'independent video playback alone must not block idle prepaint');
+    } else {
+      await renderer.evaluate('setTimeout(()=>document.documentElement.setAttribute("data-bookkeeping","changed"),1)');
+      await Bun.sleep(80);
+      assert(frames.every(tile => tile.height === 36), 'pending frame takes priority over speculative raster');
+      await Bun.sleep(550);
+      assert(frames.some(tile => tile.height > 36), 'prepaint resumes after a queued no-op frame');
+    }
+  }
+  assert.deepEqual(errors, []);
+  process.stdout.write(`prepaint ${scenario} passed\n`);
+} finally {
+  finishScript();
+  renderer.dispose();
+}

package/test/fixtures/resource-discovery.js

@@ -0,0 +1,32 @@
+// Host scripting is isolated from the test runner's globals.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { nodeOf } from "../../lib/renderer/bindings.js";
+const renderer = await createPageRenderer({
+  fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+});
+try {
+  renderer.resize(400, 300, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://resource.test/", contentType: "text/html",
+    source: '<!doctype html><style>body{color:red}</style><body>' + '<div>Item</div>'.repeat(100) + '</body>' });
+  await renderer.whenLoaded();
+  await renderer.evaluate("document.body.setAttribute('data-warm','1');document.body.clientWidth");
+  const document = nodeOf(globalThis.document), query = document.querySelectorAll.bind(document);
+  const watched = new Set(["video, audio", "img", "style, link[rel~='stylesheet']", "iframe"]);
+  const queries = [];
+  document.querySelectorAll = selector => {
+    if (watched.has(selector)) queries.push(selector);
+    return query(selector);
+  };
+  await renderer.evaluate(`for(let i=0;i<30;i++) {
+    document.body.setAttribute('data-counter',String(i));
+    document.body.setAttribute('aria-label',String(i));
+    document.body.clientWidth;
+  }`);
+  assert.deepEqual(queries, [], "metadata-only geometry flushes retain resource discovery");
+  await renderer.evaluate("document.body.insertAdjacentHTML('beforeend','<video></video>');document.body.clientWidth");
+  assert.ok(queries.includes("video, audio"), "structural insertion refreshes media discovery synchronously");
+  assert.equal(await renderer.evaluate("document.querySelector('video').offsetWidth"), 300);
+  process.stdout.write("resource discovery integration passed\n");
+} finally { renderer.dispose(); }

package/test/fixtures/spare-renderer-scheduling.js

@@ -0,0 +1,124 @@
+// Isolate module/timer mocks from the real renderer integration tests.
+import {mock} from 'bun:test';
+import {strict as assert} from 'node:assert';
+
+let now=0,nextPid=100,heldPid=null;
+const timers=new Set(),hosts=[];
+const originalSetTimeout=globalThis.setTimeout,originalClearTimeout=globalThis.clearTimeout;
+globalThis.setTimeout=(callback,delay,...args)=>{
+  if(delay!==1000&&delay!==30000)return originalSetTimeout(callback,delay,...args);
+  const timer={at:now+delay,callback:()=>callback(...args),unref(){}};
+  timers.add(timer);return timer;
+};
+globalThis.clearTimeout=timer=>{if(!timers.delete(timer))originalClearTimeout(timer);};
+const flush=async()=>{for(let i=0;i<10;i++)await Promise.resolve();};
+const advance=async milliseconds=>{
+  now+=milliseconds;
+  for(const timer of [...timers].sort((a,b)=>a.at-b.at))if(timer.at<=now&&timers.delete(timer))timer.callback();
+  await flush();
+};
+class FakeHost {
+  constructor(options){this.options=options;this.pid=nextPid++;this.generation=0;this.closed=false;hosts.push(this);}
+  start(){
+    if(!this.ready){
+      if(this.pid===heldPid){this.opening=Promise.withResolvers();this.ready=this.opening.promise;}
+      else this.ready=Promise.resolve();
+    }
+    return this.ready;
+  }
+  close(){this.closed=true;}
+  lifecycle(name,generation=this.generation){this.options.onLifecycle(name,generation);}
+  async call(method,...args){
+    if(method==='loadDocument'){
+      this.documentUrl=args[0].url;const generation=++this.generation;
+      this.lifecycle('DOMContentLoaded',generation);
+      if(!this.documentUrl.endsWith('/slow'))this.lifecycle('load',generation);
+      return generation;
+    }
+    if(method==='title')return this.documentUrl;
+  }
+  async composite(){return{x:0,y:0};}
+}
+mock.module('../../lib/renderer/host.js',()=>({RendererHost:FakeHost}));
+const {createBrowser}=await import('../../lib/headless-shell.js');
+const network={
+  documentCookie:()=>'',
+  navigate:async url=>({url,body:new TextEncoder().encode('<title>ok</title>'),contentType:'text/html',status:200,statusText:'OK'}),
+};
+const hostFor=browser=>hosts.find(host=>host.pid===browser.rendererPid);
+const browsers=[];
+try{
+  const browser=await createBrowser({network});browsers.push(browser);
+  assert.equal(hosts.length,2,'first navigation retains its parallel warmed spare');
+  const first=hostFor(browser),initialSpare=browser.sparePid;
+  await browser.context.navigate('https://one.test/slow');
+  assert.equal(browser.rendererPid,initialSpare);
+  assert.equal(browser.sparePid,null);
+  assert.equal(hosts.length,2,'committing a loading page does not immediately start another renderer');
+  assert.ok(first.closed,'cross-origin navigation closes the previous origin');
+  await advance(1000);
+  assert.equal(hosts.length,2);
+  hostFor(browser).lifecycle('load');
+  await advance(999);
+  assert.equal(browser.sparePid,null);
+  await advance(1);
+  assert.equal(hosts.length,3,'load schedules spare startup after one second');
+  const sameOrigin=browser.rendererPid,spare=browser.sparePid;
+  await browser.context.navigate('https://one.test/fast');
+  assert.equal(browser.rendererPid,sameOrigin);
+  assert.equal(browser.sparePid,spare,'same-origin navigation retains an existing spare');
+
+  await browser.context.navigate('https://two.test/slow');
+  assert.equal(browser.rendererPid,spare);
+  assert.ok(hosts.find(host=>host.pid===sameOrigin).closed);
+  await advance(29999);
+  assert.equal(browser.sparePid,null);
+  await advance(1);
+  assert.equal(hosts.length,4,'a missing load event has a bounded fallback');
+
+  await browser.context.navigate('https://three.test/slow');
+  const active=hostFor(browser),oldGeneration=active.generation;
+  await advance(500);
+  await browser.context.navigate('https://three.test/fast');
+  assert.equal(hostFor(browser),active,'same-origin navigation keeps its process');
+  const latestTimer=[...timers][0];
+  active.lifecycle('load',oldGeneration);
+  assert.equal([...timers][0],latestTimer,'a late previous-generation load does not rearm the timer');
+  await advance(1000);
+  assert.equal(hosts.length,5,'load observed before commit is also respected');
+  await browser.context.navigate('https://four.test/slow');
+  browser.close();
+  const beforeClose=hosts.length;
+  await advance(30000);
+  assert.equal(hosts.length,beforeClose,'closing cancels pending prewarming');
+  assert.equal(timers.size,0);
+
+  const disabled=await createBrowser({network,spareRenderer:false});browsers.push(disabled);
+  const beforeDisabled=hosts.length;
+  await disabled.context.navigate('https://disabled.test/fast');
+  await advance(60000);
+  assert.equal(hosts.length,beforeDisabled+1);
+  assert.equal(disabled.sparePid,null);
+  disabled.close();
+
+  // An old spare can be acquired while still starting, then superseded by a
+  // second navigation. Its eventual rejection must not clear the new spare.
+  heldPid=nextPid+1;
+  const competing=await createBrowser({network});browsers.push(competing);
+  const oldSpare=hosts.find(host=>host.pid===heldPid);
+  const failedNavigation=competing.context.navigate('https://failed.test/slow').then(()=>null,error=>error);
+  await flush();
+  await competing.context.navigate('https://replacement.test/fast');
+  await advance(1000);
+  const replacementSpare=competing.sparePid;
+  assert.ok(replacementSpare!==null);
+  oldSpare.opening.reject(Error('expected startup failure'));
+  assert.match(String(await failedNavigation),/expected startup failure/);
+  assert.equal(competing.sparePid,replacementSpare);
+  assert.equal(hosts.find(host=>host.pid===replacementSpare).closed,false);
+  competing.close();
+  process.stdout.write('spare scheduling lifecycle, isolation, cancellation and failure checks passed\n');
+}finally{
+  for(const browser of browsers)browser.close();
+  globalThis.setTimeout=originalSetTimeout;globalThis.clearTimeout=originalClearTimeout;
+}

package/test/fixtures/style-propagation.js

@@ -0,0 +1,26 @@
+import '../../vendor/ses/dist/ses.mjs';
+import assert from 'node:assert/strict';
+import {parseHTMLDocument} from '../../lib/happy-dom/parser.js';
+import {StyleEngine} from '../../lib/style/computed-style.js';
+const {document,window}=parseHTMLDocument('<div id="parent" style="--accent:blue">'+Array.from({length:600},(_,i)=>`<span class="c${i%30}">child ${i}</span>`).join('')+'</div>');
+const sheets=[Array.from({length:30},(_,i)=>`.c${i}{font-size:${14+i%5}px;line-height:1.2;margin:2px;color:var(--accent)}`).join('\n')];
+const parent=document.getElementById('parent'),children=[...parent.children],engine=new StyleEngine().compute(document,sheets);
+lockdown({errorTaming:'safe',overrideTaming:'severe',consoleTaming:'unsafe',localeTaming:'unsafe',stackFiltering:'concise',reporting:'none'});
+try {
+  const retained=children.map(child=>engine.get(child));
+  for(const [property,value]of [['width','200px'],['padding','4px'],['opacity','.5']]){
+    parent.style[property]=value;
+    engine.compute(document,sheets,{},new Set(),new Set([parent]));
+    assert.equal(engine.restyled,1);
+    const full=new StyleEngine().compute(document,sheets);
+    for(const [index,child]of children.entries()){
+      assert.equal(engine.get(child),retained[index]);
+      assert.deepEqual(engine.get(child),full.get(child));
+    }
+  }
+  parent.style.setProperty('--accent','red');
+  engine.compute(document,sheets,{},new Set(),new Set([parent]));
+  assert.equal(engine.restyled,601);
+  const full=new StyleEngine().compute(document,sheets);
+  for(const child of children){assert.equal(engine.get(child).color,'rgba(255, 0, 0, 1)');assert.deepEqual(engine.get(child),full.get(child));}
+}finally{window.happyDOM.abort();}

package/test/fixtures/svg-node-reuse.js

@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import "../../vendor/ses/dist/ses.mjs";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const compute = StyleEngine.prototype.compute;
+let currentDocument;
+StyleEngine.prototype.compute = function (...args) {
+  currentDocument = args[0];
+  return compute.apply(this, args);
+};
+lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe", localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+
+const icon = `<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><g>
+  <path d="M2 2h12v12H2z"/><circle cx="16" cy="16" r="4" fill="blue"/></g></svg>`;
+const source = `<!doctype html><style>body{margin:0;font:14px sans-serif;color:#246}
+  main{display:flex;flex-wrap:wrap;gap:4px}article{box-sizing:border-box;width:150px;padding:3px;
+  border:1px solid #abc;position:relative}h3{font-size:14px;margin:0}svg{vertical-align:middle}
+  .badge{position:absolute;right:2px;top:1px}</style><main>` + Array.from({ length: 6 }, (_, i) =>
+  `<article id="card${i}"><h3>Card ${i}</h3><span class="icons">${icon}${icon}</span>
+  <span class="badge">${i}</span><p>Text within card ${i}.</p></article>`).join("") + "</main>";
+
+async function open(source) {
+  const renderer = await createPageRenderer({
+    fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+  });
+  renderer.resize(480, 360, 1);
+  await renderer.loadDocument({ url: "https://svg-reuse.test/", contentType: "text/html", source });
+  await renderer.whenLoaded();
+  return { renderer, document: currentDocument };
+}
+
+async function capture(renderer) {
+  const geometry = renderer.inspect("article,svg", ["width", "height", "color", "visibility", "transform"], 100);
+  const image = await renderer.screenshot({ format: "rgba" });
+  return { geometry, pixels: Buffer.from(image.pixels) };
+}
+
+try {
+  const live = await open(source), snapshots = [];
+  try {
+    const card = live.document.getElementById("card0"), svg = card.querySelector("svg");
+    const group = svg.querySelector("g"), path = svg.querySelector("path"), circle = svg.querySelector("circle");
+    const phases = [
+      ["initial", () => {}],
+      ["sibling text moves retained cards", () => { live.document.querySelector("#card1 h3").firstChild.data = "Changed title wraps to another line"; }],
+      ["child path", () => path.setAttribute("d", "M1 1h20v8H1z")],
+      ["child fill", () => path.setAttribute("fill", "red")],
+      ["inherited currentColor", () => { path.setAttribute("fill", "currentColor"); card.style.color = "purple"; }],
+      ["descendant currentColor", () => { path.style.color = "green"; }],
+      ["group transform", () => group.setAttribute("transform", "translate(2 3) rotate(15)")],
+      ["child transform", () => circle.setAttribute("transform", "scale(.6)")],
+      ["child visibility", () => { path.style.visibility = "hidden"; }],
+      ["restore child visibility", () => { path.style.visibility = "visible"; }],
+      ["group display", () => { group.style.display = "none"; }],
+      ["restore group display", () => { group.style.display = "inline"; }],
+      ["dimensions", () => { svg.setAttribute("width", "40"); svg.setAttribute("height", "32"); }],
+      ["viewBox", () => svg.setAttribute("viewBox", "0 0 48 48")],
+      ["CSS dimensions", () => { svg.style.width = "50px"; svg.style.height = "44px"; }],
+      ["root transform", () => { svg.style.transform = "translate(8px,5px)"; }],
+      ["root and group opacity", () => { svg.style.opacity = ".4"; group.style.opacity = ".5"; }],
+      ["stroke paint", () => { path.style.stroke = "currentColor"; path.style.strokeWidth = "3px"; path.style.strokeOpacity = ".3"; }],
+      ["fill paint", () => { path.style.fillOpacity = ".2"; path.style.fillRule = "evenodd"; }],
+      ["remove shape", () => circle.remove()],
+      ["reorder shape", () => group.insertBefore(circle, path)],
+      ["auto dimensions", () => { svg.removeAttribute("width"); svg.removeAttribute("height"); svg.style.width = "auto"; svg.style.height = "auto"; }],
+      ["root visibility", () => { svg.style.visibility = "hidden"; }],
+      ["restore markup", () => { card.querySelector(".icons").innerHTML = icon + icon; card.style.color = ""; }],
+    ];
+    for (const [name, mutate] of phases) {
+      mutate();
+      live.renderer.resize(480, 360, 1);
+      snapshots.push({ name, source: live.document.documentElement.outerHTML, actual: await capture(live.renderer) });
+    }
+  } finally { live.renderer.dispose(); }
+
+  for (const { name, source, actual } of snapshots) {
+    const fresh = await open(source);
+    try { assert.deepEqual(actual, await capture(fresh.renderer), `${name}: fresh renderer geometry and pixels`); }
+    finally { fresh.renderer.dispose(); }
+  }
+  process.stdout.write("SVG node reuse renderer oracle passed\n");
+} finally { StyleEngine.prototype.compute = compute; }

package/test/fixtures/video-black-replay.js

@@ -0,0 +1,140 @@
+import assert from 'node:assert/strict';
+import '../../vendor/ses/dist/ses.mjs';
+import {createPageRenderer,loadGraphics} from '../../lib/renderer/page-renderer.js';
+import {compositeVideo} from '../../lib/renderer/video-presentation.js';
+import {captureViewport} from '../../lib/paint/frame.js';
+
+const {CanvasKit:kit} = await loadGraphics();
+lockdown({errorTaming:'safe',overrideTaming:'severe',consoleTaming:'unsafe',localeTaming:'unsafe',stackFiltering:'concise',reporting:'none'});
+let readbacks = 0, checks = 0;
+const makeSurface = kit.MakeSurface;
+kit.MakeSurface = (...args) => {
+  const surface = makeSurface(...args), snapshot = surface.makeImageSnapshot.bind(surface);
+  surface.makeImageSnapshot = () => {
+    const image = snapshot(), read = image.readPixels.bind(image);
+    image.readPixels = (...args) => { readbacks++; return read(...args); };
+    return image;
+  };
+  return surface;
+};
+const source = `<style>body{margin:0;background:#182331;color:white;height:500px}
+#wrap{position:absolute;left:12px;top:14px;width:160px;height:90px;overflow:hidden;border-radius:13px}
+video{display:block;width:160px;height:90px}#caption{position:absolute;left:5px;top:55px;background:#6548;font:12px sans-serif}
+#marker{position:absolute;left:210px;top:10px;width:25px;height:15px;background:red}
+#shadow{position:absolute;left:180px;top:15px;width:5px;height:50px;box-shadow:-5px 3px 12px #0009}
+</style><div id=wrap><video id=v src=clip.mp4></video><span id=caption>Caption</span></div><div id=marker></div><div id=shadow></div>`;
+function framePixels(alpha) {
+  const pixels = new Uint8Array(32*18*4);
+  for (let i=0;i<pixels.length;i+=4) pixels.set([(i*37+13)%256,(i*17+71)%256,(i*53+119)%256,i%20===0?alpha:255],i);
+  return pixels;
+}
+async function makeClient(alpha) {
+  const client = {messages:[],errors:[],tile:null,frame:null};
+  client.renderer = await createPageRenderer({renderMinInterval:1000,
+    allocateFramePixels:bytes=>new Uint8Array(new SharedArrayBuffer(bytes)),
+    onFrame:frame=>{client.tile=frame.tile;},onVideo:message=>client.messages.push(message),
+    reportError:error=>client.errors.push(String(error)),
+    fetchResource:async url=>({ok:true,url,body:new Uint8Array([1]),contentType:'video/mp4'}),
+    videoDecoder:{probe:async()=>({duration:100,video:{width:32,height:18}}),
+      decode:async()=>({width:32,height:18,fps:30,nextFrame:()=>framePixels(alpha),seek(){},close(){}})},
+  });
+  client.renderer.setScripting('ses');client.renderer.resize(320,220,1.25);
+  return client;
+}
+async function load(client,suffix='') {
+  await client.renderer.loadDocument({url:'https://video.test/'+suffix,contentType:'text/html',source});
+  await client.renderer.whenLoaded();await client.renderer.evaluate("document.getElementById('v').play()");
+  await layer(client);
+}
+async function layer(client) {
+  for (let i=0;i<100&&!client.tile?.videoLayer;i++) { await Bun.sleep(5); await client.renderer.screenshot({format:'rgba'}); }
+  assert.ok(client.tile?.videoLayer,'independent presentation exists');
+}
+function seed(client,alpha,serial=2) {
+  const message = client.messages.findLast(message=>message.type==='video-open'&&message.id===client.tile.videoLayer.id);
+  const meta = new Int32Array(message.shared,0,4), pixels = framePixels(alpha);
+  Atomics.store(meta,0,serial-1);new Uint8Array(message.shared,16,pixels.length).set(pixels);
+  Atomics.store(meta,1,32);Atomics.store(meta,2,18);Atomics.store(meta,0,serial);
+  client.frame = {pixels,width:32,height:18};
+  return {meta,shared:message.shared};
+}
+
+for (const alpha of [255,127]) {
+  // The reference never receives a shared frame, so it takes the original
+  // Skia ordinary pass and both mask passes, using identical decoder pixels.
+  const reference = await makeClient(alpha), candidate = await makeClient(alpha), clients = [reference,candidate];
+  async function mutate(expression) { for (const client of clients) await client.renderer.evaluate(expression); }
+  function compare(label,fast=alpha===255) {
+    const before = reference.tile, after = candidate.tile;
+    assert.ok(after.pixels.buffer instanceof SharedArrayBuffer,label+' allocator ownership');
+    assert.equal(Boolean(after.videoLayer),Boolean(before.videoLayer),label+' eligibility');
+    if (before.videoLayer) {
+      assert.deepEqual(after.videoLayer.rect,before.videoLayer.rect,label+' rect');
+      assert.deepEqual(after.videoLayer.base,before.videoLayer.base,label+' base');
+      assert.deepEqual(after.videoLayer.mask,before.videoLayer.mask,label+' mask');
+    }
+    const expected = fast&&before.videoLayer ? compositeVideo(before,candidate.frame).pixels : before.pixels;
+    assert.deepEqual(after.pixels,expected,label+' pixels');checks++;
+  }
+  async function repaint(label,expression,fast=alpha===255) {
+    await mutate(expression);compare(label,fast);
+  }
+  try {
+    for (const client of clients) await load(client);
+    seed(candidate,alpha);
+    const before = readbacks;
+    await reference.renderer.evaluate("document.getElementById('marker').style.background='orange'");
+    const referenceReads = readbacks-before;
+    const middle = readbacks;
+    await candidate.renderer.evaluate("document.getElementById('marker').style.background='orange'");
+    assert.equal(referenceReads,3);assert.equal(readbacks-middle,alpha===255?2:3);compare('warm');
+    const oldTile = candidate.tile, oldPixels = oldTile.pixels.slice(), oldBase = oldTile.videoLayer.base.slice(), oldMask = oldTile.videoLayer.mask.slice();
+    const raw = await candidate.renderer.screenshot({format:'rgba'});
+    assert.deepEqual(raw.pixels,captureViewport(candidate.tile,0,0,320,220).pixels);
+    assert.notEqual(raw.pixels.buffer,candidate.tile.pixels.buffer);
+    const bgra = await candidate.renderer.screenshot({format:'bgra'}), swapped = raw.pixels.slice();
+    for (let i=0;i<swapped.length;i+=4) { const red=swapped[i];swapped[i]=swapped[i+2];swapped[i+2]=red; }
+    assert.deepEqual(bgra.pixels,swapped);
+    const canvasPixels = [];
+    for (const client of clients) canvasPixels.push(await client.renderer.evaluate(`var copy=document.createElement('canvas');copy.width=32;copy.height=18;var cx=copy.getContext('2d');cx.drawImage(document.getElementById('v'),0,0,32,18);Array.from(cx.getImageData(0,0,32,18).data)`));
+    assert.deepEqual(canvasPixels[0],canvasPixels[1],'native video image remains available');
+    for (const [label,expression] of [
+      ['outside',"document.getElementById('marker').style.background='blue'"],
+      ['caption',"document.getElementById('caption').textContent='Changed text'"],
+      ['selection',"var t=document.getElementById('caption').firstChild;getSelection().setBaseAndExtent(t,0,t,5)"],
+      ['selection-clear',"getSelection().removeAllRanges()"],
+      ['opacity',"document.getElementById('wrap').style.opacity='.6'"],
+      ['rounded',"document.getElementById('wrap').style.borderRadius='21px'"],
+      ['transform',"document.getElementById('wrap').style.transform='scale(.9) translateX(7.3px)'"],
+      ['shadow',"document.getElementById('shadow').style.boxShadow='-8px 3px 20px #000b'"],
+    ]) await repaint(label,expression);
+    assert.deepEqual(oldTile.pixels,oldPixels);assert.deepEqual(oldTile.videoLayer.base,oldBase);assert.deepEqual(oldTile.videoLayer.mask,oldMask);
+    // A writer's odd serial must leave the previous coherent native/frame pair.
+    const message = candidate.messages.findLast(message=>message.type==='video-open');
+    Atomics.store(new Int32Array(message.shared,0,4),0,3);
+    new Uint8Array(message.shared,16,32*18*4).fill(0);
+    await repaint('incomplete-shared-frame',"document.getElementById('marker').style.background='lime'");
+    seed(candidate,alpha,4);
+    // Controls alone currently need a separate layout invalidation to refresh
+    // their display-list bit, so force geometry here to exercise the fallback.
+    await repaint('controls',"document.getElementById('v').controls=true;document.getElementById('marker').style.width='26px'",false);
+    assert.equal(candidate.tile.videoLayer,null);
+    await mutate("document.getElementById('v').controls=false;document.getElementById('marker').style.width='27px'");
+    for (const client of clients) await layer(client);seed(candidate,alpha);
+    await repaint('controls-restored',"document.getElementById('marker').style.background='cyan'");
+    await repaint('two-videos',"var extra=document.createElement('video');extra.id='extra';document.body.append(extra)",false);
+    assert.equal(candidate.tile.videoLayer,null);
+    await mutate("document.getElementById('extra').remove()");
+    for (const client of clients) await layer(client);seed(candidate,alpha);
+    await repaint('one-video-restored',"document.getElementById('marker').style.background='pink'");
+    await repaint('paused',"document.getElementById('v').pause()",false);
+    assert.equal(candidate.tile.videoLayer,null);
+    await mutate("document.getElementById('v').play()");
+    for (const client of clients) await layer(client);seed(candidate,alpha);
+    await repaint('resumed',"document.getElementById('marker').style.background='brown'");
+    for (const client of clients) await load(client,'next');seed(candidate,alpha);
+    await repaint('navigation',"document.getElementById('marker').style.background='orange'");
+    for (const client of clients) assert.deepEqual(client.errors,[]);
+  } finally { for (const client of clients) client.renderer.dispose(); }
+}
+console.log(`video black replay integration passed: ${checks} paired states`);