buninu-browser 0.6.0 → 0.9.0

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

package/test/manual-clumsy-bird-three-pipes.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env bun
+// Live acceptance test; no game patches or third-party packages.
+// bun test/manual-clumsy-bird-three-pipes.js [output-directory] [buninu|chromium]
+import {resolve} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+
+const directory=resolve(process.argv[2]??'/tmp/clumsy-bird-three-pipes');
+const engine=process.argv[3]??'buninu';
+const url='https://ellisonleao.github.io/clumsy-bird/';
+const app=await launch(engine,directory),cdp=app.cdp;
+const report={engine,url,width:900,height:600,passed:false,attempts:[],exceptions:[]};
+// Observation only: all controls use ordinary CDP keyboard events.
+const readState=`JSON.stringify({
+ play:me.state.isCurrent(me.state.PLAY),menu:me.state.isCurrent(me.state.MENU),
+ over:me.state.isCurrent(me.state.GAME_OVER),start:game.data.start,score:game.data.steps,
+ y:me.state.current().bird?.pos.y,force:me.state.current().bird?.gravityForce,
+ collided:me.state.current().bird?.collided,
+ pipes:me.game.world.children.filter(o=>o.type==='pipe'&&o.pos.y>0&&o.pos.x>-90)
+   .map(o=>({x:o.pos.x,y:o.pos.y})).sort((a,b)=>a.x-b.x)
+})`;
+const state=async()=>JSON.parse(await cdp.evaluate(readState));
+let held=null;
+async function key(key,code,keyCode,hold=80){
+ const event={key,code,windowsVirtualKeyCode:keyCode};held=event;
+ try{
+  await cdp.send('Input.dispatchKeyEvent',{type:'rawKeyDown',...event});
+  await Bun.sleep(hold);
+ }finally{
+  await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',...event});held=null;
+ }
+}
+try{
+ await cdp.send('Emulation.setDeviceMetricsOverride',{width:900,height:600,deviceScaleFactor:1,mobile:false});
+ await cdp.send('Page.navigate',{url});
+ let loaded=false;
+ for(let n=0;n<240;n++){
+  if(await cdp.evaluate('typeof me!=="undefined"&&me.state.isCurrent(me.state.MENU)')){loaded=true;break;}
+  await Bun.sleep(200);
+ }
+ if(!loaded)throw Error('Game menu did not load during the manual test');
+ for(let attempt=1;attempt<=16&&!report.passed;attempt++){
+  if((await state()).over){await key('Enter','Enter',13);await Bun.sleep(700);}
+  await key('Enter','Enter',13);
+  const started=performance.now(),record={attempt,states:[]};report.attempts.push(record);
+  let lastFlap=0,lastScore=-1;
+  while(performance.now()-started<180000){
+   const s=await state(),elapsedMs=performance.now()-started;
+   record.states.push({elapsedMs,...s});
+   if(s.score!==lastScore){console.log(JSON.stringify({attempt,elapsedMs,score:s.score}));lastScore=s.score;}
+   // The third scoring marker alone is not enough: its pipe must also have
+   // cleared the bird, and play must still be active without a collision.
+   if(s.score>=3&&s.pipes[0]?.x>150&&s.start&&!s.collided){
+    const {data}=await cdp.send('Page.captureScreenshot',{format:'png'});
+    const after=await state();
+    if(after.start&&!after.collided){
+     report.passed=true;report.final=after;report.elapsedMs=elapsedMs;
+     report.screenshot=directory+'/three-pipes.png';
+     await Bun.write(report.screenshot,Buffer.from(data,'base64'));
+     console.log('Passed three pipes:',report.screenshot);
+     break;
+    }
+   }
+   if(s.over||s.collided){await Bun.sleep(2200);break;}
+   if(s.start&&s.play){
+    const pipe=s.pipes[0];
+    const target=pipe&&pipe.x<650?Math.max(25,Math.min(430,pipe.y-88)):200;
+    const now=performance.now();
+    if(s.y>target+8&&now-lastFlap>100){lastFlap=now;await key(' ','Space',32,55);}
+   }
+   await Bun.sleep(10);
+  }
+ }
+ report.exceptions=cdp.events.filter(event=>event.method==='Runtime.exceptionThrown');
+ if(!report.passed)throw Error('CDP pilot did not clear three pipes during this run');
+}finally{
+ try{await Bun.write(directory+'/three-pipes-report.json',JSON.stringify(report,null,2));}
+ finally{
+  if(held)await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',...held}).catch(()=>{});
+  await app.stop();
+ }
+}

package/test/manual-clumsy-bird.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env bun
+// Live reference check: no page patches, downloaded source or extra packages.
+// bun test/manual-clumsy-bird.js [buninu|chromium] [output-directory]
+import {resolve} from 'node:path';
+import {launch,snapshot} from '../tools/browser-lab.js';
+const engine=process.argv[2]??'buninu',directory=resolve(process.argv[3]??'/tmp/clumsy-bird');
+const url='https://ellisonleao.github.io/clumsy-bird/';
+const app=await launch(engine,directory);
+const report={engine,url};
+try{
+ const {cdp}=app;
+ await cdp.send('Emulation.setDeviceMetricsOverride',{width:900,height:600,deviceScaleFactor:1,mobile:false});
+ console.log('navigate');const started=performance.now();await cdp.send('Page.navigate',{url});
+ console.log('waiting for menu');
+ const until=async expression=>{
+  const deadline=performance.now()+30000;
+  while(performance.now()<deadline){
+   if(await cdp.evaluate(expression,2000).catch(()=>false))return;
+   await Bun.sleep(250);
+  }
+  throw Error('Timed out waiting for '+expression);
+ };
+ await until('typeof me==="object" && me.state.isCurrent(me.state.MENU)');
+ report.menuMs=performance.now()-started;console.log('menu',report.menuMs);
+ await snapshot(cdp,directory,'menu');console.log('menu captured');
+ const rect=await cdp.evaluate('(()=>{const r=document.querySelector("canvas").getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2}})()');
+ for(const type of ['mousePressed','mouseReleased'])await cdp.send('Input.dispatchMouseEvent',{type,...rect,button:'left',clickCount:1});
+ await until('me.state.isCurrent(me.state.PLAY)');
+ for(const type of ['keyDown','keyUp'])await cdp.send('Input.dispatchKeyEvent',{type,key:' ',code:'Space',windowsVirtualKeyCode:32});
+ for(let n=0;n<30&&!await cdp.evaluate('game.data.start');n++){
+  for(const type of ['keyDown','keyUp'])await cdp.send('Input.dispatchKeyEvent',{type,key:' ',code:'Space',windowsVirtualKeyCode:32});
+  await Bun.sleep(100);
+ }
+ if(!await cdp.evaluate('game.data.start'))throw Error('Game did not leave its ready screen');
+ report.inputStartedGame=true;
+ // Starting is a timed ready-screen transition, not proof that jump input works.
+ // Keep keyDown held across a real game update before releasing it.
+ const before=await cdp.evaluate('me.state.current().bird.pos.y');
+ await cdp.send('Input.dispatchKeyEvent',{type:'keyDown',key:' ',code:'Space',windowsVirtualKeyCode:32});
+ await Bun.sleep(100);
+ const after=await cdp.evaluate('me.state.current().bird.pos.y');
+ await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',key:' ',code:'Space',windowsVirtualKeyCode:32});
+ report.flight={before,after};
+ if(!(after<before))throw Error('Space did not make the bird fly upward');
+
+ report.images=await cdp.evaluate('["clumsy","pipe","ground","logo"].map(name=>{const image=me.loader.getImage(name);return {name,width:image.width,height:image.height,naturalWidth:image.naturalWidth,naturalHeight:image.naturalHeight}})');
+ if(report.images.some(image=>!image.width||!image.height))throw Error('Loaded sprite image has no dimensions');
+ await snapshot(cdp,directory,'playing');
+ report.exceptions=cdp.events.filter(event=>event.method==='Runtime.exceptionThrown');
+ await Bun.write(resolve(directory,'clumsy-report.json'),JSON.stringify(report,null,2));
+ console.log(JSON.stringify(report,null,2));
+}finally{await app.stop();}

package/test/manual-hextris.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env bun
+// env NODE_TLS_REJECT_UNAUTHORIZED=0 bun test/manual-hextris.js [buninu|chromium] [output-directory]
+// No game patches: Runtime.evaluate observes state; only CDP input operates it.
+import assert from 'node:assert/strict';
+import {resolve} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+const engine=process.argv[2]??'buninu',directory=resolve(process.argv[3]??`/tmp/hextris-validation-${engine}`);
+const app=await launch(engine,directory,engine==='chromium'&&process.env.NODE_TLS_REJECT_UNAUTHORIZED==='0'?['--ignore-certificate-errors']:[]),c=app.cdp;
+const report={engine,url:'https://hextris.io/',states:[]};
+const state=()=>c.evaluate('JSON.stringify({state:gameState,position:MainHex.position,blocks:blocks.length,score})').then(JSON.parse);
+async function key(key,code,n){for(const type of ['rawKeyDown','keyUp']){await c.send('Input.dispatchKeyEvent',{type,key,code,windowsVirtualKeyCode:n});if(type==='rawKeyDown')await Bun.sleep(60);}await Bun.sleep(120);}
+try{
+ await c.send('Page.navigate',{url:report.url});
+ for(let n=0;n<300;n++){if(await c.evaluate('typeof MainHex!=="undefined"&&!!MainHex'))break;await Bun.sleep(100);}
+ report.states.push(await state());assert.equal(report.states[0].state,0);
+ const point=await c.evaluate('(()=>{const r=document.getElementById("startBtn").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,button:'left',clickCount:1,...point});
+ await Bun.sleep(250);assert.equal((await state()).state,1);
+ await key('ArrowLeft','ArrowLeft',37);report.states.push(await state());assert.equal(report.states.at(-1).position,1);
+ await key('ArrowRight','ArrowRight',39);assert.equal((await state()).position,0);
+ await key('p','KeyP',80);assert.equal((await state()).state,-1);
+ await Bun.sleep(700);await key('p','KeyP',80);
+ for(let n=0;n<50&&(await state()).state!==1;n++)await Bun.sleep(100);
+ assert.equal((await state()).state,1);
+ let generated=false;
+ for(let n=0;n<100;n++){const s=await state();if(s.blocks>0){generated=true;report.states.push(s);break;}await Bun.sleep(100);}
+ assert.ok(generated,'live blocks must be generated');
+ const {data}=await c.send('Page.captureScreenshot',{format:'png'});await Bun.write(directory+'/playing.png',Buffer.from(data,'base64'));
+ report.passed=true;console.log(JSON.stringify(report));
+}finally{try{await Bun.write(directory+'/report.json',JSON.stringify(report,null,2));}finally{await app.stop();}}

package/test/manual-numbered-music.js

@@ -0,0 +1,24 @@
+// Live reference test; opens only its own headless browser and closes it.
+// bun test/manual-numbered-music.js [buninu|chromium] [output-directory]
+import {launch} from '../tools/browser-lab.js';
+import assert from 'node:assert/strict';
+const engine=process.argv[2]??'buninu',dir=process.argv[3]??'/tmp/numbered-music-playback-'+Date.now();
+const b=await launch(engine,dir,engine==='chromium'?['--autoplay-policy=no-user-gesture-required']:[]),c=b.cdp;
+try{
+ await c.send('Page.addScriptToEvaluateOnNewDocument',{source:`window.testContexts=[];window.testFrequencies=[];window.testOscillators=[];const OriginalAudioContext=window.AudioContext;window.AudioContext=class extends OriginalAudioContext{constructor(...a){super(...a);testContexts.push(this);}createOscillator(){const o=super.createOscillator();testOscillators.push(o);const p=o.frequency,set=p.setValueAtTime.bind(p);p.setValueAtTime=(v,t)=>{testFrequencies.push({v,t});return set(v,t)};return o;}};`});
+ await c.send('Page.navigate',{url:'https://drjohnjstest.blogspot.com/2023/10/text-to-numbered-musical-notation.html'});
+ for(let i=0;i<150;i++){if(await c.evaluate('typeof playsheet==="function"'))break;await Bun.sleep(200);}
+ const song='Title=Web Audio test\nSpeed=180\n1234567*1';
+ await c.evaluate(`tsheet.value=${JSON.stringify(song)};document.querySelector('button[onclick="playsheet(tsheet.value);"]').click();`);
+ for(let i=0;i<100;i++) {
+  if(await c.evaluate('testFrequencies.filter(e=>e.v>20).length>=8'))break;
+  await Bun.sleep(100);
+ }
+ await Bun.sleep(400);
+ let state=await c.evaluate('({contexts:testContexts.map(c=>({state:c.state,time:c.currentTime})),frequencies:testFrequencies,oscillators:testOscillators.length})');console.log('play button',{contexts:state.contexts,pitches:state.frequencies.filter(e=>e.v>20).map(e=>e.v)});assert.equal(state.oscillators,1);assert.ok(state.contexts[0].time>1);assert.ok(state.frequencies.filter(e=>e.v>20).length>=8);
+ await c.evaluate(`Promise.all([playsheet(${JSON.stringify('Speed=240\n1234')}),playsheet2(${JSON.stringify('Speed=240\n567*1')})])`);await Bun.sleep(2400);
+ state=await c.evaluate('({contexts:testContexts.map(c=>({state:c.state,time:c.currentTime})),frequencies:testFrequencies,oscillators:testOscillators.length})');console.log('two parts',{contexts:state.contexts,oscillators:state.oscillators});assert.equal(state.oscillators,2);assert.ok(state.contexts.every(c=>c.state==='running'&&c.time>1));
+ const exceptions=c.events.filter(e=>e.method==='Runtime.exceptionThrown');assert.deepEqual(exceptions,[]);
+ const shot=await c.send('Page.captureScreenshot',{format:'png'});await Bun.write(dir+'/playback.png',Buffer.from(shot.data,'base64'));console.log('screenshot',dir+'/playback.png');
+ console.log('PASS: original Play button, changing pitches and two-part playback use running Web Audio outputs');
+}finally{await b.stop();}

package/test/manual-t-rex-runner.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env bun
+// Real desktop game, ordinary CDP input only. No patches to game state/physics.
+// bun test/manual-t-rex-runner.js [buninu|chromium] [output-directory]
+import {resolve} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+const engine=process.argv[2]??'buninu',directory=resolve(process.argv[3]??`/tmp/t-rex-${engine}`);
+const app=await launch(engine,directory),cdp=app.cdp;
+const report={engine,url:'https://wayou.github.io/t-rex-runner/',states:[]};
+const state=()=>cdp.evaluate(`JSON.stringify({playing:Runner.instance_.playing,intro:Runner.instance_.playingIntro,crashed:Runner.instance_.crashed,time:Runner.instance_.runningTime,obstacles:Runner.instance_.horizon.obstacles.map(o=>({x:o.xPos,y:o.yPos,width:o.width,type:o.typeConfig.type})),score:Runner.instance_.distanceRan})`).then(JSON.parse);
+try{
+ await cdp.send('Emulation.setDeviceMetricsOverride',{width:900,height:600,deviceScaleFactor:1,mobile:false});
+ await cdp.send('Page.navigate',{url:report.url});
+ for(let n=0;n<200;n++){
+  if(await cdp.evaluate('typeof Runner!=="undefined"&&!!Runner.instance_?.tRex'))break;
+  await Bun.sleep(100);
+ }
+ const rect=await cdp.evaluate(`(()=>{const r=document.querySelector('canvas').getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2}})()`);
+ await cdp.send('Input.dispatchMouseEvent',{type:'mousePressed',button:'left',clickCount:1,...rect});
+ await cdp.send('Input.dispatchMouseEvent',{type:'mouseReleased',button:'left',clickCount:1,...rect});
+ await Bun.sleep(200);report.afterMouse=await state();
+ // Upstream desktop game does not start on a mouse click, including Chromium.
+ if(report.afterMouse.playing)throw Error('Desktop click unexpectedly started the game');
+ await cdp.send('Input.dispatchKeyEvent',{type:'rawKeyDown',key:' ',code:'Space',windowsVirtualKeyCode:32});
+ await Bun.sleep(100);
+ await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',key:' ',code:'Space',windowsVirtualKeyCode:32});
+ let captured=false;
+ for(let n=0;n<200;n++){
+  await Bun.sleep(100);const s=await state();report.states.push(s);
+  if(!captured&&s.obstacles.some(o=>o.x>80&&o.x<500)){
+   const {data}=await cdp.send('Page.captureScreenshot',{format:'png'});
+   await Bun.write(directory+'/cactus.png',Buffer.from(data,'base64'));captured=true;
+  }
+  if(s.crashed)break;
+ }
+ report.final=await state();report.exceptions=cdp.events.filter(e=>e.method==='Runtime.exceptionThrown');
+ if(!captured||!report.final.crashed||report.final.intro||report.exceptions.length)throw Error('Expected visible moving cactus and a real collision');
+ const placement=()=>cdp.evaluate(`JSON.stringify((()=>{const r=Runner.instance_.containerEl.getBoundingClientRect();return {x:r.x,y:r.y,width:r.width,height:r.height,scrollY}})())`).then(JSON.parse);
+ report.beforeRestart=await placement();
+ await Bun.sleep(1000);
+ await cdp.send('Input.dispatchKeyEvent',{type:'rawKeyDown',key:' ',code:'Space',windowsVirtualKeyCode:32});
+ await Bun.sleep(100);
+ await cdp.send('Input.dispatchKeyEvent',{type:'keyUp',key:' ',code:'Space',windowsVirtualKeyCode:32});
+ await Bun.sleep(500);report.afterRestart=await placement();
+ report.restartState=await state();
+ if(JSON.stringify(report.beforeRestart)!==JSON.stringify(report.afterRestart)||!report.restartState.playing)throw Error('Restart moved the game or failed to start');
+ console.log(JSON.stringify({engine,passed:true,screenshot:directory+'/cactus.png',final:report.final,beforeRestart:report.beforeRestart,afterRestart:report.afterRestart}));
+}finally{
+ try{await Bun.write(directory+'/report.json',JSON.stringify(report,null,2));}finally{await app.stop();}
+}

package/test/manual-threejs-scene.js

@@ -0,0 +1,64 @@
+// Network integration check against the unchanged Three.js example. Not a CI
+// unit test: it needs the website and (optionally) local floor/wall images.
+// bun test/manual-threejs-scene.js [/path/to/3D素材] [/tmp/threejs-check]
+import assert from 'node:assert/strict';
+import {resolve,join} from 'node:path';
+import {launch} from '../tools/browser-lab.js';
+const assets=process.argv[2]&&resolve(process.argv[2]),out=resolve(process.argv[3]??'/tmp/buninu-threejs-check');
+const browser=await launch('buninu',out),c=browser.cdp;
+async function wait(expression){for(let i=0;i<300;i++){if(await c.evaluate(expression,180000))return;await Bun.sleep(100);}throw Error('Not ready: '+expression);}
+async function click(text){
+ const expression=`[...document.querySelectorAll('button')].find(b=>b.textContent.trim()===${JSON.stringify(text)})`;
+ await c.evaluate(`(${expression}).scrollIntoView({block:'center'})`);
+ const point=await c.evaluate(`(()=>{const r=(${expression}).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,button:'left',clickCount:1,...point},180000);
+ console.log('clicked',text);
+}
+async function pick(names){
+ await wait('!!document.getElementById("path")');
+ // Exercise the same controller actions as the browser-owned chooser buttons.
+ const action=async value=>{await c.evaluate(`window.__fileAction=${JSON.stringify(value)}`);await c.send('Input.dispatchKeyEvent',{type:'keyDown',key:'Shift'});await c.send('Input.dispatchKeyEvent',{type:'keyUp',key:'Shift'});};
+ await action({kind:'browse',path:assets});
+ for(const name of names){const index=await c.evaluate(`[...document.querySelectorAll('.entry')].findIndex(e=>e.textContent.endsWith(${JSON.stringify(name)}))`);assert(index>=0,'missing '+name);await action({kind:'select',index});}
+ await action({kind:'open'});
+}
+try{
+ await c.send('Page.navigate',{url:'https://drjohnjstest.blogspot.com/2023/11/3dsbsthreejsdemo.html'});
+ await wait('typeof te!=="undefined"&&!!te.openo');
+ if(assets){
+  await c.evaluate('window.bgReady=false;te.selectbg().then(()=>window.bgReady=true);true');
+  await pick(['floor.jpg','wall.jpg']);await wait('window.bgReady&&te.floor.material.map.image.complete&&te.wallr.material.map.image.complete');
+ }
+ const initialCount=await c.evaluate('te.obj.length');
+ for(const name of['+人','+複製','+球','+立方']){
+  const count=await c.evaluate('te.obj.length');await click(name);assert.equal(await c.evaluate('te.obj.length'),count+1);
+ }
+ assert.equal(await c.evaluate('te.obj.filter(o=>o.type==="Group"&&o.children.length===7).length'),2);
+ const typing=click('+字');await wait('!!document.getElementById("answer")');await c.send('Page.handleJavaScriptDialog',{accept:true,promptText:'Hello 文字'});await typing;
+ assert.equal(await c.evaluate('te.obj.length'),initialCount+5);
+ const active=await c.evaluate('te.cv.active');await click('Next Element');assert.notEqual(await c.evaluate('te.cv.active'),active);await click('Previous Element');assert.equal(await c.evaluate('te.cv.active'),active);
+ const visible=await c.evaluate('te.ca.obj.visible');await click('Toggle');assert.equal(await c.evaluate('te.ca.obj.visible'),!visible);await click('Toggle');
+ await click('直向');assert.equal(await c.evaluate('getComputedStyle(te.cv).transform'),'none');await click('橫向');assert.equal(await c.evaluate('getComputedStyle(te.cv).transform'),'matrix(0, 1, -1, 0, 0, 0)');
+ await c.evaluate('te.cv.scrollIntoView()');const r=await c.evaluate('(()=>{const r=te.cv.getBoundingClientRect();return{x:r.x,y:r.y,width:r.width}})()');
+ const point=(x,y)=>({x:r.x+r.width-y,y:r.y+x});
+ const before=await c.evaluate('te.ca.obj.position.toArray()');
+ for(const [x,y]of[[150,30],[30,150],[270,150],[150,270]])for(const type of['mousePressed','mouseReleased'])await c.send('Input.dispatchMouseEvent',{type,button:'left',clickCount:1,...point(x,y)},180000);
+ assert.deepEqual(await c.evaluate('te.ca.obj.position.toArray()'),before);
+ const rotation=await c.evaluate('te.ca.obj.rotation.y');
+ await c.send('Input.dispatchMouseEvent',{type:'mousePressed',button:'left',buttons:1,...point(40,40)});
+ for(const x of[70,200])await c.send('Input.dispatchMouseEvent',{type:'mouseMoved',button:'none',buttons:1,...point(x,40)},180000);
+ await c.send('Input.dispatchMouseEvent',{type:'mouseReleased',button:'left',buttons:0,...point(200,40)},180000);assert.notEqual(await c.evaluate('te.ca.obj.rotation.y'),rotation);
+ if(assets&&await Bun.file(join(assets,'小凱L.png')).exists()&&await Bun.file(join(assets,'小凱R.png')).exists()){
+  const adding=click('+立體圖');await wait('!!document.getElementById("ok")');await c.send('Page.handleJavaScriptDialog',{accept:true});await adding;await pick(['小凱L.png','小凱R.png']);await wait('te.opensbs_success&&te.sbsl[0].obj.material.map.image.complete&&te.sbsr[0].obj.material.map.image.complete');
+ }
+ await c.evaluate('tdebug.value="window.smokeRun=123"');await click('Run');assert.equal(await c.evaluate('window.smokeRun'),123);
+ await click('→');await c.evaluate('tdebug.value="second slot"');await click('←');assert.equal(await c.evaluate('tdebug.value'),'window.smokeRun=123');await click('→');assert.equal(await c.evaluate('tdebug.value'),'second slot');
+ const clearing=click('Clear');await wait('!!document.getElementById("ok")');await c.send('Page.handleJavaScriptDialog',{accept:true});await clearing;assert.equal(await c.evaluate('tdebug.value'),'');
+ // Copy uses the existing browser clipboard bridge. Its non-destructive mocked
+ // host contract is covered separately; do not replace the user's clipboard.
+ await click('Open Console');await wait('typeof eruda!=="undefined"&&!!document.querySelector("#eruda")');
+ await c.evaluate('eruda.hide();te.cv.scrollIntoView();te.rd()');
+ const shot=await c.send('Page.captureScreenshot',{format:'png'},180000);await Bun.write(join(out,'scene.png'),Buffer.from(shot.data,'base64'));
+ assert.deepEqual(c.events.filter(e=>e.method==='Runtime.exceptionThrown'),[]);
+ console.log('PASS; screenshot:',join(out,'scene.png'));
+}finally{await browser.stop();}

package/test/manual-webgl-benchmark.js

@@ -0,0 +1,27 @@
+// Completed-frame timing, not merely asynchronous GPU command submission.
+// bun test/manual-webgl-benchmark.js buninu|chromium /path/to/3D素材 [/tmp/output]
+// Select a software Vulkan ICD externally for the Chromium CPU comparison.
+import{launch}from'../tools/browser-lab.js';
+import{resolve,join}from'node:path';
+const engine=process.argv[2]??'buninu',assets=process.argv[3];
+if(!assets)throw Error('Pass a directory containing floor.jpg and wall.jpg');
+const out=resolve(process.argv[4]??'/tmp/threejs-benchmark-'+engine);
+const b=await launch(engine,out,engine==='chromium'?['--use-gl=angle','--use-angle=vulkan','--disable-gpu-sandbox','--ignore-gpu-blocklist']:[]);
+try{
+ const c=b.cdp;await c.send('Page.navigate',{url:'https://drjohnjstest.blogspot.com/2023/11/3dsbsthreejsdemo.html'});
+ for(let i=0;i<300;i++){if(await c.evaluate('typeof te!=="undefined"&&!!te.openo'))break;await Bun.sleep(100);}
+ const images=await Promise.all(['floor.jpg','wall.jpg'].map(async name=>'data:image/jpeg;base64,'+(await Bun.file(join(assets,name)).bytes()).toBase64()));
+ await c.evaluate(`te.selectbg(${JSON.stringify(images[0])},${JSON.stringify(images[1])}).then(()=>true)`,180000);
+ for(let i=0;i<100;i++){if(await c.evaluate('te.floor.material.map.image.complete&&te.wallr.material.map.image.complete'))break;await Bun.sleep(50);}
+ const result=await c.evaluate(`(()=>{
+  const contexts=[te.renderer.getContext(),te.renderer2.getContext()],pixel=new Uint8Array(4);
+  const fence=()=>{for(const gl of contexts){gl.finish();if(gl.readPixels)gl.readPixels(0,0,1,1,gl.RGBA,gl.UNSIGNED_BYTE,pixel);}};
+  let start=performance.now();te.add('man');te.rd();fence();const preparationMs=performance.now()-start,frames=[];
+  for(let i=0;i<30;i++){start=performance.now();te.obj[0].position.x=6.1*i;te.rd();fence();frames.push(performance.now()-start);}
+  return {preparationMs,frames,canvas:[te.cv.width,te.cv.height],errors:contexts.map(g=>g.getError())};
+ })()`,300000);
+ const sorted=result.frames.slice(3).sort((a,b)=>a-b),median=sorted[Math.floor(sorted.length/2)],p95=sorted[Math.floor(sorted.length*.95)];
+ const report={engine,...result,medianMs:median,medianFps:1000/median,p95Ms:p95,p95Fps:1000/p95};
+ await Bun.write(join(out,'timing.json'),JSON.stringify(report,null,2));console.log(JSON.stringify(report,null,2));
+ await c.evaluate('te.cv.scrollIntoView()');const shot=await c.send('Page.captureScreenshot',{format:'png'},180000);await Bun.write(join(out,'scene.png'),Buffer.from(shot.data,'base64'));
+}finally{await b.stop();}

package/test/manual-webgl-cpu.html

@@ -0,0 +1,26 @@
+<!doctype html><meta charset="utf-8"><title>CPU WebGL triangle</title>
+<style>body{background:#222;color:white}canvas{border:1px solid white}</style>
+<h1>CPU WebGL / CanvasKit</h1><p>Click left/right to move. Drag horizontally to rotate.</p><canvas draggable="true" width="320" height="240"></canvas><pre id="result"></pre>
+<script>
+const canvas=document.querySelector('canvas'),gl=canvas.getContext('webgl');
+function compile(type,source){const s=gl.createShader(type);gl.shaderSource(s,source);gl.compileShader(s);if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))throw Error(gl.getShaderInfoLog(s));return s;}
+try{
+ const p=gl.createProgram();
+ gl.attachShader(p,compile(gl.VERTEX_SHADER,'attribute vec3 position; uniform float dx; uniform float angle; varying vec3 color; void main(){color=position*0.5+0.5;vec2 p=mat2(cos(angle),sin(angle),-sin(angle),cos(angle))*position.xy;gl_Position=vec4(p+vec2(dx,0.0),position.z,1.0);}'));
+ gl.attachShader(p,compile(gl.FRAGMENT_SHADER,'precision highp float; varying vec3 color;void main(){gl_FragColor=vec4(color,1.0);}'));
+ gl.linkProgram(p);gl.useProgram(p);
+ const b=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,b);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-.8,-.8,0,.8,-.8,0,0,.8,0]),gl.STATIC_DRAW);
+ const a=gl.getAttribLocation(p,'position');gl.enableVertexAttribArray(a);gl.vertexAttribPointer(a,3,gl.FLOAT,false,0,0);
+ let dx=0,angle=0,start=0;
+ const offset=gl.getUniformLocation(p,'dx'),rotation=gl.getUniformLocation(p,'angle');
+ function draw(){
+   gl.uniform1f(offset,dx);gl.uniform1f(rotation,angle);
+   gl.clearColor(.05,.1,.15,1);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES,0,3);
+   document.querySelector('pre').textContent=`offset=${dx.toFixed(2)} angle=${angle.toFixed(2)} error=${gl.getError()}`;
+ }
+ canvas.onclick=e=>{dx+=e.offsetX<canvas.clientWidth/2?-.1:.1;draw();};
+ canvas.ondragstart=e=>{start=e.offsetX;e.dataTransfer.setData('text/plain','rotate');};
+ canvas.ondragend=e=>{angle+=(e.offsetX-start)/100;draw();};
+ draw();
+}catch(e){document.querySelector('pre').textContent=e.stack;}
+</script>

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

@@ -0,0 +1,8 @@
+import {expect,test} from 'bun:test';
+
+test('completed audio releases bounded decoders while preserving metadata, replay and background playback',async()=>{
+  const child=Bun.spawn([process.execPath,new URL('./fixtures/media-audio-lifetime.js',import.meta.url).pathname],{stdout:'pipe',stderr:'pipe'});
+  const [out,error,code]=await Promise.all([new Response(child.stdout).text(),new Response(child.stderr).text(),child.exited]);
+  expect({code,error}).toEqual({code:0,error:''});
+  expect(out).toContain('audio decoder lifetime integration passed');
+},15000);