buninu-browser 0.2.3 → 0.3.0

package/test/svg.test.js

@@ -39,6 +39,35 @@ test("parses transform lists into one matrix", () => {
   expect([a, b, c, d].map((value) => Math.round(value))).toEqual([0, 1, -1, 0]);
 });
 
+test("SVG paint follows the CSS cascade, inherited HTML fill and descendant currentColor", () => {
+  const { document, window } = parseHTMLDocument(`<main style="fill:green;color:blue"><svg viewBox="0 0 24 24" style="opacity:.5">
+    <path id="inherited" d="M0 0h3v3z"/>
+    <path id="overridden" fill="red" stroke-width="1" d="M4 0h3v3z"/>
+    <g style="color:red;fill:currentColor;opacity:.5"><path d="M8 0h3v3z"/></g>
+    <path id="inline" fill="red" style="fill:yellow" d="M12 0h3v3z"/>
+  </svg></main>`);
+  const styles = new StyleEngine().compute(document, ["#overridden {fill:blue;stroke:currentColor;stroke-width:2;fill-opacity:50%;fill-rule:evenodd}"]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const svg = [...tree.nodesById.values()].find(node => node.tagName === "SVG").svg;
+  expect(svg.shapes.map(shape => shape.fill)).toEqual([
+    "rgba(0, 128, 0, 1)", "rgba(0, 0, 255, 1)", "rgba(255, 0, 0, 1)", "rgba(255, 255, 0, 1)",
+  ]);
+  expect(svg.shapes[1]).toMatchObject({ stroke: "rgba(0, 0, 255, 1)", strokeWidth: 2, fillOpacity: .5, fillRule: "evenodd" });
+  expect(svg.shapes[0].fillOpacity).toBe(1); // Root opacity is applied by its CSS box, once.
+  expect(svg.shapes[2].fillOpacity).toBe(.5);
+  window.happyDOM.abort();
+});
+
+test("SVG CSS display removes a subtree while visible descendants can override visibility", () => {
+  const { document, window } = parseHTMLDocument(`<svg><g class="hidden"><path d="M0 0h3v3z"/><path class="visible" d="M4 0h3v3z"/></g>
+    <g class="none"><path class="visible" d="M8 0h3v3z"/></g></svg>`);
+  const styles = new StyleEngine().compute(document, [".hidden {visibility:hidden}.visible{visibility:visible}.none{display:none}"]);
+  const svg = extractSvg(document.querySelector("svg"), "black", styles);
+  expect(svg.shapes).toHaveLength(1);
+  expect(svg.shapes[0].d).toBe("M4 0h3v3z");
+  window.happyDOM.abort();
+});
+
 test("inline SVG is a replaced box with margins and vertical-align in the line", () => {
   const { document, window } = parseHTMLDocument(`<body style="margin:0"><p style="margin:0">
     <svg viewBox="0 0 16 16" width="16" height="16" style="margin-right:8px;vertical-align:text-bottom"><path d="M0 0h16v16z"/></svg>Readme</p></body>`);

package/test/text-layout.test.js

@@ -8,6 +8,32 @@ function boxFor(tree, layout, tagName) {
   return layout.boxes.find((box) => tree.nodesById.get(box.nodeId)?.tagName === tagName);
 }
 
+test("display contents removes the wrapper box while preserving inherited text styles", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0;font-size:10px;line-height:10px">
+    before <div id="wrapper" style="display:contents;padding:50px;border:10px solid;position:absolute;color:red"><span>inside</span></div> after
+  </body>`);
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  const layout = layoutText(tree, { x:0, y:0, width:200, measureText:text=>text.length });
+  expect(layout.boxes.some(box => tree.nodesById.get(box.nodeId)?.domNode?.id === "wrapper")).toBe(false);
+  expect(layout.fragments.length).toBe(1);
+  expect(layout.fragments[0].text.trim()).toBe("before inside after");
+  expect([...tree.nodesById.values()].find(node => node.type === "text" && node.text === "inside").style.color).toBe("rgba(255, 0, 0, 1)");
+  window.happyDOM.abort();
+});
+
+test("display contents promotes nested children into flex and grid item placement", () => {
+  for (const display of ["flex", "grid"]) {
+    const { document, window } = parseHTMLDocument(`<body style="margin:0"><main style="display:${display};grid-template-columns:20px 20px 20px;gap:5px">
+      <div style="display:contents"><i style="width:20px;height:10px"></i><span style="display:contents"><i style="width:20px;height:10px"></i></span></div>
+      <i style="width:20px;height:10px"></i></main></body>`);
+    const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+    const layout = layoutText(tree, { x:0, y:0, width:200 });
+    expect(layout.boxes.filter(box => tree.nodesById.get(box.nodeId)?.tagName === "I").map(box => [box.x,box.y,box.width,box.height]))
+      .toEqual([[0,0,20,10],[25,0,20,10],[50,0,20,10]]);
+    window.happyDOM.abort();
+  }
+});
+
 test("percentage and calc padding reserve an aspect-ratio box and reflow on resize", () => {
   const { document, window } = parseHTMLDocument(`<body style="margin:0">
     <div id="ratio" style="position:relative;padding-bottom:calc(100% * 9 / 16)">
@@ -339,6 +365,86 @@ function layoutFixture(html, css = "", width = 400) {
   return { ...parsed, tree, layout, box };
 }
 
+test("column flex distributes growth, scaled shrink and constrained free space", () => {
+  for (const [children, expected] of [
+    ['<i style="flex:1;min-height:0"></i><b style="flex:2;min-height:0"></b>', [100,200]],
+    ['<i style="height:200px;min-height:0"></i><b style="height:400px;min-height:0"></b>', [100,200]],
+    ['<i style="flex:1;max-height:70px"></i><b style="flex:1"></b>', [70,230]],
+    ['<i style="flex:.25"></i><b style="flex:.25"></b>', [75,75]],
+  ]) {
+    const {window,box} = layoutFixture(`<main>${children}</main>`, 'main{display:flex;flex-direction:column;height:300px}');
+    expect([box('i').height,box('b').height]).toEqual(expected);
+    expect(box('b').y).toBe(expected[0]);
+    window.happyDOM.abort();
+  }
+});
+
+test("column flex automatic minimum protects content, while scrollable items can shrink", () => {
+  for (const [overflow,height] of [["visible",100],["auto",80],["hidden",80]]) {
+    const {window,box} = layoutFixture('<main><section><i></i></section></main>',
+      `main{display:flex;flex-direction:column;height:80px}section{overflow:${overflow}}i{display:block;height:100px}`);
+    expect(box('section').height).toBe(height);
+    window.happyDOM.abort();
+  }
+});
+
+test("an omitted flex basis uses content in an auto-height column capped by max-height", () => {
+  for (const [flex,expected] of [["1",250],["1 1",250],["1 1 0",0],["1 1 0%",250]]) {
+    const {window,box} = layoutFixture('<main><header></header><section><i></i></section></main>',
+      `main{display:flex;flex-direction:column;max-height:300px}header{height:50px;flex:none}
+       section{flex:${flex};min-height:0;overflow-y:auto}i{display:block;height:800px}`);
+    expect(box('section').height).toBe(expected);
+    expect(box('main').height).toBe(expected+50);
+    window.happyDOM.abort();
+  }
+});
+
+test("column auto margins absorb free space before justify-content", () => {
+  const {window,box} = layoutFixture('<main><i></i><b></b></main>',
+    'main{display:flex;flex-direction:column;height:300px;justify-content:space-between}i{height:40px;margin-top:auto}b{height:60px;margin-bottom:auto}');
+  expect([box('i').y,box('b').y]).toEqual([100,140]);
+  window.happyDOM.abort();
+});
+
+test("stretched and inset-sized flex columns center within their final used height", () => {
+  for (const css of [
+    'main{display:flex;height:300px}section{display:flex;flex-direction:column;justify-content:center}',
+    'main{position:relative;height:300px}section{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}',
+  ]) {
+    const {window,box} = layoutFixture('<main><section><i></i></section></main>',css+'i{display:block;height:60px;width:30px}');
+    expect(box('section').height).toBe(300);
+    expect(box('i').y).toBe(120);
+    window.happyDOM.abort();
+  }
+});
+
+test("nested column flex growth fills the viewport-sized modal wrapper", () => {
+  const {window,box} = layoutFixture('<main><section><article><i></i></article></section></main>',
+    'main{display:flex;flex-direction:column;height:800px}section{display:flex;flex-direction:column;flex-grow:1;justify-content:center}article{display:flex;justify-content:center}i{height:300px;width:200px}');
+  expect(box('section').height).toBe(800);
+  expect(box('i')).toMatchObject({x:100,y:250,width:200,height:300});
+  window.happyDOM.abort();
+});
+
+test("percentage HTML image dimensions size flex items within their container", () => {
+  const {window,box,layout} = layoutFixture('<main><img width="100%" height="100%"></main>',
+    'main{display:flex;width:84px;height:84px}');
+  expect(box('img')).toMatchObject({width:84,height:84});
+  const image=layout.fragments.flatMap(fragment=>fragment.runs).find(run=>run.type==='image');
+  expect(image).toMatchObject({width:84,height:84});
+  window.happyDOM.abort();
+});
+
+test("author auto sizing overrides HTML dimension hints and uses the image's intrinsic size", () => {
+  const {document,window}=parseHTMLDocument('<body style="margin:0"><img width="30" height="20" style="width:auto;height:auto"></body>');
+  const element=document.querySelector('img'),resources=new Map([[element,{width:120,height:60}]]);
+  const styles=new StyleEngine().compute(document);
+  const tree=new RenderTreeBuilder().build(document,styles,resources);
+  const layout=layoutText(tree,{width:400,lineHeight:20,measureText:text=>text.length*10,fontMetrics:()=>({ascent:16,height:20})});
+  expect(layout.fragments.flatMap(fragment=>fragment.runs).find(run=>run.type==='image')).toMatchObject({width:120,height:60});
+  window.happyDOM.abort();
+});
+
 test("nests block boxes and includes ancestor padding and borders", () => {
   const { window, layout, box } = layoutFixture(
     `<section><div>text</div></section>`,

package/test/video-keyframe.test.js

@@ -0,0 +1,61 @@
+import { expect, test } from 'bun:test';
+import wasmpeg from '../vendor/wasmpeg/src/js/index.js';
+import { seekVideoKeyframe } from '../lib/media/video-keyframe.js';
+
+test('seeking within a GOP longer than ten seconds preserves the decoded frame timestamp', async () => {
+  await wasmpeg.load();
+  const bytes = new Uint8Array(await Bun.file(new URL('./fixtures/long-video.mp4', import.meta.url)).arrayBuffer());
+  const decoder = await wasmpeg.decode(bytes);
+  try {
+    // This thirty-second fixture has a different picture at every frame,
+    // but only its first frame is a keyframe.
+    const firstHash = Bun.hash(decoder.nextFrame(32, 18));
+    for (const target of [15, 20, 25, 29]) {
+      const timestamp = seekVideoKeyframe(decoder, target);
+      expect(Bun.hash(decoder.nextFrame(32, 18))).toBe(firstHash);
+      expect(timestamp).toBe(0);
+    }
+  } finally { decoder.close(); }
+});
+
+test('a later MP4 initialization keeps absolute seek times, including seeks back across its first GOP', async () => {
+  await wasmpeg.load();
+  const bytes = new Uint8Array(await Bun.file(new URL('./fixtures/mse-switch-large.mp4', import.meta.url)).arrayBuffer());
+  const view = new DataView(bytes.buffer);
+  const visit = (from, to, callback) => {
+    for (let offset = from; offset + 8 <= to;) {
+      const size = view.getUint32(offset);
+      if (size < 8 || offset + size > to) break;
+      const type = String.fromCharCode(...bytes.subarray(offset + 4, offset + 8));
+      callback(type, offset + 8);
+      if (['moov', 'trak', 'mdia', 'moof', 'traf'].includes(type)) visit(offset + 8, offset + size, callback);
+      offset += size;
+    }
+  };
+  let timescale;
+  visit(0, bytes.length, (type, data) => {
+    if (type === 'mdhd') timescale = view.getUint32(data + (bytes[data] === 1 ? 20 : 12));
+  });
+  let fragments = 0;
+  visit(0, bytes.length, (type, data) => {
+    if (type !== 'tfdt') return;
+    fragments++;
+    if (bytes[data] === 1) view.setBigUint64(data + 4, view.getBigUint64(data + 4) + BigInt(6 * timescale));
+    else view.setUint32(data + 4, view.getUint32(data + 4) + 6 * timescale);
+  });
+  expect(fragments).toBeGreaterThan(0);
+  const decoder = await wasmpeg.decode(bytes, { format: 'mp4' });
+  try {
+    const hashes = [];
+    for (let pixels; (pixels = decoder.nextFrame(32, 18));) hashes.push(Bun.hash(pixels));
+    expect(hashes).toHaveLength(60);
+    // The fixture's keyframes are 2s apart. After moving tfdt by six seconds,
+    // seek(8s) must return frame 20, not frame 0 or an offset-relative frame.
+    for (const [target, frame, expectedTime] of [[6, 0, 6], [7.9, 0, 6], [8, 20, 8], [11, 40, 10], [6.2, 0, 6], [5, 0, 6]]) {
+      const timestamp = seekVideoKeyframe(decoder, target, 6);
+      expect(Bun.hash(decoder.nextFrame(32, 18))).toBe(hashes[frame]);
+      expect(timestamp).toBeGreaterThanOrEqual(expectedTime);
+      expect(timestamp).toBeLessThan(expectedTime + 1 / decoder.fps);
+    }
+  } finally { decoder.close(); }
+});

package/test/video-presentation.test.js

@@ -54,6 +54,75 @@ test("reopening at a keyframe does not show the prefix before the resume positio
   } finally { video.stop(); }
 });
 
+test("a presentation keeps absolute epoch times and ends before replaced frames", async () => {
+  let at = 0;
+  const seeks = [], reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    seek(ms) { seeks.push(ms); at = 0; },
+    nextFrame(w, h) { return new Uint8Array(w * h * 4).fill(++at); }, close() {} }) },
+    () => {}, report => reports.push(report));
+  const tick = seconds => {
+    clearTimeout(video.timer);
+    video.timing(9, seconds - 12);
+    video.step();
+  };
+  try {
+    video.timing(9, 0.2);
+    await video.open({ id: 3, time: 12.2, startTime: 12, endTime: 12.5,
+      hasAudio: true, audioId: 9, audioStart: 12 });
+    expect(Math.min(...seeks)).toBe(12000);
+    expect(video.frame.time).toBeCloseTo(12.2);
+    expect(reports.some(report => report.end !== undefined)).toBe(false);
+    tick(12.49);
+    expect(video.frame.time).toBeCloseTo(12.4);
+    expect(reports.some(report => report.end !== undefined)).toBe(false);
+    tick(12.5);
+    tick(13);
+    expect(reports.filter(report => report.end !== undefined)).toEqual([{ id: 3, end: 12.5 }]);
+    expect(reports.filter(report => report.time !== undefined).every(report => report.time >= 12.2 && report.time < 12.5)).toBe(true);
+  } finally { video.stop(); }
+});
+
+test("a short epoch snapshot reports its actual EOF so playback can request more bytes", async () => {
+  let at = 0;
+  const reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    nextFrame(w, h) { return ++at <= 2 ? new Uint8Array(w * h * 4).fill(at) : null; }, close() {} }) },
+    () => {}, report => reports.push(report));
+  try {
+    video.timing(10, 0.25);
+    await video.open({ id: 4, time: 40, startTime: 40, endTime: 45,
+      hasAudio: true, audioId: 10, audioStart: 40 });
+    expect(video.frame.time).toBeCloseTo(40.1);
+    expect(reports.find(report => report.end !== undefined)?.end).toBeCloseTo(40.2);
+  } finally { video.stop(); }
+});
+
+test("a later epoch discards queued old frames at its boundary without accepting stale bindings", async () => {
+  const reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    nextFrame(w, h) { return new Uint8Array(w * h * 4); }, close() {} }) },
+    () => {}, report => reports.push(report));
+  try {
+    video.timing(11, 0);
+    await video.open({ id: 5, time: 10, startTime: 10,
+      hasAudio: true, audioId: 11, audioStart: 10 });
+    expect(video.queue.some(frame => frame.time > 10.3)).toBe(true);
+    video.bind(4, 11, 10, 10, 10.1);
+    expect(video.config.endTime).toBeUndefined();
+    video.bind(5, undefined, undefined, undefined, 10.3);
+    expect(video.config.audioId).toBe(11);
+    expect(video.config.audioStart).toBe(10);
+    expect(video.config.time).toBe(10);
+    clearTimeout(video.timer);
+    video.timing(11, 0.3);
+    video.step();
+    expect(video.frame.time).toBeCloseTo(10.2);
+    expect(reports.find(report => report.end !== undefined)).toEqual({ id: 5, end: 10.3 });
+    expect(video.queue).toHaveLength(0);
+  } finally { video.stop(); }
+});
+
 test("video layer preserves opaque controls, translucent overlays and clipped pixels", () => {
   const base = new Uint8Array([0,0,0,255, 255,255,255,255, 0,0,128,255, 10,20,30,255]);
   const mask = new Uint8Array([255,255,255,0, 0,0,0,0, 127,127,127,0, 0,0,0,0]);

package/test/window-resize.test.js

@@ -0,0 +1,36 @@
+import {test, expect} from 'bun:test';
+import {RendererHost} from '../lib/renderer/host.js';
+
+test('viewport resize notifies window listeners with fresh geometry and repaints their changes',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try {
+  await host.start();
+  await host.call('resize',320,240,1);
+  await host.call('loadDocument',{url:'https://resize.test/',contentType:'text/html',
+   source:'<body style="margin:0"><div id="box" style="width:100%;height:10px"></div><canvas id="canvas"></canvas></body>'});
+  await host.call('whenLoaded');
+  await host.call('evaluate',`window.events=[];window.propertyEvents=0;
+   window.onresize=()=>window.propertyEvents++;
+   window.addEventListener('resize',e=>{
+    const c=document.getElementById('canvas');
+    c.width=innerWidth;c.height=innerHeight;
+    events.push([innerWidth,innerHeight,devicePixelRatio,
+      document.getElementById('box').getBoundingClientRect().width,
+      e.target===window,e.bubbles,e.cancelable]);
+    document.body.style.backgroundColor='rgb(17,34,51)';
+   });`);
+  await host.call('resize',400,300,1.5);
+  expect(await host.call('evaluate','JSON.stringify(events)')).toBe('[[400,300,1.5,400,true,false,false]]');
+  expect(await host.call('evaluate','propertyEvents')).toBe(1);
+  expect(await host.call('evaluate',`[document.getElementById('canvas').width,document.getElementById('canvas').height].join(',')`)).toBe('400,300');
+  const png=Buffer.from(await host.composite('screenshot',{format:'png'}),'base64');
+  expect([png.readUInt32BE(16),png.readUInt32BE(20)]).toEqual([600,450]);
+  expect(await host.call('evaluate',"getComputedStyle(document.body).backgroundColor")).toBe('rgba(17, 34, 51, 1)');
+  await host.call('resize',400,300,1.5);
+  await host.call('resize',400,300,2);
+  expect(await host.call('evaluate','events.length')).toBe(1);
+  await host.call('resize',400,200,2);
+  expect(await host.call('evaluate','JSON.stringify(events[1])')).toBe('[400,200,2,400,true,false,false]');
+  expect(await host.call('evaluate','propertyEvents')).toBe(2);
+ }finally{host.close();}
+},30000);

package/tools/bench-raw-capture.js

@@ -0,0 +1,32 @@
+// Run with Bun on the host to measure capture delivery, not terminal FPS.
+// Uses a local synthetic page, the normal renderer sandbox and changing crops.
+import {RendererHost} from '../lib/renderer/host.js';
+import {statSync,unlinkSync} from 'node:fs';
+const count=Number(process.argv.find(a=>a.startsWith('--samples='))?.split('=')[1] ?? 30);
+if(!Number.isInteger(count)||count<1||count>1000)throw Error('Invalid sample count');
+const host=new RendererHost();
+const reports=[];
+try{
+ await host.start();await host.call('resize',1280,690,1.5);
+ await host.call('loadDocument',{url:'https://benchmark.test/',contentType:'text/html',source:'<body style="margin:0">'+Array.from({length:80},(_,i)=>`<div style="height:44px;background:rgb(${i*17%256},${i*37%256},${i*71%256})">Frame ${i} 中文 ABCDEFG 0123456789</div>`).join('')});
+ await host.call('whenLoaded');await Bun.sleep(500);
+ const formats=process.argv.find(a=>a.startsWith('--formats='))?.slice('--formats='.length).split(',') ?? ['png','jpeg','rgba','bgra','bgra','rgba','jpeg','png'];
+ for(const format of formats){
+  if(!['png','jpeg','rgba','bgra'].includes(format))throw Error('Invalid format');
+  const samples=[];let bytes=0;
+  for(let i=0;i<count+3;i++){
+   await host.composite('scroll',0,i%2?17:-17);
+   const start=performance.now();
+   const data=await host.composite('screenshot',{format,quality:85,optimizeForSpeed:true});
+   const ms=performance.now()-start;
+   if(format==='rgba'||format==='bgra'){
+    const f=JSON.parse(data);bytes=statSync(f.path).size;unlinkSync(f.path);
+   }else bytes=Buffer.byteLength(data,'base64');
+   if(i>=3)samples.push(ms);
+  }
+  samples.sort((a,b)=>a-b);
+  const report={format,count,meanMs:samples.reduce((a,b)=>a+b,0)/count,medianMs:samples[Math.floor(count/2)],bytes};
+  reports.push(report);console.log(JSON.stringify(report));
+ }
+ console.log(JSON.stringify({sandbox:host.sandbox,capture:[1920,1035],reports}));
+}finally{host.close();}

package/tools/browser-lab.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env bun
+// Development-only CDP comparison runner. No package dependencies or page patches.
+import { mkdirSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+
+export class CDP {
+  constructor(url) {
+    this.ws = new WebSocket(url); this.next = 1; this.pending = new Map(); this.events = [];
+    this.ready = new Promise((yes, no) => { this.ws.addEventListener('open', yes, {once:true}); this.ws.addEventListener('error', no, {once:true}); });
+    this.ws.addEventListener('message', ({data}) => {
+      const m = JSON.parse(data);
+      if (m.id) { const p = this.pending.get(m.id); if (!p) return; this.pending.delete(m.id); clearTimeout(p.timer); m.error ? p.no(Error(JSON.stringify(m.error))) : p.yes(m.result); }
+      else { this.events.push({time:performance.now(), ...m}); if(this.events.length>3000)this.events.shift(); }
+    });
+    this.ws.addEventListener('close', () => { for(const p of this.pending.values()){clearTimeout(p.timer);p.no(Error('CDP closed'));} this.pending.clear(); });
+  }
+  async send(method, params={}, timeout=30000) {
+    await this.ready;
+    return new Promise((yes,no) => { const id=this.next++; const timer=setTimeout(()=>{this.pending.delete(id);no(Error(`${method} timed out`));},timeout);this.pending.set(id,{yes,no,timer});this.ws.send(JSON.stringify({id,method,params,...(this.sessionId?{sessionId:this.sessionId}:{})})); });
+  }
+  async evaluate(expression, timeout=10000) { const r=await this.send('Runtime.evaluate',{expression,returnByValue:true,awaitPromise:true},timeout);if(r.exceptionDetails)throw Error(r.exceptionDetails.text+' '+(r.exceptionDetails.exception?.description||''));return r.result?.value; }
+  close(){this.ws.close();}
+}
+export async function launch(engine, dir, extra=[]) {
+  mkdirSync(dir,{recursive:true});
+  const log=join(dir,engine+'.log');
+  const cmd=engine==='chromium' ? ['/usr/local/bin/chromium-headless-shell','--no-sandbox','--disable-dev-shm-usage','--remote-debugging-port=0','--window-size=1280,800',...extra,'about:blank'] : [process.execPath,resolve('buninu-browser.js'),'--remote-debugging-port=0',...extra];
+  const proc=Bun.spawn(cmd,{stdout:Bun.file(join(dir,engine+'.stdout')),stderr:'pipe',env:{...process.env,BUNINU_LOG:join(dir,'buninu-diagnostic.log')}});
+  let stderr='';const writer=Bun.file(log).writer();
+  (async()=>{for await(const chunk of proc.stderr){writer.write(chunk);stderr+=Buffer.from(chunk).toString();if(stderr.length>200000)stderr=stderr.slice(-100000);}await writer.end();})();
+  let cdp;
+  try {
+  let port;for(let i=0;i<200;i++){const m=stderr.match(/DevTools listening on ws:\/\/[^:]+:(\d+)/);if(m){port=Number(m[1]);break;}if(proc.exitCode!==null)throw Error(`engine exited ${proc.exitCode}: ${stderr.slice(-1000)}`);await Bun.sleep(50);}
+  if(!port){proc.kill();throw Error('CDP endpoint missing');}
+  const version=await (await fetch(`http://127.0.0.1:${port}/json/version`)).json();
+  cdp=new CDP(version.webSocketDebuggerUrl);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('Page.enable');await cdp.send('Runtime.enable');
+  await cdp.send('Emulation.setDeviceMetricsOverride',{width:1280,height:800,deviceScaleFactor:1,mobile:false});
+  return {cdp,proc,stop:async()=>{cdp.close();proc.kill();await proc.exited;}};
+  } catch(error) { cdp?.close();proc.kill();await proc.exited;throw error; }
+}
+const describe = `(()=>({url:location.href,title:document.title,text:document.body?.innerText?.slice(0,12000),nodes:document.querySelectorAll('*').length,readyState:document.readyState,controls:[...document.querySelectorAll('a,button,input,select,summary,[role="button"]')].map(e=>{const r=e.getBoundingClientRect();return {tag:e.tagName,text:(e.innerText||e.getAttribute('aria-label')||e.getAttribute('placeholder')||'').trim().slice(0,100),href:e.getAttribute('href'),id:e.id,x:r.x,y:r.y,width:r.width,height:r.height};}).filter(e=>e.width>0&&e.height>0&&e.x<1280&&e.y<800&&e.x+e.width>0&&e.y+e.height>0).slice(0,100)}))()`;
+export async function snapshot(cdp,dir,name) {
+  const start=performance.now(); const {data}=await cdp.send('Page.captureScreenshot',{format:'png'});const captureMs=performance.now()-start;
+  await Bun.write(join(dir,name+'.png'),Buffer.from(data,'base64'));
+  let dom;try{dom=await cdp.evaluate(describe);}catch(error){dom={error:error.message};}
+  await Bun.write(join(dir,name+'.json'),JSON.stringify({...dom,captureMs},null,2));return {captureMs,...dom};
+}
+export async function runCase({engine,url,dir,actions=[],settle=1500}) {
+  const started=performance.now();let browser;const report={engine,url,actions:[]};
+  try {
+    browser=await launch(engine,dir);const {cdp}=browser;report.startupMs=performance.now()-started;
+    const nav=performance.now();await cdp.send('Page.navigate',{url},45000);report.navigateReplyMs=performance.now()-nav;
+    const deadline=performance.now()+30000;
+    while(performance.now()<deadline&&!cdp.events.some(e=>e.method==='Page.loadEventFired'&&e.time>=nav))await Bun.sleep(100);
+    const loaded=cdp.events.find(e=>e.method==='Page.loadEventFired'&&e.time>=nav);report.loadMs=loaded?loaded.time-nav:null;
+    await Bun.sleep(settle);report.initial=await snapshot(cdp,dir,'initial');
+    for(let i=0;i<actions.length;i++){
+      const action=actions[i],at=performance.now();let error=null;
+      try {
+        if(action.click||action.clickText){const point=await cdp.evaluate(`(()=>{const candidates=[...document.querySelectorAll(${JSON.stringify(action.click||'button,a,summary,[role="button"],[role="menuitem"]')})];const e=candidates.find(e=>{const r=e.getBoundingClientRect(),s=getComputedStyle(e);return r.width>0&&r.height>0&&s.visibility!=='hidden'&&(!${JSON.stringify(action.clickText||'')}||(e.innerText||e.getAttribute('aria-label')||'').trim()===${JSON.stringify(action.clickText||'')});});if(!e)return null;e.scrollIntoView({block:'nearest',inline:'nearest'});const r=e.getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2};})()`);if(!point)throw Error('visible selector not found');for(const type of ['mousePressed','mouseReleased'])await cdp.send('Input.dispatchMouseEvent',{type,...point,button:'left',clickCount:1});}
+        else if(action.point){for(const type of ['mousePressed','mouseReleased'])await cdp.send('Input.dispatchMouseEvent',{type,x:action.point[0],y:action.point[1],button:'left',clickCount:1});}
+        else if(action.type)await cdp.send('Input.insertText',{text:action.type});
+        else if(action.key){for(const type of ['keyDown','keyUp'])await cdp.send('Input.dispatchKeyEvent',{type,key:action.key,code:action.key,windowsVirtualKeyCode:action.key==='Enter'?13:action.key==='Escape'?27:0});}
+        else if(action.scroll)await cdp.send('Input.dispatchMouseEvent',{type:'mouseWheel',x:640,y:500,deltaY:action.scroll,deltaX:0});
+        else if(action.evaluate)report.lastEvaluation=await cdp.evaluate(action.evaluate);
+      }catch(e){error=e.message;}
+      await Bun.sleep(action.wait??600);
+      const state=await snapshot(cdp,dir,`action-${i+1}`);report.actions.push({action,error,elapsedMs:performance.now()-at,state});
+    }
+    report.errors=cdp.events.filter(e=>e.method==='Runtime.exceptionThrown').slice(-20);
+  }catch(error){report.error=error.stack;}finally{await browser?.stop();report.totalMs=performance.now()-started;await Bun.write(join(dir,'report.json'),JSON.stringify(report,null,2));}
+  return report;
+}
+if(import.meta.main){const [engine,url,dir,...rest]=process.argv.slice(2);if(!engine||!url||!dir)throw Error('usage: bun tools/browser-lab.js ENGINE URL OUTPUT_DIR [ACTIONS_JSON]');const result=await runCase({engine,url,dir:resolve(dir),actions:rest[0]?JSON.parse(rest[0]):[]});console.log(JSON.stringify({engine,url,error:result.error,startupMs:result.startupMs,loadMs:result.loadMs,captureMs:result.initial?.captureMs,title:result.initial?.title,actions:result.actions.map(a=>({action:a.action,error:a.error,url:a.state?.url}))}));}

package/tools/browser-soak.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env bun
+// End-to-end bounded DOM/canvas/image churn, navigation and CDP capture soak.
+// Usage: bun tools/browser-soak.js buninu /tmp/browser-soak 900
+import { join, resolve } from 'node:path';
+import { launch } from './browser-lab.js';
+import { encodeImage } from '../lib/paint/frame.js';
+import { processMemory } from './process-memory.js';
+
+const [engine = 'buninu', directory = '/tmp/browser-soak', seconds = '600'] = process.argv.slice(2);
+const duration = Math.max(1, Number(seconds)) * 1000;
+const dir = resolve(directory);
+const rgba = new Uint8Array(32 * 32 * 4);
+for (let i = 0; i < rgba.length; i += 4) rgba.set([30, 120, 210, 255], i);
+const png = await encodeImage(rgba, 32, 32);
+let requests = 0;
+const server = Bun.serve({ port: 0, fetch(request) {
+  requests++;
+  const url = new URL(request.url);
+  if (url.pathname === '/pixel.png') return new Response(png, { headers: { 'content-type': 'image/png', 'cache-control': 'max-age=3600' } });
+  return new Response(`<!doctype html><meta charset="utf-8"><title>Browser soak ${url.search}</title>
+    <style>body{margin:0;font:16px sans-serif;background:#fafafa}header{position:sticky;top:0;background:#135;color:white;padding:12px;z-index:2}main{padding:12px}.card{display:flex;gap:12px;align-items:center;padding:8px;border-bottom:1px solid #ddd}canvas{display:block}button{font:inherit}</style>
+    <header>Navigation ${url.search} · <span id="counter">0</span> <button id="toggle">Toggle</button></header>
+    <main><canvas id="paint" width="800" height="120"></canvas><section id="cards">${Array.from({length:160}, (_,i)=>`<div class="card"><img src="/pixel.png" width="32" height="32"><span>Row ${i}: Browser rendering, memory and input exercise 中文 🙂</span></div>`).join('')}</section></main>
+    <script>
+      let tick=0; const paint=document.getElementById('paint'); const context=paint.getContext('2d');
+      const counter=document.getElementById('counter'); const cards=document.getElementById('cards');
+      document.getElementById('toggle').onclick=()=>document.body.style.background=tick%2?'#def':'#fed';
+      setInterval(()=>{tick++;counter.textContent=String(tick);context.fillStyle=tick%2?'#69c':'#c96';context.fillRect((tick*11)%760,20,40,80);
+        if(tick%10===0){const card=cards.firstElementChild;card.querySelector('span').textContent='Recycled row '+tick;cards.appendChild(card);}
+        if(tick%20===0){for(let i=0;i<8;i++){const c=document.createElement('canvas');c.width=800;c.height=600;c.getContext('2d').fillRect(0,0,800,600);}}
+      },100);
+    </script>`, { headers: { 'content-type': 'text/html' } });
+} });
+
+let browser;
+const samples = [];
+const errors = [];
+const started = performance.now();
+let navigations = 0;
+try {
+  browser = await launch(engine, dir);
+  const writer = Bun.file(join(dir, 'samples.jsonl')).writer();
+  const { cdp } = browser;
+  let nextNavigation = 0;
+  while (performance.now() - started < duration) {
+    const elapsed = performance.now() - started;
+    if (elapsed >= nextNavigation) {
+      const host = Math.floor(navigations / 4) % 2 ? 'localhost' : '127.0.0.1';
+      await cdp.send('Page.navigate', { url: `http://${host}:${server.port}/page?n=${navigations++}` });
+      nextNavigation = elapsed + 15000;
+      await Bun.sleep(300);
+    }
+    try {
+      await cdp.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: 600, y: 500, deltaY: samples.length % 20 < 10 ? 180 : -180, deltaX: 0 });
+      const before = performance.now();
+      const { data } = await cdp.send('Page.captureScreenshot', { format: 'png', optimizeForSpeed: true });
+      const captureMs = performance.now() - before;
+      const counter = await cdp.evaluate(`document.getElementById('counter')?.textContent`);
+      const processes = await processMemory(browser.proc.pid);
+      const sample = { elapsedMs: Math.round(elapsed), navigation: navigations, counter, captureMs, encodedLength: data.length, rssMiB: processes ? processes.reduce((sum,p)=>sum+p.rssKiB,0)/1024 : null, processes };
+      samples.push(sample);writer.write(JSON.stringify(sample)+'\n');writer.flush();
+      if (samples.length % 30 === 0) await Bun.write(join(dir, 'latest.png'), Buffer.from(data, 'base64'));
+      if (samples.length % 60 === 0) console.log(JSON.stringify(sample));
+    } catch (error) { errors.push({ elapsedMs: Math.round(elapsed), error: error.message }); }
+    await Bun.sleep(1000);
+  }
+  await writer.end();
+} finally {
+  await browser?.stop();server.stop(true);
+  const mean = values => values.length ? values.reduce((a,b)=>a+b,0)/values.length : null;
+  const report = { engine, elapsedMs: performance.now()-started, navigations, requests, samples: samples.length, errors,
+    peakRssMiB: Math.max(0,...samples.map(s=>s.rssMiB)), firstMinuteRssMiB: mean(samples.filter(s=>s.elapsedMs>=60000&&s.elapsedMs<120000).map(s=>s.rssMiB)),
+    lastMinuteRssMiB: mean(samples.filter(s=>s.elapsedMs>duration-60000).map(s=>s.rssMiB)), captureMeanMs: mean(samples.map(s=>s.captureMs)) };
+  await Bun.write(join(dir, 'report.json'), JSON.stringify(report,null,2));console.log(JSON.stringify(report));
+}

package/tools/network-reference.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env bun
+// Exercise redirects through real HTTP servers, using Chromium as a reference.
+import { launch } from "./browser-lab.js";
+import { resolve } from "node:path";
+
+const [engine = "buninu", output = "/tmp/buninu-network-reference"] = process.argv.slice(2);
+const calls = [];
+let source, target;
+const handler = async request => {
+  const url = new URL(request.url);
+  calls.push({ method: request.method, path: url.pathname, host: url.host, origin: request.headers.get("origin"),
+    cookie: request.headers.get("cookie"), authorization: request.headers.get("authorization"),
+    preflight: request.headers.get("access-control-request-headers") });
+  const cors = { "access-control-allow-origin": request.headers.get("origin") ?? source,
+    "access-control-allow-credentials": "true", "access-control-allow-methods": "PUT", "access-control-allow-headers": "x-custom" };
+  if (request.method === "OPTIONS") return new Response(null, { status: 204, headers: cors });
+  if (url.pathname === "/") return new Response("<!doctype html><title>Network reference</title><p>Redirect fixture</p>", { headers: { "content-type": "text/html" } });
+  if (url.pathname.startsWith("/redirect/")) return new Response(null, { status: 307, headers: { location: target + url.pathname.slice(9) } });
+  if (url.pathname === "/chain") return new Response(null, { status: 302, headers: { ...cors, location: source + "/finish" } });
+  return new Response("visible body", { headers: { ...(url.pathname === "/denied" ? {} : cors),
+    "x-private": "hidden", "x-public": "visible", "access-control-expose-headers": "x-public" } });
+};
+const first = Bun.serve({ port: 0, fetch: handler });
+const second = Bun.serve({ port: 0, fetch: handler });
+source = `http://localhost:${first.port}`; target = `http://localhost:${second.port}`;
+let browser;
+const report = { engine, cases: [] };
+try {
+  browser = await launch(engine, resolve(output));
+  await browser.cdp.send("Page.navigate", { url: source + "/" });
+  await Bun.sleep(300);
+  await browser.cdp.evaluate('document.cookie="private=fixture; SameSite=Lax"; undefined;');
+  for (const [name, url, init] of [
+    ["denied", source + "/redirect/denied", {}],
+    ["allowed", source + "/redirect/allowed", {}],
+    ["same-origin", source + "/redirect/allowed", { mode: "same-origin" }],
+    ["opaque", source + "/redirect/allowed", { mode: "no-cors" }],
+    ["preflight", source + "/redirect/allowed", { method: "PUT", headers: { authorization: "Bearer fixture", "x-custom": "yes" }, body: "body" }],
+    ["chain", target + "/chain", {}],
+  ]) {
+    calls.length = 0;
+    const result = await browser.cdp.evaluate(`(async()=>{try {const r=await fetch(${JSON.stringify(url)},${JSON.stringify(init)});
+      return {type:r.type,status:r.status,body:await r.text(),private:r.headers.get('x-private'),public:r.headers.get('x-public')};
+      } catch(e) {return {error:e.name};}})()`);
+    report.cases.push({ name, result, calls: calls.slice() });
+  }
+  await Bun.write(resolve(output, "network.json"), JSON.stringify(report, null, 2));
+  console.log(JSON.stringify(report));
+} finally { await browser?.stop(); first.stop(true); second.stop(true); }

package/tools/process-memory.js

@@ -0,0 +1,38 @@
+import { readdir } from 'node:fs/promises';
+
+// Android kernels may omit /proc/PID/task/PID/children. PPid in status works
+// there too; return null if this platform does not expose process memory.
+export async function processMemory(rootPid) {
+  let entries;
+  try { entries = (await readdir('/proc')).filter(name => /^\d+$/.test(name)); }
+  catch { return null; }
+  const records = (await Promise.all(entries.map(async name => {
+    try {
+      const status = await Bun.file(`/proc/${name}/status`).text();
+      return { pid: Number(name), parent: Number(status.match(/^PPid:\s+(\d+)/m)?.[1]), rssKiB: Number(status.match(/^VmRSS:\s+(\d+)/m)?.[1] ?? 0) };
+    } catch { return null; }
+  }))).filter(Boolean);
+  const children = new Map();
+  for (const record of records) {
+    if (!children.has(record.parent)) children.set(record.parent, []);
+    children.get(record.parent).push(record);
+  }
+  const root = records.find(record => record.pid === rootPid);
+  if (!root) return null;
+  const found = [root];
+  for (let index = 0; index < found.length; index++) found.push(...(children.get(found[index].pid) ?? []));
+  return found;
+}
+
+if (import.meta.main) {
+  const [pid, output, seconds = '600'] = process.argv.slice(2);
+  const writer = Bun.file(output).writer();
+  const start = Date.now();
+  while (Date.now() - start < Number(seconds) * 1000) {
+    const processes = await processMemory(Number(pid));
+    if (!processes) break;
+    writer.write(JSON.stringify({elapsedMs:Date.now()-start,rssMiB:processes.reduce((sum,p)=>sum+p.rssKiB,0)/1024,processes})+'\n');
+    writer.flush();await Bun.sleep(1000);
+  }
+  await writer.end();
+}