buninu-browser 0.2.3 → 0.3.0

package/test/paint-paragraph-cache.test.js

@@ -0,0 +1,87 @@
+import { expect, test } from "bun:test";
+import { createPageRenderer, loadGraphics } from "../lib/renderer/page-renderer.js";
+
+test("scroll paints reuse shaped text, evict bounded resources, and release paragraphs on navigation/disposal", async () => {
+  const { CanvasKit } = await loadGraphics();
+  const original = CanvasKit.ParagraphBuilder.MakeFromFontCollection;
+  let built = 0;
+  let alive = 0;
+  CanvasKit.ParagraphBuilder.MakeFromFontCollection = (...args) => {
+    const builder = original(...args);
+    const build = builder.build.bind(builder);
+    builder.build = () => {
+      const paragraph = build();
+      const dispose = paragraph.delete.bind(paragraph);
+      built++;
+      alive++;
+      paragraph.delete = () => { alive--; dispose(); };
+      return paragraph;
+    };
+    return builder;
+  };
+  let renderer;
+  try {
+    renderer = await createPageRenderer({ fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }) });
+    renderer.resize(400, 200, 1);
+    await renderer.loadDocument({ url: "https://paint.test/", status: 200, contentType: "text/html",
+      source: `<!doctype html><style>body { margin:0 } p { margin:0; height:30px }</style>${
+        Array.from({ length: 400 }, (_, i) => `<p>Article number ${i}: shared text</p>`).join("")}` });
+    await renderer.whenLoaded();
+    const first = await renderer.screenshot();
+    const before = built;
+    renderer.scroll(0, 1);
+    await renderer.screenshot();
+    // No layout invalidation and the same seven visible paragraph items.
+    expect(built - before).toBeLessThanOrEqual(1);
+    renderer.scroll(0, -1);
+    expect(await renderer.screenshot()).toBe(first);
+    // A fresh layout/display list still uses identical text shaping inputs.
+    const beforeLayout = built;
+    renderer.resize(400, 201, 1);
+    await renderer.screenshot();
+    expect(built - beforeLayout).toBeLessThanOrEqual(1);
+    renderer.resize(400, 200, 1);
+    expect(await renderer.screenshot()).toBe(first);
+
+    for (let i = 0; i < 40; i++) renderer.scroll(0, 250);
+    expect(alive).toBeGreaterThan(0);
+    expect(alive).toBeLessThanOrEqual(256);
+    renderer.resize(400, 200, 2);
+    const zoomed = await renderer.screenshot();
+    expect((await new Bun.Image(Buffer.from(zoomed, "base64")).metadata()).width).toBe(800);
+    await renderer.loadDocument({ url: "https://paint.test/empty", status: 200, contentType: "text/html", source: "<!doctype html><body></body>" });
+    await renderer.whenLoaded();
+    expect(alive).toBe(0);
+  } finally {
+    renderer?.dispose();
+    CanvasKit.ParagraphBuilder.MakeFromFontCollection = original;
+  }
+  expect(alive).toBe(0);
+});
+
+test("screenshot encoding options are honored and separated in the frame cache", async () => {
+  const { CanvasKit: kit } = await loadGraphics();
+  const renderer = await createPageRenderer({});
+  const images = [];
+  try {
+    renderer.resize(400, 200, 1);
+    await renderer.loadDocument({ url: "https://capture.test/", contentType: "text/html",
+      source: "<body style='margin:0;color:#256;background:#def'><h1>Frame format cache</h1><p>Lossless PNG and JPEG capture</p>" });
+    await renderer.whenLoaded();
+    const png = await renderer.screenshot();
+    const jpeg = await renderer.screenshot({ format: "jpeg", quality: 85 });
+    expect((await new Bun.Image(Buffer.from(jpeg, "base64")).metadata()).format).toBe("jpeg");
+    const fast = await renderer.screenshot({ optimizeForSpeed: true });
+    const pixelBytes = value => {
+      const image = kit.MakeImageFromEncoded(Buffer.from(value, "base64"));
+      images.push(image);
+      return image.readPixels(0, 0, { width: 400, height: 200, colorType: kit.ColorType.RGBA_8888,
+        alphaType: kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB });
+    };
+    expect(pixelBytes(fast)).toEqual(pixelBytes(png));
+    expect(await renderer.screenshot()).toBe(png);
+  } finally {
+    for (const image of images) image.delete();
+    renderer.dispose();
+  }
+});

package/test/position-audio.test.js

@@ -65,3 +65,27 @@ test("an ended prefix or failed reopen never claims to have reached the target",
   const sound = track(pipe, 2);
   expect(await advanceAudio(() => sound, 8, { needsMore: () => false, reopen: async () => false })).toBe(false);
 });
+
+test("a seek before the first audio epoch cannot keep reopening an unreachable prefix", async () => {
+  let sound = { position: 6, decoder: { sampleRate: 1, channels: 1 } }, reopened = 0;
+  expect(await advanceAudio(() => sound, 2, {
+    needsMore: () => true,
+    reopen: async () => { reopened++; sound = { ...sound, position: 6 }; return true; },
+  })).toBe(false);
+  expect(reopened).toBe(1);
+});
+
+test("audio epoch EOF resumes at the next absolute sample cursor", async () => {
+  const pipe = createBytePipe(); pipe.finish();
+  let sound = { position: 6, pending: null, endTime: 6, snapshotId: 1, openedGeneration: 1, pipe,
+    decoder: { sampleRate: 1, channels: 1, nextSamples: () => null } };
+  expect(await advanceAudio(() => sound, 7, {
+    needsMore: () => true,
+    reopen: async () => {
+      sound = { ...sound, position: 6, endTime: Infinity, snapshotId: 2, pending: new Float32Array([6, 7]) };
+      return true;
+    },
+  })).toBe(true);
+  expect(sound.position).toBe(7);
+  expect([...sound.pending]).toEqual([7]);
+});

package/test/positioning.test.js

@@ -107,6 +107,28 @@ test("relative offsets and translate move a box and its content without affectin
   expect(box(".centered")).toMatchObject({ x: -20, y: 40 + 10 });
 });
 
+test("transform lists compose pixel and percentage translations in order", () => {
+  const { box } = render(
+    `<div class="popup"></div><div class="scaled"></div><div class="reversed"></div><div class="math"></div>`,
+    `.popup,.scaled,.reversed,.math { position:absolute;left:0;top:0;width:100px;height:153px }
+     .popup { transform:translate(56px,780px) translate(0,-100%) }
+     .scaled { transform:scale(2,3) translate(10px,20%) translateX(5px) }
+     .reversed { transform:translate(10px,20%) scale(2,3) translateX(5px) }
+     .math { transform:translate(calc(25% + 10px),min(20%,40px)) translate(10%,5px) }`,
+  );
+  expect(box(".popup")).toEqual({x:56,y:627,width:100,height:153});
+  expect(box(".scaled")).toMatchObject({x:30,y:91.8});
+  expect(box(".reversed")).toMatchObject({x:20,y:30.6});
+  expect(box(".math")).toMatchObject({x:45,y:35.6});
+});
+
+test("individual translate precedes the transform list and preserves normal flow", () => {
+  const {box} = render('<div class="translated"></div><div class="next"></div>',
+    '.translated{width:100px;height:80px;translate:10px -50%;transform:scale(2) translate(5px,10px)}.next{height:20px}');
+  expect(box('.translated')).toEqual({x:20,y:-20,width:100,height:80});
+  expect(box('.next').y).toBe(80);
+});
+
 test("an absolutely positioned ::after arrow is centred on its host's edge", () => {
   // The buninu.org step arrow: top:50%; right:-.75rem; translate(50%,-50%).
   const { box } = render(

package/test/prepared-script-cache.test.js

@@ -0,0 +1,45 @@
+import { expect, test } from "bun:test";
+import { PreparedScriptCache, prepareClassicScript } from "../lib/renderer/prepared-script-cache.js";
+import { escapeSesHtmlComments, rewriteClassicScriptSource } from "../lib/renderer/script-rewrite.js";
+
+test("cached preparation preserves source semantics and does not retain evaluated globals", () => {
+  const source = "var result = supplied + 1; function read() { return result; }";
+  const prepared = prepareClassicScript(source);
+  const original = rewriteClassicScriptSource(source);
+  expect(prepared).toEqual({ code: escapeSesHtmlComments(original.code), parsed: true, strict: false });
+  expect(prepareClassicScript(source)).toBe(prepared);
+  const run = supplied => {
+    const page = { supplied, $buninu$ref: name => { throw new ReferenceError(name); } };
+    page.globalThis = page;
+    Function("page", "source", "with(page) { eval(source); }")(page, prepared.code);
+    return page;
+  };
+  const first = run(2), second = run(8);
+  expect(first.read()).toBe(3);
+  expect(second.read()).toBe(9);
+  expect(first.read).not.toBe(second.read);
+  expect(Object.isFrozen(prepared)).toBeTrue();
+});
+
+test("preparation retains a bounded working set and never keeps oversized sources", () => {
+  const calls = [];
+  const cache = new PreparedScriptCache({ maxBytes: 40, maxEntries: 2, prepare(source) {
+    calls.push(source); return { code: source, parsed: true, strict: false };
+  } });
+  cache.prepare("first"); cache.prepare("next"); cache.prepare("first"); cache.prepare("third");
+  expect(calls).toEqual(["first", "next", "third"]);
+  cache.prepare("next");
+  expect(calls).toEqual(["first", "next", "third", "next"]);
+  const oversized = "a".repeat(11);
+  cache.prepare(oversized); cache.prepare(oversized);
+  expect(calls.filter(source => source === oversized)).toHaveLength(2);
+  expect(cache.prepare("next").code).toBe("next");
+  expect(calls.filter(source => source === "next")).toHaveLength(2);
+});
+
+test("different strictness and invalid sources never share a prepared result", () => {
+  const cache = new PreparedScriptCache();
+  expect(cache.prepare("'use strict'; var value = 1;").strict).toBeTrue();
+  expect(cache.prepare("var value = 1;").strict).toBeFalse();
+  expect(cache.prepare("var = ;").parsed).toBeFalse();
+});

package/test/pulse-client.test.js

@@ -135,6 +135,13 @@ test("measured device progress governs the media clock and bounded audio queue t
   const { createServer } = await import("node:net");
   let received = 0, played = 0, reports = 0;
   const times = [], errors = [], requests = [];
+  // The suite also runs CPU-heavy renderers in parallel. Observe protocol
+  // progress instead of assuming a polling timer ran within 120 ms.
+  const waitFor = async predicate => {
+    const deadline = Date.now() + 2000;
+    while (!predicate() && Date.now() < deadline) await Bun.sleep(10);
+    expect(predicate()).toBe(true);
+  };
   const scalar64 = (tag, value) => {
     const bytes = Buffer.alloc(9);
     bytes[0] = tag;
@@ -178,13 +185,13 @@ test("measured device progress governs the media clock and bounded audio queue t
     await Bun.sleep(80);
     expect(received).toBe(0); // a short prefix does not start/stop playback
     stream.write(new Uint8Array(1900));
-    await Bun.sleep(180);
+    await waitFor(() => reports > 0 && received === 500 && times.length > 0);
     expect(reports).toBeGreaterThan(0);
     expect(received).toBe(500); // at most the 0.5 s queue budget, not 2 s
     expect(stream.queued).toBe(1500); // survives a renderer busy spell in the controller
     expect(times.at(-1)).toBe(0); // server/device hasn't played anything
     played = 100;
-    await Bun.sleep(120);
+    await waitFor(() => times.at(-1) === 0.1 && received === 600);
     expect(times.at(-1)).toBeCloseTo(0.1, 5);
     expect(received).toBe(600);
     // A long network/producer pause is NOT permission to catch up by queuing seconds.
@@ -192,7 +199,7 @@ test("measured device progress governs the media clock and bounded audio queue t
     expect(times.at(-1)).toBeCloseTo(0.1, 5);
     expect(received).toBe(600);
     played = 600;
-    await Bun.sleep(120);
+    await waitFor(() => times.at(-1) === 0.6 && received > 1000);
     expect(times.at(-1)).toBeCloseTo(0.6, 5);
     expect(received).toBeGreaterThan(1000);
     expect(received).toBeLessThanOrEqual(1100);

package/test/raster-readback.test.js

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test";
+import { loadGraphics } from "../lib/renderer/page-renderer.js";
+import { RasterReadback } from "../lib/paint/raster-readback.js";
+
+test("raster readback reuses native scratch while published shared frames stay immutable", async () => {
+  const { CanvasKit: kit } = await loadGraphics();
+  const malloc = kit._malloc, free = kit._free;
+  const pointers = new Set();
+  let allocations = 0, releases = 0;
+  kit._malloc = size => { const pointer = malloc(size); pointers.add(pointer); allocations++; return pointer; };
+  kit._free = pointer => { if (pointers.delete(pointer)) releases++; free(pointer); };
+  const surface = kit.MakeSurface(4, 4);
+  const capture = new RasterReadback(kit, { shared: true });
+  const read = (size = 4) => {
+    const image = surface.makeImageSnapshot();
+    try { return capture.read(image, size, size); } finally { image.delete(); }
+  };
+  try {
+    surface.getCanvas().clear(kit.Color(255, 0, 0, 0.5));
+    const first = read();
+    const afterFirst = allocations;
+    expect(first.buffer).toBeInstanceOf(SharedArrayBuffer);
+    expect([...first.subarray(0, 4)]).toEqual([255, 0, 0, 128]);
+    surface.getCanvas().clear(kit.Color(0, 0, 255, 1));
+    const second = read();
+    expect(allocations).toBe(afterFirst);
+    expect([...second.subarray(0, 4)]).toEqual([0, 0, 255, 255]);
+    expect([...first.subarray(0, 4)]).toEqual([255, 0, 0, 128]);
+    expect(read(2)).toHaveLength(16);
+    expect(allocations).toBe(afterFirst);
+    // Structured cloning shares pixels without another allocation or copy.
+    const clone = structuredClone(first);
+    expect(clone.buffer).toBeInstanceOf(SharedArrayBuffer);
+    expect([...clone]).toEqual([...first]);
+  } finally {
+    capture.dispose(); capture.dispose(); surface.dispose();
+    kit._malloc = malloc; kit._free = free;
+  }
+  expect(releases).toBe(allocations);
+});

package/test/raw-capture.test.js

@@ -0,0 +1,152 @@
+import {test,expect} from 'bun:test';
+import {readFileSync,existsSync,unlinkSync} from 'node:fs';
+import {dirname} from 'node:path';
+import {RendererHost} from '../lib/renderer/host.js';
+import {PacketReader,encodePacket,listenCompositor,connectCompositor} from '../lib/renderer/compositor-channel.js';
+import {RawFrames} from '../lib/paint/raw-frames.js';
+import CanvasKitInit from '../usr/lib/canvaskit/canvaskit.js';
+const kit=CanvasKitInit({wasmBinary:readFileSync(new URL('../usr/lib/canvaskit/canvaskit.wasm',import.meta.url))});
+
+test('binary channel handles fragmented packets, rejects oversized input and authenticates peers',async()=>{
+ const results=[];const reader=new PacketReader((message,pixels)=>results.push([message,[...pixels]]));
+ const bytes=Buffer.concat([encodePacket({id:1},Uint8Array.of(1,2,3)),encodePacket({id:2})]);
+ for(let i=0;i<bytes.length;i++)reader.push(bytes.subarray(i,i+1));
+ expect(results).toEqual([[{id:1},[1,2,3]],[{id:2},[]]]);
+ const header=Buffer.alloc(8);header.writeUInt32LE(0xffffffff,0);
+ expect(()=>new PacketReader(()=>{}).push(header)).toThrow('size');
+ let reply;const got=new Promise(resolve=>reply=resolve);
+ const server=await listenCompositor((message,pixels)=>{server.send({id:message.id,length:pixels.length});},()=>{});
+ let peer;
+ try{
+  await expect(connectCompositor({...server.endpoint,token:'wrong'},()=>{},()=>{})).rejects.toThrow();
+  peer=await connectCompositor(server.endpoint,message=>reply(message),()=>{});
+  peer.send({id:8},new Uint8Array(1024));expect(await got).toEqual({id:8,length:1024});
+ }finally{peer?.close();server.close();}
+});
+
+test('raw file owner rejects malformed input and bounds unconsumed frames',()=>{
+ const store=new RawFrames();let path;
+ try{
+  expect(()=>store.write(new Uint8Array(3),1,1,'rgba')).toThrow('Invalid');
+  for(let i=0;i<16;i++)path=JSON.parse(store.write(new Uint8Array(4),1,1,'rgba')).path;
+  expect(()=>store.write(new Uint8Array(4),1,1,'rgba')).toThrow('stalled');
+ }finally{store.close();}
+ expect(existsSync(dirname(path))).toBe(false);
+});
+
+for(const compositor of [true,false])test(`raw screenshots match PNG and stay fresh after consumer deletion (compositor=${compositor})`,async()=>{
+ const host=new RendererHost({compositor});let directory;
+ try{
+  await host.start();await host.call('resize',32,24,1);
+  await host.call('loadDocument',{url:'https://page.test/',source:'<body style="margin:0;background:rgb(211,73,19)">',contentType:'text/html'});
+  await host.call('whenLoaded');
+  const png=await host.composite('screenshot',{format:'png'});
+  const CK=await kit;const image=CK.MakeImageFromEncoded(Buffer.from(png,'base64'));
+  const reference=image.readPixels(0,0,{width:32,height:24,colorType:CK.ColorType.RGBA_8888,alphaType:CK.AlphaType.Unpremul,colorSpace:CK.ColorSpace.SRGB});image.delete();
+  for(const format of ['rgba','bgra']){
+   const frame=JSON.parse(await host.composite('screenshot',{format}));directory=dirname(frame.path);
+   const pixels=readFileSync(frame.path);expect(pixels.length).toBe(32*24*4);
+   if(format==='bgra')for(let i=0;i<pixels.length;i+=4){const r=pixels[i];pixels[i]=pixels[i+2];pixels[i+2]=r;}
+   expect([...pixels]).toEqual([...reference]);unlinkSync(frame.path);
+   const next=JSON.parse(await host.composite('screenshot',{format}));expect(next.path).not.toBe(frame.path);expect(existsSync(next.path)).toBe(true);unlinkSync(next.path);
+  }
+  if(compositor){
+   const busy=host.call('evaluate',"(()=>{const end=Date.now()+1800;while(Date.now()<end);return 1})()");await Bun.sleep(150);
+   const start=performance.now();const raw=JSON.parse(await host.composite('screenshot',{format:'bgra'}));
+   expect(performance.now()-start).toBeLessThan(1400);unlinkSync(raw.path);await busy;
+  }
+ }finally{host.close();}
+ expect(existsSync(directory)).toBe(false);
+},20000);
+
+test('normal CDP routes raw requests to the controller without changing standard screenshots',async()=>{
+ const {createBrowser}=await import('../lib/headless-shell.js');
+ const {CdpServer}=await import('../lib/cdp-server.js');
+ const {CDP}=await import('../tools/browser-lab.js');
+ const browser=await createBrowser({spareRenderer:false});
+ const server=CdpServer.create(browser.context).listen(0,'127.0.0.1');
+ const cdp=new CDP(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+ let directory;
+ try{
+  await cdp.ready;const {targetId}=await cdp.send('Target.createTarget',{url:'about:blank'});
+  const {sessionId}=await cdp.send('Target.attachToTarget',{targetId,flatten:true});cdp.sessionId=sessionId;
+  await cdp.send('Emulation.setDeviceMetricsOverride',{width:16,height:9,deviceScaleFactor:1.75,mobile:false});
+  const metrics=await cdp.send('Page.getLayoutMetrics');
+  expect(metrics.cssVisualViewport).toMatchObject({pageX:0,pageY:0});
+  const {data}=await cdp.send('Page.captureScreenshot',{format:'bgra',clip:{x:0,y:0,width:16,height:15/1.75,scale:1}});
+  const frame=JSON.parse(data);directory=dirname(frame.path);
+  expect(frame).toMatchObject({version:1,transport:'file',format:'bgra',width:28,height:15});expect(existsSync(frame.path)).toBe(true);
+  cdp.events.length=0;
+  await cdp.send('Page.startScreencast',{format:'png',maxWidth:4,maxHeight:2,clip:{x:0,y:0,width:4,height:2,scale:1},everyNthFrame:1});
+  let event;for(let i=0;i<100;i++){event=cdp.events.find(e=>e.method==='Page.screencastFrame');if(event)break;await Bun.sleep(20);}
+  expect(event).toBeDefined();
+  const crop=Buffer.from(event.params.data,'base64');
+  // Native 1.75 density is preserved, rather than rescaling to maxWidth/maxHeight.
+  expect([crop.readUInt32BE(16),crop.readUInt32BE(20)]).toEqual([7,4]);
+  await cdp.send('Page.screencastFrameAck',{sessionId:event.params.sessionId});
+  await cdp.send('Page.stopScreencast');
+  const png=await cdp.send('Page.captureScreenshot',{format:'png'});
+  expect([...Buffer.from(png.data,'base64').subarray(0,4)]).toEqual([137,80,78,71]);
+ }finally{cdp.close();server.stop(true);browser.close();}
+ expect(existsSync(directory)).toBe(false);
+},20000);
+
+test('closing during listener startup rejects promptly and a new start remains usable',async()=>{
+ const host=new RendererHost();
+ const pending=host.start();host.close();
+ await expect(pending).rejects.toThrow('closed');
+ try{await host.start();expect(host.pid).toBeGreaterThan(0);}finally{host.close();}
+},15000);
+
+for(const compositor of [true,false])test(`fractional CDP clips preserve exact physical dimensions and raw pixels (compositor=${compositor})`,async()=>{
+ const host=new RendererHost({compositor});
+ try {
+  await host.start();await host.call('resize',16,9,1.75);
+  await host.call('loadDocument',{url:'https://clip.test/',contentType:'text/html',source:'<body style="margin:0;background:red"><div style="height:3px;background:blue"></div><div style="height:100px"></div>'});
+  await host.call('whenLoaded');
+  const full=JSON.parse(await host.composite('screenshot',{format:'rgba'}));
+  expect([full.width,full.height]).toEqual([28,16]);
+  const clip={x:0,y:0,width:16,height:15/1.75,scale:1};
+  const cropped=JSON.parse(await host.composite('screenshot',{format:'rgba',clip}));
+  expect([cropped.width,cropped.height]).toEqual([28,15]);
+  expect(readFileSync(cropped.path)).toEqual(readFileSync(full.path).subarray(0,28*15*4));
+  const CK=await kit;const png=CK.MakeImageFromEncoded(Buffer.from(await host.composite('screenshot',{format:'png',clip}),'base64'));
+  expect([png.width(),png.height()]).toEqual([28,15]);png.delete();
+  await host.composite('scroll',0,4);
+  const offset=await host.composite('scrollOffset');
+  const scrolled=JSON.parse(await host.composite('screenshot',{format:'bgra',clip:{...clip,y:offset.y}}));
+  expect([...readFileSync(scrolled.path).subarray(0,4)]).toEqual([0,0,255,255]);
+  await expect(host.composite('screenshot',{format:'rgba',clip:{...clip,width:Infinity}})).rejects.toThrow();
+ }finally{host.close();}
+},20000);
+
+test('scale-one full-width fractional clip borrows contiguous raster bytes',async()=>{
+ const {captureViewport}=await import('../lib/paint/frame.js');
+ const tile={x:0,y:0,scale:1.75,pixelWidth:28,pixelHeight:16,pixels:new Uint8Array(28*16*4)};
+ const frame=captureViewport(tile,0,0,16,9,{x:0,y:0,width:16,height:15/1.75,scale:1});
+ expect(frame.pixels.buffer).toBe(tile.pixels.buffer);
+ expect(frame.pixels.byteLength).toBe(28*15*4);
+});
+
+test('in-flight raw capture follows an origin renderer swap without exposing compositor closed',async()=>{
+ const {createBrowser}=await import('../lib/headless-shell.js');
+ const server=Bun.serve({port:0,fetch:()=>new Response('<body style="margin:0;background:rgb(211,73,19)">',{headers:{'content-type':'text/html'}})});
+ const browser=await createBrowser({spareRenderer:false});
+ const original=RendererHost.prototype.composite;let rejectCapture,armed=true;
+ const reached=Promise.withResolvers();
+ RendererHost.prototype.composite=function(method,...params){
+  if(armed&&method==='screenshot'){
+   armed=false;reached.resolve();return new Promise((_,reject)=>rejectCapture=reject);
+  }
+  return original.call(this,method,...params);
+ };
+ try{
+  const pending=browser.context.screenshot({format:'bgra'});
+  await reached.promise;
+  await browser.context.navigate(`http://127.0.0.1:${server.port}/`);
+  rejectCapture(Error('compositor closed'));
+  const frame=JSON.parse(await pending);const bytes=readFileSync(frame.path);
+  expect(frame.format).toBe('bgra');expect([...bytes.subarray(0,4)]).toEqual([19,73,211,255]);
+  unlinkSync(frame.path);
+ }finally{RendererHost.prototype.composite=original;browser.close();server.stop(true);}
+},20000);

package/test/render-tree.test.js

@@ -40,6 +40,34 @@ test("keeps node IDs stable across generations of the same DOM", () => {
   window.happyDOM.abort();
 });
 
+test("closed details show only their first summary and update when opened", async () => {
+  const { StyleEngine } = await import("../lib/style/computed-style.js");
+  const { document, window } = parseHTMLDocument(`<details><p>Before summary</p><summary>Menu</summary><summary>Extra summary</summary><p>Contents</p></details>`);
+  const builder = new RenderTreeBuilder();
+  const styles = new StyleEngine();
+  const first = builder.build(document, styles.compute(document));
+  expect(renderTreeText(first)).toBe("▶ Menu");
+  document.querySelector("details").setAttribute("open", "");
+  const second = builder.build(document, styles.compute(document));
+  expect(renderTreeText(second)).toContain("▼ Menu");
+  expect(renderTreeText(second)).toContain("Extra summary");
+  expect(renderTreeText(second)).toContain("Contents");
+  expect(renderTreeText(second)).toContain("Before summary");
+  window.happyDOM.abort();
+});
+
+test("details without summary generate the default label and author CSS can override hidden", async () => {
+  const { StyleEngine } = await import("../lib/style/computed-style.js");
+  const { document, window } = parseHTMLDocument(`<details style="padding:20px;border:3px solid;color:red">Contents</details><p hidden style="display:block">Visible</p>`);
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  expect(renderTreeText(tree)).toBe("▶ DetailsVisible");
+  const summary = [...tree.nodesById.values()].find(node => node.tagName === "SUMMARY");
+  expect(summary.style.padding).toEqual([0, 0, 0, 0]);
+  expect(summary.style.borderWidths).toEqual([0, 0, 0, 0]);
+  expect(summary.style.color).toBe("rgba(255, 0, 0, 1)");
+  window.happyDOM.abort();
+});
+
 test("includes visible elements appended beside body under html", async () => {
   const { StyleEngine } = await import("../lib/style/computed-style.js");
   const { document, window } = parseHTMLDocument(`<html><head></head><body><p>body</p></body></html>`);

package/test/renderer-memory.test.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'bun:test';
+
+test('CanvasKit renderer lifetimes release native surfaces and failed video readbacks', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/renderer-memory.js', import.meta.url).pathname],
+    { stdout: 'pipe', stderr: 'pipe' });
+  const [code, stdout, stderr] = await Promise.all([
+    child.exited, new Response(child.stdout).text(), new Response(child.stderr).text(),
+  ]);
+  expect({ code, stderr }).toEqual({ code: 0, stderr: '' });
+  expect(stdout).toContain('renderer memory lifecycle passed');
+}, 30_000);

package/test/selector-traits.test.js

@@ -17,3 +17,27 @@ test("finds :has() compounds and sibling-target compounds in a sheet", () => {
   expect(traits.descendantFeatures.has(".esc:a")).toBe(true);
   expect(traits.sibling && traits.firstChild && traits.lastChild).toBe(true);
 });
+
+test("focus pseudo-class features retain their complete names", () => {
+  const traits = sheetTraits('.a:focus .x{}.b:focus-visible .x{}.c:focus-within .x{}');
+  expect(traits.descendantStateCompounds.map(entry=>entry.states)).toEqual([[":focus"],[":focus-visible"],[":focus-within"]]);
+});
+
+test("nested rule groups retain their first selector's invalidation dependencies", () => {
+  const traits=sheetTraits('@media(min-width:1px){@layer app{.panel:focus-within .label{color:red}.panel:has([data-open]){color:blue}}}');
+  expect(traits.descendantStateCompounds.map(entry=>entry.states)).toEqual([[":focus-within"]]);
+  expect([...traits.hasCompounds]).toEqual(['.panel:has([data-open])']);
+  expect(traits.descendantFeatures.has('.panel')).toBe(true);
+});
+
+test("functional alternatives constrain state invalidation without assuming negated requirements", () => {
+  const traits = sheetTraits(':is(.a,.b):focus-within .x{}:where(.outer > .target,button):focus .x{}:not(:is(.a,.b)):focus .x{}');
+  expect(traits.descendantStateCompounds.map(entry=>entry.alternatives))
+    .toEqual([[[[".a"],[".b"]]],[[[".target"],["t:button"]]],[]]);
+});
+
+test("observed attributes include nested, subject and escaped selectors", () => {
+  const traits = sheetTraits(String.raw`@media (min-width:1px){[data-open] .x:has([aria-expanded="true"]){} }
+    :is([title],[data-foo\:bar]){}.x[DATA-STATE]{}[ns|data-mode]{}[|data-empty]{}[data\2d escaped]{}`);
+  expect([...traits.observedAttributes].sort()).toEqual(["aria-expanded","data-empty","data-escaped","data-foo:bar","data-mode","data-open","data-state","title"]);
+});

package/test/shared-frame-pool.test.js

@@ -0,0 +1,63 @@
+import { expect, test } from "bun:test";
+import { SharedFramePool, FrameLeaseTracker } from "../lib/paint/shared-frame-pool.js";
+
+test("pixel reuse waits for both current renderer ownership and every compositor lease", () => {
+  const pool = new SharedFramePool();
+  const first = pool.acquire(16); first.fill(7); pool.publish(1, first);
+  pool.publish(2, first); // Scroll publication with the same current pixels.
+  pool.release(1);
+  const second = pool.acquire(16); second.fill(9); pool.publish(3, second);
+  const third = pool.acquire(16);
+  expect(third.buffer).not.toBe(first.buffer);
+  expect([...first]).toEqual(Array(16).fill(7));
+  pool.release(2);
+  expect(pool.acquire(16).buffer).toBe(first.buffer);
+  pool.release(3);
+  expect(pool.acquire(16).buffer).not.toBe(second.buffer); // Still renderer's current tile.
+  pool.clear();
+});
+
+test("an old frame stays immutable while its asynchronous screenshot encoder is reading it", async () => {
+  const pool = new SharedFramePool();
+  const released = [];
+  const tracker = new FrameLeaseTracker(serial => { released.push(serial); pool.release(serial); });
+  const first = pool.acquire(8); first.fill(1); pool.publish(1, first); tracker.replace(1, first);
+  let finish;
+  const captured = tracker.capture(async pixels => { await new Promise(resolve => finish = resolve); return [...pixels]; });
+  const second = pool.acquire(8); second.fill(2); pool.publish(2, second); tracker.replace(2, second);
+  expect(released).toEqual([]);
+  const third = pool.acquire(8); third.fill(3); pool.publish(3, third); tracker.replace(3, third);
+  expect(released).toEqual([2]);
+  expect(pool.acquire(8).buffer).toBe(second.buffer);
+  finish();
+  expect(await captured).toEqual(Array(8).fill(1));
+  expect(released).toEqual([2, 1]);
+  expect(pool.acquire(8).buffer).toBe(first.buffer);
+  pool.clear();
+});
+
+test("idle pixel cache stays bounded and failed captures release their retired frames", async () => {
+  const pool = new SharedFramePool({ maxBuffers: 1, maxBytes: 8 });
+  const frames = Array.from({ length: 4 }, (_, i) => {
+    const pixels = pool.acquire(8); pool.publish(i, pixels); return pixels;
+  });
+  pool.release(0); pool.release(1); pool.release(2);
+  expect(pool.acquire(8).buffer).toBe(frames[2].buffer);
+  expect(frames.some(frame => pool.acquire(8).buffer === frame.buffer)).toBe(false);
+  const released = [];
+  const tracker = new FrameLeaseTracker(serial => released.push(serial));
+  tracker.replace(10, "old");
+  const pending = tracker.capture(() => { throw new Error("encoder failed"); });
+  tracker.replace(11, "new");
+  await expect(pending).rejects.toThrow("encoder failed");
+  expect(released).toEqual([10]);
+});
+
+test("a resize replaces idle warm-up buffers with reusable current-size buffers", () => {
+  const pool = new SharedFramePool({ maxBuffers: 2 });
+  const small = pool.acquire(4); pool.publish(1, small);
+  const medium = pool.acquire(8); pool.publish(2, medium); pool.release(1);
+  const large = pool.acquire(32); pool.publish(3, large); pool.release(2);
+  const next = pool.acquire(32); pool.publish(4, next); pool.release(3);
+  expect(pool.acquire(32).buffer).toBe(large.buffer);
+});

package/test/style-sheets.test.js

@@ -0,0 +1,51 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { RendererHost } from "../lib/renderer/host.js";
+
+let renderer;
+const requests = [];
+beforeAll(async () => {
+  renderer = new RendererHost({ timeout: 20_000, fetch: async url => {
+    requests.push(String(url));
+    return new Response("#target { color: blue }", { headers: { "content-type": "text/css" } });
+  }});
+  await renderer.start();
+});
+afterAll(() => renderer?.close());
+const read = (code = "") => renderer.call("evaluate", `(()=>{${code};return getComputedStyle(document.getElementById('target')).color})()`);
+async function load(source) {
+  await renderer.call("loadDocument", { url: "https://style.test/", contentType: "text/html", status: 200, source });
+  await renderer.call("whenLoaded");
+}
+
+test("inline sheet media and type are respected after mutation and viewport changes", async () => {
+  await renderer.call("resize", 800, 600, 1);
+  await load(`<!doctype html><style>#target{color:red}</style>
+    <style media="print">#target{color:purple}</style>
+    <style id="responsive" media="screen and (max-width:500px)">#target{color:green}</style>
+    <style id="typed" type="text/plain">#target{color:blue}</style><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  await renderer.call("resize", 400, 600, 1);
+  expect(await read()).toBe("rgba(0, 128, 0, 1)");
+  expect(await read("document.getElementById('responsive').setAttribute('media','print')")).toBe("rgba(255, 0, 0, 1)");
+  expect(await read("document.getElementById('typed').setAttribute('type','text/css')")).toBe("rgba(0, 0, 255, 1)");
+});
+
+test("linked sheet media can change without refetching and disabled sheets fetch on enable", async () => {
+  requests.length = 0;
+  await load(`<!doctype html><style>#target{color:red}</style>
+    <link id="linked" rel="stylesheet" href="/linked.css" media="print"><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  expect(requests).toEqual(["https://style.test/linked.css"]);
+  expect(await read("document.getElementById('linked').setAttribute('media','screen')")).toBe("rgba(0, 0, 255, 1)");
+  expect(requests.length).toBe(1);
+  expect(await read("document.getElementById('linked').setAttribute('disabled','')")).toBe("rgba(255, 0, 0, 1)");
+  await load(`<!doctype html><style>#target{color:red}</style>
+    <link id="linked" rel="stylesheet" disabled href="/disabled.css"><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  expect(requests.length).toBe(1);
+  await read("document.getElementById('linked').removeAttribute('disabled')");
+  const deadline = Date.now() + 3000;
+  while (await read() !== "rgba(0, 0, 255, 1)" && Date.now() < deadline) await Bun.sleep(10);
+  expect(await read()).toBe("rgba(0, 0, 255, 1)");
+  expect(requests).toEqual(["https://style.test/linked.css", "https://style.test/disabled.css"]);
+});