buninu-browser 0.7.0 → 0.9.1

package/test/fixtures/media-audio-lifetime.js

@@ -0,0 +1,65 @@
+// Isolate host scripting globals and model the decoder's bounded session pool.
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+
+let active=0,opened=0,closed=0;
+const outputs=[],errors=[];
+const renderer=await createPageRenderer({
+  fetchResource:async url=>({ok:true,contentType:'audio/mpeg',body:new Uint8Array([url.includes('background')?1:2])}),
+  reportError:error=>errors.push(String(error)),
+  videoDecoder:{
+    probe:async bytes=>({duration:bytes[0]===1?100:0.1,audio:{sampleRate:1000}}),
+    async decodeAudio(bytes){
+      if(active>=8)throw Error('audio decoder session pool exhausted');
+      active++;opened++;
+      let remaining=bytes[0]===1?100000:100,disposed=false;
+      return {sampleRate:1000,channels:1,
+        nextSamples(){assert.equal(disposed,false);if(!remaining)return null;const size=Math.min(100,remaining);remaining-=size;return new Float32Array(size).fill(.25);},
+        close(){assert.equal(disposed,false,'each decoder closes once');disposed=true;active--;closed++;},
+      };
+    },
+  },
+  audio:{
+    open(options,listener){outputs.push({listener,samples:0});return outputs.length;},
+    write(id,bytes){outputs[id-1].samples+=bytes.length/2;},
+    finish(id){queueMicrotask(()=>outputs[id-1].listener({event:'ended'}));},
+    close(id){return Promise.resolve(outputs[id-1].samples*2);},
+  },
+});
+const evaluate=source=>renderer.evaluate(source);
+const waitFor=async predicate=>{for(let i=0;i<100;i++){if(await predicate())return;await Bun.sleep(5);}assert.fail('audio did not finish');};
+async function finishSound(){
+  const output=outputs.at(-1);
+  output.listener({event:'request',bytes:1000});
+  await waitFor(()=>evaluate('effect.ended'));
+  assert.equal(output.samples,100);
+  assert.equal(await evaluate('effect.currentTime'),.1);
+  assert.equal(await evaluate('effect.error'),null);
+  assert.equal(await evaluate('background.paused'),false);
+  assert.equal(active,1,'only the playing background decoder remains after each sound ends');
+}
+try{
+  renderer.setScripting('host');
+  await renderer.loadDocument({url:'https://audio-lifetime.test/',contentType:'text/html',source:'<body></body>'});
+  await evaluate(`globalThis.background=new Audio('background.mp3');background.play()`);
+  assert.equal(active,1);
+  // Games can retain dozens of short-lived Audio objects without asking them
+  // to release a decoder explicitly. Keeping those DOM objects is harmless.
+  await evaluate('globalThis.saved=[]');
+  for(let i=0;i<12;i++){
+    await evaluate(`globalThis.effect=new Audio('effect.mp3');saved.push(effect);effect.play()`);
+    assert.equal(active,2);
+    await finishSound();
+  }
+  // Released decoders must be reconstructed for replay and for a seek.
+  await evaluate('effect.play()');await finishSound();
+  await evaluate('effect.currentTime=0');
+  await waitFor(()=>evaluate('effect.readyState>=2'));
+  await evaluate('effect.play()');await finishSound();
+  assert.equal(opened,15);
+  assert.equal(closed,14);
+  assert.deepEqual(errors,[]);
+  process.stdout.write('audio decoder lifetime integration passed\n');
+}finally{renderer.dispose();}
+assert.equal(active,0,'navigation/disposal releases the background too');
+assert.equal(closed,opened);

package/test/fixtures/renderer-memory.js

@@ -8,18 +8,17 @@ import { createPageRenderer, loadGraphics } from '../../lib/renderer/page-render
 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 malloc = kit._malloc, free = kit._free, makeSurface = kit.MakeSurface, makeRasterDirectSurface = kit.MakeRasterDirectSurface;
 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);
+const trackSurface = surface => {
   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(); };
+  const releaseSurface = surface.delete.bind(surface), snapshot = surface.makeImageSnapshot.bind(surface);
+  surface.delete = () => { surfaces.delete(surface); return releaseSurface(); };
   surface.makeImageSnapshot = (...args) => {
     const image = snapshot(...args), release = image.delete.bind(image), read = image.readPixels.bind(image);
     images.add(image);
@@ -32,6 +31,8 @@ kit.MakeSurface = (...args) => {
   };
   return surface;
 };
+kit.MakeSurface = (...args) => trackSurface(makeSurface(...args));
+kit.MakeRasterDirectSurface = (...args) => trackSurface(makeRasterDirectSurface(...args));
 const liveBytes = () => [...allocations.values()].reduce((sum, size) => sum + size, 0);
 let warmBytes;
 try {
@@ -107,4 +108,5 @@ try {
   kit._malloc = malloc;
   kit._free = free;
   kit.MakeSurface = makeSurface;
+  kit.MakeRasterDirectSurface = makeRasterDirectSurface;
 }

package/test/fixtures/video-black-replay.js

@@ -7,9 +7,9 @@ import {captureViewport} from '../../lib/paint/frame.js';
 const {CanvasKit:kit} = await loadGraphics();
 lockdown({errorTaming:'safe',overrideTaming:'severe',consoleTaming:'unsafe',localeTaming:'unsafe',stackFiltering:'concise',reporting:'none'});
 let readbacks = 0, checks = 0;
-const makeSurface = kit.MakeSurface;
-kit.MakeSurface = (...args) => {
-  const surface = makeSurface(...args), snapshot = surface.makeImageSnapshot.bind(surface);
+const makeSurface = kit.MakeSurface, makeRasterDirectSurface=kit.MakeRasterDirectSurface;
+const trackSurface = surface => {
+  const snapshot = surface.makeImageSnapshot.bind(surface);
   surface.makeImageSnapshot = () => {
     const image = snapshot(), read = image.readPixels.bind(image);
     image.readPixels = (...args) => { readbacks++; return read(...args); };
@@ -17,6 +17,8 @@ kit.MakeSurface = (...args) => {
   };
   return surface;
 };
+kit.MakeSurface=(...args)=>trackSurface(makeSurface(...args));
+kit.MakeRasterDirectSurface=(...args)=>trackSurface(makeRasterDirectSurface(...args));
 const source = `<style>body{margin:0;background:#182331;color:white;height:500px}
 #wrap{position:absolute;left:12px;top:14px;width:160px;height:90px;overflow:hidden;border-radius:13px}
 video{display:block;width:160px;height:90px}#caption{position:absolute;left:5px;top:55px;background:#6548;font:12px sans-serif}
@@ -116,9 +118,9 @@ for (const alpha of [255,127]) {
     await repaint('incomplete-shared-frame',"document.getElementById('marker').style.background='lime'");
     seed(candidate,alpha,4);
     // Controls alone currently need a separate layout invalidation to refresh
-    // their display-list bit, so force geometry here to exercise the fallback.
-    await repaint('controls',"document.getElementById('v').controls=true;document.getElementById('marker').style.width='26px'",false);
-    assert.equal(candidate.tile.videoLayer,null);
+    // their display-list bit, so force geometry here to exercise the layer.
+    await repaint('controls',"document.getElementById('v').controls=true;document.getElementById('marker').style.width='26px'");
+    assert.ok(candidate.tile.videoLayer,'controls retain independent video presentation');
     await mutate("document.getElementById('v').controls=false;document.getElementById('marker').style.width='27px'");
     for (const client of clients) await layer(client);seed(candidate,alpha);
     await repaint('controls-restored',"document.getElementById('marker').style.background='cyan'");

package/test/fixtures/video-slow-end.js

@@ -0,0 +1,39 @@
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+let decoded=0;const errors=[];
+const renderer=await createPageRenderer({
+ fetchResource:async()=>({ok:true,contentType:'video/mp4',body:new Uint8Array([1])}),
+ reportError:e=>errors.push(String(e)),
+ videoDecoder:{
+  probe:async()=>({duration:.12,video:{width:2,height:2,fpsNum:100,fpsDen:1}}),
+  decode:async()=>{let index=0;return {width:2,height:2,fps:100,
+   seek(){index=0},close(){},nextFrame(width=2,height=2){
+    if(index===12)return null;
+    const end=performance.now()+25;while(performance.now()<end){}
+    index++;decoded=index;const pixels=new Uint8Array(width*height*4);
+    for(let i=0;i<pixels.length;i+=4){pixels[i]=index*20;pixels[i+3]=255}return pixels;
+   }}},
+ },
+});
+try{
+ renderer.setScripting('host');
+ await renderer.loadDocument({url:'https://slow-video.test/',contentType:'text/html',source:'<video id="v" src="slow.mp4" controls></video>'});
+ await renderer.evaluate(`globalThis.v=document.querySelector("video");
+ globalThis.positions=[];v.addEventListener('timeupdate',()=>{
+  if(v.ended)return;
+  const c=document.createElement('canvas');c.width=c.height=2;
+  const x=c.getContext('2d');x.drawImage(v,0,0,2,2);
+  positions.push([v.currentTime,x.getImageData(0,0,1,1).data[0]]);
+ });v.play()`);
+ for(let i=0;i<100&&!await renderer.evaluate('v.ended');i++)await Bun.sleep(10);
+ assert.equal(await renderer.evaluate('v.ended'),true);
+ assert.equal(decoded,12,'ended must wait for all frames of a slow silent decoder');
+ const last=await renderer.evaluate(`(()=>{const c=document.createElement('canvas');c.width=c.height=2;const x=c.getContext('2d');x.drawImage(v,0,0,2,2);return x.getImageData(0,0,1,1).data[0]})()`);
+ assert.equal(last,240,'the actual final frame must be retained at ended');
+ const positions=await renderer.evaluate('positions');
+ assert.ok(positions.length>0,'playback must report progress');
+ for(const [time,red] of positions)assert.ok(time<=(red/20-1)/100+1e-6,
+  `progress ${time} must not lead displayed frame ${red}`);
+ assert.deepEqual(errors,[]);
+ process.stdout.write('slow video end integration passed\n');
+}finally{renderer.dispose()}

package/test/fixtures/web-audio-renderer.js

@@ -0,0 +1,45 @@
+import assert from 'node:assert/strict';
+import {createPageRenderer,loadGraphics} from '../../lib/renderer/page-renderer.js';
+
+const mode=process.argv[2]??'ses';
+if(mode==='ses'){
+  await import('../../vendor/ses/dist/ses.mjs');await loadGraphics();
+  lockdown({errorTaming:'safe',overrideTaming:'severe',consoleTaming:'unsafe',localeTaming:'unsafe',stackFiltering:'concise',reporting:'none'});
+}
+const outputs=[],closed=[],errors=[];
+const renderer=await createPageRenderer({reportError:error=>errors.push(String(error)),audio:{
+  open(options,listener){outputs.push({options,listener,pcm:[]});return outputs.length;},
+  write(id,bytes){outputs[id-1].pcm.push(new Int16Array(bytes.buffer,bytes.byteOffset,bytes.byteLength/2).slice());},
+  close(id){closed.push(id);return Promise.resolve();},
+}});
+try{
+  renderer.setScripting(mode);
+  await renderer.loadDocument({url:'https://web-audio.test/',contentType:'text/html',source:'<body>Web Audio</body>'});
+  const result=await renderer.evaluate(`(()=>{
+    globalThis.c=new AudioContext({sampleRate:8000});globalThis.other=new webkitAudioContext({sampleRate:8000});
+    globalThis.osc=c.createOscillator();globalThis.gain=c.createGain();
+    osc.frequency.setValueAtTime(500,c.currentTime);gain.gain.value=.25;
+    osc.connect(gain).connect(c.destination);osc.start();globalThis.ends=0;osc.onended=()=>ends++;
+    return {context:c instanceof BaseAudioContext,node:osc instanceof AudioScheduledSourceNode,eventTarget:osc instanceof EventTarget,
+      param:osc.frequency instanceof AudioParam,alias:AudioContext===webkitAudioContext,name:AudioContext.name,
+      native:AudioContext.prototype.createOscillator.toString().includes('[native code]'),
+      output:osc.context===c&&gain.context===c,state:c.state};
+  })()`);
+  assert.deepEqual(result,{context:true,node:true,eventTarget:true,param:true,alias:true,name:'AudioContext',native:mode==='ses',output:true,state:'running'});
+  assert.equal(outputs.length,2);
+  assert.deepEqual(outputs[0].options,{rate:8000,channels:2,name:'Web Audio'});
+  outputs[0].listener({event:'request',bytes:512});
+  assert.ok(Math.abs(outputs[0].pcm[0][8]-8192)<=1,'real page graph produces the expected sine samples');
+  assert.equal(await renderer.evaluate('c.currentTime'),.016);
+  await renderer.evaluate('c.suspend()');assert.deepEqual(closed,[1]);
+  await renderer.evaluate('c.resume()');assert.equal(outputs.length,3);
+  await renderer.evaluate('osc.stop()');outputs[2].listener({event:'request',bytes:512});
+  await Bun.sleep(30);assert.equal(await renderer.evaluate('ends'),1);
+  assert.ok(outputs[2].pcm[0].every(x=>x===0));
+  await renderer.loadDocument({url:'https://web-audio.test/next',contentType:'text/html',source:'<p>next</p>'});
+  assert.deepEqual(closed.sort(),[1,2,3],'navigation closes every document-owned context');
+  const count=outputs[2].pcm.length;outputs[2].listener({event:'request',bytes:512});
+  assert.equal(outputs[2].pcm.length,count,'stale requests cannot revive an old graph');
+  assert.deepEqual(errors,[]);
+  process.stdout.write(`${mode} Web Audio page PCM and disposal passed\n`);
+}finally{renderer.dispose();}

package/test/flex.test.js

@@ -159,3 +159,29 @@ test("justify-content distributes a column container's extra height (min-height
     done();
   }
 });
+
+test('reverse flex directions reflect items without reversing descendants',()=>{
+ for(const direction of ['row-reverse','column-reverse']){
+  const column=direction.startsWith('column');
+  const f=flex('<div id="root"><div id="a"><div id="nested"></div></div><div id="b"></div></div>',
+   `#root{display:flex;flex-flow:${direction} nowrap;width:100px;height:100px;gap:5px} #a,#b{width:20px;height:20px;flex-shrink:0} #nested{width:5px;height:5px}`);
+  try{
+   const a=f.rect('#a'),b=f.rect('#b'),n=f.rect('#nested');
+   expect(column?a.top:a.left).toBe(80);
+   expect(column?b.top:b.left).toBe(55);
+   expect(n.top).toBe(a.top);expect(n.left).toBe(a.left);
+  }finally{f.done()}
+ }
+});
+
+test('column-reverse resolves intrinsic height, spacing and physical margins',()=>{
+ const f=flex('<div id="root"><div id="a"></div><div id="b"></div></div>',
+ '#root{display:flex;flex-direction:column-reverse;width:30px;gap:5px} #a{height:10px;margin-top:3px;margin-bottom:7px} #b{height:20px}');
+ try{expect(f.rect('#root').height).toBe(45);expect(f.rect('#a').top).toBe(28);expect(f.rect('#b').top).toBe(0)}finally{f.done()}
+});
+
+test('column-reverse preserves the sign of child transform translations',()=>{
+ const f=flex('<div id="root"><div id="a"></div><div id="b"></div></div>',
+ '#root{display:flex;flex-direction:column-reverse;width:40px;height:100px} #a,#b{height:20px} #a{transform:translateY(-30px)}');
+ try{expect(f.rect('#a').top).toBe(50);expect(f.rect('#b').top).toBe(60)}finally{f.done()}
+});

package/test/grid.test.js

@@ -309,3 +309,16 @@ test("an item stretches to its area by default and justify-items can center it",
   expect(render(grid("grid-template-columns: 8px; justify-items: center", "<i>ab</i>")).item(0))
     .toEqual({ left: 3, top: 0, width: 2, height: 1 });
 });
+
+test('fractional rows fill a definite aspect-ratio grid even when cells are empty',()=>{
+ const {items}=render(grid('width:100px;aspect-ratio:1;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px', '<i></i><i></i><i></i><i></i>'),100);
+ expect(items()).toEqual([
+  {left:0,top:0,width:46,height:46},{left:54,top:0,width:46,height:46},
+  {left:0,top:54,width:46,height:46},{left:54,top:54,width:46,height:46},
+ ]);
+});
+
+test('fractional row sizing respects fixed tracks and intrinsic minimum heights',()=>{
+ const {items}=render(grid('width:40px;height:100px;grid-template-columns:40px;grid-template-rows:20px 1fr 2fr;row-gap:10px','<i></i><i></i><i></i>'),40);
+ expect(items().map(item=>item.height)).toEqual([20,20,40]);
+});

package/test/headless-shell.test.js

@@ -224,6 +224,15 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
         await view.cdp('Input.dispatchKeyEvent', {type,key:' ',code:'Space',windowsVirtualKeyCode:32,text:type==='char'?' ':undefined});
       }
     }
+    await view.evaluate(`window.heldKey=false;window.heldEvents=[];
+      document.addEventListener('keydown',e=>{if(e.code==='KeyW'){heldKey=true;heldEvents.push('down');e.preventDefault()}});
+      document.addEventListener('keyup',e=>{if(e.code==='KeyW'){heldKey=false;heldEvents.push('up')}});`);
+    await view.cdp('Input.dispatchKeyEvent',{type:'keyDown',key:'w',code:'KeyW',windowsVirtualKeyCode:87});
+    expect(await view.evaluate('heldKey')).toBe(true);
+    expect(await view.evaluate('new Promise(resolve=>requestAnimationFrame(()=>resolve(heldKey)))')).toBe(true);
+    await view.cdp('Input.dispatchKeyEvent',{type:'keyUp',key:'w',code:'KeyW',windowsVirtualKeyCode:87});
+    expect(await view.evaluate('heldKey')).toBe(false);
+    expect(await view.evaluate('heldEvents')).toEqual(['down','up']);
     expect(await view.evaluate('spaceKeys')).toEqual(Array.from({length:6},()=>[32,32]));
     expect(await view.evaluate('scrollY')).toBe(0);
     await view.cdp("Input.dispatchMouseEvent", {

package/test/headless-window-size.test.js

@@ -0,0 +1,28 @@
+import {test,expect} from 'bun:test';
+import {parseWindowSize} from '../lib/window-size.js';
+import {CDP} from '../tools/browser-lab.js';
+test('window size defaults and validation',()=>{
+  expect(parseWindowSize([])).toEqual({width:800,height:600});
+  expect(parseWindowSize(['--window-size=1920,1080'])).toEqual({width:1920,height:1080});
+  expect(parseWindowSize(['--window-size=640x480'])).toEqual({width:640,height:480});
+  for(const size of ['', '0,600','-1,600','800,','800,600,1','1.5,600','9007199254740992,600'])
+    expect(()=>parseWindowSize(['--window-size='+size])).toThrow('positive integers');
+});
+test('persistent headless CLI size reaches renderer, CDP targets and captures; CDP can override it',async()=>{
+  const child=Bun.spawn([process.execPath,'index.js','--headless','--window-size=960,540','--remote-debugging-port=0'],{cwd:new URL('..',import.meta.url).pathname,stdout:'ignore',stderr:'pipe'});
+  let client;const reader=child.stderr.getReader();
+  const deadline=setTimeout(()=>child.kill(),20000);let log='';
+  try{
+    let match;
+    while(!(match=log.match(/DevTools listening on (ws:\/\/\S+)/))){const {value,done}=await reader.read();if(done)throw Error(log);log+=new TextDecoder().decode(value);}
+    client=new CDP(match[1]);await client.ready;
+    const {targetId}=await client.send('Target.createTarget',{url:'about:blank'});
+    const {sessionId}=await client.send('Target.attachToTarget',{targetId,flatten:true});client.sessionId=sessionId;
+    const target=await client.send('Target.getTargetInfo',{targetId});expect(target.targetInfo.viewport).toMatchObject({width:960,height:540});
+    const metrics=await client.send('Page.getLayoutMetrics');expect(metrics.cssVisualViewport).toMatchObject({clientWidth:960,clientHeight:540});
+    const capture=await client.send('Page.captureScreenshot',{format:'png'});const png=Buffer.from(capture.data,'base64');
+    expect([png.readUInt32BE(16),png.readUInt32BE(20)]).toEqual([960,540]);
+    await client.send('Emulation.setDeviceMetricsOverride',{width:640,height:360,deviceScaleFactor:1,mobile:false});
+    const resized=await client.send('Page.getLayoutMetrics');expect(resized.cssVisualViewport).toMatchObject({clientWidth:640,clientHeight:360});
+  }finally{clearTimeout(deadline);client?.close();reader.releaseLock();child.kill();await child.exited;}
+},25000);

package/test/html-rcdata.test.js

@@ -0,0 +1,35 @@
+import {test, expect} from 'bun:test';
+import {parseHTMLDocument} from '../lib/happy-dom/parser.js';
+
+test('textarea preserves embedded markup as text and decodes character references', () => {
+  const {document} = parseHTMLDocument('<textarea>\nconst html = `<div>&amp;<br></div>`;<!-- literal -->\n</TEXTAREA><p>after</p>');
+  const area = document.querySelector('textarea');
+  expect(area.value).toBe('const html = `<div>&<br></div>`;<!-- literal -->\n');
+  expect(area.children.length).toBe(0);
+  expect(document.querySelector('p').textContent).toBe('after');
+});
+
+test('RCDATA ends only at matching end tag, retaining all content through EOF', () => {
+  const {document} = parseHTMLDocument('<textarea>a</textareax><b>c &lt;d\0');
+  expect(document.querySelector('textarea').value).toBe('a</textareax><b>c <d\uFFFD');
+  const other = parseHTMLDocument('<title>A <b>B</b> &amp; C</title><textarea>&#10;hello</textarea>').document;
+  expect(other.title).toBe('A <b>B</b> & C');
+  expect(other.querySelector('textarea').value).toBe('hello');
+});
+
+test('textarea parsing also works inside HTML fragments without changing script raw text', () => {
+  const {document} = parseHTMLDocument('');
+  document.body.innerHTML='<textarea><div>&amp;</div></textarea><script>"<div>&amp;</div>"</script>';
+  expect(document.querySelector('textarea').value).toBe('<div>&</div>');
+  expect(document.querySelector('script').textContent).toBe('"<div>&amp;</div>"');
+});
+
+test('SVG title remains foreign content and does not swallow following SVG or HTML siblings',()=>{
+ const {document,window}=parseHTMLDocument('<div><svg><title>Share &amp; score</title><g><text><tspan>label</tspan></text></g></svg><button id="after">play</button></div>');
+ try{
+  expect(document.querySelector('svg title').textContent).toBe('Share & score');
+  expect(document.querySelector('svg g tspan').textContent).toBe('label');
+  expect(document.getElementById('after').textContent).toBe('play');
+  expect(document.querySelector('svg title').namespaceURI).toBe('http://www.w3.org/2000/svg');
+ }finally{window.happyDOM.close();}
+});

package/test/image-decode.test.js

@@ -0,0 +1,18 @@
+import {test,expect} from 'bun:test';
+import {createBrowser} from '../lib/headless-shell.js';
+import {CdpServer} from '../lib/cdp-server.js';
+import {CDP} from '../tools/browser-lab.js';
+const png=Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+a9ZkAAAAASUVORK5CYII=','base64');
+test('image decode waits for real pixels, handles detached images and rejects broken or replaced requests',async()=>{
+ const server=Bun.serve({hostname:'127.0.0.1',port:0,async fetch(req){const path=new URL(req.url).pathname;if(path==='/'){return new Response('<img id="initial" src="/ok.png">',{headers:{'Content-Type':'text/html'}});}if(path==='/slow.png')await Bun.sleep(80);return path==='/bad'?new Response('broken',{status:404}):new Response(png,{headers:{'Content-Type':'image/png'}});}});
+ const browser=await createBrowser({spareRenderer:false}),cdpServer=CdpServer.create(browser.context).listen(0),c=new CDP(`ws://127.0.0.1:${cdpServer.port}/devtools/browser/cdp-server`);
+ try{
+  await c.send('Page.navigate',{url:server.url.href});
+  expect(await c.evaluate('(async()=>{await initial.decode();const c=document.createElement("canvas").getContext("2d");c.drawImage(initial,0,0);return [initial.complete,initial.naturalWidth,initial.naturalHeight,c.getImageData(0,0,1,1).data[3]]})()')).toEqual([true,1,1,255]);
+  expect(await c.evaluate('(async()=>{const im=new Image();const p=im.decode();im.src="/slow.png";await p;return [im.complete,im.naturalWidth]})()')).toEqual([true,1]);
+  expect(await c.evaluate('(async()=>{const im=new Image();im.src="/slow.png";await Promise.all([im.decode(),im.decode()]);let sync=true;const p=im.decode().then(()=>sync);sync=false;return await p})()')).toBe(false);
+  expect(await c.evaluate(`(async()=>{const im=new Image();im.src='/ok.png';await im.decode();const before=[im.width,im.height];im.width=7;im.height=9;const explicit=[im.width,im.height];im.removeAttribute('width');im.removeAttribute('height');im.style.cssText='width:30px;height:20px;padding:2px;border:3px solid black;transform:scale(2)';document.body.appendChild(im);const displayed=[im.width,im.height];im.style.display='none';return [before,explicit,displayed,[im.width,im.height]]})()`)).toEqual([[1,1],[7,9],[30,20],[1,1]]);
+  for(const src of['','/bad','http://['])expect(await c.evaluate(`(async()=>{const im=new Image();im.src=${JSON.stringify(src)};try{await im.decode();return 'resolved'}catch(e){return e.name}})()`)).toBe('EncodingError');
+  expect(await c.evaluate('(async()=>{const im=new Image();im.src="/slow.png";const p=im.decode().then(()=>"resolved",e=>e.name);await Promise.resolve();im.removeAttribute("src");return await p})()')).toBe('EncodingError');
+ }finally{c.close();cdpServer.stop(true);browser.close();server.stop(true);}
+},30000);

package/test/javascript-dialog.test.js

@@ -0,0 +1,83 @@
+import {test,expect} from 'bun:test';
+import {createBrowser} from '../lib/headless-shell.js';
+import {CdpServer} from '../lib/cdp-server.js';
+import {CDP} from '../tools/browser-lab.js';
+const until=async fn=>{for(let i=0;i<500;i++){if(fn())return;await Bun.sleep(10);}throw Error('dialog did not open');};
+test('real renderer dialogs block script until CDP responds and preserve synchronous return values',async()=>{
+  let copied="";
+  const browser=await createBrowser({spareRenderer:false,clipboard:{read:async()=>copied,write:async text=>{copied=text;}}});const server=CdpServer.create(browser.context).listen(0);
+  const cdp=new CDP(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+  try{
+    await cdp.ready;const {targetId}=await cdp.send('Target.createTarget',{url:'about:blank'});
+    cdp.sessionId=(await cdp.send('Target.attachToTarget',{targetId,flatten:true})).sessionId;
+    await cdp.send('Page.enable');
+    await cdp.send('Page.navigate',{url:'data:text/html,<title>Dialog test</title><p>hello</p>'});
+    let count=0;
+    async function answer(expression,type,message,accept,promptText=''){
+      let done=false;
+      const result=cdp.send('Runtime.evaluate',{expression,returnByValue:true}).then(value=>{done=true;return value;});
+      await until(()=>cdp.events.filter(e=>e.method==='Page.javascriptDialogOpening').length>count);
+      const event=cdp.events.filter(e=>e.method==='Page.javascriptDialogOpening')[count++];
+      expect(event.params).toMatchObject({type,message});expect(done).toBe(false);
+      await cdp.send('Page.handleJavaScriptDialog',{accept,promptText});
+      return (await result).result.value;
+    }
+    expect(await answer('alert(1+2); 42','alert','3',true)).toBe(42);
+    expect(await answer('confirm("yes?")','confirm','yes?',true)).toBe(true);
+    expect(await answer('confirm("no?")','confirm','no?',false)).toBe(false);
+    expect(await answer('prompt("name", "default")','prompt','name',true,'  中文 😀  ')).toBe('  中文 😀  ');
+    expect(await answer('prompt("empty")','prompt','empty',true,'')).toBe('');
+    expect(await answer('prompt("cancel")','prompt','cancel',false)).toBe(null);
+    const nav=cdp.send('Page.navigate',{url:'javascript:alert(1+2)'});
+    await until(()=>cdp.events.filter(e=>e.method==='Page.javascriptDialogOpening').length>count);
+    await cdp.send('Page.handleJavaScriptDialog',{accept:true});await nav;
+    // Browser UI works through ordinary input, including long selectable messages.
+    const ui=cdp.send('Runtime.evaluate',{expression:'alert("long message\\n".repeat(200)); 99',returnByValue:true});
+    await until(()=>Boolean(browser.context.dialogState));
+    const shot=await cdp.send('Page.captureScreenshot',{format:'png'});
+    await Bun.write('/tmp/browser-alert.png',Buffer.from(shot.data,'base64'));
+    const evaluate=async expression=>(await cdp.send('Runtime.evaluate',{expression,returnByValue:true})).result.value;
+    expect(await evaluate('document.getElementById("message").scrollHeight > document.getElementById("message").clientHeight')).toBe(true);
+    await cdp.send('Input.dispatchMouseEvent',{type:'mouseWheel',x:300,y:150,deltaX:0,deltaY:250});
+    expect(await evaluate('document.getElementById("message").scrollTop')).toBeGreaterThan(0);
+    await evaluate('const r=document.createRange();r.selectNodeContents(document.getElementById("message"));window.getSelection().removeAllRanges();window.getSelection().addRange(r);');
+    expect(await evaluate('window.getSelection().toString().length')).toBeGreaterThan(1000);
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyDown',key:'c',code:'KeyC',modifiers:2});
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',key:'c',code:'KeyC',modifiers:2});
+    expect(copied.length).toBeGreaterThan(1000);
+    await cdp.send('Emulation.setDeviceMetricsOverride',{width:320,height:240,deviceScaleFactor:1});
+    const small=await cdp.send('Page.captureScreenshot',{format:'png'});const pixels=Buffer.from(small.data,'base64');
+    expect([pixels.readUInt32BE(16),pixels.readUInt32BE(20)]).toEqual([320,240]);
+    await Bun.write('/tmp/browser-alert-small.png',pixels);
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyDown',key:'Enter',code:'Enter'});
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',key:'Enter',code:'Enter'});
+    expect((await ui).result.value).toBe(99);
+    const input=cdp.send('Runtime.evaluate',{expression:'prompt("Your name", "default")',returnByValue:true});
+    await until(()=>Boolean(browser.context.dialogState));
+    await cdp.send('Input.insertText',{text:'Alice'});
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyDown',key:'Enter',code:'Enter'});
+    expect((await input).result.value).toBe('Alice');
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',key:'Enter',code:'Enter'});
+    await cdp.send('Page.navigate',{url:'data:text/html,'+encodeURIComponent(`<button id="ask" onclick="window.answer=confirm('From a page click')">Ask</button>`)});
+    await cdp.send('Input.dispatchMouseEvent',{type:'mousePressed',button:'left',x:20,y:18});
+    const clicked=cdp.send('Input.dispatchMouseEvent',{type:'mouseReleased',button:'left',x:20,y:18});
+    await until(()=>Boolean(browser.context.dialogState));
+    await cdp.send('Input.dispatchKeyEvent',{type:'keyDown',key:'Escape',code:'Escape'});
+    await clicked;
+    expect((await cdp.send('Runtime.evaluate',{expression:'window.answer',returnByValue:true})).result.value).toBe(false);
+    // Inline scripts can pause document loading, without blocking the modal UI.
+    const loading=cdp.send('Page.navigate',{url:'data:text/html,'+encodeURIComponent('<script>alert("During load");window.loadedAfterDialog=true;</script>')});
+    await until(()=>browser.context.dialogState?.message==='During load');
+    await cdp.send('Page.captureScreenshot',{format:'png'});
+    await cdp.send('Page.handleJavaScriptDialog',{accept:true});
+    await loading;
+    expect(await evaluate('window.loadedAfterDialog')).toBe(true);
+    // Reload cancels the old dialog before waiting on its blocked renderer.
+    await cdp.send('Page.navigate',{url:'about:blank'});
+    const pending=cdp.send('Runtime.evaluate',{expression:'confirm("Reload me")',returnByValue:true});
+    await until(()=>Boolean(browser.context.dialogState));
+    await cdp.send('Page.reload');
+    expect((await pending).result.value).toBe(false);
+    expect(browser.context.dialogState).toBe(null);
+  }finally{cdp.close();server.stop(true);browser.close();}
+},30000);

package/test/manual-breakout-paddle.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env bun
+// Controlled RAF timestamps exercise the external game, never browser production code.
+// bun test/manual-breakout-paddle.js ../Classic-Games [buninu|chromium]
+import {resolve,sep} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+const root=resolve(process.argv[2]??'../Classic-Games'),engine=process.argv[3]??'buninu';
+const server=Bun.serve({hostname:'127.0.0.1',port:0,fetch(request){
+ const path=resolve(root,'.'+new URL(request.url).pathname);
+ return path.startsWith(root+sep)?new Response(Bun.file(path)):new Response('Forbidden',{status:403});
+}});
+let app;
+try{
+ app=await launch(engine,`/tmp/breakout-paddle-${engine}`);const c=app.cdp;
+ await c.send('Page.addScriptToEvaluateOnNewDocument',{source:`(()=>{
+ let next=0;const frames=new Map();
+ window.requestAnimationFrame=callback=>{frames.set(++next,callback);return next};
+ window.cancelAnimationFrame=id=>frames.delete(id);
+ window.__step=time=>{const batch=[...frames.values()];frames.clear();for(const callback of batch)callback(time)};
+ const p=CanvasRenderingContext2D.prototype,original=p.roundRect;
+ p.roundRect=function(...args){if(args[2]===80&&args[3]===12)window.__paddle=args[0];return original.apply(this,args)};
+})()`});
+ const results=[];
+ for(const fps of [15,60,120]){
+  await c.send('Page.navigate',{url:`http://127.0.0.1:${server.port}/games/breakout/index.html?fps=${fps}`});await Bun.sleep(300);
+  const point=await c.evaluate(`(()=>{const r=document.querySelector('#playBtn').getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2}})()`);
+  for(const type of ['mousePressed','mouseReleased'])await c.send('Input.dispatchMouseEvent',{type,...point,button:'left',clickCount:1});
+  await c.evaluate('__step(0)');
+  const initial=await c.evaluate('__paddle');
+  const target=await c.evaluate(`(()=>{const r=document.querySelector('canvas').getBoundingClientRect();return {x:r.x+r.width*.85,y:r.y+r.height*.8}})()`);
+  await c.send('Input.dispatchMouseEvent',{type:'mouseMoved',...target});
+  const count=Math.round(fps*.4);
+  const actual=await c.evaluate(`(()=>{for(let i=1;i<=${count};i++)__step(i*1000/${fps});return __paddle})()`);
+  const expected=initial+480*.4;
+  if(Math.abs(actual-expected)>.01)throw Error(`${fps} FPS paddle ${actual}, expected ${expected}`);
+  const left=await c.evaluate(`(()=>{const r=document.querySelector('canvas').getBoundingClientRect();return {x:r.x+r.width*.15,y:r.y+r.height*.8}})()`);
+  await c.send('Input.dispatchMouseEvent',{type:'mouseMoved',...left});
+  const before=actual;await c.evaluate('__step(1400)');const after=await c.evaluate('__paddle');
+  if(Math.abs((before-after)-48)>.01)throw Error('Resume jump does not honor 100 ms catch-up cap');
+  results.push({fps,elapsedMs:400,initial,actual,expected,resumeMovement:before-after});
+ }
+ console.log(JSON.stringify({engine,passed:true,results}));
+}finally{try{await app?.stop()}finally{server.stop(true)}}

package/test/manual-breakout-static.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env bun
+// Compare the external upstream game and its static-layer patch using real Canvas pixels.
+// bun test/manual-breakout-static.js ../Classic-Games [buninu|chromium]
+import {resolve} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+const root=resolve(process.argv[2]??'../Classic-Games'),engine=process.argv[3]??'buninu';
+const result=Bun.spawnSync(['git','-C',root,'show','HEAD:games/breakout/index.html']);
+if(result.exitCode)throw Error('Cannot read upstream Breakout');
+const original=result.stdout.toString(),cached=await Bun.file(resolve(root,'games/breakout/index.html')).text();
+const server=Bun.serve({hostname:'127.0.0.1',port:0,fetch(request){return new Response(new URL(request.url).pathname==='/original'?original:cached,{headers:{'content-type':'text/html'}})}});
+let app;
+try{
+ app=await launch(engine,`/tmp/breakout-static-${engine}`);const c=app.cdp;
+ await c.send('Page.addScriptToEvaluateOnNewDocument',{source:`(()=>{Math.random=()=>.5;let next=0;const frames=new Map();window.requestAnimationFrame=f=>{frames.set(++next,f);return next};window.cancelAnimationFrame=id=>frames.delete(id);window.__step=t=>{const batch=[...frames.values()];frames.clear();for(const f of batch)f(t)};window.__brickPaints=0;const p=CanvasRenderingContext2D.prototype,o=p.roundRect;p.roundRect=function(...a){if(a[2]===52&&a[3]===18)__brickPaints++;return o.apply(this,a)}})()`});
+ const snapshots=[];
+ for(const name of ['original','cached']){
+  await c.send('Page.navigate',{url:`http://127.0.0.1:${server.port}/${name}`});await Bun.sleep(250);
+  const point=await c.evaluate(`(()=>{const r=document.getElementById('playBtn').getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2}})()`);
+  for(const type of ['mousePressed','mouseReleased'])await c.send('Input.dispatchMouseEvent',{type,...point,button:'left',clickCount:1});
+  await c.evaluate('__step(0)');
+  const capture=()=>c.evaluate(`document.querySelector('canvas').toDataURL()`);
+  const initial=await capture(),paintStart=await c.evaluate('__brickPaints');
+  await c.evaluate('__step(16.6666666667)');const idlePaints=await c.evaluate(`__brickPaints-${paintStart}`);
+  for(const type of ['keyDown','keyUp'])await c.send('Input.dispatchKeyEvent',{type,key:' ',code:'Space',windowsVirtualKeyCode:32});
+  await c.evaluate('for(let i=2;i<=110;i++)__step(i*1000/60)');
+  const afterHit=await capture(),score=await c.evaluate('document.getElementById("score-val").textContent');
+  snapshots.push({name,initial,afterHit,idlePaints,score});
+ }
+ const [a,b]=snapshots;
+ if(a.initial!==b.initial)throw Error('Static cache changes the initial Canvas image');
+ if(a.afterHit!==b.afterHit)throw Error('Static cache changes Canvas pixels after a brick hit');
+ if(!/\d/.test(b.score)||parseInt(b.score)<=0)throw Error('No brick was destroyed');
+ if(a.idlePaints!==60||b.idlePaints!==0)throw Error('Static bricks were not reused');
+ console.log(JSON.stringify({engine,passed:true,identicalInitialPixels:true,identicalPixelsAfterHit:true,originalIdleBrickPaints:a.idlePaints,cachedIdleBrickPaints:b.idlePaints,score:b.score}));
+}finally{try{await app?.stop()}finally{server.stop(true)}}

package/test/manual-classic-games.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env bun
+// External, unmodified games. Only CDP input controls them; evaluations observe.
+// bun test/manual-classic-games.js /path/to/Classic-Games [buninu|chromium] [output-directory]
+import {resolve,join,sep} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+import {playClassicGame} from './classic-games-scenarios.js';
+const root=resolve(process.argv[2]??'../Classic-Games'),engine=process.argv[3]??'buninu',directory=resolve(process.argv[4]??`/tmp/classic-games-${engine}`);
+const allGames=['tetris','snake','2048','flappy','space','ttt','memory','mine','pong','breakout','dino','sudoku','connect4','typing','simon','puzzle15'];
+const games=process.env.CLASSIC_GAMES?process.env.CLASSIC_GAMES.split(','):allGames;
+const server=Bun.serve({hostname:'127.0.0.1',port:0,fetch(request){
+ const path=resolve(root,'.'+decodeURIComponent(new URL(request.url).pathname));
+ if(path!==root&&!path.startsWith(root+sep))return new Response('Forbidden',{status:403});
+ return new Response(Bun.file(path));
+}});
+let app;const report={engine,games:[]};
+try{
+ app=await launch(engine,directory,[]);const c=app.cdp;
+ await c.send('Emulation.setDeviceMetricsOverride',{width:1000,height:900,deviceScaleFactor:1,mobile:false});
+ const read=()=>c.evaluate(`JSON.stringify({ready:document.readyState,text:document.body.innerText.slice(0,1500),canvases:[...document.querySelectorAll('canvas')].map(e=>({w:e.width,h:e.height})),buttons:[...document.querySelectorAll('button')].map(e=>{const r=e.getBoundingClientRect(),s=getComputedStyle(e);return {id:e.id,text:e.textContent.trim(),x:r.x+r.width/2,y:r.y+r.height/2,w:r.width,h:r.height,visible:r.width>0&&r.height>0&&s.visibility!=='hidden'&&s.display!=='none'}})})`,90000).then(JSON.parse);
+
+ const shot=async(name)=>{const {data}=await c.send('Page.captureScreenshot',{format:'png'});await Bun.write(join(directory,name+'.png'),Buffer.from(data,'base64'));};
+ for(const game of games){
+  const entry={game};report.games.push(entry);const started=performance.now();c.events.length=0;
+  const logFile=join(directory,engine+'.log');const logStart=(await Bun.file(logFile).text()).length;
+  try{
+   await c.send('Page.navigate',{url:`http://127.0.0.1:${server.port}/games/${game}/index.html`});
+   await Bun.sleep(1400);entry.initial=await read();await shot(game+'-initial');
+   entry.evidence=await playClassicGame(c,game);
+   await Bun.sleep(150);entry.after=await read();await shot(game+'-after');
+  }catch(error){entry.error=error.stack;}
+  entry.exceptions=c.events.filter(e=>e.method==='Runtime.exceptionThrown');
+  entry.pageErrors=(await Bun.file(logFile).text()).slice(logStart).split('\n').filter(line=>line.includes('page error:'));
+  entry.passed=!entry.error&&!entry.exceptions.length&&!entry.pageErrors.length&&!!entry.evidence?.length;
+  entry.ms=performance.now()-started;console.log(JSON.stringify({game,ms:Math.round(entry.ms),passed:entry.passed,error:entry.error,pageErrors:entry.pageErrors,exceptions:entry.exceptions.length,evidence:entry.evidence,buttons:entry.initial?.buttons.map(b=>b.text),text:entry.after?.text.slice(0,180)}));
+  await Bun.write(join(directory,'report.json'),JSON.stringify(report,null,2));
+ }
+ report.passed=report.games.every(game=>game.passed);
+ await Bun.write(join(directory,'report.json'),JSON.stringify(report,null,2));
+ console.log(JSON.stringify({passed:report.passed,total:report.games.length,passedGames:report.games.filter(game=>game.passed).length}));
+ if(!report.passed)process.exitCode=1;
+}finally{try{await app?.stop();}finally{server.stop(true);}}