buninu-browser 0.6.0 → 0.9.0

package/test/canvas-2d.test.js

@@ -1,6 +1,6 @@
 import { beforeAll, expect, test } from "bun:test";
 import CanvasKitInit from "../usr/lib/canvaskit/canvaskit.js";
-import { canvasContext, resetCanvas, setCanvasKit, disposeDocumentCanvases } from "../lib/renderer/canvas-2d.js";
+import { canvasResource, canvasContext, resetCanvas, setCanvasKit, disposeDocumentCanvases } from "../lib/renderer/canvas-2d.js";
 
 let CanvasKit;
 
@@ -38,10 +38,12 @@ test("a colour reads back stably, and one CanvasKit cannot parse is black", () =
   expect(context.fillStyle).toBe("#000000");
   expect(sample(context, "not-a-color")).toEqual([0, 0, 0, 255]);
   expect(sample(context, "red")).toEqual([255, 0, 0, 255]);
-  expect(sample(context, "rgba(1, 2, 3, 0.5)")).toEqual([1, 2, 3, 128]);
+  // Like Chromium, an 8-bit premultiplied backing store rounds RGB at low alpha.
+  expect(sample(context, "rgba(1, 2, 3, 0.5)")).toEqual([2, 2, 4, 128]);
   expect(context.getImageData(0, 0, 1, 1).data.length).toBe(4);
   expect(context.getImageData(0, 0, 1, 1).data[3]).toBe(0);
-  expect(canvasContext(canvas(), "webgl")).toBeNull();
+  expect(canvasContext(canvas(), "webgl2")).toBeNull();
+  expect(canvasContext(canvas(), "webgl").getParameter(0x1F01)).toBe("CanvasKit CPU");
 });
 
 test("the same canvas keeps one context, and changing width clears it", () => {
@@ -93,7 +95,7 @@ test("gradient and pattern facades hide native shaders while style identity and
   expect(context.strokeStyle).toBe(gradient);
   const radial = context.createRadialGradient(0, 0, 0, 1, 1, 2);
   expect(Object.keys(radial)).toEqual(["addColorStop"]);
-  const pattern = context.createPattern({}, "repeat");
+  const pattern = context.createPattern(node, "repeat");
   expect(Object.keys(pattern)).toEqual(["setTransform"]);
   for (const name of ["Td", "qf", "pe", "ie", "oe"]) expect(pattern[name]).toBeUndefined();
   resetCanvas(node);
@@ -134,3 +136,249 @@ test("discarding a document frees its connected and detached canvas pixel buffer
     CanvasKit._free = free;
   }
 });
+
+
+test("CPU WebGL redraws moved geometry without painting outside its coverage", () => {
+  const node=canvas(64,64),gl=canvasContext(node,'webgl'),program=gl.createProgram();
+  for(const [type,source] of [[gl.VERTEX_SHADER,'attribute vec2 position; uniform float dx; varying vec3 color; void main(){color=vec3(1.0,0.0,0.0);gl_Position=vec4(position+vec2(dx,0.0),0.0,1.0);}'],
+    [gl.FRAGMENT_SHADER,'precision highp float; varying vec3 color; void main(){gl_FragColor=vec4(color,1.0);}']]){
+    const shader=gl.createShader(type);gl.shaderSource(shader,source);gl.compileShader(shader);
+    expect(gl.getShaderInfoLog(shader)).toBe('');gl.attachShader(program,shader);
+  }
+  gl.linkProgram(program);gl.useProgram(program);
+  gl.bindBuffer(gl.ARRAY_BUFFER,gl.createBuffer());
+  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-.75,-.5,-.25,-.5,-.5,.5]),gl.STATIC_DRAW);
+  const a=gl.getAttribLocation(program,'position');gl.enableVertexAttribArray(a);gl.vertexAttribPointer(a,2,gl.FLOAT,false,0,0);
+  const dx=gl.getUniformLocation(program,'dx');
+  const pixel=(x,y)=>Array.from(canvasResource(node).image.readPixels(x,y,{width:1,height:1,colorType:CanvasKit.ColorType.RGBA_8888,alphaType:CanvasKit.AlphaType.Unpremul,colorSpace:CanvasKit.ColorSpace.SRGB}));
+  gl.clearColor(0,0,1,1);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES,0,3);
+  expect(pixel(16,32)).toEqual([255,0,0,255]);expect(pixel(48,32)).toEqual([0,0,255,255]);
+  gl.uniform1f(dx,1);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES,0,3);
+  expect(pixel(16,32)).toEqual([0,0,255,255]);expect(pixel(48,32)).toEqual([255,0,0,255]);
+  gl.uniform1f(dx,4);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES,0,3);
+  expect(pixel(48,32)).toEqual([0,0,255,255]);expect(gl.getError()).toBe(0);
+});
+
+test('CPU WebGL samples uploaded RGBA textures and preserves upload snapshots',()=>{
+ const node=canvas(16,16),gl=canvasContext(node,'webgl'),p=gl.createProgram();
+ for(const [kind,source] of [[gl.VERTEX_SHADER,'attribute vec2 p; varying vec2 uv; void main(){gl_Position=vec4(p,0.,1.);uv=(p+1.)*.5;}'],[gl.FRAGMENT_SHADER,'precision highp float; varying vec2 uv; uniform sampler2D image; void main(){gl_FragColor=texture2D(image,uv);}']]){
+  const s=gl.createShader(kind);gl.shaderSource(s,source);gl.compileShader(s);expect(gl.getShaderInfoLog(s)).toBe('');gl.attachShader(p,s);
+ }
+ gl.linkProgram(p);gl.useProgram(p);gl.bindBuffer(gl.ARRAY_BUFFER,gl.createBuffer());gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);gl.enableVertexAttribArray(0);gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
+ gl.bindTexture(gl.TEXTURE_2D,gl.createTexture());gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
+ gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,2,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array([255,0,0,255,0,0,255,255]));gl.drawArrays(gl.TRIANGLES,0,6);
+ const read=y=>Array.from(canvasResource(node).image.readPixels(8,y,{width:1,height:1,colorType:CanvasKit.ColorType.RGBA_8888,alphaType:CanvasKit.AlphaType.Unpremul,colorSpace:CanvasKit.ColorSpace.SRGB}));
+ expect(read(2)).toEqual([0,0,255,255]);expect(read(13)).toEqual([255,0,0,255]);expect(gl.getError()).toBe(0);
+});
+
+test('cached background shading follows moving depth occluders and LEQUAL preserves coplanar copies',()=>{
+ const node=canvas(32,32),gl=canvasContext(node,'webgl'),p=gl.createProgram();
+ for(const [kind,source]of[[gl.VERTEX_SHADER,'attribute vec2 p;uniform float dx;uniform float z;void main(){gl_Position=vec4(p+vec2(dx,0.),z,1.);}'],[gl.FRAGMENT_SHADER,'precision highp float;uniform vec4 color;void main(){gl_FragColor=color;}']]){
+  const sh=gl.createShader(kind);gl.shaderSource(sh,source);gl.compileShader(sh);expect(gl.getShaderInfoLog(sh)).toBe('');gl.attachShader(p,sh);
+ }
+ gl.linkProgram(p);gl.useProgram(p);const buffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buffer);gl.enableVertexAttribArray(0);gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
+ gl.enable(gl.DEPTH_TEST);gl.depthFunc(gl.LEQUAL);
+ const dx=gl.getUniformLocation(p,'dx'),z=gl.getUniformLocation(p,'z'),color=gl.getUniformLocation(p,'color');
+ const quad=(left,right,offset,depth,rgba)=>{gl.uniform1f(dx,offset);gl.uniform1f(z,depth);gl.uniform4fv(color,rgba);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([left,-1,right,-1,left,1,left,1,right,-1,right,1]),gl.STATIC_DRAW);gl.drawArrays(gl.TRIANGLES,0,6);};
+ const pixel=x=>Array.from(canvasResource(node).image.readPixels(x,16,{width:1,height:1,colorType:CanvasKit.ColorType.RGBA_8888,alphaType:CanvasKit.AlphaType.Unpremul,colorSpace:CanvasKit.ColorSpace.SRGB}));
+ for(const offset of[0,1,0]){
+  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
+  quad(-1,0,offset,-.123456789,[1,0,0,1]);quad(-1,1,0,.3,[0,0,1,1]);
+  expect(pixel(offset?24:8)).toEqual([255,0,0,255]);expect(pixel(offset?8:24)).toEqual([0,0,255,255]);
+ }
+ gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
+ quad(-1,1,0,.123456789,[1,0,0,1]);quad(-1,1,0,.123456789,[0,1,0,1]);
+ const image=canvasResource(node).image.readPixels(0,0,{width:32,height:32,colorType:CanvasKit.ColorType.RGBA_8888,alphaType:CanvasKit.AlphaType.Unpremul,colorSpace:CanvasKit.ColorSpace.SRGB});
+ for(let i=0;i<image.length;i+=4)expect(Array.from(image.slice(i,i+4))).toEqual([0,255,0,255]);expect(gl.getError()).toBe(0);
+});
+
+test('texture alpha is unpremultiplied in both numeric and CanvasKit fragment paths',()=>{
+ for(const native of[false,true]){
+  const node=canvas(8,8),gl=canvasContext(node,'webgl'),p=gl.createProgram();
+  for(const [kind,source]of[[gl.VERTEX_SHADER,'attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}'],[gl.FRAGMENT_SHADER,`precision highp float;uniform sampler2D image;void main(){vec4 c=texture2D(image,vec2(.5));${native?'for(int i=0;i<1;i++){c.r+=0.;}':''}gl_FragColor=c;}`]]){
+   const sh=gl.createShader(kind);gl.shaderSource(sh,source);gl.compileShader(sh);expect(gl.getShaderInfoLog(sh)).toBe('');gl.attachShader(p,sh);
+  }
+  gl.linkProgram(p);gl.useProgram(p);gl.bindBuffer(gl.ARRAY_BUFFER,gl.createBuffer());gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);gl.enableVertexAttribArray(0);gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
+  gl.bindTexture(gl.TEXTURE_2D,gl.createTexture());gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array([200,100,50,128]));
+  gl.clearColor(0,0,1,1);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES,0,6);
+  const pixel=canvasResource(node).image.readPixels(2,2,{width:1,height:1,colorType:CanvasKit.ColorType.RGBA_8888,alphaType:CanvasKit.AlphaType.Unpremul,colorSpace:CanvasKit.ColorSpace.SRGB});
+  for(let i=0;i<4;i++)expect(Math.abs(pixel[i]-[100,50,152,255][i])).toBeLessThanOrEqual(1);
+ }
+});
+
+test('patterns snapshot actual image sources and survive source drawing and bitmap resets',()=>{
+ const document={},source={...canvas(2,2),ownerDocument:document},target={...canvas(4,4),ownerDocument:document};
+ const src=canvasContext(source,'2d'),dst=canvasContext(target,'2d');
+ try{
+  src.fillStyle='red';src.fillRect(0,0,2,2);
+  const pattern=dst.createPattern(source,'repeat');
+  src.fillStyle='blue';src.fillRect(0,0,2,2);resetCanvas(source);
+  dst.fillStyle=pattern;dst.fillRect(0,0,4,4);
+  expect([...dst.getImageData(3,3,1,1).data]).toEqual([255,0,0,255]);
+  resetCanvas(target);dst.fillStyle=pattern;dst.fillRect(0,0,4,4);
+  expect([...dst.getImageData(3,3,1,1).data]).toEqual([255,0,0,255]);
+  expect(()=>dst.createPattern({},'repeat')).toThrow(TypeError);
+  expect(()=>dst.createPattern(source,'invalid')).toThrow();
+ }finally{disposeDocumentCanvases(document);}
+});
+
+test('pattern sampling follows the drawing context and survives save/restore and reset',()=>{
+  const source=canvas(2,1),src=canvasContext(source,'2d');
+  src.fillStyle='red';src.fillRect(0,0,1,1);
+  src.fillStyle='blue';src.fillRect(1,0,1,1);
+  const target=canvas(8,2),ctx=canvasContext(target,'2d');
+  const pattern=src.createPattern(source,'repeat');
+  pattern.setTransform({a:4,b:0,c:0,d:1,e:0,f:0});
+  ctx.fillStyle=pattern;
+  expect(ctx.imageSmoothingEnabled).toBe(true);
+  expect(ctx.imageSmoothingQuality).toBe('low');
+  ctx.imageSmoothingEnabled=false;
+  ctx.save();ctx.imageSmoothingEnabled=true;ctx.imageSmoothingQuality='high';ctx.restore();
+  expect(ctx.imageSmoothingEnabled).toBe(false);
+  expect(ctx.imageSmoothingQuality).toBe('low');
+  ctx.fillRect(0,0,8,1);
+  expect([...ctx.getImageData(3,0,1,1).data]).toEqual([255,0,0,255]);
+  ctx.imageSmoothingEnabled=true;ctx.fillRect(0,1,8,1);
+  const blended=ctx.getImageData(3,1,1,1).data;
+  expect(blended[0]).toBeGreaterThan(0);expect(blended[2]).toBeGreaterThan(0);
+  resetCanvas(target);
+  expect(ctx.imageSmoothingEnabled).toBe(true);
+  expect(ctx.imageSmoothingQuality).toBe('low');
+});
+
+test('drawImage honors smoothing and zero destination width',()=>{
+  const source=canvas(2,1),src=canvasContext(source,'2d');
+  src.fillStyle='red';src.fillRect(0,0,1,1);src.fillStyle='blue';src.fillRect(1,0,1,1);
+  const target=canvas(8,3),ctx=canvasContext(target,'2d',{resolveImage:canvasResource});
+  ctx.imageSmoothingEnabled=false;ctx.drawImage(source,0,0,8,1);
+  expect([...ctx.getImageData(3,0,1,1).data]).toEqual([255,0,0,255]);
+  ctx.imageSmoothingEnabled=true;ctx.drawImage(source,0,1,8,1);
+  const blended=ctx.getImageData(3,1,1,1).data;
+  expect(blended[0]).toBeGreaterThan(0);expect(blended[2]).toBeGreaterThan(0);
+  ctx.drawImage(source,0,2,0,1);
+  expect([...ctx.getImageData(0,2,1,1).data]).toEqual([0,0,0,0]);
+});
+
+test('pixel-aligned pattern blits match shader fills including clips, alpha and repetition limits',()=>{
+  const source=canvas(3,3),src=canvasContext(source,'2d');
+  src.fillStyle='rgba(200,40,20,.5)';src.fillRect(0,0,3,3);
+  src.fillStyle='blue';src.fillRect(1,1,1,1);
+  for(const repetition of ['repeat','repeat-x','repeat-y','no-repeat']){
+    const outputs=[];
+    for(const smooth of [false,true]){
+      const target=canvas(8,6),ctx=canvasContext(target,'2d');
+      ctx.fillStyle='green';ctx.fillRect(0,0,8,6);
+      ctx.imageSmoothingEnabled=smooth;ctx.globalAlpha=.6;
+      const pattern=ctx.createPattern(source,repetition);
+      pattern.setTransform({a:1,b:0,c:0,d:1,e:-1,f:1});ctx.fillStyle=pattern;
+      ctx.save();ctx.beginPath();ctx.rect(1,1,6,4);ctx.clip();ctx.translate(1,-1);
+      ctx.fillRect(8,7,-12,-10);ctx.restore();
+      outputs.push([...ctx.getImageData(0,0,8,6).data]);
+    }
+    expect(outputs[0]).toEqual(outputs[1]);
+  }
+});
+
+test('a failed Canvas context constructor releases its raster and restores the factory',()=>{
+  const makeCanvas=CanvasKit.MakeCanvas,makeSurface=CanvasKit.MakeSurface,free=CanvasKit.Free;
+  let released=0;
+  CanvasKit.Free=allocation=>{released++;return free(allocation);};
+  CanvasKit.MakeCanvas=(width,height)=>{CanvasKit.MakeSurface(width,height);throw Error('context construction failed');};
+  try{
+    expect(()=>canvasContext(canvas(4,4),'2d')).toThrow('context construction failed');
+    expect(released).toBe(1);
+    expect(CanvasKit.MakeSurface).toBe(makeSurface);
+  }finally{CanvasKit.MakeCanvas=makeCanvas;CanvasKit.Free=free;}
+});
+
+test('drawImage ignores fill color and shaders while preserving globalAlpha and fill state',()=>{
+ const document={},source={ownerDocument:document,width:2,height:1},target={ownerDocument:document,width:2,height:1};
+ const src=canvasContext(source,'2d'),ctx=canvasContext(target,'2d',{resolveImage:canvasResource});
+ try{
+  src.fillStyle='red';src.fillRect(0,0,2,1);
+  const gradient=ctx.createLinearGradient(0,0,2,0);gradient.addColorStop(0,'transparent');gradient.addColorStop(1,'blue');
+  const pattern=ctx.createPattern(source,'repeat');
+  for(const style of ['rgba(0,0,255,0)', 'rgba(0,0,255,.25)',gradient,pattern]){
+   ctx.clearRect(0,0,2,1);ctx.fillStyle=style;const before=ctx.fillStyle;ctx.globalAlpha=1;ctx.drawImage(source,0,0);
+   expect([...ctx.getImageData(0,0,1,1).data]).toEqual([255,0,0,255]);expect(ctx.fillStyle).toBe(before);
+   ctx.clearRect(0,0,2,1);ctx.globalAlpha=.5;ctx.drawImage(source,0,0,2,1);
+   expect([...ctx.getImageData(0,0,1,1).data]).toEqual([255,0,0,128]);
+   ctx.save();ctx.fillStyle='green';ctx.restore();ctx.clearRect(0,0,2,1);ctx.drawImage(source,0,0);
+   expect([...ctx.getImageData(0,0,1,1).data]).toEqual([255,0,0,128]);
+  }
+ }finally{disposeDocumentCanvases(document)}
+});
+
+test('image paints keep blend state across restore without constructing fill-pattern shaders',()=>{
+ const document={},source={ownerDocument:document,width:2,height:1},target={ownerDocument:document,width:2,height:1};
+ const src=canvasContext(source,'2d'),ctx=canvasContext(target,'2d',{resolveImage:canvasResource});
+ const make=CanvasKit.Image.prototype.makeShaderOptions;let shaders=0;
+ try{
+  src.fillStyle='red';src.fillRect(0,0,2,1);ctx.fillStyle=ctx.createPattern(source,'repeat');
+  CanvasKit.Image.prototype.makeShaderOptions=function(...args){shaders++;return make.apply(this,args)};
+  for(let i=0;i<3;i++){ctx.save();ctx.globalAlpha=.5;ctx.globalCompositeOperation='copy';ctx.drawImage(source,0,0);ctx.restore();}
+  expect(shaders).toBe(0);
+  expect([...ctx.getImageData(0,0,1,1).data]).toEqual([255,0,0,128]);
+  ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.drawImage(source,0,0);
+  expect([...ctx.getImageData(0,0,1,1).data]).toEqual([255,0,0,255]);
+ }finally{CanvasKit.Image.prototype.makeShaderOptions=make;disposeDocumentCanvases(document)}
+});
+
+test('roundRect draws rounded corners, mirrors negative dimensions and rejects invalid radii',()=>{
+ const context=canvasContext(canvas(40,40),'2d');
+ expect('roundRect' in context).toBe(true);
+ context.fillStyle='red';context.beginPath();context.roundRect(2,2,30,30,8);context.fill();
+ expect(context.getImageData(2,2,1,1).data[3]).toBe(0);
+ expect([...context.getImageData(17,17,1,1).data]).toEqual([255,0,0,255]);
+ expect(context.getImageData(17,3,1,1).data[3]).toBeGreaterThan(200);
+ context.clearRect(0,0,40,40);context.beginPath();context.roundRect(32,2,-30,30,[{x:8,y:12},0,0,0]);context.fill();
+ expect(context.getImageData(31,2,1,1).data[3]).toBe(0);
+ expect(context.getImageData(2,2,1,1).data[3]).toBeGreaterThan(200);
+ expect(()=>context.roundRect(0,0,20,20,-1)).toThrow(RangeError);
+ expect(()=>context.roundRect(0,0,20,20,[])).toThrow(RangeError);
+ expect(()=>context.roundRect(0,0,20,20,[1,2,3,4,5])).toThrow(RangeError);
+ context.clearRect(0,0,40,40);context.beginPath();context.roundRect(2,2,10,10,50);context.fill();
+ expect(context.getImageData(7,7,1,1).data[3]).toBeGreaterThan(200);
+});
+
+test('cached radial rectangles preserve transforms, clip, alpha and mutable stops',()=>{
+ for(const scale of [1,1.5]){
+  const a=canvas(40,40),b=canvas(40,40),ca=canvasContext(a,'2d'),cb=canvasContext(b,'2d');
+  const gradients=[];
+  for(const c of [ca,cb]){
+   c.translate(.25,.5);c.scale(scale,scale);
+   c.beginPath();c.rect(1,2,20,18);c.clip();
+   const g=c.createRadialGradient(9,10,0,9,10,20);
+   g.addColorStop(0,'red');g.addColorStop(1,'transparent');c.fillStyle=g;gradients.push(g);
+  }
+  for(let i=0;i<3;i++){
+   if(i===2)for(const g of gradients)g.addColorStop(.5,'blue');
+   for(const c of [ca,cb]){c.clearRect(-5,-5,60,60);c.globalAlpha=.4;}
+   ca.fillRect(.5,1.25,22,20);
+   cb.beginPath();cb.rect(.5,1.25,22,20);cb.fill();
+   const x=ca.getImageData(0,0,40,40).data,y=cb.getImageData(0,0,40,40).data;
+   for(let j=0;j<x.length;j+=4){
+    expect(Math.abs(x[j+3]-y[j+3])).toBeLessThanOrEqual(1);
+    for(let k=0;k<3;k++)expect(Math.abs(x[j+k]*x[j+3]/255-y[j+k]*y[j+3]/255)).toBeLessThanOrEqual(2);
+   }
+  }
+  for(const node of [a,b]){node.width=1;resetCanvas(node);}
+ }
+});
+
+test('vertical gradient strips match full shading under scaling and clipping',()=>{
+ for(const scale of [1,1.5]){
+  const nodes=[canvas(36,36),canvas(36,36)],contexts=nodes.map(n=>canvasContext(n,'2d'));
+  for(const c of contexts){
+   c.scale(scale,scale);c.beginPath();c.rect(2,3,18,17);c.clip();
+   const g=c.createLinearGradient(0,0,0,24);g.addColorStop(0,'red');g.addColorStop(.4,'rgba(0,255,0,.4)');g.addColorStop(1,'blue');c.fillStyle=g;c.globalAlpha=.6;
+  }
+  contexts[0].fillRect(0,0,24,24);contexts[1].beginPath();contexts[1].rect(0,0,24,24);contexts[1].fill();
+  const [x,y]=contexts.map(c=>c.getImageData(0,0,36,36).data);
+  for(let j=0;j<x.length;j+=4){
+   expect(Math.abs(x[j+3]-y[j+3])).toBeLessThanOrEqual(1);
+   for(let k=0;k<3;k++)expect(Math.abs(x[j+k]*x[j+3]/255-y[j+k]*y[j+3]/255)).toBeLessThanOrEqual(2);
+  }
+  for(const n of nodes){n.width=1;resetCanvas(n);}
+ }
+});

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

@@ -0,0 +1,7 @@
+import {test,expect} from 'bun:test';
+test('a slow earlier layout does not throttle later Canvas-only frames',async()=>{
+ const p=Bun.spawn([process.execPath,new URL('./fixtures/canvas-frame-pacing.js',import.meta.url).pathname],{stdout:'pipe',stderr:'pipe'});
+ const [exit,stderr,stdout]=await Promise.all([p.exited,new Response(p.stderr).text(),new Response(p.stdout).text()]);
+ expect({exit,stderr}).toEqual({exit:0,stderr:''});
+ expect(JSON.parse(stdout).layoutsDuringAnimation).toBe(0);
+},15000);

package/test/cdp-viewers.test.js

@@ -0,0 +1,79 @@
+import {test, expect} from 'bun:test';
+import {CdpServer} from '../lib/cdp-server.js';
+const until=async fn=>{for(let i=0;i<200;i++){if(fn())return;await Bun.sleep(5);}throw Error('viewer update timed out');};
+async function connect(url){
+  const ws=new WebSocket(url), events=[], pending=new Map();let id=0;
+  ws.onmessage=({data})=>{const m=JSON.parse(data);if(m.id){const p=pending.get(m.id);pending.delete(m.id);m.error?p.reject(Error(m.error.message)):p.resolve(m.result);}else events.push(m);};
+  await new Promise((resolve,reject)=>{ws.onopen=resolve;ws.onerror=reject;});
+  return {ws,events,send(method,params={},sessionId){return new Promise((resolve,reject)=>{pending.set(++id,{resolve,reject});ws.send(JSON.stringify({id,method,params,sessionId}));});}};
+}
+for(const direct of [false,true])test(`independent viewer ACK, stop and disconnect (${direct?'page sockets':'sessions'})`,async()=>{
+  let frame;const server=CdpServer.create({screenshot:options=>options.format??'png',onFrame:fn=>frame=fn}).listen(0);
+  const clients=[];
+  try{
+    const root=await connect(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);clients.push(root);
+    const {targetId}=await root.send('Target.createTarget',{url:'about:blank'});
+    async function viewer(){const c=await connect(`ws://127.0.0.1:${server.port}/devtools/${direct?'page/'+targetId:'browser/cdp-server'}`);clients.push(c);const sid=direct?undefined:(await c.send('Target.attachToTarget',{targetId,flatten:true})).sessionId;return {c,sid,send:(m,p)=>c.send(m,p,sid),frames:()=>c.events.filter(e=>e.method==='Page.screencastFrame')};}
+    const a=await viewer(),b=await viewer();
+    await a.send('Page.startScreencast',{format:'png'});await b.send('Page.startScreencast',{format:'jpeg'});
+    await until(()=>a.frames().length===1&&b.frames().length===1);
+    expect(a.frames()[0].params.data).toBe('png');expect(b.frames()[0].params.data).toBe('jpeg');
+    frame();await until(()=>a.frames().length===2&&b.frames().length===2);
+    for(let i=0;i<5;i++)frame();
+    // A cannot ACK B's frames, even when both watch the same target.
+    await a.send('Page.screencastFrameAck',{sessionId:b.frames()[0].params.sessionId});
+    await Bun.sleep(20);expect(a.frames()).toHaveLength(2);expect(b.frames()).toHaveLength(2);
+    await b.send('Page.screencastFrameAck',{sessionId:b.frames()[0].params.sessionId});await until(()=>b.frames().length===3);
+    expect(a.frames()).toHaveLength(2);
+    await a.send('Page.stopScreencast');
+    await b.send('Page.screencastFrameAck',{sessionId:b.frames()[1].params.sessionId});frame();await until(()=>b.frames().length===4);
+    a.c.ws.close();await Bun.sleep(20);
+    await b.send('Page.screencastFrameAck',{sessionId:b.frames()[2].params.sessionId});frame();await until(()=>b.frames().length===5);
+    const replacement=await viewer();await replacement.send('Page.startScreencast');await until(()=>replacement.frames().length===1);
+    await b.send('Page.stopScreencast');frame();await until(()=>replacement.frames().length===2);
+    if(!direct){
+      await expect(root.send('Page.stopScreencast',{},b.sid)).rejects.toThrow('No session owned');
+      const {sessionId}=await replacement.c.send('Target.attachToTarget',{targetId,flatten:true});
+      await replacement.c.send('Page.startScreencast',{format:'jpeg'},sessionId);
+      await until(()=>replacement.c.events.some(e=>e.method==='Page.screencastFrame'&&e.sessionId===sessionId));
+      await replacement.send('Page.stopScreencast');frame();
+      await until(()=>replacement.c.events.filter(e=>e.method==='Page.screencastFrame'&&e.sessionId===sessionId).length===2);
+    }
+  }finally{for(const c of clients)c.ws.close();server.stop(true);}
+});
+
+test('a key-up received during slow key-down IPC is not overwritten by its completion',async()=>{
+  const calls=[];let release;
+  const server=CdpServer.create({press:(key,options)=>{
+    calls.push([key,options.eventType]);
+    if(calls.length===1)return new Promise(resolve=>{release=resolve});
+  }}).listen(0);
+  let client;
+  try{
+    client=await connect(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+    const {targetId}=await client.send('Target.createTarget',{url:'about:blank'});
+    const {sessionId}=await client.send('Target.attachToTarget',{targetId,flatten:true});
+    const send=type=>client.send('Input.dispatchKeyEvent',{type,key:'w',code:'KeyW'},sessionId);
+    const down=send('keyDown');await until(()=>calls.length===1);
+    await send('keyUp');release();await down;
+    await send('keyDown');await send('keyUp');
+    expect(calls).toEqual([['w','keydown'],['w','keyup'],['w','keydown'],['w','keyup']]);
+  }finally{release?.();client?.ws.close();server.stop(true);}
+});
+
+test('CDP keeps independent held keys and matches releases even when modifiers change',async()=>{
+ const calls=[];
+ const server=CdpServer.create({press:async(key,options)=>calls.push([key,options.eventType])}).listen(0);
+ let client;
+ try{
+  client=await connect(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+  const {targetId}=await client.send('Target.createTarget',{url:'about:blank'});
+  const {sessionId}=await client.send('Target.attachToTarget',{targetId,flatten:true});
+  const send=(type,key,modifiers=0)=>client.send('Input.dispatchKeyEvent',{type,key,code:'Key'+key.toUpperCase(),modifiers},sessionId);
+  await send('keyDown','a');await send('keyDown','b',1);await send('keyUp','a');
+  await send('char','b',1); // A's release must not make B's char a second press.
+  await client.send('Input.dispatchKeyEvent',{type:'char',text:'b'},sessionId); // code may be omitted
+  await send('keyUp','b',0);await send('keyDown','b',1);await send('keyUp','b');
+  expect(calls).toEqual([['a','keydown'],['b','keydown'],['a','keyup'],['b','keyup'],['b','keydown'],['b','keyup']]);
+ }finally{client?.ws.close();server.stop(true);}
+});

package/test/classic-games-patches/0001-fix-game-initialization.patch

@@ -0,0 +1,177 @@
+diff --git a/games/breakout/index.html b/games/breakout/index.html
+index 3fc45d2..1b11750 100644
+--- a/games/breakout/index.html
++++ b/games/breakout/index.html
+@@ -240,6 +240,10 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+   let score=0,lives=MAX_LIVES;
+   let paddleX,ballX,ballY,ballVX,ballVY;
+   let bricks=[];
++  const staticLayer=document.createElement('canvas');
++  staticLayer.width=W;staticLayer.height=H;
++  const staticContext=staticLayer.getContext('2d');
++  let staticLayerDirty=true;
+   let particles=[];
+   let ballSpeed=4.5;
+   let ballLaunched=false;
+@@ -250,6 +254,7 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+   let highScore=0;
+
+   function initBricks(){
++    staticLayerDirty=true;
+     bricks=[];
+     for(let r=0;r<BRICK_ROWS;r++){
+       for(let c=0;c<BRICK_COLS;c++){
+@@ -331,10 +336,11 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+   }
+
+   // ---- UPDATE ----
+-  function update(){
++  function update(elapsed){
+     if(state==='playing'&&mouseX!==null){
+       const target=mouseX-PADDLE_W/2;
+-      const speed=8;
++      // Preserve 8px/frame at 60 Hz without slowing mouse tracking at low FPS.
++      const speed=480*elapsed;
+       if(Math.abs(paddleX-target)>2){
+         if(paddleX<target) paddleX+=Math.min(speed,target-paddleX);
+         else paddleX-=Math.min(speed,paddleX-target);
+@@ -386,6 +392,7 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+       const bx=b.x,by=b.y,bw=b.w,bh=b.h;
+       if(ballX+BALL_SIZE>bx&&ballX<bx+bw&&ballY+BALL_SIZE>by&&ballY<by+bh){
+         b.alive=false;
++        staticLayerDirty=true;
+         const cx=bx+bw/2,cy=by+bh/2;
+         emitParticles(cx,cy,12,b.color.fill);
+         sfxBrick(330+b.row*60);
+@@ -462,7 +469,7 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+   }
+
+   // ---- DRAW ----
+-  function draw(){
++  function redrawStaticLayer(ctx){
+     ctx.clearRect(0,0,W,H);
+
+     // Grid dots
+@@ -490,6 +497,13 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+       ctx.restore();
+     }
+
++  }
++
++  function draw(){
++    if(staticLayerDirty){redrawStaticLayer(staticContext);staticLayerDirty=false;}
++    ctx.clearRect(0,0,W,H);
++    ctx.drawImage(staticLayer,0,0);
++
+     // Paddle
+     ctx.save();
+     ctx.shadowColor='rgba(255,107,107,0.5)';
+@@ -605,8 +619,12 @@ canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:mani
+   }
+
+   // ---- LOOP ----
+-  function loop(){
+-    update();
++  let lastFrameTime=null;
++  function loop(time=performance.now()){
++    // Bound catch-up after a background tab or a long suspended frame.
++    const elapsed=lastFrameTime===null?1/60:Math.min(0.1,Math.max(0,(time-lastFrameTime)/1000));
++    lastFrameTime=time;
++    update(elapsed);
+     updateParticles();
+     draw();
+     animId=requestAnimationFrame(loop);
+diff --git a/games/mine/index.html b/games/mine/index.html
+index 01e972d..91b0e32 100644
+--- a/games/mine/index.html
++++ b/games/mine/index.html
+@@ -415,6 +415,8 @@ board.addEventListener('click',e=>{
+
+ board.addEventListener('contextmenu',e=>{
+   e.preventDefault();
++  if(paused||over||won)return;
++  const g=getCell(e);if(g)toggleFlag(g.row,g.col);
+ });
+
+ board.addEventListener('mousedown',e=>{
+diff --git a/games/puzzle15/index.html b/games/puzzle15/index.html
+index 42f278e..5b0fa02 100644
+--- a/games/puzzle15/index.html
++++ b/games/puzzle15/index.html
+@@ -188,7 +188,7 @@ h1{
+   function findTile(val){
+     for(let r=0;r<gridSize;r++)
+       for(let c=0;c<gridSize;c++)
+-        if(grid[r][c]===val)return{r,c};
++        if(grid[r][c]===val)return{row:r,col:c};
+     return null;
+   }
+
+diff --git a/games/snake/index.html b/games/snake/index.html
+index 2f6919e..af005eb 100644
+--- a/games/snake/index.html
++++ b/games/snake/index.html
+@@ -166,8 +166,7 @@ canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-acti
+
+   // ---- DIRECTIONS ----
+   const UP={x:0,y:-1},DOWN={x:0,y:1},LEFT={x:-1,y:0},RIGHT={x:1,y:0};
+-  const opposite={};
+-  opposite[UP]=DOWN;opposite[DOWN]=UP;opposite[LEFT]=RIGHT;opposite[RIGHT]=LEFT;
++  const opposite=new Map([[UP,DOWN],[DOWN,UP],[LEFT,RIGHT],[RIGHT,LEFT]]);
+
+   // ---- PARTICLES ----
+   let particles=[];
+@@ -684,8 +683,8 @@ canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-acti
+
+   // ---- INPUT ----
+   function setDirection(dir){
+-    if(!opposite[dir])return;
+-    if(dir===opposite[nextDirection])return;
++    if(!opposite.has(dir))return;
++    if(dir===opposite.get(direction))return;
+     nextDirection=dir;
+   }
+
+diff --git a/games/space/index.html b/games/space/index.html
+index b980c91..d567d68 100644
+--- a/games/space/index.html
++++ b/games/space/index.html
+@@ -1113,13 +1113,6 @@ function setupTouch(c){
+   });
+ }
+
+-canvas.addEventListener('mousemove',e=>{
+-if(game.state!=='playing'||paused||!game.player.alive)return;
+-const rect=canvas.getBoundingClientRect();
+-const x=(e.clientX-rect.left)/canvas.clientWidth*W;
+-game.player.x=clamp(x,game.player.w/2+5,W-game.player.w/2-5);
+-});
+-
+ document.addEventListener('visibilitychange',()=>{
+ if(document.hidden&&game&&game.state==='playing')paused=true;
+ });
+@@ -1152,6 +1145,12 @@ function loop(){update();draw();rafId=requestAnimationFrame(loop)}
+ canvas=document.getElementById('c');
+ canvas.width=W;canvas.height=H;
+ ctx=canvas.getContext('2d');
++canvas.addEventListener('mousemove',e=>{
++if(game.state!=='playing'||paused||!game.player.alive)return;
++const rect=canvas.getBoundingClientRect();
++const x=(e.clientX-rect.left)/canvas.clientWidth*W;
++game.player.x=clamp(x,game.player.w/2+5,W-game.player.w/2-5);
++});
+ setupTouch(canvas);
+ try{audio.init()}catch(e){}
+ resize();
+diff --git a/games/typing/index.html b/games/typing/index.html
+index 17bf35b..bad31b2 100644
+--- a/games/typing/index.html
++++ b/games/typing/index.html
+@@ -634,6 +634,7 @@ document.getElementById('pauseOverlay').addEventListener('click',e=>{if(e.target
+ // ===== Keyboard =====
+ document.addEventListener('keydown',e=>{
+ if(e.repeat)return;const k=e.key;
++if(k!=='Escape'&&(e.target.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)))return;
+ if((k==='p'||k==='P'||k==='Escape')&&isRunning){e.preventDefault();if(isPaused)resumeGame();else pauseGame();return}
+ if(k==='m'||k==='M'){e.preventDefault();if(!audioCtx)initAudio();toggleMute();return}
+ if((k===' '||k==='Enter')&&!isRunning){e.preventDefault();if(!audioCtx)initAudio();startGame();return}