buninu-browser 0.5.1 → 0.6.0

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`);

package/test/fixtures/video-controls-invalidation.js

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { LayoutEngine } from "../../lib/layout/text-layout.js";
+
+let layouts = 0;
+const originalLayout = LayoutEngine.prototype.layout;
+LayoutEngine.prototype.layout = function (...args) {
+  layouts++;
+  return Reflect.apply(originalLayout, this, args);
+};
+const errors = [];
+const renderer = await createPageRenderer({ reportError: error => errors.push(String(error)) });
+await import("../../vendor/ses/dist/ses.mjs");
+lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe",
+  localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+
+const source = controls => `<!doctype html>
+  <style id=sheet>body{margin:0;background:white}video{display:block;width:160px;height:90px}</style>
+  <video id=v ${controls ? "controls" : ""}></video>`;
+const load = async controls => {
+  await renderer.loadDocument({ url: "https://controls.test/", contentType: "text/html", source: source(controls) });
+  await renderer.whenLoaded();
+};
+const snapshot = async () => ({
+  pixels: new Bun.CryptoHasher("sha256").update(Buffer.from(await renderer.screenshot(), "base64")).digest("hex"),
+  geometry: await renderer.evaluate(`JSON.stringify((() => {
+    const rect = document.getElementById("v").getBoundingClientRect();
+    return [rect.x, rect.y, rect.width, rect.height];
+  })())`),
+});
+
+try {
+  renderer.setScripting("ses");
+  renderer.resize(240, 140, 1);
+  const references = [];
+  for (const controls of [false, true]) {
+    await load(controls);
+    references.push(await snapshot());
+  }
+  assert.notEqual(references[0].pixels, references[1].pixels, "native controls visibly change the video");
+  assert.equal(references[0].geometry, references[1].geometry, "native controls retain the video's box");
+
+  await load(false);
+  const transitions = [
+    ["add attribute", true, `document.getElementById("v").setAttribute("controls", "")`],
+    ["remove after style-only read", false, `
+      document.getElementById("v").removeAttribute("controls");
+      getComputedStyle(document.getElementById("v")).color;
+      document.getElementById("v").getBoundingClientRect()`],
+    ["add during full stylesheet pass", true, `
+      document.getElementById("sheet").textContent += " p { color:red }";
+      document.getElementById("v").setAttribute("controls", "")`, true],
+    ["remove after mutation delivery", false, `
+      document.getElementById("v").removeAttribute("controls");
+      new Promise(resolve => setTimeout(resolve, 0))`],
+    ["enable reflected property", true, `document.getElementById("v").controls = true`],
+    ["disable reflected property", false, `document.getElementById("v").controls = false`],
+  ];
+  for (const [name, controls, expression, changesSheet] of transitions) {
+    const before = layouts;
+    await renderer.evaluate(expression);
+    const actual = await snapshot();
+    assert.equal(actual.pixels, references[Number(controls)].pixels, name + " pixels match a fresh document");
+    assert.equal(actual.geometry, references[Number(controls)].geometry, name + " retains geometry");
+    if (!changesSheet) assert.equal(layouts - before, 0, name + " reuses layout");
+  }
+  assert.deepEqual(errors, []);
+  console.log("video controls paint invalidation passed");
+} finally {
+  renderer.dispose();
+}

package/test/fixtures/viewport-bounds.js

@@ -0,0 +1,148 @@
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const originalGet = StyleEngine.prototype.get;
+let counting = false, styleReads = 0, checks = 0;
+StyleEngine.prototype.get = function (element) {
+  if (counting) styleReads++;
+  return originalGet.call(this, element);
+};
+
+await import("../../vendor/ses/dist/ses.mjs");
+lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe",
+  localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+
+function check(condition, message) {
+  if (!condition) throw new Error(message);
+  checks++;
+}
+function equal(actual, expected, message) {
+  check(Bun.deepEquals(actual, expected, true), `${message}: ${JSON.stringify(actual)}`);
+}
+const errors = [];
+const renderer = await createPageRenderer({ embedded: true,
+  reportError: error => errors.push(String(error)) });
+const evaluate = source => renderer.evaluate(source);
+async function countsStyles(source) {
+  styleReads = 0;
+  counting = true;
+  try { return await evaluate(source); }
+  finally { counting = false; }
+}
+const settle = () => Bun.sleep(20);
+
+try {
+  renderer.setScripting("ses");
+  renderer.resize(260, 180, 1);
+  await renderer.loadDocument({ url: "https://bounds.test/", contentType: "text/html", source: `
+    <!doctype html><style>
+      body { margin:0; min-height:1000px; min-width:500px; font:14px sans-serif }
+      #hidden { display:none; --tone:rgb(12,34,56); color:var(--tone) }
+      #leaf { display:inline-block; width:7ch; height:28px; font-family:monospace }
+      #ownNone { display:none }
+      #contents, #emptyContents { display:contents }
+      #fixed { position:fixed; left:140px; top:8px; width:90px; height:55px; background:rgb(0,128,0) }
+      #scroller { width:120px; height:55px; overflow:auto; border:3px solid blue; padding:2px }
+      #inner { width:300px; height:220px }
+      #button { width:80px; height:30px }
+    </style>
+    <div id="hidden"><section id="chain"><span id="leaf">hidden</span></section></div>
+    <div id="ownNone">none</div><div id="emptyContents"></div><span id="emptyInline"></span>
+    <div id="contents"><span id="inline">inline text</span></div>
+    <svg id="svg" width="28" height="24"><path id="path" d="M1 1h20v16H1z" fill="red"/></svg>
+    <div id="fixed"></div><div id="scroller"><div id="inner"></div></div>
+    <button id="button">hit</button>` });
+  await renderer.whenLoaded();
+  await evaluate(`
+    window.leaf=document.getElementById('leaf');
+    window.detached=document.createElement('div');
+    window.rect=e=>{const r=e.getBoundingClientRect();return[r.x,r.y,r.width,r.height]};
+    window.sizes=e=>[...rect(e),e.offsetWidth,e.offsetHeight,e.clientWidth,e.clientHeight,
+      e.scrollWidth,e.scrollHeight,e.scrollLeft,e.scrollTop];
+    window.clicks=0;document.getElementById('button').onclick=()=>clicks++;
+    window.scrolls=0;document.getElementById('scroller').onscroll=()=>scrolls++;
+  `);
+
+  const empty = await countsStyles(`(() => {
+    const elements=['leaf','ownNone','emptyContents','emptyInline','path'].map(id=>document.getElementById(id));
+    elements.push(detached);
+    const range=document.createRange();range.selectNodeContents(leaf);
+    return [...elements.map(sizes),rect({getBoundingClientRect:()=>range.getBoundingClientRect()})];
+  })()`);
+  check(empty.every(values => values.every(value => value === 0)), "boxless geometry is zero");
+  equal(styleReads, 0, "boxless bounds and sizes do not materialize hidden styles");
+  equal(await countsStyles(`(() => {
+    leaf.scrollTo(20,30);leaf.scrollTop=12;leaf.scrollLeft=3;
+    return [leaf.scrollLeft,leaf.scrollTop];
+  })()`), [0, 0], "hidden scroll setters remain ineffective");
+  equal(styleReads, 0, "hidden scroll setters do not read styles");
+
+  const css = await countsStyles(`(() => {
+    const s=getComputedStyle(leaf);return[s.color,s.width,s.getPropertyValue('--tone')];
+  })()`);
+  equal([css[0], css[2]], ["rgba(12, 34, 56, 1)", "rgb(12,34,56)"], "explicit hidden CSS still resolves");
+  check(css[1].endsWith("px") && Number.parseFloat(css[1]) > 0, "hidden ch width resolves to positive pixels");
+  check(styleReads > 0, "explicit CSS materializes the deferred style");
+  await evaluate(`leaf.style.width='81px';leaf.style.height='29px';leaf.style.color='rgb(9,8,7)';
+    document.getElementById('hidden').style.setProperty('--tone','purple')`);
+  equal(await evaluate(`(() => {const s=getComputedStyle(leaf);
+    return[s.width,s.height,s.color,s.getPropertyValue('--tone')];})()`),
+    ["81px", "29px", "rgba(9, 8, 7, 1)", "purple"], "hidden CSS updates remain live");
+
+  const rendered = await evaluate(`['inline','contents','svg'].map(id=>rect(document.getElementById(id)))`);
+  check(rendered[0][2] > 0 && rendered[1][2] > 0, "inline and display-contents text retain bounds");
+  equal(rendered[2].slice(2), [28, 24], "SVG retains its rendered dimensions");
+
+  await evaluate(`window.resizeWidths=[];window.intersections=[];
+    window.ro=new ResizeObserver(es=>resizeWidths.push(es[0].contentRect.width));ro.observe(leaf);
+    window.io=new IntersectionObserver(es=>intersections.push(es[0].isIntersecting));io.observe(leaf)`);
+  await settle();
+  equal(await evaluate(`[resizeWidths.length,intersections.at(-1)]`), [0, false], "initial zero size does not notify ResizeObserver");
+  await evaluate(`document.getElementById('hidden').style.display='block'`);
+  await settle();
+  equal(await evaluate(`[resizeWidths.at(-1),intersections.at(-1)]`), [81, true], "reveal updates observer geometry");
+  await evaluate(`document.getElementById('hidden').style.display='none'`);
+  await settle();
+  equal(await evaluate(`[resizeWidths.at(-1),intersections.at(-1)]`), [0, false], "hiding updates observer geometry");
+
+  await evaluate(`document.getElementById('fixed').append(leaf)`);
+  const fixed = await evaluate(`rect(leaf)`);
+  renderer.scrollTo(60, 130);
+  equal(await evaluate(`rect(leaf)`), fixed, "a fixed ancestor cancels viewport scrolling");
+  renderer.scrollTo(0, 0);
+  await evaluate(`document.getElementById('inner').append(leaf)`);
+  const beforeScroll = await evaluate(`rect(leaf)`);
+  await evaluate(`document.getElementById('scroller').scrollTo(60,70)`);
+  await settle();
+  const afterScroll = await evaluate(`rect(leaf)`);
+  equal(afterScroll, [beforeScroll[0] - 60, beforeScroll[1] - 70, beforeScroll[2], beforeScroll[3]],
+    "scroll-container offsets remain part of viewport bounds");
+  check(await evaluate("scrolls > 0"), "scroll event still fires");
+  await evaluate(`leaf.style.visibility='hidden'`);
+  equal(await evaluate(`rect(leaf)`), afterScroll, "visibility hidden retains geometry");
+  await evaluate(`leaf.style.visibility='visible';leaf.style.transform='translate(8px,5px)'`);
+  const translated = await evaluate(`rect(leaf)`);
+  equal(translated, [afterScroll[0] + 8, afterScroll[1] + 5, afterScroll[2], afterScroll[3]],
+    "translated coordinates remain intact");
+
+  await evaluate(`leaf.remove()`);
+  equal(await countsStyles("sizes(leaf)"), Array(12).fill(0), "detached geometry is zero");
+  equal(styleReads, 0, "detached geometry does not read stale styles");
+  await evaluate(`document.getElementById('chain').append(leaf);window.destroyed=document.getElementById('chain');
+    document.getElementById('hidden').innerHTML=''`);
+  equal(await countsStyles("[...sizes(leaf),...sizes(destroyed)]"), Array(24).fill(0), "removed subtree has no geometry");
+  equal(styleReads, 0, "removed subtree does not materialize styles");
+
+  renderer.resize(220, 160, 2);
+  const image = await renderer.screenshot({ format: "rgba" });
+  equal([image.width, image.height], [440, 320], "DPR scales the raster");
+  const pixel = (100 * image.width + 400) * 4;
+  equal([...image.pixels.slice(pixel, pixel + 4)], [0, 128, 0, 255], "fixed box still paints at the expected viewport position");
+  const button = await evaluate("rect(document.getElementById('button'))");
+  renderer.click(button[0] + 10, button[1] + 10);
+  equal(await evaluate("clicks"), 1, "visible geometry still targets pointer activation");
+  equal(errors, [], "renderer reports no errors");
+  console.log(JSON.stringify({ passed: true, checks }));
+} finally {
+  renderer.dispose();
+}