buninu-browser 0.2.3 → 0.3.0

package/test/fixtures/browser-raw-demo.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Browser raw frame demo</title>
+<style>body{margin:0;padding:32px;background:#10252f;color:#e4f4fa;font:22px sans-serif}h1{color:#63dedb}a{color:#73d8ff}.box{padding:20px;margin:16px 0;background:#183c4c;border:2px solid #3b7a8d}.track{height:75px;background:#244451;position:relative;overflow:hidden}#bar{position:absolute;left:0;top:0;width:150px;height:75px;background:#49d6c8}.stripe{height:70px;padding:15px;margin-top:10px}</style>
+</head>
+<body>
+<h1>Buninu Browser · Raw BGRA</h1>
+<div class="box">這是 buninu-browser 自己繪製的頁面，不是 Firefox 或 Chromium。<br>Raw 像素經 Casty 傳給 bunterm。請試著捲動、點網址列，或瀏覽其他網站。</div>
+<div class="track">
+<div id="bar">
+</div>
+</div>
+<p id="tick">Animation starting…</p>
+<p>
+<a href="https://example.com">example.com</a> · <a href="https://www.wikipedia.org">Wikipedia</a>
+</p>
+<div class="stripe" style="background:rgb(30,55,75)">Scroll test 1 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(35,62,80)">Scroll test 2 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(40,69,85)">Scroll test 3 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(45,76,90)">Scroll test 4 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(50,83,95)">Scroll test 5 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(55,90,100)">Scroll test 6 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(60,97,105)">Scroll test 7 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(65,104,110)">Scroll test 8 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(70,111,115)">Scroll test 9 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(75,118,120)">Scroll test 10 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(80,125,125)">Scroll test 11 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(85,132,130)">Scroll test 12 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(90,139,135)">Scroll test 13 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(95,146,140)">Scroll test 14 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(100,153,145)">Scroll test 15 — 中文 ABC 0123456789</div>
+<script>let n=0;setInterval(()=>{n++;document.getElementById('bar').style.left=((n*7)%900)+'px';document.getElementById('tick').textContent='Animation tick: '+n;},50);</script>
+</body>
+</html>

package/test/fixtures/canvas-paint.js

@@ -0,0 +1,117 @@
+import { strict as assert } from "node:assert";
+import { createPageRenderer, loadGraphics } from "../../lib/renderer/page-renderer.js";
+const sleep = Bun.sleep, now = Date.now;
+const { CanvasKit: kit } = await loadGraphics();
+const redPng = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAIAAAA2iEnWAAAAEElEQVR4nGP4z8AARAwoFABE0AX7pM/egAAAAABJRU5ErkJggg==", "base64");
+let frames = 0;
+const corsRequests = [];
+const renderer = await createPageRenderer({ onFrame: () => frames++,
+  fetchResource: async url => ({ ok: true, status: 200, url, body: redPng }),
+  pageFetch: async request => {
+    corsRequests.push(request);
+    if (request.url.includes("denied")) throw new TypeError("CORS disallowed");
+    return { status: 200, url: request.url, body: new Blob([redPng]).stream() };
+  },
+});
+async function pixel(x = 1, y = 1) {
+  const image = kit.MakeImageFromEncoded(Buffer.from(await renderer.screenshot(), "base64"));
+  try { return [...image.readPixels(x, y, { width: 1, height: 1, colorType: kit.ColorType.RGBA_8888,
+    alphaType: kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB })]; }
+  finally { image.delete(); }
+}
+try {
+  renderer.resize(400, 300, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://canvas.test/", contentType: "text/html",
+    source: `<body style="margin:0"><canvas id=c style="display:block">fallback must not appear</canvas><span id=after>after</span><script>
+      window.canvas = document.getElementById('c'); window.ctx = canvas.getContext('2d');
+      ctx.fillStyle='red';ctx.fillRect(0,0,300,150);
+    </script>` });
+  await renderer.whenLoaded();
+  assert.deepEqual(renderer.inspect("canvas")[0].box, { x: 0, y: 0, width: 300, height: 150 });
+  assert.ok(renderer.inspect("#after")[0].box.y >= 150);
+  assert.deepEqual(await pixel(), [255, 0, 0, 255]);
+  assert.equal(await renderer.evaluate("ctx.canvas === canvas"), true);
+  assert.equal(await renderer.evaluate("ctx.Hd === undefined"), true, "native internals are not page APIs");
+  assert.equal((await renderer.evaluate("document.body.innerText")).includes("fallback"), false);
+  const initial = frames;
+  await renderer.evaluate("ctx.fillStyle='blue';ctx.fillRect(0,0,300,150)");
+  assert.deepEqual(await pixel(), [0, 0, 255, 255], "drawing alone invalidates paint");
+  assert.ok(frames > initial);
+  await renderer.evaluate("ctx.clearRect(0,0,300,150)");
+  assert.deepEqual(await pixel(), [255, 255, 255, 255], "transparent canvas shows page background");
+  await renderer.evaluate("ctx.fillStyle='green';ctx.fillRect(0,0,300,150);canvas.width=100");
+  assert.equal(renderer.inspect("canvas")[0].box.width, 100);
+  assert.deepEqual(await pixel(), [255, 255, 255, 255], "width reset clears displayed bitmap");
+  await renderer.evaluate("canvas.style.width='200px';canvas.style.height='100px';ctx.fillStyle='red';ctx.fillRect(0,0,50,150)");
+  assert.deepEqual(await pixel(99, 50), [255, 0, 0, 255]);
+  assert.deepEqual(await pixel(101, 50), [255, 255, 255, 255]);
+  await renderer.evaluate("canvas.remove()");
+  await renderer.evaluate("ctx.fillStyle='blue';ctx.fillRect(0,0,100,150);document.body.prepend(canvas)");
+  assert.deepEqual(await pixel(1, 1), [0, 0, 255, 255], "detached canvases keep their bitmap when reattached");
+  const exported = await renderer.evaluate("canvas.toDataURL('image/png')");
+  assert.deepEqual(await new Bun.Image(Buffer.from(exported.split(",")[1], "base64")).metadata(), { width: 100, height: 150, format: "png" });
+  assert.ok((await renderer.evaluate("canvas.toDataURL('unsupported/type')")).startsWith("data:image/png;base64,"));
+  assert.deepEqual(await renderer.evaluate("new Promise(resolve => canvas.toBlob(blob => resolve([blob.type.startsWith('image/'), blob.size > 0]), 'image/jpeg'))"), [true, true]);
+  await renderer.evaluate("window.copy=document.createElement('canvas');copy.width=copy.height=10;window.copyCtx=copy.getContext('2d');copyCtx.drawImage(canvas,0,0,10,10)");
+  assert.deepEqual(await renderer.evaluate("[...copyCtx.getImageData(1,1,1,1).data]"), [0, 0, 255, 255]);
+  await renderer.evaluate("window.img=document.createElement('img');img.style.display='none';img.src='https://foreign.test/red.png';document.body.appendChild(img)");
+  const deadline = now() + 5000;
+  while (!await renderer.evaluate("img.complete && img.naturalWidth === 2")) { assert.ok(now() < deadline); await sleep(10); }
+  await renderer.evaluate("ctx.drawImage(img,0,0,100,150)");
+  assert.deepEqual(await pixel(), [255, 0, 0, 255], "cross-origin images can be drawn");
+  assert.deepEqual(await renderer.evaluate("[()=>ctx.getImageData(0,0,1,1),()=>canvas.toDataURL(),()=>canvas.toBlob(()=>{})].map(fn=>{try{fn();return 'allowed'}catch(error){return error.name}})"), ["SecurityError", "SecurityError", "SecurityError"]);
+  await renderer.evaluate("copyCtx.drawImage(canvas,0,0,10,10)");
+  assert.equal(await renderer.evaluate("(()=>{try{copy.toDataURL();return 'allowed'}catch(error){return error.name}})()"), "SecurityError", "taint follows canvas copies");
+  await renderer.evaluate("canvas.width=100");
+  assert.ok((await renderer.evaluate("canvas.toDataURL()")).startsWith("data:image/png;base64,"), "bitmap reset restores origin-clean state");
+  await renderer.evaluate("img.crossOrigin='anonymous'");
+  while (!await renderer.evaluate("img.complete && img.naturalWidth === 2")) { assert.ok(now() < deadline); await sleep(10); }
+  assert.equal(corsRequests.length, 1, "changing crossorigin refetches with the CORS policy");
+  assert.equal(corsRequests[0].mode, "cors");
+  assert.equal(corsRequests[0].credentials, "same-origin");
+  await renderer.evaluate("ctx.drawImage(img,0,0,100,150)");
+  assert.deepEqual(await renderer.evaluate("[...ctx.getImageData(1,1,1,1).data]"), [255, 0, 0, 255], "CORS-approved foreign images keep the canvas clean");
+  await renderer.evaluate("img.crossOrigin='use-credentials'");
+  while (!await renderer.evaluate("img.complete && img.naturalWidth === 2")) { assert.ok(now() < deadline); await sleep(10); }
+  assert.equal(corsRequests.at(-1).credentials, "include");
+  await renderer.evaluate("img.src='https://foreign.test/denied.png'");
+  while (!await renderer.evaluate("img.complete")) { assert.ok(now() < deadline); await sleep(10); }
+  assert.equal(await renderer.evaluate("img.naturalWidth"), 0, "CORS-denied images cannot fall back to an unfiltered response");
+  await renderer.evaluate("canvas.width=0");
+  assert.equal(await renderer.evaluate("canvas.toDataURL()"), "data:,");
+  await renderer.evaluate("canvas.style.width='';canvas.style.height=''");
+  assert.deepEqual(renderer.inspect("canvas")[0].box, { x: 0, y: 0, width: 0, height: 150 });
+  assert.deepEqual(await renderer.evaluate(`(() => {
+    const c = document.createElement('canvas'), ctx = c.getContext('2d');
+    const fill = () => { ctx.fillStyle = 'red'; ctx.fillRect(0,0,1,1); };
+    const red = () => ctx.getImageData(0,0,1,1).data[0];
+    const results = [];
+    c.setAttribute('width', '20'); fill(); c.setAttribute('WIDTH', '20'); results.push(red());
+    fill(); c.setAttributeNS('urn:test', 'test:width', '7'); results.push(red(), c.width);
+    c.setAttributeNS(null, 'width', '30'); results.push(red(), c.width);
+    fill(); c.removeAttributeNS(null, 'width'); results.push(red(), c.width);
+    c.setAttribute('height', '10'); fill(); c.removeAttribute('height'); results.push(red(), c.height);
+    fill(); c.toggleAttribute('width', false); results.push(red());
+    c.toggleAttribute('width', true); results.push(red());
+    c.setAttribute('width','10'); fill(); c.getAttributeNode('width').value='10'; results.push(red());
+    const attr = c.getAttributeNode('width');
+    fill(); c.removeAttribute('width'); results.push(red(), c.width);
+    fill(); attr.value='15'; results.push(red(), c.width);
+    return results;
+  })()`), [0, 255, 20, 0, 30, 0, 300, 0, 150, 255, 0, 0, 0, 300, 255, 300], "all size-attribute APIs reset the bitmap; foreign/detached attributes and no-op removals do not");
+  await renderer.loadDocument({ url: "https://canvas.test/next", contentType: "text/html", source: "<body style='margin:0'>next</body>" });
+  await renderer.whenLoaded();
+  // Prepaint and animation are independent timers. A canvas draw retires its
+  // old native snapshot while a larger scrolled tile may still be queued.
+  await renderer.loadDocument({ url: "https://canvas.test/animation", contentType: "text/html",
+    source: `<body style="margin:0;height:5000px"><canvas id=a width=100 height=100 style="position:fixed;top:0;left:0"></canvas><script>
+      const ctx=document.getElementById('a').getContext('2d');let tick=0;
+      window.animation=setInterval(()=>{ctx.fillStyle=++tick%2?'red':'blue';ctx.fillRect(0,0,100,100)},17);
+    </script>` });
+  await renderer.whenLoaded();
+  for (let i = 0; i < 20; i++) { renderer.scroll(0, i % 2 ? -110 : 110); await sleep(31); }
+  await renderer.evaluate("clearInterval(animation)");
+  const animated = await pixel(10, 10);
+  assert.ok(animated[0] === 255 || animated[2] === 255);
+} finally { renderer.dispose(); }

package/test/fixtures/canvas-text.js

@@ -0,0 +1,42 @@
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+const renderer = await createPageRenderer({});
+try {
+  renderer.resize(500, 200, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://text.test/", contentType: "text/html",
+    source: `<body style="margin:0"><canvas width=500 height=200 id=c></canvas><script>
+      window.c=document.getElementById('c');window.ctx=c.getContext('2d');
+      window.ink=()=>{const data=ctx.getImageData(0,0,500,200).data;let left=500,right=-1,top=200,bottom=-1;
+        for(let y=0;y<200;y++)for(let x=0;x<500;x++)if(data[(y*500+x)*4+3]){left=Math.min(left,x);right=Math.max(right,x);top=Math.min(top,y);bottom=Math.max(bottom,y)}
+        return {left,right,top,bottom};};
+    </script>` });
+  await renderer.whenLoaded();
+  assert.equal(await renderer.evaluate("ctx.font"), "10px sans-serif");
+  await renderer.evaluate("ctx.font='32px sans-serif';window.width=ctx.measureText('Canvas text').width;ctx.fillText('Canvas text',10,50)");
+  assert.ok(await renderer.evaluate("width > 150 && width < 190"));
+  const left = await renderer.evaluate("ink()");
+  assert.ok(left.left >= 10 && left.right > 160 && left.bottom <= 51);
+  await renderer.evaluate("ctx.clearRect(0,0,500,200);ctx.textAlign='right';ctx.fillText('Canvas text',300,50)");
+  const right = await renderer.evaluate("ink()");
+  assert.ok(right.right >= 295 && right.right <= 300);
+  assert.ok(right.left > 125 && right.left < 150);
+  await renderer.evaluate("ctx.clearRect(0,0,500,200);ctx.textAlign='left';ctx.fillText('Canvas text',10,50,80)");
+  const scaled = await renderer.evaluate("ink()");
+  assert.ok(scaled.right <= 90 && scaled.right >= 85);
+  await renderer.evaluate("ctx.save();ctx.font='48px serif';ctx.textAlign='center';ctx.textBaseline='top';ctx.direction='rtl';ctx.restore()");
+  assert.deepEqual(await renderer.evaluate("[ctx.font,ctx.textAlign,ctx.textBaseline,ctx.direction]"), ["32px sans-serif", "left", "alphabetic", "inherit"]);
+  await renderer.evaluate("ctx.font='not a font';ctx.textAlign='invalid'");
+  assert.deepEqual(await renderer.evaluate("[ctx.font,ctx.textAlign]"), ["32px sans-serif", "left"]);
+  await renderer.evaluate("ctx.translate(12,18);ctx.scale(2,3)");
+  assert.deepEqual(await renderer.evaluate("const m=ctx.getTransform();[m.a,m.b,m.c,m.d,m.e,m.f]"), [2,0,0,3,12,18]);
+  await renderer.evaluate("c.width=500");
+  assert.deepEqual(await renderer.evaluate("[ctx.font,ctx.textAlign,ctx.textBaseline,ctx.direction]"), ["10px sans-serif", "start", "alphabetic", "inherit"]);
+  await renderer.evaluate("ctx.font='32px sans-serif';ctx.fillText('測試 🙂',10,50)");
+  assert.ok((await renderer.evaluate("ink()")).right > 60, "Unicode text uses browser fallback fonts");
+  await renderer.evaluate(`ctx.clearRect(0,0,500,200);window.gradient=ctx.createLinearGradient(0,0,150,0);
+    gradient.addColorStop(0,'red');gradient.addColorStop(1,'blue');ctx.strokeStyle=gradient;ctx.lineWidth=2;
+    ctx.strokeText('Gradient',10,50)`);
+  assert.ok((await renderer.evaluate("ink()")).right > 100, "shaped strokeText accepts a branded gradient without reading the native color-only getter");
+  assert.equal(await renderer.evaluate("ctx.strokeStyle===gradient && gradient.Td===undefined && gradient.pe===undefined"), true);
+} finally { renderer.dispose(); }

package/test/fixtures/image-lifetime.js

@@ -0,0 +1,90 @@
+// Host scripting is isolated from the test runner's globals.
+import { strict as assert } from "node:assert";
+import { createPageRenderer, loadGraphics } from "../../lib/renderer/page-renderer.js";
+import { encodeImage } from "../../lib/paint/frame.js";
+const sleep = Bun.sleep;
+const now = Date.now;
+const { CanvasKit } = await loadGraphics();
+const images = new Map();
+for (const [name, color] of [["red", [255, 0, 0, 255]], ["blue", [0, 0, 255, 255]]]) {
+  images.set(name, await encodeImage(new Uint8Array(Array.from({ length: 16 }, () => color).flat()), 4, 4));
+}
+const makeImage = CanvasKit.MakeImageFromEncoded;
+let created = 0, alive = 0, frames = 0, fetched = 0;
+const instrument = (image) => {
+  if (!image) return image;
+  created++; alive++;
+  const remove = image.delete.bind(image), clone = image.clone.bind(image);
+  image.delete = () => { alive--; remove(); };
+  image.clone = () => instrument(clone());
+  return image;
+};
+CanvasKit.MakeImageFromEncoded = bytes => instrument(makeImage(bytes));
+let releaseLate;
+const renderer = await createPageRenderer({
+  onFrame: () => { frames++; },
+  fetchResource: async url => {
+    fetched++;
+    if (url.includes("late")) await new Promise(resolve => { releaseLate = resolve; });
+    return { ok: true, status: 200, url, body: images.get(url.includes("blue") ? "blue" : "red") };
+  },
+});
+async function until(check) {
+  const end = now() + 5000;
+  while (!(await check())) { assert.ok(now() < end, "condition timed out"); await sleep(10); }
+}
+async function pixel() {
+  const image = makeImage(Buffer.from(await renderer.screenshot(), "base64"));
+  try { return [...image.readPixels(1, 1, { width: 1, height: 1, colorType: CanvasKit.ColorType.RGBA_8888,
+    alphaType: CanvasKit.AlphaType.Unpremul, colorSpace: CanvasKit.ColorSpace.SRGB })]; }
+  finally { image.delete(); }
+}
+try {
+  renderer.resize(400, 300, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://images.test/", contentType: "text/html", source: '<body style="margin:0"></body>' });
+  await renderer.whenLoaded();
+  frames = 0;
+  await renderer.evaluate(`window.saved = []; for (let i=0;i<100;i++) {
+    const image=document.createElement('img'); image.width=image.height=20; image.src='/red.png';
+    document.body.appendChild(image); saved.push(image);
+  }`);
+  await until(async () => await renderer.evaluate("saved.every(image => image.complete && image.naturalWidth === 4)"));
+  await sleep(150);
+  assert.equal(fetched, 1, "one network/IPC request for duplicate in-flight images");
+  assert.equal(alive, 100, "independently-owned handles share one underlying image");
+  assert.ok(frames < 10, `one arrival burst must not paint 100 frames: ${frames}`);
+  assert.deepEqual(await pixel(), [255, 0, 0, 255]);
+  await renderer.evaluate("saved[0].src='/blue.png'");
+  await until(async () => await renderer.evaluate("saved[0].complete"));
+  assert.deepEqual(await pixel(), [0, 0, 255, 255], "same-size replacement invalidates the raster cache");
+  await renderer.evaluate("document.body.replaceChildren()");
+  assert.equal(alive, 0, "removed images release native handles even when script retains DOM nodes");
+  await renderer.evaluate("document.body.appendChild(saved[0])");
+  await until(async () => await renderer.evaluate("saved[0].complete"));
+  assert.equal(alive, 1, "reattaching a removed image reloads its resource");
+  assert.deepEqual(await pixel(), [0, 0, 255, 255]);
+  await renderer.evaluate("document.body.replaceChildren(); document.body.style.height='100px'");
+  for (let i=0;i<8;i++) {
+    await renderer.evaluate(`document.body.style.backgroundImage='url(/red-bg-${i}.png)'`);
+    await until(() => alive === 1);
+    await renderer.screenshot();
+    assert.equal(alive, 1, "unused CSS background images are released");
+  }
+  await renderer.evaluate("document.body.style.backgroundImage='none'; saved[0].src='/late.png'; document.body.appendChild(saved[0])");
+  await until(() => Boolean(releaseLate));
+  renderer.dispose();
+  const stopped = frames;
+  const beforeLate = created;
+  releaseLate();
+  await until(() => created > beforeLate);
+  await sleep(50);
+  assert.equal(alive, 0, "late resources cannot revive a disposed renderer");
+  assert.equal(frames, stopped);
+  renderer.dispose();
+  process.stdout.write("image lifetime integration passed\n");
+} finally {
+  releaseLate?.();
+  renderer.dispose();
+  CanvasKit.MakeImageFromEncoded = makeImage;
+}

package/test/fixtures/media-seek-snapshot.js

@@ -0,0 +1,77 @@
+import { strict as assert } from 'node:assert';
+import { createPageRenderer } from '../../lib/renderer/page-renderer.js';
+import { createBytePipe } from '../../lib/media/byte-pipe.js';
+import wasmpeg from '../../vendor/wasmpeg/src/js/index.js';
+
+// Isolated because host scripting installs page globals in this process.
+const sleep = Bun.sleep;
+const bytes = await Bun.file(new URL('./mse-switch-small.mp4', import.meta.url)).bytes();
+const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+let prefixEnd = 0;
+for (let offset = 0; offset + 8 <= bytes.length;) {
+  const size = view.getUint32(offset);
+  assert.ok(size >= 8 && offset + size <= bytes.length);
+  const type = String.fromCharCode(...bytes.subarray(offset + 4, offset + 8));
+  if (type === 'mdat') { prefixEnd = offset + size; break; }
+  offset += size;
+}
+assert.ok(prefixEnd > 0 && prefixEnd < bytes.length);
+await wasmpeg.load();
+const expected = await wasmpeg.decode(bytes, { format: 'mp4' });
+let expectedHash;
+try {
+  expected.seek(4000);
+  expectedHash = Bun.hash(expected.nextFrame(64, 48));
+} finally { expected.close(); }
+
+const pipe = createBytePipe();
+pipe.append(bytes.subarray(0, prefixEnd));
+const openedSizes = [], drawnHashes = [], errors = [];
+const renderer = await createPageRenderer({
+  fetchResource: async () => ({ ok: true, contentType: 'video/mp4', body: pipe }),
+  reportError: error => errors.push(String(error)),
+  videoDecoder: {
+    probe: (...args) => wasmpeg.probe(...args),
+    async decode(snapshot, options) {
+      openedSizes.push(snapshot.byteLength);
+      const decoder = await wasmpeg.decode(snapshot, options);
+      const nextFrame = decoder.nextFrame.bind(decoder);
+      decoder.nextFrame = (width, height) => {
+        const pixels = nextFrame(width, height);
+        // Seek probes are 32x18; these are frames actually drawn by the page.
+        if (pixels && width === 64 && height === 48) drawnHashes.push(Bun.hash(pixels));
+        return pixels;
+      };
+      return decoder;
+    },
+  },
+});
+try {
+  renderer.setScripting('host');
+  await renderer.loadDocument({ url: 'https://seek.test/', contentType: 'text/html',
+    source: '<video id="v" width="64" height="48" src="clip.mp4"></video>' });
+  const seek = seconds => renderer.evaluate(`new Promise(resolve => {
+    const video = document.getElementById('v');
+    video.addEventListener('seeked', () => resolve(true), { once: true });
+    video.currentTime = ${seconds};
+  })`);
+  await seek(0);
+  assert.equal(openedSizes.at(-1), prefixEnd);
+  assert.notEqual(drawnHashes.at(-1), expectedHash);
+  const firstHash = drawnHashes.at(-1);
+  const oldOpens = openedSizes.length;
+  pipe.append(bytes.subarray(prefixEnd));
+  pipe.finish();
+  for (let attempt = 0; attempt < 100 && await renderer.evaluate("document.getElementById('v').duration") < 6; attempt++) await sleep(10);
+  assert.equal(await renderer.evaluate("document.getElementById('v').duration"), 6);
+  await seek(5);
+  assert.ok(openedSizes.length > oldOpens, 'seeking beyond an old prefix opens the latest snapshot');
+  assert.equal(openedSizes.at(-1), bytes.length);
+  assert.equal(drawnHashes.at(-1), expectedHash, 'the seek draws the target keyframe, not the stale prefix');
+  const currentOpens = openedSizes.length;
+  await seek(1);
+  assert.equal(openedSizes.length, currentOpens, 'a current snapshot remains reusable for backward seeking');
+  assert.equal(drawnHashes.at(-1), firstHash);
+  assert.deepEqual(errors, []);
+  process.stdout.write('latest video snapshot seek passed\n');
+} finally { renderer.dispose(); }

package/test/fixtures/raw-capture-benchmark.json

@@ -0,0 +1,76 @@
+{
+  "sandbox": {
+    "seccomp": {
+      "installed": true,
+      "reason": null
+    },
+    "ses": {
+      "installed": true,
+      "reason": null
+    }
+  },
+  "capture": [
+    1920,
+    1035
+  ],
+  "reports": [
+    {
+      "format": "png",
+      "count": 20,
+      "meanMs": 168.16266580000007,
+      "medianMs": 167.81952999999976,
+      "bytes": 123889
+    },
+    {
+      "format": "jpeg",
+      "count": 20,
+      "meanMs": 42.5512477499999,
+      "medianMs": 41.08310699999947,
+      "bytes": 150292
+    },
+    {
+      "format": "rgba",
+      "count": 20,
+      "meanMs": 22.61524315000006,
+      "medianMs": 23.11667800000032,
+      "bytes": 7948800
+    },
+    {
+      "format": "bgra",
+      "count": 20,
+      "meanMs": 25.103456849999976,
+      "medianMs": 25.162263999999595,
+      "bytes": 7948800
+    },
+    {
+      "format": "bgra",
+      "count": 20,
+      "meanMs": 24.67374660000005,
+      "medianMs": 25.82330600000023,
+      "bytes": 7948800
+    },
+    {
+      "format": "rgba",
+      "count": 20,
+      "meanMs": 21.321299350000118,
+      "medianMs": 21.798502999999982,
+      "bytes": 7948800
+    },
+    {
+      "format": "jpeg",
+      "count": 20,
+      "meanMs": 43.68695314999977,
+      "medianMs": 46.23293099999864,
+      "bytes": 150292
+    },
+    {
+      "format": "png",
+      "count": 20,
+      "meanMs": 169.70291704999983,
+      "medianMs": 169.88830599999892,
+      "bytes": 123889
+    }
+  ],
+  "method": "Native Intel i5-5200U, alternating viewport crops, three warmups then 20 captures per pass; round trip includes controller file write for raw. Not terminal FPS.",
+  "date": "2026-10-22"
+}

package/test/fixtures/renderer-memory.js

@@ -0,0 +1,110 @@
+import { strict as assert } from 'node:assert';
+import '../../vendor/ses/dist/ses.mjs';
+import { createPageRenderer, loadGraphics } from '../../lib/renderer/page-renderer.js';
+
+// Use the real WASM allocator: MakeSurface.delete() does not free its pixels.
+// Each document needs an isolated realm: host scripting overwrites process
+// globals and cannot be repeatedly installed for this lifetime stress test.
+const { CanvasKit: kit } = await loadGraphics();
+lockdown({ errorTaming: 'safe', overrideTaming: 'severe', consoleTaming: 'unsafe',
+  localeTaming: 'unsafe', stackFiltering: 'concise', reporting: 'none' });
+const malloc = kit._malloc, free = kit._free, makeSurface = kit.MakeSurface;
+const allocations = new Map(), surfaces = new Set(), images = new Set();
+const errors = [];
+let reads = 0, failAt = Infinity;
+kit._malloc = size => { const pointer = malloc(size); allocations.set(pointer, size); return pointer; };
+kit._free = pointer => { allocations.delete(pointer); return free(pointer); };
+kit.MakeSurface = (...args) => {
+  const surface = makeSurface(...args);
+  if (!surface) return surface;
+  surfaces.add(surface);
+  const dispose = surface.dispose.bind(surface), snapshot = surface.makeImageSnapshot.bind(surface);
+  surface.dispose = () => { surfaces.delete(surface); return dispose(); };
+  surface.makeImageSnapshot = (...args) => {
+    const image = snapshot(...args), release = image.delete.bind(image), read = image.readPixels.bind(image);
+    images.add(image);
+    image.delete = () => { images.delete(image); return release(); };
+    image.readPixels = (...args) => {
+      if (++reads === failAt) throw new Error('intentional readback failure');
+      return read(...args);
+    };
+    return image;
+  };
+  return surface;
+};
+const liveBytes = () => [...allocations.values()].reduce((sum, size) => sum + size, 0);
+let warmBytes;
+try {
+  for (let cycle = 0; cycle < 8; cycle++) {
+    const renderer = await createPageRenderer({
+      fetchResource: async () => ({ ok: false, status: 404, body: new Uint8Array() }),
+      reportError: error => errors.push(String(error)),
+    });
+    try {
+      renderer.setScripting('ses');
+      renderer.resize(400, 300, 1);
+      await renderer.loadDocument({ url: 'https://memory.test/', contentType: 'text/html', source:
+        `<canvas id="c" width="200" height="150"></canvas><p>Renderer lifecycle</p><script>
+          window.c=document.getElementById('c');window.ctx=c.getContext('2d');
+          ctx.fillStyle='blue';ctx.fillRect(0,0,200,150);
+        </script>` });
+      await renderer.whenLoaded();
+      assert.equal(await renderer.evaluate("[...ctx.getImageData(1,1,1,1).data].join(',')"), '0,0,255,255');
+      for (let step = 0; step < 6; step++) {
+        renderer.resize(step % 2 ? 400 : 640, step % 2 ? 300 : 480, 1);
+        await renderer.evaluate(`c.width=${200 + step};ctx.fillStyle='red';ctx.fillRect(0,0,200,150)`);
+        assert.equal(await renderer.evaluate("[...ctx.getImageData(1,1,1,1).data].join(',')"), '255,0,0,255');
+        await renderer.screenshot({ format: step % 2 ? 'jpeg' : 'png' });
+      }
+      await renderer.loadDocument({ url: 'https://memory.test/next', contentType: 'text/html', source: '<p>Next document</p>' });
+      await renderer.whenLoaded();
+      await renderer.screenshot();
+    } finally { renderer.dispose(); }
+    assert.deepEqual(errors, [], 'every document actually executes its canvas script');
+    assert.equal(surfaces.size, 0, 'all software surface pixels are disposed');
+    assert.equal(images.size, 0, 'all snapshots are deleted');
+    warmBytes ??= liveBytes();
+    assert.equal(liveBytes(), warmBytes, 'native allocations do not accumulate across renderer lifetimes');
+  }
+
+  const presentations = [];
+  const renderer = await createPageRenderer({
+    fetchResource: async () => ({ ok: true, status: 200, body: new Uint8Array([1]) }),
+    reportError: error => errors.push(String(error)),
+    videoDecoder: {
+      probe: async () => ({ duration: 20, video: { width: 2, height: 2 } }),
+      decode: async () => ({ width: 2, height: 2, fps: 10, seek() {}, close() {}, nextFrame: () => new Uint8Array(16).fill(255) }),
+    },
+    onVideo(message) { presentations.push(message.type); },
+  });
+  try {
+    renderer.setScripting('ses');
+    await renderer.loadDocument({ url: 'https://memory.test/video', contentType: 'text/html',
+      source: '<video id="v" width="200" height="150" src="clip.mp4"></video>' });
+    await renderer.whenLoaded();
+    await renderer.evaluate("document.getElementById('v').play()");
+    for (let attempt = 0; attempt < 50 && !presentations.includes('video-open'); attempt++) {
+      await Bun.sleep(10);
+      await renderer.screenshot();
+    }
+    assert.ok(presentations.includes('video-open'), 'video uses the separate presentation layer');
+    assert.deepEqual(errors, []);
+    await renderer.screenshot();
+    // First read is the normal frame; second is the video overlay's base.
+    failAt = reads + 2;
+    assert.throws(() => renderer.resize(641, 481), /intentional readback failure/);
+    assert.equal(reads, failAt, 'the video overlay readback was exercised');
+    if (images.size !== 0) throw new Error(`failed overlay readback left ${images.size} snapshot(s) alive`);
+  } finally { failAt = Infinity; renderer.dispose(); }
+  assert.equal(surfaces.size, 0);
+  assert.equal(images.size, 0);
+  // Video MakeImage transfers its input allocation to C++; its eventual
+  // native free does not call the JS _free wrapper. Check the owned surfaces
+  // and snapshots here, rather than comparing that different allocation path
+  // with the canvas-only baseline above.
+  process.stdout.write('renderer memory lifecycle passed\n');
+} finally {
+  kit._malloc = malloc;
+  kit._free = free;
+  kit.MakeSurface = makeSurface;
+}

package/test/fixtures/summary-style.js

@@ -0,0 +1,28 @@
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+
+const renderer = await createPageRenderer({});
+try {
+  renderer.setScripting("host");
+  await renderer.loadDocument({url:"https://page.test/",contentType:"text/html",status:200,
+    source:'<!doctype html><details><summary id="first">First</summary><summary id="second">Second</summary></details>'});
+  await renderer.whenLoaded();
+  const read = () => ["#first","#second"].map(selector => {
+    const style = renderer.inspect(selector,["display","listStyleType"])[0]?.style;
+    return style && [style.display,style.listStyleType];
+  });
+  const mutate = async source => {
+    await renderer.evaluate(`${source}; document.body.offsetHeight`);
+  };
+  const closed = [["list-item","disclosure-closed"],["block","disc"]];
+  assert.deepEqual(read(),closed);
+  await mutate("document.querySelector('details').open=true");
+  assert.deepEqual(read(),[["list-item","disclosure-open"],["block","disc"]]);
+  await mutate("document.querySelector('details').open=false");
+  assert.equal(await renderer.evaluate("document.querySelector('details').open"),false);
+  assert.deepEqual(read(),closed);
+  await mutate("document.querySelector('details').insertBefore(document.getElementById('second'),document.getElementById('first'))");
+  assert.deepEqual(read(),[["block","disc"],["list-item","disclosure-closed"]]);
+  await mutate("document.getElementById('second').remove()");
+  assert.deepEqual(read()[0],["list-item","disclosure-closed"]);
+} finally { renderer.dispose(); }