buninu-browser 0.6.0 → 0.9.0

package/test/classic-games-patches/README.md

@@ -0,0 +1,156 @@
+# Classic-Games and Hextris compatibility checks
+
+Run these commands from the Buninu Browser repository. No npm packages or
+native additions are needed. Games stay in a separate checkout, outside the
+browser package:
+
+```sh
+git clone --no-hardlinks https://github.com/KoRifCan/Classic-Games.git ../Classic-Games
+```
+
+The tested upstream revision is
+`83f36f3687814c1f8e7b79f581f6fc69da72ba5e`.
+
+## Upstream game fixes
+
+`0001-fix-game-initialization.patch` fixes six bugs in the game sources,
+separately from browser compatibility. Apply it once:
+
+```sh
+git -C ../Classic-Games apply ../buninu-browser/test/classic-games-patches/0001-fix-game-initialization.patch
+```
+
+- Space Shooter registers a `mousemove` listener before assigning `canvas`.
+  Move registration after canvas initialization. The original also throws
+  in Chromium.
+- 15-Puzzle's `findTile()` returns `{r,c}`, but callers use `row/col`.
+  Return the names those callers expect; the original shuffle cannot finish.
+- Minesweeper advertises right-click flagging, but its `contextmenu` handler
+  only prevents the menu. Connect that handler to its existing `toggleFlag()`;
+  Ctrl/Meta-click and touch flagging retain their existing paths.
+- Snake uses direction objects as ordinary object keys, so all four entries
+  collide as `"[object Object]"` and left turns are always rejected. Use a
+  `Map` and compare against the last committed direction; rapid inputs must
+  not queue a reversal into the body before the next movement tick.
+
+- Typing Test handles P/M shortcuts on `document` even while editing its
+  text field, cancelling ordinary typing. Ignore letter shortcuts in editable
+  controls while preserving Escape pause/resume and shortcuts outside them.
+
+- Breakout limits mouse-follow movement to 8 pixels per animation frame,
+  making the paddle lag at low FPS. Use 480 pixels per second, preserving
+  its 60 Hz speed; cap elapsed time at 100 ms to avoid a large resume jump.
+  Ball and particle physics retain their existing behavior. Cache the dot
+  background and brick shadows/gradients in an offscreen Canvas; invalidate
+  it on board initialization and each destroyed brick, retaining the same pixels.
+
+These patches never replace browser behavior with a game-specific exception.
+The hosted upstream originals will still contain their own bugs until their
+maintainer fixes them.
+
+## Run all sixteen desktop scenarios
+
+```sh
+bun test/manual-classic-games.js ../Classic-Games buninu /tmp/classic-games
+# Optional reference run, if Chromium headless shell is installed:
+bun test/manual-classic-games.js ../Classic-Games chromium /tmp/classic-games-chromium
+```
+
+To browse the local patched games interactively through the default Casty frontend:
+
+```sh
+bun index.js file://"$PWD/../Classic-Games/index.html"
+```
+
+The runner serves the checkout on an automatically assigned loopback port,
+launches the browser, and closes its server and browser when finished. It
+writes `report.json` and initial/played PNG screenshots per game. A failed
+scenario, page error, or CDP exception causes a nonzero exit status. Restrict
+a diagnostic run with `CLASSIC_GAMES=memory,simon` if needed.
+
+The browser remains in its default SES/seccomp configuration. No host-JS
+bypass, game physics changes, score assignment, or game-state function calls
+are used. Flappy Bird's Canvas text, Snake's rendered head-eye positions, and Simon's light sequence are observed
+through bounded text logging / a MutationObserver; these record output and
+do not change game decisions.
+
+| Game | Interaction verified |
+|---|---|
+| Tetris | Move/rotate, hard-drop score, pause/resume input |
+| Snake | All four directions turn correctly; direct reversal is rejected |
+| 2048 | Move/spawn tiles and undo restores the board |
+| Flappy Bird | Space starts, draws the score, and a second flap remains alive |
+| Space Shooter | Start/fire and movement change the canvas |
+| Tic Tac Toe | Human move, AI response, new game clears marks |
+| Memory | Flip a card, match a pair; hidden backs render correctly |
+| Minesweeper | Set/remove a right-click flag and reveal cells |
+| Pong | Start and paddle/ball updates |
+| Breakout | Start, move paddle, launch ball |
+| Dino Runner | Start and jump/runner animation |
+| Sudoku | Start, toggle pencil notes, fill a hint |
+| Connect 4 | Seven drops produce a four-disc win and update the round score |
+| Typing Test | Type/advance words; P/M remain input; Escape pauses and resumes |
+| Simon Says | Observe the first light, enter it, advance to round two |
+| 15-Puzzle | Render fifteen tiles and slide an adjacent tile |
+
+This is a functional compatibility check, not a completed campaign for each
+game or an end-to-end Casty/Kitty FPS benchmark. Sudoku's synchronous puzzle
+generation can take noticeably longer in the instrumented JS environment;
+the manual runner gives observations enough time to finish.
+
+## Breakout paddle timing
+
+```sh
+bun test/manual-breakout-paddle.js ../Classic-Games buninu
+bun test/manual-breakout-paddle.js ../Classic-Games chromium
+bun test/manual-breakout-static.js ../Classic-Games buninu
+bun test/manual-breakout-static.js ../Classic-Games chromium
+```
+
+This separate timing check supplies controlled RAF timestamps to the actual
+game. At 15, 60 and 120 FPS, 400 ms must move its paddle 192 pixels. A
+one-second frame gap must contribute at most 100 ms of catch-up movement.
+The static-layer check compares the initial Canvas pixels and the pixels
+after destroying a brick with the unpatched upstream source from the checkout's
+HEAD. They must match exactly while idle brick draws fall from 60 to zero.
+The ordinary sixteen-game runner above still uses real-time CDP input.
+
+## Hextris
+
+```sh
+env NODE_TLS_REJECT_UNAUTHORIZED=0 bun test/manual-hextris.js buninu /tmp/hextris
+# Reference; the helper also forwards the opt-out to Chromium's TLS flag:
+env NODE_TLS_REJECT_UNAUTHORIZED=0 bun test/manual-hextris.js chromium /tmp/hextris-chromium
+```
+
+The TLS environment variable is only needed if this site's certificate fails
+validation on your system. The test checks a mouse-start, both arrow rotations,
+pause/resume, and generated blocks, then saves `playing.png` and `report.json`.
+Production fixes are HTML namespace-aware SVG/RCDATA parsing and preservation
+of automatic semicolon insertion before member-access rewriting. No Hextris
+source patch is required.
+
+## Generic browser changes exercised
+
+- Canvas `roundRect()` and a page-local `CanvasRenderingContext2D` prototype,
+  so native feature detection and prototype extensions work.
+- CPU Web Audio biquad filters and fractional AudioBuffer length conversion;
+  filter tests verify both frequency response and actual filtered PCM.
+- Orthographic `rotateX`/`rotateY` projection and backface hiding across
+  `preserve-3d` card faces. This is not full perspective/3D CSS support.
+- Fractional Grid row tracks use a definite height, including aspect-ratio
+  sizing, so empty Simon quadrants get a usable painted and clickable area.
+- SVG elements do not enter HTML RCDATA parsing; ASI boundaries survive
+  member-access rewriting before subsequent parsing.
+- Unsupported scroll-driven animation properties remain absent from feature
+  detection even though ordinary CSS animation aliases now work.
+
+## Recorded result
+
+All sixteen desktop scenarios passed in one default-sandbox run on this
+checkout, with no recorded page errors or CDP exceptions. The associated
+browser regression run passed 272 tests across fourteen files; eight additional
+piano mapping/input tests also passed. Screenshots and
+per-game evidence from this session are in `/tmp/classic-games-final-regression/`;
+that temporary directory is not a packaged artifact. Re-running the command
+above recreates equivalent reports in your chosen output directory.

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,26 @@
+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);
+  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)");