npm - buninu-browser - Versions diffs - 0.6.0 → 0.9.0 - Mend

buninu-browser 0.6.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/AGENTS.md +5 -0
package/README.md +94 -4
package/buninu-browser.js +1 -1
package/frontends/wayland/README.md +35 -2
package/frontends/wayland/client.js +8 -6
package/frontends/wayland/clipboard.js +1 -1
package/frontends/wayland/index.js +1 -1
package/frontends/wayland/input.js +1 -1
package/frontends/wayland/resource-io.js +6 -0
package/frontends/wayland/transport-posix.js +120 -0
package/frontends/wayland/transport-win32.js +9 -0
package/frontends/wayland/transport.js +3 -120
package/frontends/wayland/win32-resources.js +80 -0
package/frontends/wayland/win32-wire.js +62 -0
package/index.js +10 -6
package/lib/audio/biquad.js +25 -0
package/lib/audio/piano.js +6 -3
package/lib/audio/playback-buffer.js +5 -5
package/lib/audio/pulse-client.js +24 -5
package/lib/audio/web-audio.js +570 -0
package/lib/browser-dialog.js +116 -0
package/lib/cdp-server.js +128 -72
package/lib/file-picker.js +48 -0
package/lib/headless-shell.js +34 -12
package/lib/layout/text-layout.js +112 -19
package/lib/media/mp4-frame-times.js +93 -0
package/lib/paint/direct-canvas.ts +39 -0
package/lib/paint/display-list.js +37 -12
package/lib/paint/raster-readback.js +16 -7
package/lib/renderer/animation-frames.js +10 -5
package/lib/renderer/bindings.js +69 -16
package/lib/renderer/canvas-2d.js +265 -15
package/lib/renderer/canvas-round-rect.js +36 -0
package/lib/renderer/css-animations.js +173 -0
package/lib/renderer/dialog-client.js +30 -0
package/lib/renderer/dialog-worker.js +35 -0
package/lib/renderer/eval-environment.js +28 -0
package/lib/renderer/file-input.js +49 -0
package/lib/renderer/host.js +33 -4
package/lib/renderer/html-drag.js +77 -0
package/lib/renderer/image-loading.js +45 -2
package/lib/renderer/main.js +4 -0
package/lib/renderer/module-transform.js +5 -3
package/lib/renderer/page-builtins.js +59 -0
package/lib/renderer/page-realm.js +177 -40
package/lib/renderer/page-renderer.js +397 -49
package/lib/renderer/piano-input.js +3 -1
package/lib/renderer/raster-surface.js +18 -0
package/lib/renderer/script-rewrite.js +165 -9
package/lib/renderer/video-presentation.js +5 -4
package/lib/renderer/webgl/clip.js +24 -0
package/lib/renderer/webgl/context.js +158 -0
package/lib/renderer/webgl/cpu-fragment.js +211 -0
package/lib/renderer/webgl/draw-cache.js +22 -0
package/lib/renderer/webgl/pipeline.js +70 -0
package/lib/renderer/webgl/shaders.js +58 -0
package/lib/renderer/webgl/textures.js +43 -0
package/lib/renderer/window-named-properties.js +46 -0
package/lib/screenshot-cli.js +4 -7
package/lib/style/animation-values.js +29 -0
package/lib/style/computed-style.js +109 -13
package/lib/style/transform.js +44 -0
package/lib/window-size.js +10 -0
package/package.json +1 -1
package/patches/happy-dom/0007-scope-content-models-to-html-namespace.patch +29 -0
package/patches/happy-dom/README.md +16 -0
package/test/animation-frames.test.js +15 -0
package/test/canvas-2d.test.js +252 -4
package/test/canvas-frame-pacing.test.js +7 -0
package/test/cdp-viewers.test.js +79 -0
package/test/classic-games-patches/0001-fix-game-initialization.patch +177 -0
package/test/classic-games-patches/README.md +156 -0
package/test/classic-games-scenarios.js +133 -0
package/test/clipboard.test.js +16 -0
package/test/computed-style.test.js +18 -0
package/test/css-animation-lifecycle.test.js +28 -0
package/test/css-animations.test.js +83 -0
package/test/direct-canvas.test.js +39 -0
package/test/dynamic-inline-handlers.test.js +25 -0
package/test/eval-declarations.test.js +22 -0
package/test/file-picker.test.js +26 -0
package/test/fixtures/canvas-damage.js +23 -0
package/test/fixtures/canvas-frame-pacing.js +35 -0
package/test/fixtures/direct-canvas.js +96 -0
package/test/fixtures/javascript-dialogs.html +8 -0
package/test/fixtures/media-audio-lifetime.js +65 -0
package/test/fixtures/renderer-memory.js +7 -5
package/test/fixtures/video-black-replay.js +8 -6
package/test/fixtures/video-slow-end.js +39 -0
package/test/fixtures/web-audio-renderer.js +45 -0
package/test/flex.test.js +26 -0
package/test/grid.test.js +13 -0
package/test/headless-shell.test.js +9 -0
package/test/headless-window-size.test.js +28 -0
package/test/html-rcdata.test.js +35 -0
package/test/image-decode.test.js +18 -0
package/test/index.test.js +1 -0
package/test/javascript-dialog.test.js +83 -0
package/test/manual-breakout-paddle.js +42 -0
package/test/manual-breakout-static.js +35 -0
package/test/manual-classic-games.js +41 -0
package/test/manual-clumsy-bird-three-pipes.js +81 -0
package/test/manual-clumsy-bird.js +52 -0
package/test/manual-hextris.js +30 -0
package/test/manual-numbered-music.js +24 -0
package/test/manual-t-rex-runner.js +49 -0
package/test/manual-threejs-scene.js +64 -0
package/test/manual-webgl-benchmark.js +27 -0
package/test/manual-webgl-cpu.html +26 -0
package/test/media-audio-lifetime.test.js +8 -0
package/test/mp4-frame-times.test.js +33 -0
package/test/page-scripts.test.js +96 -1
package/test/piano-input.test.js +15 -2
package/test/piano.test.js +11 -2
package/test/playback-buffer.test.js +11 -0
package/test/pointer-drag.test.js +33 -0
package/test/positioning.test.js +82 -0
package/test/pulse-client.test.js +51 -2
package/test/raster-readback.test.js +14 -0
package/test/script-rewrite.test.js +61 -3
package/test/video-slow-end.test.js +6 -0
package/test/viewport-keyboard-overflow.test.js +25 -0
package/test/wayland-win32-resources.test.js +47 -0
package/test/wayland-win32-wire.test.js +59 -0
package/test/web-audio-renderer.test.js +8 -0
package/test/web-audio.test.js +264 -0
package/test/webgl-clip.test.js +9 -0
package/test/webgl-cpu-fragment.test.js +43 -0
package/test/window-named-properties.test.js +41 -0
package/vendor/happy-dom/packages/happy-dom/src/config/HTMLElementConfig.ts +2 -2
package/vendor/happy-dom/packages/happy-dom/src/config/HTMLElementConfigContentModelEnum.ts +1 -0
package/vendor/happy-dom/packages/happy-dom/src/html-parser/HTMLParser.ts +23 -3
package/vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorParser.ts +1 -1
package/vendor/land-renderer/LICENSE +21 -0
package/vendor/land-renderer/README.md +14 -0
package/vendor/land-renderer/direct-compositor.ts +443 -0
package/vendor/land-renderer/frame.js +88 -0
package/vendor/land-renderer/png-fast.js +85 -0
package/vendor/land-renderer/raw-frames.js +66 -0
package/vendor/land-renderer/render-types.ts +7 -0
package/vendor/land-renderer/renderer.ts +134 -0
package/vendor/land-renderer/snapshot.js +37 -0
package/vendor/land-renderer/viewport.js +18 -0
package/vendor/ses/dist/ses.mjs +1 -1

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>

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

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

package/test/fixtures/renderer-memory.js CHANGED Viewed

@@ -8,18 +8,17 @@ import { createPageRenderer, loadGraphics } from '../../lib/renderer/page-render
 const { CanvasKit: kit } = await loadGraphics();
 lockdown({ errorTaming: 'safe', overrideTaming: 'severe', consoleTaming: 'unsafe',
   localeTaming: 'unsafe', stackFiltering: 'concise', reporting: 'none' });
-const malloc = kit._malloc, free = kit._free, makeSurface = kit.MakeSurface;
+const malloc = kit._malloc, free = kit._free, makeSurface = kit.MakeSurface, makeRasterDirectSurface = kit.MakeRasterDirectSurface;
 const allocations = new Map(), surfaces = new Set(), images = new Set();
 const errors = [];
 let reads = 0, failAt = Infinity;
 kit._malloc = size => { const pointer = malloc(size); allocations.set(pointer, size); return pointer; };
 kit._free = pointer => { allocations.delete(pointer); return free(pointer); };
-kit.MakeSurface = (...args) => {
-  const surface = makeSurface(...args);
+const trackSurface = surface => {
   if (!surface) return surface;
   surfaces.add(surface);
-  const dispose = surface.dispose.bind(surface), snapshot = surface.makeImageSnapshot.bind(surface);
-  surface.dispose = () => { surfaces.delete(surface); return dispose(); };
+  const releaseSurface = surface.delete.bind(surface), snapshot = surface.makeImageSnapshot.bind(surface);
+  surface.delete = () => { surfaces.delete(surface); return releaseSurface(); };
   surface.makeImageSnapshot = (...args) => {
     const image = snapshot(...args), release = image.delete.bind(image), read = image.readPixels.bind(image);
     images.add(image);
@@ -32,6 +31,8 @@ kit.MakeSurface = (...args) => {
   };
   return surface;
 };
+kit.MakeSurface = (...args) => trackSurface(makeSurface(...args));
+kit.MakeRasterDirectSurface = (...args) => trackSurface(makeRasterDirectSurface(...args));
 const liveBytes = () => [...allocations.values()].reduce((sum, size) => sum + size, 0);
 let warmBytes;
 try {
@@ -107,4 +108,5 @@ try {
   kit._malloc = malloc;
   kit._free = free;
   kit.MakeSurface = makeSurface;
+  kit.MakeRasterDirectSurface = makeRasterDirectSurface;
 }

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

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

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

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

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

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

package/test/flex.test.js CHANGED Viewed

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

package/test/grid.test.js CHANGED Viewed

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

package/test/headless-shell.test.js CHANGED Viewed

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

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

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

package/test/html-rcdata.test.js ADDED Viewed

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

package/test/image-decode.test.js ADDED Viewed

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

package/test/index.test.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { castyCommand, chooseFrontend } from "../index.js";
 test("the first argument picks the frontend; anything else goes to casty whole", () => {
   expect(chooseFrontend(["--casty", "example.com", "--", "--mobile"])).toEqual({ frontend: "casty", args: ["example.com", "--", "--mobile"] });
   expect(chooseFrontend(["--headless", "--remote-debugging-port=9222"])).toEqual({ frontend: "headless", args: ["--remote-debugging-port=9222"] });
+  expect(chooseFrontend(["--win32", "example.com"])).toEqual({ frontend: "win32", args: ["example.com"] });
   expect(chooseFrontend(["--gtk", "x"])).toEqual({ frontend: "gtk", args: ["x"], reserved: true });
   expect(chooseFrontend(["github.com", "--", "--mobile"])).toEqual({ frontend: "casty", args: ["github.com", "--", "--mobile"] });
   expect(chooseFrontend(["--mobile"])).toEqual({ frontend: "casty", args: ["--mobile"] });