buninu-browser 0.2.3 → 0.2.4

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

package/test/font-loading.test.js

@@ -0,0 +1,97 @@
+import { expect, test } from "bun:test";
+import { DocumentFonts, neededFontFaces } from "../lib/renderer/font-loading.js";
+import { createPageRenderer, loadGraphics } from "../lib/renderer/page-renderer.js";
+
+const face = (family, weight = 400, ranges = [[0, 0x10ffff]], extra = {}) => ({ family, weight: [weight, weight],
+  style: "normal", unicodeRanges: ranges, sources: [{ url: `https://font.test/${family}-${weight}.ttf` }], ...extra });
+const run = (text, fontFamily, fontWeight = 400, fontStyle = "normal") => ({ text, style: { fontFamily, fontWeight, fontStyle } });
+
+test("font selection requests only used families, styles, weights, and Unicode subsets", () => {
+  const latin = face("Example", 400, [[0, 127]]);
+  const cjk = face("Example", 400, [[0x4e00, 0x9fff]]);
+  const bold = face("Example", 700);
+  const italic = face("Example", 400, [[0, 127]], { style: "italic" });
+  const unused = face("Unused");
+  const all = [latin, cjk, bold, italic, unused];
+  expect([...neededFontFaces(all, [run("hello", ["Example", "Unused"])])]).toEqual([latin]);
+  expect([...neededFontFaces(all, [run("中文", ["Example"])])]).toEqual([cjk]);
+  expect([...neededFontFaces(all, [run("hello", ["Example"], 600)])]).toEqual([bold]);
+  expect([...neededFontFaces(all, [run("hello", ["Example"], 400, "italic")])]).toEqual([italic]);
+  expect([...neededFontFaces(all, [run("hello", ["system-ui", "Unused"])], new Set(["system-ui"]))]).toEqual([]);
+  const earlier = face("Later");
+  const later = face("Later");
+  expect([...neededFontFaces([earlier, later], [run("hello", ["Later"])])][0]).toBe(later);
+});
+
+test("document web fonts share builtin typefaces, use CORS, deduplicate sources, and honor Unicode aliases", async () => {
+  const { CanvasKit, builtinTypefaces, fontCollection } = await loadGraphics();
+  const bytes = await Bun.file(new URL("../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+  const requests = [], errors = [];
+  let changed = 0;
+  const fonts = new DocumentFonts({ CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection,
+    fetch: async request => { requests.push(request); return { status: 200, body: bytes }; },
+    changed: () => changed++, error: error => errors.push(error) });
+  const latin = face("Example", 400, [[0, 127]]);
+  const cjk = face("Example", 400, [[0x4e00, 0x9fff]]);
+  fonts.update([latin, cjk], [run("Hello中文", ["Example"])]);
+  await fonts.ready();
+  expect(requests).toHaveLength(1);
+  expect(requests[0]).toMatchObject({ mode: "cors", credentials: "same-origin", redirect: "follow" });
+  expect(changed).toBe(2);
+  expect(errors).toEqual([]);
+  expect(fonts.collection).not.toBe(fontCollection);
+  expect(fonts.resolve("Example", 400, "normal", 65)).toHaveLength(1);
+  expect(fonts.resolve("Example", 400, "normal", 0x4e00)).toHaveLength(1);
+  expect(fonts.resolve("Example", 400, "normal", 0x400)).toEqual([]);
+  fonts.dispose();
+  fonts.dispose();
+  expect(fonts.collection).toBe(fontCollection);
+});
+
+test("font sources try local/fetch alternatives and pending requests abort on document disposal", async () => {
+  const { CanvasKit, builtinTypefaces, fontCollection } = await loadGraphics();
+  let fetched = 0, aborted = 0;
+  const fonts = new DocumentFonts({ CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection,
+    fetch: () => {
+      fetched++;
+      let reject;
+      const pending = new Promise((_, fail) => reject = fail);
+      pending.abort = () => { aborted++; reject(new Error("disposed")); };
+      return pending;
+    } });
+  const local = face("Local", 400, undefined, { sources: [{ local: "missing" }, { local: builtinTypefaces[0].family }] });
+  fonts.update([local], [run("hello", ["Local"])]);
+  await fonts.ready();
+  expect(fonts.resolve("Local")).toHaveLength(1);
+  expect(fetched).toBe(0);
+  const remote = face("Remote");
+  fonts.update([remote], [run("hello", ["Remote"])]);
+  expect(fetched).toBe(1);
+  fonts.dispose();
+  await fonts.ready();
+  expect(aborted).toBe(1);
+});
+
+test("loaded web font updates geometry, respects Unicode ranges, and resets on navigation", async () => {
+  const bytes = await Bun.file(new URL("../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+  let finish;
+  const fontResponse = new Promise(resolve => finish = resolve);
+  let requests = 0;
+  const renderer = await createPageRenderer({ fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+    pageFetch: () => { requests++; return fontResponse; } });
+  try {
+    const source = `<style>@font-face {font-family:TestMono;src:url(/font.ttf);unicode-range:U+0069} span{font-family:TestMono,sans-serif;font-size:30px}</style><span id=i>iiii</span><span id=m>mmmm</span>`;
+    await renderer.loadDocument({ url: "https://font.test/", status: 200, contentType: "text/html", source });
+    const before = renderer.inspect("span").map(item => item.box.width);
+    finish({ status: 200, body: bytes });
+    await renderer.whenLoaded();
+    const after = renderer.inspect("span").map(item => item.box.width);
+    expect(requests).toBe(1);
+    expect(after[0]).toBeGreaterThan(before[0] * 2);
+    expect(after[1]).toBe(before[1]);
+    await renderer.loadDocument({ url: "https://font.test/next", status: 200, contentType: "text/html",
+      source: `<span style="font-family:TestMono,sans-serif;font-size:30px">iiii</span>` });
+    await renderer.whenLoaded();
+    expect(renderer.inspect("span")[0].box.width).toBe(before[0]);
+  } finally { renderer.dispose(); }
+});

package/test/grid.test.js

@@ -220,6 +220,64 @@ test("implicit columns are created past the explicit grid", () => {
   expect(item(0)).toEqual({ left: 4, top: 0, width: 6, height: 1 });
 });
 
+test("column auto-flow fills each explicit row before adding a column", () => {
+  const { items } = render(grid("grid-template-rows: 2px 3px; grid-auto-columns: 4px; grid-auto-flow: column", letters(5)));
+  expect(items().map((box) => [box.left, box.top, box.width, box.height])).toEqual([
+    [0, 0, 4, 2], [0, 2, 4, 3], [4, 0, 4, 2], [4, 2, 4, 3], [8, 0, 4, 2],
+  ]);
+});
+
+test("column auto-flow honors row spans and dense packing", () => {
+  const content = `<i style="grid-row: 2 / 4">a</i><i style="grid-row: span 2">b</i><i>c</i>`;
+  const sparse = render(grid("grid-template-rows: repeat(3, 2px); grid-auto-columns: 4px; grid-auto-flow: column", content));
+  const dense = render(grid("grid-template-rows: repeat(3, 2px); grid-auto-columns: 4px; grid-auto-flow: column dense", content));
+  expect(sparse.items().map((box) => [box.left, box.top])).toEqual([[0, 2], [4, 0], [4, 4]]);
+  expect(dense.items().map((box) => [box.left, box.top])).toEqual([[0, 2], [4, 0], [0, 0]]);
+});
+
+test("named areas place source-order-independent content and spanning cells", () => {
+  const { items } = render(grid('grid-template-columns: 4px 20px 6px; grid-template-rows: 2px 3px; grid-template-areas: "icon title meta" "icon body meta"',
+    '<i style="grid-area: title">title</i><i style="grid-area: meta">m</i><i style="grid-area: icon">i</i><i style="grid-area: body">body</i>'));
+  expect(items()).toEqual([
+    { left: 4, top: 0, width: 20, height: 2 }, { left: 24, top: 0, width: 6, height: 5 },
+    { left: 0, top: 0, width: 4, height: 5 }, { left: 4, top: 2, width: 20, height: 3 },
+  ]);
+});
+
+test("named areas create explicit tracks and implicit start/end line names", () => {
+  const { items } = render(grid('grid-template-areas: "a a ." "b b ."; grid-auto-columns: 4px; grid-auto-rows: 2px',
+    '<i style="grid-column: a; grid-row: 1">a</i><i style="grid-column: b-start / b-end; grid-row: b">b</i><i style="grid-column: -2 / -1; grid-row: 1">c</i>'));
+  expect(items()).toEqual([
+    { left: 0, top: 0, width: 8, height: 2 }, { left: 0, top: 2, width: 8, height: 2 },
+    { left: 8, top: 0, width: 4, height: 2 },
+  ]);
+});
+
+test("grid-template shorthand combines area strings, row sizes and columns", () => {
+  const { items } = render(grid('grid-template:"icon title"2px"icon body"3px/4px 20px',
+    '<i style="grid-area: title">title</i><i style="grid-area: icon">i</i><i style="grid-area: body">body</i>'));
+  expect(items()).toEqual([
+    { left: 4, top: 0, width: 20, height: 2 }, { left: 0, top: 0, width: 4, height: 5 },
+    { left: 4, top: 2, width: 20, height: 3 },
+  ]);
+  const defaults = render(grid('grid-template: "a b" / 4px 6px', '<i style="grid-area:b">b</i>'));
+  expect(defaults.item(0)).toEqual({ left: 4, top: 0, width: 6, height: 1 });
+});
+
+test("grid-template track shorthand resets old area placement", () => {
+  const { items } = render(grid('grid-template-areas:"b a";grid-template:2px / 4px 6px', letters(2)));
+  expect(items()).toEqual([
+    { left: 0, top: 0, width: 4, height: 2 }, { left: 4, top: 0, width: 6, height: 2 },
+  ]);
+});
+
+test("nonrectangular or unequal-width area declarations are discarded", () => {
+  for (const invalid of ['"a a" "a b"', '"a a" "b"', '"a ?"']) {
+    const { items } = render(grid(`grid-template-columns: 4px 6px; grid-template-areas: ${invalid}`, letters(2)));
+    expect(items().map((box) => box.width)).toEqual([4, 6]);
+  }
+});
+
 // Gaps (css-align-3)
 
 test("column-gap separates the columns and comes off the free space", () => {