buninu-browser 0.7.0 → 0.9.1

package/test/classic-games-scenarios.js

@@ -0,0 +1,133 @@
+// Game-specific acceptance assertions only. Production compatibility fixes are generic.
+export async function playClassicGame(c,game) {
+ const evidence=[];
+ const read=expression=>c.evaluate(expression,90000);
+ const check=(condition,message)=>{if(!condition)throw Error(message);evidence.push(message);};
+ const sleep=Bun.sleep;
+ const castyKeys=process.env.CLASSIC_CASTY_KEYS;
+ const casty=castyKeys?await import('../../casty/lib/keyboard-protocol.js'):null;
+ const dispatch=casty?new casty.KeyboardDispatch(c):null;
+ async function key(key,hold=60){
+  if(dispatch && /^[a-z ]$/i.test(key)) {
+   const info=casty.parseKittyKey(`\x1b[${key.codePointAt(0)}u`);
+   await dispatch.send(info,castyKeys==='kitty');await sleep(hold);
+   if(castyKeys==='kitty')await dispatch.send({...info,eventType:3},true);
+   return;
+  }
+  const names={Escape:'Escape',' ':'Space',ArrowLeft:'ArrowLeft',ArrowRight:'ArrowRight',ArrowUp:'ArrowUp',ArrowDown:'ArrowDown',Enter:'Enter'};
+  const codes={Escape:27,' ':32,ArrowLeft:37,ArrowUp:38,ArrowRight:39,ArrowDown:40,Enter:13};
+  const event={key,code:names[key]??'Key'+key.toUpperCase(),windowsVirtualKeyCode:codes[key]??key.toUpperCase().charCodeAt(0)};
+  await c.send('Input.dispatchKeyEvent',{type:'rawKeyDown',...event});await sleep(hold);await c.send('Input.dispatchKeyEvent',{type:'keyUp',...event});
+ }
+ async function click(selector,index=0,button='left'){
+  const point=await read(`(()=>{const e=document.querySelectorAll(${JSON.stringify(selector)})[${index}];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,w:r.width,h:r.height}})()`);
+  if(!point?.w||!point?.h)throw Error('No visible target '+selector);
+  for(const type of ['mousePressed','mouseReleased'])await c.send('Input.dispatchMouseEvent',{type,button,clickCount:1,x:point.x,y:point.y});
+ }
+ async function wait(expression,milliseconds=3000){const start=performance.now();while(performance.now()-start<milliseconds){if(await read(expression))return true;await sleep(60);}return false;}
+ const pixels=async()=>{const {data}=await c.send('Page.captureScreenshot',{format:'png'});return Bun.hash(data).toString();};
+ const start=async()=>{await click('#playBtn');await sleep(150);check(await read('(()=>{const e=document.getElementById("playBtn"),overlay=e.closest(".overlay");return e.getBoundingClientRect().width===0||overlay&&!overlay.classList.contains("show")})()'),'start hides the menu');};
+ switch(game){
+ case 'tetris':{
+  const score=await read('Number(document.getElementById("score-val").textContent)');
+  await key('ArrowLeft');await key('ArrowUp');await key(' ');
+  check(await wait('Number(document.getElementById("score-val").textContent)>'+score,15000),'hard drop locks a piece and increases score');
+  await key('p');check(await read('document.getElementById("pause-overlay").classList.contains("show")'),'P shows the pause overlay');await key('p');check(await read('!document.getElementById("pause-overlay").classList.contains("show")'),'P resumes the game');break;
+ }
+ case 'snake':{
+  // Observe the two head eyes in rendered Canvas output. Their relative
+  // positions reveal direction without reaching into the game's closure.
+  await read(`(()=>{window.__snakeEyes=[];const arc=CanvasRenderingContext2D.prototype.arc;CanvasRenderingContext2D.prototype.arc=function(x,y,r,...args){if(r===2.2){window.__snakeEyes.push([x,y]);if(window.__snakeEyes.length>32)window.__snakeEyes.shift()}return arc.call(this,x,y,r,...args)}})()`);
+  const heading=`(()=>{const a=window.__snakeEyes.at(-2),b=window.__snakeEyes.at(-1);if(!a||!b)return '';const dx=a[0]-b[0],dy=a[1]-b[1];return Math.abs(dx)>Math.abs(dy)?(dx>0?'up':'down'):(dy>0?'right':'left')})()`;
+  await start();check(await wait(heading+"==='right'"),'snake initially faces right');
+  await key('ArrowLeft');await sleep(200);
+  check(await read(heading+"==='right'"),'direct reversal into the body is rejected');
+  for(const [input,direction] of [['ArrowUp','up'],['ArrowLeft','left'],['ArrowDown','down'],['ArrowRight','right']]){
+   await key(input);check(await wait(heading+'==='+JSON.stringify(direction)),input+' turns the snake '+direction);
+  }
+  break;
+ }
+ case '2048':{
+  const tiles=()=>read('JSON.stringify([...document.querySelectorAll(".tile")].map(e=>[e.textContent,e.style.left,e.style.top]))');
+  await key('ArrowLeft');await sleep(180);const before=await tiles();
+  await key('ArrowRight');await sleep(180);check(before!==await tiles(),'arrow moves/spawns numbered tiles');
+  await click('#undoBtn');await sleep(160);check(before===await tiles(),'undo restores the previous board');break;
+ }
+ case 'flappy':{
+  await read(`(()=>{window.__classicText=[];const original=CanvasRenderingContext2D.prototype.fillText;CanvasRenderingContext2D.prototype.fillText=function(text,...args){window.__classicText.push(String(text));if(window.__classicText.length>500)window.__classicText.shift();return original.call(this,text,...args)}})()`);
+  await key(' ');await sleep(120);
+  check(await wait('window.__classicText.some(text=>/^0$/.test(text))'),'Space starts the game and draws the score');
+  await key(' ');await sleep(150);check(await read('!window.__classicText.some(text=>text==="GAME OVER")'),'another flap keeps the bird alive');
+  await key('p');await key('p');break;
+ }
+ case 'space':{
+  await key(' ');const before=await pixels();await key('ArrowRight',200);await key(' ',350);await sleep(150);
+  check(before!==await pixels(),'shooting/movement advances the game canvas');break;
+ }
+ case 'ttt':{
+  await click('.cell',0);check(await wait('document.querySelectorAll(".mark-svg").length>=2'),'human move and AI response both draw marks');
+  await click('#btnNew');check(await read('document.querySelectorAll(".mark-svg").length===0'),'new game clears the board');break;
+ }
+ case 'memory':{
+  const cards=await read('[...document.querySelectorAll(".card")].map(e=>e.querySelector(".card-emoji").textContent)');
+  const first=cards.findIndex((value,index)=>cards.indexOf(value)!==index),other=cards.indexOf(cards[first]);
+  await click('.card',other);await sleep(100);check(await read('document.querySelectorAll(".card.flipped").length===1'),'one click flips one card');
+  await click('.card',first);check(await wait('document.querySelectorAll(".card.matched").length===2'),'matching cards are retained as a pair');break;
+ }
+ case 'mine':{
+  await click('#board .cell',0,'right');check(await read('document.querySelectorAll("#board .flag").length===1'),'right click sets a flag');
+  await click('#board .cell',0,'right');check(await read('document.querySelectorAll("#board .flag").length===0'),'second right click removes the flag');
+  await click('#board .cell',0);check(await wait('document.querySelectorAll("#board .revealed").length>0||document.querySelectorAll("#board .open").length>0||document.querySelectorAll("#board .rv").length>0'),'left click opens cells');break;
+ }
+ case 'pong':case 'breakout':{
+  await start();const before=await pixels();
+  const rect=await read('(()=>{const r=document.getElementById("game").getBoundingClientRect();return {x:r.x+r.width*.8,y:r.y+r.height*.8}})()');
+  await c.send('Input.dispatchMouseEvent',{type:'mouseMoved',...rect});await key('ArrowRight',150);
+  if(game==='breakout')await key(' ');
+  await sleep(500);check(before!==await pixels(),'paddle and ball update after input');break;
+ }
+ case 'dino':{
+  await start();const before=await pixels();await key(' ');await sleep(300);check(before!==await pixels(),'jump/runner animation advances');break;
+ }
+ case 'sudoku':{
+  await start();await click('#notesBtn');check(await read('document.getElementById("notesBtn").textContent.includes("On")'),'notes mode toggles');
+  await click('#notesBtn');const before=await pixels();await click('#hintBtn');await sleep(120);check(before!==await pixels(),'hint fills a cell');break;
+ }
+ case 'connect4':{
+  check(await read(`(()=>{const cols=[...document.querySelectorAll('.col')];return cols.length===7&&cols.every((col,index)=>{const cells=[...col.querySelectorAll('.cell')].map(e=>e.getBoundingClientRect()),r=col.getBoundingClientRect();return cells.length===6&&cells.every((cell,i)=>cell.width>0&&Math.abs(cell.x-cells[0].x)<1&&(!i||cell.bottom<=cells[i-1].top))&&(!index||r.left>=cols[index-1].getBoundingClientRect().right)})})()`),'seven non-overlapping columns contain six vertically reversed cells');
+  for(const col of [0,1,0,1,0,1,0]){await click('.col',col);await sleep(450);}
+  check(await wait('document.getElementById("gameOverOverlay").classList.contains("show")'),'four connected discs trigger the winner overlay');
+  check(await read('Number(document.getElementById("scoreRed").textContent)===1'),'winning round updates score');break;
+ }
+ case 'typing':{
+  await click('#startBtn');const word=await read('document.querySelector(".word.current").textContent');
+  await click('#wordInput');for(const char of word+' ')await c.send('Input.insertText',{text:char});
+  check(await read('document.querySelectorAll(".word.correct").length>0||currentWordIdx>0'),'typing the current word advances the exercise');
+  const mute=await read('document.getElementById("muteBtn").textContent');
+  for(const char of 'pPmM'){
+   const event={key:char,code:'Key'+char.toUpperCase(),windowsVirtualKeyCode:char.toUpperCase().charCodeAt(0),modifiers:char===char.toUpperCase()?8:0};
+   await c.send('Input.dispatchKeyEvent',{type:'rawKeyDown',...event});
+   await c.send('Input.dispatchKeyEvent',{type:'char',...event,text:char});
+   await c.send('Input.dispatchKeyEvent',{type:'keyUp',...event});
+  }
+  check(await read('document.getElementById("wordInput").value==="pPmM"&&!isPaused'),'P and M remain ordinary input in both letter cases');
+  check(await read('document.getElementById("muteBtn").textContent')===mute,'typing M does not toggle sound');
+  await key('Escape');check(await read('isPaused&&document.getElementById("wordInput").disabled'),'Escape pauses while the input is focused');
+  await key('Escape');check(await read('!isPaused&&!document.getElementById("wordInput").disabled'),'Escape resumes typing');break;
+ }
+ case 'simon':{
+  await read(`(()=>{window.__classicLights=[];new MutationObserver(records=>{for(const record of records)if(record.target.matches('.quadrant.active'))window.__classicLights.push(record.target.dataset.idx)}).observe(document.getElementById('board'),{subtree:true,attributes:true,attributeFilter:['class']})})()`);
+  await click('#startBtn');let index=null;
+  for(let n=0;n<30;n++){index=await read('window.__classicLights[0]??null');if(index!==null)break;await sleep(35);}
+  check(index!==null,'first sequence visibly lights a quadrant');
+  check(await wait('document.getElementById("status").textContent.includes("Your turn")'),'sequence switches to player input');
+  await click(`.quadrant[data-idx="${index}"]`);check(await wait('Number(document.getElementById("roundDisplay").textContent)>=2'),'correct quadrant advances to round two');break;
+ }
+ case 'puzzle15':{
+  check(await read('document.querySelectorAll("#puzzleGrid .tile").length===15'),'fifteen numbered tiles are rendered');
+  const index=await read(`(()=>{const g=document.getElementById('puzzleGrid'),r=g.getBoundingClientRect(),cs=r.width/4;const tiles=[...g.querySelectorAll('.tile')],positions=tiles.map(e=>{const t=e.getBoundingClientRect();return [Math.round((t.x-r.x)/cs),Math.round((t.y-r.y)/cs)]});let empty;for(let y=0;y<4;y++)for(let x=0;x<4;x++)if(!positions.some(p=>p[0]===x&&p[1]===y))empty=[x,y];return positions.findIndex(p=>Math.abs(p[0]-empty[0])+Math.abs(p[1]-empty[1])===1)})()`);
+  await click('#puzzleGrid .tile',index);check(await read('Number(document.getElementById("moveCount").textContent)>0'),'adjacent tile slides and increases move count');break;
+ }
+ }
+ return evidence;
+}

package/test/clipboard.test.js

@@ -52,3 +52,19 @@ test('clipboard read is one-shot, preserves empty/text values, and prefers xclip
  await Bun.sleep(30);expect(calls).toHaveLength(2);
  await expect(readClipboard({...options,which:()=>null})).rejects.toThrow('No working');
 });
+
+test('execCommand copy snapshots a temporary selected textarea and uses the existing host clipboard',async()=>{
+ const copies=[];const host=new RendererHost({clipboardWrite:async text=>{await Bun.sleep(10);copies.push(text);}});
+ try {
+  await host.call('loadDocument',{url:'http://clipboard.test/',contentType:'text/html',source:`<body style="margin:0"><button style="width:200px;height:60px" onclick="copyText()">Copy</button><script>
+  function copyText(){const field=document.createElement('textarea');field.value='line 1\\n中文 😀';document.body.append(field);field.select();window.copied=document.execCommand('copy');field.remove();}
+  </script>`});
+  await host.call('whenLoaded');
+  expect(await host.call('evaluate',`document.queryCommandSupported('copy')`)).toBe(true);
+  await host.call('evaluate','copyText()');expect(await host.call('evaluate','copied')).toBe(false);expect(copies).toEqual([]);
+  await host.call('click',30,20);
+  for(let i=0;i<40&&!copies.length;i++)await Bun.sleep(25);
+  expect(copies).toEqual(['line 1\n中文 😀']);
+  expect(await host.call('evaluate','copied')).toBe(true);
+ }finally{host.close();}
+},20000);

package/test/computed-style.test.js

@@ -957,3 +957,21 @@ test("form controls default to readable dark text but author colors still win",
     expect(styles.get(document.querySelector('#custom')).color).toBe('rgba(255, 0, 0, 1)');
   } finally {window.happyDOM.abort()}
 });
+
+test("aspect-ratio parses ratios, auto fallback, inheritance and invalid declarations", () => {
+  const { document, window } = parseHTMLDocument(`<div id="a" style="aspect-ratio:16 / 9"><div id="b" style="aspect-ratio:inherit"></div><div id="c"></div></div>
+    <div id="auto" style="aspect-ratio:2 auto"></div><div id="zero" style="aspect-ratio:0 / 1"></div>
+    <div id="invalid" style="aspect-ratio:3 / 2;aspect-ratio:1 auto / 2;aspect-ratio:-1;aspect-ratio:1 / 2 / 3"></div>
+    <div id="reset" style="aspect-ratio:2;aspect-ratio:auto"></div>`);
+  try {
+    const styles = new StyleEngine().compute(document);
+    const ratio = id => styles.get(document.getElementById(id)).aspectRatio;
+    expect(ratio('a')).toEqual({ numerator:16, denominator:9, auto:false });
+    expect(ratio('b')).toEqual(ratio('a'));
+    expect(ratio('c')).toBeNull();
+    expect(ratio('auto')).toEqual({ numerator:2, denominator:1, auto:true });
+    expect(ratio('zero')).toEqual({ numerator:0, denominator:1, auto:false });
+    expect(ratio('invalid')).toEqual({ numerator:3, denominator:2, auto:false });
+    expect(ratio('reset')).toBeNull();
+  } finally { window.happyDOM.abort(); }
+});

package/test/css-animation-lifecycle.test.js

@@ -0,0 +1,28 @@
+import {test,expect} from 'bun:test';
+import {RendererHost} from '../lib/renderer/host.js';
+
+test('inline prefixed animation runs, bubbles real AnimationEvents and can be cleared in the end handler',async()=>{
+ const renderer=new RendererHost({timeout:20000});
+ try{
+  await renderer.start();
+  await renderer.call('loadDocument',{url:'https://animation.test/',contentType:'text/html',source:`<!doctype html>
+   <style>@-webkit-keyframes expand {from{width:10px}to{width:110px}}</style>
+   <div id="box" style="width:200px;height:20px"></div><script>
+   var box=document.getElementById('box'),events=[];
+   document.addEventListener('animationend',e=>events.push([e.type,e.animationName,e.elapsedTime,e.pseudoElement,e instanceof AnimationEvent,e.target===box]));
+   box.addEventListener('webkitAnimationEnd',e=>{events.push([e.type,e.animationName,e.elapsedTime]);box.style.webkitAnimation='';});
+   box.style.webkitAnimation='expand .1s linear 1 both';
+   </script>`});
+  await renderer.call('whenLoaded');
+  for(let n=0;n<100;n++){
+   if(await renderer.call('evaluate','events.length>=2'))break;
+   await Bun.sleep(30);
+  }
+  expect(JSON.parse(await renderer.call('evaluate','JSON.stringify(events)'))).toEqual([
+   ['animationend','expand',.1,'',true,true],['webkitAnimationEnd','expand',.1],
+  ]);
+  expect(await renderer.call('evaluate',"box.style.animation")).toBe('');
+  expect(await renderer.call('evaluate',"getComputedStyle(box).width")).toBe('200px');
+  expect(await renderer.call('evaluate',"new AnimationEvent('animationend',{animationName:'test',elapsedTime:2}).elapsedTime")).toBe(2);
+ }finally{await renderer.close();}
+},20000);

package/test/css-animations.test.js

@@ -0,0 +1,83 @@
+import {test,expect} from 'bun:test';
+import {createCSSAnimations} from '../lib/renderer/css-animations.js';
+import {extractAnimationKeyframes,StyleEngine} from '../lib/style/computed-style.js';
+import {animationShorthand,animationProperty} from '../lib/style/animation-values.js';
+import {parseHTMLDocument} from '../lib/happy-dom/parser.js';
+
+function timeline() {
+ let time=0,next=0;const tasks=new Map(),events=[];
+ const element={isConnected:true};
+ const animation=createCSSAnimations({now:()=>time,invalidate:()=>{},dispatch:(_e,type,detail)=>events.push({type,...detail}),
+  setTimer:(fn,delay)=>{tasks.set(++next,{fn,at:time+delay});return next;},clearTimer:id=>tasks.delete(id)});
+ animation.setSheets(['@keyframes grow {from{width:10px;opacity:0} to{width:110px;opacity:1}}'],{});
+ const style={width:200,height:20,opacity:1,display:'block',cssAnimations:animationShorthand('grow 1s linear both')};
+ return {animation,element,style,events,tasks,setTime:value=>time=value,
+  flush:()=>{for(const [id,task] of [...tasks])if(task.at<=time){tasks.delete(id);task.fn();}}};
+}
+
+test('CSS keyframes use balanced blocks, media filtering and prefix aliases',()=>{
+ const frames=extractAnimationKeyframes('@media (min-width:500px){@-webkit-keyframes move{from{width:10px}50%,to{width:20px}}} @media (max-width:400px){@keyframes absent{to{opacity:0}}}',{width:800});
+ expect([...frames.keys()]).toEqual(['move']);expect(frames.get('move').map(f=>f.offset)).toEqual([0,.5,1]);
+ expect(animationProperty('webkitAnimationDuration')).toBe('animation-duration');
+ expect(animationProperty('-webkit-animation')).toBe('animation');expect(animationProperty('--MyVar')).toBe('--MyVar');
+});
+
+test('numeric animations interpolate without changing DOM declarations, and end once',()=>{
+ const t=timeline();
+ expect(t.animation.sample(t.element,t.style).width).toBe(10);t.flush();
+ t.setTime(500);expect(t.animation.sample(t.element,t.style).width).toBe(60);
+ expect(t.animation.sample(t.element,t.style).opacity).toBe(.5);expect(t.style.width).toBe(200);
+ t.setTime(1000);expect(t.animation.sample(t.element,t.style).width).toBe(110);t.flush();
+ t.setTime(2000);t.animation.sample(t.element,t.style);t.flush();
+ expect(t.events.map(e=>[e.type,e.animationName,e.elapsedTime])).toEqual([['animationstart','grow',0],['animationend','grow',1]]);
+ t.animation.dispose();expect(t.tasks.size).toBe(0);
+});
+
+test('delay, repeat, pause/resume, cancellation and missing definitions',()=>{
+ const t=timeline();t.style.cssAnimations=animationShorthand('grow 1s 200ms linear 2');
+ expect(t.animation.sample(t.element,t.style).width).toBe(200);t.flush();expect(t.events).toEqual([]);
+ t.setTime(700);expect(t.animation.sample(t.element,t.style).width).toBe(60);t.flush();
+ t.style.cssAnimations=[{...t.style.cssAnimations[0],playState:'paused'}];t.animation.sample(t.element,t.style);
+ t.setTime(1700);expect(t.animation.sample(t.element,t.style).width).toBe(60);
+ t.style.cssAnimations=[{...t.style.cssAnimations[0],playState:'running'}];t.animation.sample(t.element,t.style);
+ t.setTime(2300);t.animation.sample(t.element,t.style);t.flush();
+ expect(t.events.some(e=>e.type==='animationiteration')).toBe(true);
+ t.animation.sample(t.element,{display:'block'});t.flush();expect(t.events.at(-1).type).toBe('animationcancel');
+ t.animation.sample(t.element,{display:'block',cssAnimations:animationShorthand('missing 1s')});t.flush();
+ expect(t.events.filter(e=>e.type==='animationstart')).toHaveLength(1);
+ t.animation.dispose();expect(t.tasks.size).toBe(0);
+});
+
+test('cascade retains shorthand and longhand timing with vendor aliases',()=>{
+ const {document,window}=parseHTMLDocument('<div id=a style="animation-delay:2s; -webkit-animation:grow 1s linear; animation-duration:3s"></div>');
+ try{const engine=new StyleEngine().compute(document);const style=engine.get(document.getElementById('a'));
+ expect(style.cssAnimations[0].delay).toBe('0s');expect(style.cssAnimationLonghands).toEqual({duration:['3s']});
+ }finally{window.happyDOM.close();}
+});
+
+test('transform keyframes animate a drop and bounce with easing per segment',()=>{
+ const t=timeline();
+ t.animation.setSheets(['@keyframes drop{0%{transform:translateY(-300px);opacity:0}60%{transform:translateY(8px)}80%{transform:translateY(-4px)}100%{transform:translateY(0);opacity:1}}'],{});
+ t.style.transform=null;t.style.cssAnimations=animationShorthand('drop 1s ease-in forwards');
+ try{
+  expect(t.animation.sample(t.element,t.style).transform.y).toBe(-300);
+  t.setTime(600);expect(t.animation.sample(t.element,t.style).transform.y).toBe(8);
+  t.setTime(700);const y=t.animation.sample(t.element,t.style).transform.y;
+  expect(y).toBeLessThan(8);expect(y).toBeGreaterThan(2);
+  t.setTime(800);expect(t.animation.sample(t.element,t.style).transform.y).toBe(-4);
+  t.setTime(1000);expect(t.animation.sample(t.element,t.style).transform.y).toBe(0);
+  expect(t.style.transform).toBeNull();
+ }finally{t.animation.dispose()}
+});
+
+test('transform interpolation preserves percentage translations and underlying endpoints',()=>{
+ const t=timeline();
+ t.animation.setSheets(['@keyframes move{to{transform:translateX(100%) scale(2)}}'],{});
+ t.style.transform=null;t.style.cssAnimations=animationShorthand('move 1s linear both');
+ try{
+  t.animation.sample(t.element,t.style);t.setTime(500);
+  const value=t.animation.sample(t.element,t.style).transform;
+  expect(value.scaleX).toBe(1.5);expect(value.x.kind).toBe('sum');
+  t.setTime(1000);expect(t.animation.sample(t.element,t.style).transform.x).toEqual({unit:'%',value:100});
+ }finally{t.animation.dispose()}
+});

package/test/direct-canvas.test.js

@@ -0,0 +1,39 @@
+import {expect,test} from 'bun:test';
+test('Land Canvas layers match Skia and safely return to full painting',async()=>{
+ const p=Bun.spawn([process.execPath,new URL('./fixtures/direct-canvas.js',import.meta.url).pathname],{stdout:'pipe',stderr:'pipe'});
+ const [exit,stderr]=await Promise.all([p.exited,new Response(p.stderr).text()]);
+ expect({exit,stderr}).toEqual({exit:0,stderr:''});
+},15000);
+
+test('Land adapter preserves RGBA, premultiplied alpha, unaligned inputs and immutable output',async()=>{
+ const {CanvasComposer}=await import('../lib/paint/direct-canvas.ts');
+ const composer=new CanvasComposer();
+ const source=Uint8Array.of(50,0,0,128,99,88,77,255,0,0,0,0);
+ const storage=new Uint8Array(source.length+2).fill(9),unaligned=storage.subarray(1,-1);unaligned.set(source);
+ try{
+  const layer=pixels=>({pixels,width:3,height:1,x:0,y:0,drawWidth:3,drawHeight:1});
+  const aligned=composer.compose(3,1,[10,20,30,255],[layer(source)]).slice();
+  expect([...aligned]).toEqual([55,10,15,255,99,88,77,255,10,20,30,255]);
+  expect([...composer.compose(3,1,[10,20,30,255],[layer(unaligned)])]).toEqual([...aligned]);
+  expect([...source]).toEqual([50,0,0,128,99,88,77,255,0,0,0,0]);
+  expect(storage[0]).toBe(9);expect(storage.at(-1)).toBe(9);
+  const previous=composer.compose(3,1,[10,20,30,255],[layer(source)]);
+  composer.compose(3,1,[255,0,0,255],[]);expect([...previous]).toEqual([...aligned]);
+ }finally{composer.close();composer.close()}
+});
+
+test('the complete vendored Land renderer supports PNG and negotiated raw screenshots',async()=>{
+ const {createRenderer}=await import('../vendor/land-renderer/renderer.ts');
+ const surface={pixels:{bytes:Uint8Array.of(0,0,255,255,255,0,0,255),width:2,height:1,stride:8,format:0},scale:1,transform:0};
+ const scene={width:2,height:1,fastPng:true,input:{x:0,y:0,pointer:false},wm:{renderSurfaces:()=>[surface],origin:()=>({x:0,y:0})}};
+ let raw,closed=false;
+ const renderer=await createRenderer(scene,{rawFrames:{write(bytes,width,height,format){raw={bytes:[...bytes],width,height,format};return 'raw-frame';},close(){closed=true;}}});
+ try{
+  const data=await renderer.screenshot({format:'png'});
+  const {CanvasKit:kit}=await (await import('../lib/renderer/page-renderer.js')).loadGraphics();
+  const image=kit.MakeImageFromEncoded(Buffer.from(data,'base64'));
+  try{expect([...image.readPixels(0,0,{width:2,height:1,colorType:kit.ColorType.RGBA_8888,alphaType:kit.AlphaType.Unpremul,colorSpace:kit.ColorSpace.SRGB})]).toEqual([255,0,0,255,0,0,255,255]);}finally{image.delete()}
+  expect(await renderer.screenshot({format:'rgba'})).toBe('raw-frame');
+  expect(raw).toEqual({bytes:[255,0,0,255,0,0,255,255],width:2,height:1,format:'rgba'});
+ }finally{renderer.close();expect(closed).toBe(true)}
+});

package/test/dynamic-inline-handlers.test.js

@@ -0,0 +1,25 @@
+import {test,expect} from 'bun:test';
+import {RendererHost} from '../lib/renderer/host.js';
+
+test('dynamic inline handlers compile for dispatch and reflect updates without replacing property handlers',async()=>{
+ const host=new RendererHost();
+ try {
+  await host.call('loadDocument',{url:'https://example.test/',contentType:'text/html',source:'<body><script>window.hits=[]</script></body>'});
+  await host.call('whenLoaded');
+  expect(await host.call('evaluate',`(()=>{
+    document.body.innerHTML='<div onclick="hits.push(2)"><button onclick="hits.push(1)">go</button></div>';
+    const button=document.querySelector('button');
+    button.dispatchEvent(new MouseEvent('click',{bubbles:true}));
+    button.onclick=()=>hits.push(3);
+    button.dispatchEvent(new MouseEvent('click'));
+    button.setAttribute('onclick','hits.push(4)');
+    button.dispatchEvent(new MouseEvent('click'));
+    button.removeAttribute('onclick');
+    button.dispatchEvent(new MouseEvent('click'));
+    button.setAttribute('onclick','hits.push(5)');
+    const reflected=typeof button.onclick;
+    button.dispatchEvent(new MouseEvent('click'));
+    return [hits,reflected];
+  })()`)).toEqual([[1,2,3,4,5],'function']);
+ } finally {host.close();}
+},20000);

package/test/eval-declarations.test.js

@@ -0,0 +1,22 @@
+import {test,expect} from 'bun:test';
+import {RendererHost} from '../lib/renderer/host.js';
+test('sloppy direct eval declares caller-local functions and vars without leaking between calls',async()=>{
+ const host=new RendererHost();try{
+  await host.call('loadDocument',{url:'https://eval.test/',contentType:'text/html',source:`<script>
+  function make(source) {
+    let prefix='local:';
+    eval(source);
+    const first=helper();
+    eval('count += 1');
+    return [first,helper(),typeof count,()=>helper()];
+  }
+  window.a=make('var count=2; function helper(){return prefix+count;}');
+  window.b=make('var count=7; function helper(){return prefix+count;}');
+  window.same=(function(){var existing=1;eval('var existing=3');return existing;})();
+  window.strict=(function(){'use strict';eval('var hidden=3');return typeof hidden;})();
+  window.lexical=(function(){eval('let hidden=3');return typeof hidden;})();
+  </script>`});
+  await host.call('whenLoaded');
+  expect(await host.call('evaluate',`[a[0],a[1],a[2],a[3](),b[0],b[3](),same,strict,lexical,typeof helper,typeof count]`)).toEqual(['local:2','local:3','number','local:3','local:7','local:8',3,'undefined','undefined','undefined','undefined']);
+ }finally{host.close();}
+},20000);

package/test/file-picker.test.js

@@ -0,0 +1,34 @@
+import {test,expect} from 'bun:test';
+import {mkdtemp,rm} from 'node:fs/promises';
+import {tmpdir} from 'node:os';
+import {join} from 'node:path';
+import {createBrowser} from '../lib/headless-shell.js';
+import {CdpServer} from '../lib/cdp-server.js';
+import {CDP} from '../tools/browser-lab.js';
+test('file input opens browser-owned picker, selects files, and FileReader emits asynchronous load',async()=>{
+ const dir=await mkdtemp(join(tmpdir(),'buninu-picker-'));await Bun.write(join(dir,'one.txt'),'Hello 選檔');await Bun.write(join(dir,'two.txt'),'second');
+ const b=await createBrowser({spareRenderer:false}),server=CdpServer.create(b.context).listen(0),c=new CDP(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+ try{
+  await c.send('Page.navigate',{url:'data:text/html,'+encodeURIComponent(`<input id="f" type="file" multiple><script>window.events=[];f.oninput=()=>events.push('input');f.onchange=async()=>{events.push('change');window.names=[...f.files].map(f=>f.name);const r=new FileReader();r.onload=e=>{window.text=e.target.result;events.push('load')};r.readAsText(f.files[0]);};</script>`)});
+  await c.evaluate('f.click();window.clickReturned=true');
+  for(let i=0;i<200&&!b.context.dialogState;i++)await Bun.sleep(10);
+  expect(b.context.dialogState?.type).toBe('file');
+  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:dir});
+  expect(await c.evaluate('document.body.textContent.includes("one.txt")')).toBe(true);
+  const point=await c.evaluate(`(()=>{const b=document.querySelector('button.entry');const r=b.getBoundingClientRect();return {x:r.x+20,y:r.y+r.height/2}})()`);
+  // Casty lets modal input bypass the page's blocked input turn. Down/up
+  // requests may overlap: one click must consume its picker action once.
+  for(const expected of ['one.txt','']) {
+    await Promise.all(['mousePressed','mouseReleased'].map(type=>c.send('Input.dispatchMouseEvent',{type,...point,button:'left',clickCount:1})));
+    expect(b.context.dialogState?.type).toBe('file');
+    expect(await c.evaluate('document.getElementById("chosen").textContent')).toBe(expected);
+  }
+  await action({kind:'select',index:0});await action({kind:'select',index:1});await action({kind:'open'});
+  for(let i=0;i<100;i++){if(await c.evaluate('window.text!==undefined'))break;await Bun.sleep(10);}
+  expect(await c.evaluate('clickReturned')).toBe(true);expect(await c.evaluate('names')).toEqual(['one.txt','two.txt']);
+  expect(await c.evaluate('text')).toBe('Hello 選檔');expect(await c.evaluate('events')).toEqual(['input','change','load']);
+  expect(await c.evaluate('f.value')).toBe('C:\\fakepath\\one.txt');
+  expect(await c.evaluate('f.value="";({length:f.files.length,value:f.value})')).toEqual({length:0,value:''});
+ }finally{c.close();server.stop(true);b.close();await rm(dir,{recursive:true,force:true});}
+},30000);

package/test/fixtures/canvas-damage.js

@@ -24,6 +24,29 @@ try{
   r.resize(401,300,1);r.resize(400,300,1);
   assert.deepEqual(await pixels(),partial,'partial pixels must match a full repaint, including transparency, clipping and occlusion');
  }
+ // A changing coordinate/status label must not disable local canvas damage.
+ await r.evaluate("document.querySelector('p').id='status'");await pixels();
+ for(const text of ['Dragging 123, 456','Short','拖曳 8, 9','Italic fj']){
+  traces.length=0;
+  await r.evaluate(`document.getElementById('status').textContent=${JSON.stringify(text)};ctx.fillStyle='red';ctx.fillRect(10,10,20,20)`);
+  const partial=await pixels();
+  assert.ok(traces.some(s=>s.includes('canvas damage')),'status text and canvas share partial repaint');
+  r.resize(401,300,1);r.resize(400,300,1);
+  assert.deepEqual(await pixels(),partial,'status replacement clears old glyphs and matches full repaint');
+ }
+ // Changed font metrics / wrapping retain the complete-paint fallback.
+ traces.length=0;
+ await r.evaluate("document.getElementById('status').style.fontSize='30px';ctx.fillRect(0,0,5,5)");
+ const restyled=await pixels();
+ assert.ok(!traces.some(s=>s.includes('canvas damage')),'changed fonts must not use text damage');
+ r.resize(401,300,1);r.resize(400,300,1);assert.deepEqual(await pixels(),restyled);
+ // Italic overhang and fractional raster scaling must preserve the same pixels.
+ await r.evaluate("document.getElementById('status').style.fontStyle='italic'");
+ r.resize(400,300,1.5);await pixels();traces.length=0;
+ await r.evaluate("document.getElementById('status').textContent='fj';ctx.clearRect(0,0,120,100)");
+ const italic=await pixels();assert.ok(traces.some(s=>s.includes('canvas damage')));
+ r.resize(401,300,1.5);r.resize(400,300,1.5);assert.deepEqual(await pixels(),italic);
+ r.resize(400,300,1);
  // Geometry/transform changes must fall back, then remain pixel-correct.
  traces.length=0;
  await r.evaluate("document.querySelector('.clip').style.transform='scale(1.2)';ctx.fillRect(0,0,80,80)");

package/test/fixtures/canvas-frame-pacing.js

@@ -0,0 +1,35 @@
+import assert from 'node:assert/strict';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+import {LayoutEngine} from '../../lib/layout/text-layout.js';
+const sleep=Bun.sleep,now=performance.now.bind(performance),layout=LayoutEngine.prototype.layout,write=process.stdout.write.bind(process.stdout);
+let slow=false,layouts=0,frames=0;
+LayoutEngine.prototype.layout=function(...args){
+ layouts++;
+ if(slow){slow=false;const until=now()+300;while(now()<until){}}
+ return layout.apply(this,args);
+};
+const renderer=await createPageRenderer({onFrame:()=>frames++});
+try{
+ renderer.resize(128,96,1);renderer.setScripting('host');
+ await renderer.loadDocument({url:'https://canvas.test/pacing',contentType:'text/html',source:`<!doctype html><html><head><style>body{margin:0}</style></head><body><canvas id=c width=128 height=96></canvas><script>var ctx=document.getElementById('c').getContext('2d');</script></body></html>`});
+ await renderer.whenLoaded();await renderer.evaluate("var ctx=document.getElementById('c').getContext('2d')");
+ // Simulate a slow font/resource-driven reflow, then animate only the bitmap.
+ slow=true;renderer.resize(129,96,1);frames=0;const before=layouts;
+ await renderer.evaluate("var step=0;var painting=setInterval(()=>{ctx.fillStyle=++step%2?'red':'blue';ctx.fillRect(0,0,128,96)},20)");
+ await sleep(350);const presented=frames;
+ await renderer.evaluate('clearInterval(painting)');
+ assert.ok(presented>=2,`Canvas-only updates must not inherit the old 300ms layout cost; got ${presented} frames`);
+ assert.equal(layouts,before,'bitmap animation does not require layout');
+ const beforeBatch=frames;
+ await renderer.evaluate(`new Promise(resolve=>{
+  let count=0;function draw(){
+   const end=performance.now()+20;while(performance.now()<end){}
+   ctx.fillStyle=++count%2?'green':'yellow';ctx.fillRect(0,0,128,96);
+   if(count<5)requestAnimationFrame(draw);else setTimeout(resolve,30);
+  }requestAnimationFrame(draw);
+ })`);
+ const animationPresented=frames-beforeBatch;
+ assert.ok(animationPresented>=5,`each expensive Canvas rAF must reach presentation, got ${animationPresented}/5`);
+
+ write(JSON.stringify({presented,animationPresented,layoutsDuringAnimation:layouts-before})+'\n');
+}finally{renderer.dispose();LayoutEngine.prototype.layout=layout;}

package/test/fixtures/direct-canvas.js

@@ -0,0 +1,96 @@
+import {strict as assert} from 'node:assert';
+import {createPageRenderer,loadGraphics} from '../../lib/renderer/page-renderer.js';
+const {CanvasKit:kit}=await loadGraphics();
+const traces=[];
+const r=await createPageRenderer({onFrame:()=>{},trace:s=>traces.push(s)});
+async function pixels(){
+ const image=kit.MakeImageFromEncoded(Buffer.from(await r.screenshot(),'base64'));
+ try{return image.readPixels(0,0,{width:image.width(),height:image.height(),colorType:kit.ColorType.RGBA_8888,alphaType:kit.AlphaType.Unpremul,colorSpace:kit.ColorSpace.SRGB})}
+ finally{image.delete()}
+}
+try{
+ r.resize(64,48,1);r.setScripting('host');
+ await r.loadDocument({url:'https://canvas.test/',contentType:'text/html',source:`<!doctype html><style>body{margin:0;background:#196ab3}canvas{display:block}</style><canvas id=c width=64 height=48></canvas><script>window.c=document.getElementById('c');window.ctx=c.getContext('2d');</script>`});
+ await r.whenLoaded();
+ for(const command of [
+  "ctx.clearRect(0,0,64,48)",
+  "ctx.fillStyle='red';ctx.fillRect(0,0,64,48)",
+  "{let data=ctx.createImageData(64,48);for(let i=0;i<data.data.length;i+=4){data.data[i]=(i*37)%256;data.data[i+1]=(i*17+71)%256;data.data[i+2]=(i*53+119)%256;data.data[i+3]=(i/4)%256;}ctx.putImageData(data,0,0);}",
+  "ctx.clearRect(0,0,64,48);ctx.fillStyle='rgba(230,80,40,.5)';ctx.fillRect(3,4,40,30);ctx.fillStyle='rgba(10,240,150,.2)';ctx.fillRect(20,10,30,35)",
+ ]){
+  traces.length=0;await r.evaluate("c.style.transform='none';"+command);
+  const direct=await pixels();
+  assert.ok(traces.some(s=>s.includes('direct canvas composition')),'exercise direct composition');
+  traces.length=0;await r.evaluate("c.style.transform='translate(0px,0px)'");
+  assert.deepEqual(await pixels(),direct,'direct copy/blend must match Skia pixel for pixel');
+  assert.ok(!traces.some(s=>s.includes('direct canvas composition')),'transform keeps native fallback');
+ }
+ // A single Canvas need not fill the page: keep surrounding background and
+ // the native nearest-sampling pixel-center rule for fractional placement.
+ r.resize(96,80,1);
+ for(const [x,y] of [[0,0],[8,5],[8.12,5.24],[8.49,5.49],[8.51,5.51],[-9.2,-4.7],[60.2,50.8]]){
+  await r.evaluate(`c.style.cssText='position:absolute;left:${x}px;top:${y}px';ctx.clearRect(0,0,64,48);ctx.fillStyle='rgba(240,20,80,.5)';ctx.fillRect(1,1,40,30)`);
+  traces.length=0;const placed=await pixels();
+  // evaluate may have already published the direct frame.
+  await r.evaluate("ctx.fillRect(1,1,1,1)");const updated=await pixels();
+  assert.ok(traces.some(s=>s.includes('direct canvas composition')),'inset/partially clipped canvas uses direct composition');
+  await r.evaluate("c.style.transform='translate(0px,0px)'");
+  assert.deepEqual(await pixels(),updated,`placed canvas at ${x},${y} matches Skia`);
+ }
+ r.resize(64,48,1);await r.evaluate("c.style.cssText=''");
+ // A high-DPI canvas can still be passed through when bitmap pixels match
+ // the tile's physical dimensions, with no CSS resampling.
+ r.resize(64,48,2);
+ traces.length=0;
+ await r.evaluate("c.width=128;c.height=96;c.style.cssText='width:64px;height:48px';ctx.fillStyle='rgba(200,30,70,.6)';ctx.fillRect(0,0,128,96)");
+ const highDpi=await pixels();assert.ok(traces.some(s=>s.includes('direct canvas composition')));
+ traces.length=0;await r.evaluate("c.style.transform='translate(0px,0px)'");
+ assert.deepEqual(await pixels(),highDpi,'high-DPI direct pixels match Skia');
+ r.resize(64,48,1);await r.evaluate("c.width=64;c.height=48;c.style.cssText=''");
+ // Returning from direct pixels to Skia must repaint the retained surface in
+ // full; it cannot apply damage to the surface from before the bypass.
+ for(const css of ['opacity:.5','border-radius:8px']){
+  await r.evaluate("c.style.cssText='';ctx.fillStyle='blue';ctx.fillRect(0,0,64,48)");await pixels();
+  traces.length=0;await r.evaluate(`c.style.cssText=${JSON.stringify(css)}`);
+  const fallback=await pixels();
+  assert.ok(!traces.some(s=>s.includes('direct canvas composition')),css);
+  r.resize(65,48,1);r.resize(64,48,1);
+  assert.deepEqual(await pixels(),fallback,'fallback after direct output matches full repaint');
+ }
+ await r.evaluate("c.style.cssText='';document.body.insertAdjacentHTML('beforeend','<span style=\"position:absolute;left:4px;top:4px;background:yellow\">overlay</span>')");
+ traces.length=0;await r.evaluate("ctx.fillStyle='red';ctx.fillRect(1,1,2,2)");
+ const overlay=await pixels();assert.ok(traces.some(s=>s.includes('direct canvas composition')),'foreground DOM is a cached layer');
+ await r.evaluate("c.style.transform='translate(0px,0px)'");assert.deepEqual(await pixels(),overlay,'foreground layer preserves paint order');
+ await r.evaluate("c.style.cssText='width:32px'");traces.length=0;
+ await r.evaluate("ctx.clearRect(0,0,64,48);ctx.fillStyle='blue';ctx.fillRect(0,0,32,48)");
+ const scaled=await pixels();assert.ok(traces.some(s=>s.includes('direct canvas composition')),'scaled Canvas uses Land sampler');
+ await r.evaluate("c.style.transform='translate(0px,0px)'");assert.deepEqual(await pixels(),scaled,'Land scaling matches Skia');
+ // Cached DOM layers stay out of the frame loop, but DOM mutations invalidate
+ // them. Multiple translucent canvases retain their original paint order.
+ await r.evaluate("c.style.cssText='';document.body.insertAdjacentHTML('beforeend','<canvas id=second width=20 height=10 style=\"position:absolute;left:8px;top:12px\"></canvas>');var second=document.getElementById('second');var other=second.getContext('2d');other.fillStyle='rgba(0,240,50,.5)';other.fillRect(0,0,20,10)");
+ await pixels();traces.length=0;
+ await r.evaluate("ctx.fillStyle='blue';ctx.fillRect(0,0,64,48)");const multiple=await pixels();
+ assert.ok(traces.some(s=>s.includes('direct canvas composition')));
+ assert.ok(!traces.some(s=>s.includes('DOM layers rebuilt')),'unchanged DOM layers are reused across Canvas updates');
+ await r.evaluate("c.style.transform='translate(0px,0px)'");assert.deepEqual(await pixels(),multiple,'multiple translucent layers match Skia');
+ await r.evaluate("c.style.transform='none';document.querySelector('span').textContent='changed'");
+ const changedDom=await pixels();
+ await r.evaluate("c.style.transform='translate(0px,0px)'");assert.deepEqual(await pixels(),changedDom,'DOM cache invalidates when overlay text changes');
+ // Ancestor overflow and rounded clips rasterize only the changing Canvas,
+ // retaining static DOM caches and matching the native full-page painter.
+ await r.evaluate(`document.body.innerHTML='<div id="clip" style="position:absolute;left:5px;top:7px;width:44px;height:36px;overflow:hidden;border-radius:8px"><canvas id="clipped" width="64" height="48" style="position:absolute;left:-3px;top:-2px"></canvas></div>';window.c=document.getElementById('clipped');window.ctx=c.getContext('2d');ctx.fillStyle='rgba(240,30,80,.7)';ctx.fillRect(0,0,64,48)`);
+ for(const dpr of [1,1.5,2]){
+  r.resize(64,48,dpr);
+  for(const position of ['left:-3px;top:-2px','left:3.25px;top:2.5px']){
+   await r.evaluate(`c.style.cssText='position:absolute;${position}';ctx.fillStyle='rgba(30,220,80,.7)';ctx.fillRect(1,1,5,5)`);
+   traces.length=0;await r.evaluate("ctx.fillRect(2,2,2,2)");const clipped=await pixels();
+   const inside=(Math.round(15*dpr)*Math.round(64*dpr)+Math.round(15*dpr))*4;
+   assert.notDeepEqual([...clipped.slice(inside,inside+4)],[25,106,179,255],'clipped Canvas content is painted, not just its background');
+   assert.ok(traces.some(s=>s.includes('direct canvas composition')),'clipped Canvas retains direct composition');
+   assert.ok(!traces.some(s=>s.includes('DOM layers rebuilt')),'clipped Canvas updates reuse DOM layers');
+   await r.evaluate("c.style.transform='translate(0px,0px)'");
+   assert.deepEqual(await pixels(),clipped,`rounded overflow clip at DPR ${dpr}, ${position} matches Skia`);
+  }
+ }
+ console.log('direct canvas composition passed');
+}finally{r.dispose()}

package/test/fixtures/javascript-dialogs.html

@@ -0,0 +1,8 @@
+<!doctype html><meta charset="utf-8"><title>JavaScript dialogs</title>
+<style>body{font:20px sans-serif;padding:24px}button{font:inherit;margin:8px;padding:12px}#result{white-space:pre-wrap}</style>
+<h1>Browser-owned dialogs</h1>
+<button onclick="alert(1+2)">alert(1+2)</button>
+<button onclick="alert(Array.from({length:200},(_,i)=>'Line '+(i+1)+' — 可以選取、複製和捲動的訊息').join('\n'))">Long selectable alert</button>
+<button onclick="document.getElementById('result').textContent='confirm: '+confirm('Continue?')">Confirm</button>
+<button onclick="document.getElementById('result').textContent='prompt: '+JSON.stringify(prompt('Your name','預設文字'))">Prompt</button>
+<pre id="result">Try Enter, Escape, Tab, mouse selection, copying, scrolling and resizing.</pre>