buninu-browser 0.5.1 → 0.7.0

package/test/canvas-style-snapshot.test.js

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test";
+test("canvas font and inherited direction use current CSS without per-draw layout", async () => {
+  const child = Bun.spawn(
+    [
+      process.execPath,
+      new URL("./fixtures/canvas-style-snapshot.js", import.meta.url).pathname,
+    ],
+    { stdout: "pipe", stderr: "pipe" },
+  );
+  const [exit, stdout, stderr] = await Promise.all([
+    child.exited,
+    new Response(child.stdout).text(),
+    new Response(child.stderr).text(),
+  ]);
+  expect(stderr).toBe("");
+  expect(exit).toBe(0);
+  expect(JSON.parse(stdout).pass).toBe(true);
+}, 20_000);

package/test/cdp-stream.test.js

@@ -2,13 +2,13 @@ import { test, expect } from 'bun:test';
 import { CdpServer } from '../lib/cdp-server.js';
 import { CDP } from '../tools/browser-lab.js';
 const until = async predicate => { for(let i=0;i<100;i++){if(predicate())return;await Bun.sleep(5);}throw Error('condition timed out'); };
-async function fixture(screenshot) {
+async function fixture(screenshot, context = {}) {
   let onFrame;
-  const server=CdpServer.create({screenshot,onFrame:fn=>{onFrame=fn;}}).listen(0);
+  const server=CdpServer.create({...context,screenshot,onFrame:fn=>{onFrame=fn;}}).listen(0);
   const cdp=new CDP(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
   await cdp.ready;const {targetId}=await cdp.send('Target.createTarget',{url:'about:blank'});
   const {sessionId}=await cdp.send('Target.attachToTarget',{targetId,flatten:true});cdp.sessionId=sessionId;
-  return {cdp,targetId,frame:()=>onFrame(),frames:()=>cdp.events.filter(e=>e.method==='Page.screencastFrame'),close:()=>{cdp.close();server.stop(true);}};
+  return {cdp,targetId,frame:info=>onFrame(info),frames:()=>cdp.events.filter(e=>e.method==='Page.screencastFrame'),close:()=>{cdp.close();server.stop(true);}};
 }
 test('slow screencast client gets at most two unacked frames; latest updates resume after ack',async()=>{
   let calls=0;const f=await fixture(async()=>String(++calls));
@@ -54,3 +54,96 @@ test('stopping a capture in flight drops its frame and a restarted stream gets i
     expect(f.frames()[0].params.data).toBe('new');
   }finally{f.close();}
 });
+
+test('zero-area screencast notifies without capture, while screenshots retain clip validation',async()=>{
+  const {captureViewport}=await import('../lib/paint/frame.js');
+  let calls=0;
+  const f=await fixture(options=>{
+    calls++;
+    if(options.clip?.width===0 || options.clip?.height===0)
+      captureViewport(null,0,0,8,6,options.clip);
+    return 'real-pixels';
+  });
+  const clip={x:0,y:0,width:0,height:0,scale:1};
+  try{
+    await f.cdp.send('Page.startScreencast',{format:'png',maxWidth:8,maxHeight:6,clip});
+    await until(()=>f.frames().length===1);f.frame();await until(()=>f.frames().length===2);
+    expect(calls).toBe(0);
+    for(const {params} of f.frames()){
+      const png=Buffer.from(params.data,'base64');expect(png.readUInt32BE(16)).toBe(1);expect(png.readUInt32BE(20)).toBe(1);
+    }
+    await expect(f.cdp.send('Page.captureScreenshot',{format:'png',clip})).rejects.toThrow('Invalid screenshot clip');
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:f.frames()[0].params.sessionId});
+    f.frame();await until(()=>f.frames().length===3);expect(calls).toBe(1);
+    await f.cdp.send('Page.stopScreencast');
+    await f.cdp.send('Page.startScreencast',{format:'jpeg',clip:{...clip,width:8,height:6}});
+    await until(()=>f.frames().length===4);expect(f.frames()[3].params.data).toBe('real-pixels');expect(calls).toBe(2);
+  }finally{f.close();}
+});
+
+const zeroClip = {x:0,y:0,width:0,height:0,scale:1};
+test('zero-area notifications reuse exact scroll snapshots and coalesce to the latest pending position',async()=>{
+  let queries=0,captures=0;
+  const f=await fixture(()=>{captures++;return 'pixels';},{scrollOffset:()=>{queries++;return {x:1,y:2};}});
+  const offset=i=>f.frames()[i].params.metadata;
+  try{
+    await f.cdp.send('Page.startScreencast',{clip:zeroClip});await until(()=>f.frames().length===1);
+    expect(queries).toBe(1);expect(offset(0)).toMatchObject({scrollOffsetX:1,scrollOffsetY:2});
+    f.frame({scrollOffset:{x:10.25,y:20.75}});await until(()=>f.frames().length===2);
+    expect(queries).toBe(1);expect(offset(1)).toMatchObject({scrollOffsetX:10.25,scrollOffsetY:20.75});
+    const latest={scrollOffset:{x:23.5,y:49.75}};
+    f.frame({scrollOffset:{x:12,y:30}});f.frame(latest);latest.scrollOffset.y=999;
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:f.frames()[0].params.sessionId});
+    await until(()=>f.frames().length===3);
+    expect(offset(2)).toMatchObject({scrollOffsetX:23.5,scrollOffsetY:49.75});expect(queries).toBe(1);
+    // An unannotated/malformed update must replace, not inherit, older metadata.
+    f.frame({scrollOffset:{x:1,y:NaN}});
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:f.frames()[1].params.sessionId});
+    await until(()=>f.frames().length===4);
+    expect(queries).toBe(2);expect(offset(3)).toMatchObject({scrollOffsetX:1,scrollOffsetY:2});
+    expect(captures).toBe(0);
+  }finally{f.close();}
+});
+
+test('pixel screencasts still query their capture position instead of using invalidation metadata',async()=>{
+  let queries=0,captures=0;
+  const f=await fixture(()=>String(++captures),{scrollOffset:()=>({x:0,y:++queries*100})});
+  try{
+    await f.cdp.send('Page.startScreencast',{format:'png'});await until(()=>f.frames().length===1);
+    f.frame({scrollOffset:{x:99,y:99}});await until(()=>f.frames().length===2);
+    expect(captures).toBe(2);expect(queries).toBe(2);
+    expect(f.frames()[1].params.metadata).toMatchObject({scrollOffsetX:0,scrollOffsetY:200});
+  }finally{f.close();}
+});
+
+test('screencast restart and document navigation do not reuse pending old scroll metadata',async()=>{
+  let queries=0;
+  const f=await fixture(()=>'',{scrollOffset:()=>({x:0,y:++queries})});
+  try{
+    await f.cdp.send('Page.startScreencast',{clip:zeroClip});await until(()=>f.frames().length===1);
+    f.frame({scrollOffset:{x:10,y:20}});await until(()=>f.frames().length===2);
+    f.frame({scrollOffset:{x:100,y:200}});
+    await f.cdp.send('Page.navigate',{url:'https://replacement.test/'});
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:f.frames()[0].params.sessionId});
+    await until(()=>f.frames().length===3);
+    expect(f.frames()[2].params.metadata).toMatchObject({scrollOffsetX:0,scrollOffsetY:2});
+    f.frame({scrollOffset:{x:1000,y:2000}});
+    await f.cdp.send('Page.stopScreencast');
+    await f.cdp.send('Page.startScreencast',{clip:zeroClip});await until(()=>f.frames().length===4);
+    expect(f.frames()[3].params.metadata).toMatchObject({scrollOffsetX:0,scrollOffsetY:3});
+    expect(queries).toBe(3);
+  }finally{f.close();}
+});
+
+test('a scroll query crossing navigation is discarded before notifying the new document',async()=>{
+  const pending=[];
+  const f=await fixture(()=>'',{scrollOffset:()=>new Promise(resolve=>pending.push(resolve))});
+  try{
+    await f.cdp.send('Page.startScreencast',{clip:zeroClip});await until(()=>pending.length===1);
+    await f.cdp.send('Page.navigate',{url:'https://next.test/'});
+    f.frame({scrollOffset:{x:3,y:4}});
+    pending[0]({x:90,y:100});await until(()=>f.frames().length===1);
+    expect(f.frames()[0].params.metadata).toMatchObject({scrollOffsetX:3,scrollOffsetY:4});
+    expect(pending).toHaveLength(1);
+  }finally{f.close();}
+});

package/test/cdp-viewers.test.js

@@ -0,0 +1,43 @@
+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);}
+});

package/test/compositor-channel-ownership.test.js

@@ -0,0 +1,194 @@
+import {expect, test} from 'bun:test';
+import {EventEmitter} from 'node:events';
+import {createServer, createConnection} from 'node:net';
+import {PacketReader, PacketWriter} from '../lib/renderer/compositor-channel.js';
+
+class DelayedSocket extends EventEmitter {
+  destroyed = false;
+  writes = [];
+  throwAt = -1;
+  write(chunk, callback) {
+    if (this.writes.length === this.throwAt) throw Error('write failed');
+    this.writes.push({chunk, callback});
+    return false;
+  }
+  complete(index, error) { this.writes[index].callback(error); }
+  destroy() { this.destroyed = true; return this; }
+  finishClose() { this.emit('close'); }
+}
+
+function tracked(bytes) {
+  const pixels = new Uint8Array(bytes);
+  const buffer = pixels.buffer, transfer = buffer.transfer.bind(buffer);
+  let releases = 0;
+  buffer.transfer = size => { releases++; return transfer(size); };
+  return {pixels, get releases() { return releases; }};
+}
+
+test('owned pixels stay borrowed until write completion and packets cannot interleave', () => {
+  const socket = new DelayedSocket(), writer = new PacketWriter(socket);
+  const owned = tracked(32); owned.pixels.fill(57);
+  const unowned = Uint8Array.of(1, 2, 3);
+  writer.send({id:1}, owned.pixels, {takeOwnership:true});
+  writer.send({type:'frame'});
+  writer.send({id:2}, unowned);
+  unowned.fill(99); // The default send snapshots an unowned input immediately.
+  expect(socket.writes).toHaveLength(1);
+  expect(owned.releases).toBe(0);
+  const wire = [Buffer.from(socket.writes[0].chunk)];
+  socket.complete(0);
+  expect(socket.writes[1].chunk).toBe(owned.pixels);
+  expect(owned.releases).toBe(0);
+  wire.push(Buffer.from(socket.writes[1].chunk));
+  socket.complete(1);
+  expect(owned.releases).toBe(1);
+  expect(owned.pixels.byteLength).toBe(0);
+  wire.push(Buffer.from(socket.writes[2].chunk));
+  socket.complete(2);
+  wire.push(Buffer.from(socket.writes[3].chunk));
+  socket.complete(3);
+  const received = [];
+  new PacketReader((message,pixels) => received.push([message,[...pixels]])).push(Buffer.concat(wire));
+  expect(received).toEqual([[{id:1},Array(32).fill(57)],[{type:'frame'},[]],[{id:2},[1,2,3]]]);
+  expect([...unowned]).toEqual([99,99,99]);
+  expect(writer.bytes).toBe(0);
+  writer.close(); socket.finishClose();
+  expect(owned.releases).toBe(1);
+});
+
+test('backpressure releases queued and rejected frames but waits for an active native write', () => {
+  const socket = new DelayedSocket(), writer = new PacketWriter(socket, 250);
+  const active = tracked(100), queued = tracked(40), rejected = tracked(180);
+  writer.send({id:1},active.pixels,{takeOwnership:true});
+  writer.send({id:2},queued.pixels,{takeOwnership:true});
+  expect(() => writer.send({id:3},rejected.pixels,{takeOwnership:true})).toThrow('backpressure');
+  expect(socket.destroyed).toBe(true);
+  expect([active.releases,queued.releases,rejected.releases]).toEqual([0,1,1]);
+  const closed = tracked(1);
+  expect(() => writer.send({id:4},closed.pixels,{takeOwnership:true})).toThrow('closed');
+  expect(closed.releases).toBe(1);
+  socket.finishClose();
+  expect(active.releases).toBe(1);
+  socket.complete(0); // Late write callbacks must not send or release again.
+  expect(socket.writes).toHaveLength(1);
+  expect([active.releases,queued.releases,rejected.releases]).toEqual([1,1,1]);
+  expect(writer.bytes).toBe(0);
+});
+
+test('synchronous write throws and asynchronous errors close partially sent packets', () => {
+  for (const failure of ['header-throw','body-throw','body-callback','disconnect']) {
+    const socket = new DelayedSocket(), writer = new PacketWriter(socket);
+    const active = tracked(32), queued = tracked(24);
+    if (failure === 'header-throw') socket.throwAt = 0;
+    const send = () => writer.send({id:1},active.pixels,{takeOwnership:true});
+    if (failure === 'header-throw') {
+      expect(send).toThrow('write failed');
+    } else {
+      send();
+      writer.send({id:2},queued.pixels,{takeOwnership:true});
+      if (failure === 'body-throw') socket.throwAt = 1;
+      socket.complete(0);
+      if (failure === 'body-callback') socket.complete(1, Error('connection lost'));
+      if (failure === 'disconnect') socket.destroy();
+    }
+    // Throw/destroy alone does not prove a pending native write has released
+    // its input. The close event is the portable completion boundary.
+    if (failure !== 'body-callback') expect(active.releases).toBe(0);
+    socket.finishClose();
+    expect(active.releases).toBe(1);
+    if (failure !== 'header-throw') expect(queued.releases).toBe(1);
+    for (let i=0; i<socket.writes.length; i++) socket.complete(i, Error('late callback'));
+    expect(active.releases).toBe(1);
+    expect(writer.bytes).toBe(0);
+    expect(socket.destroyed).toBe(true);
+  }
+});
+
+test('rejected owned serialization releases bytes without damaging an untouched stream', () => {
+  const socket = new DelayedSocket(), writer = new PacketWriter(socket);
+  const invalid = tracked(8), message = {}; message.self = message;
+  expect(() => writer.send(message,invalid.pixels,{takeOwnership:true})).toThrow();
+  expect(invalid.releases).toBe(1);
+  expect(socket.destroyed).toBe(false);
+  expect(socket.writes).toHaveLength(0);
+  const shared = new Uint8Array(new SharedArrayBuffer(8));
+  expect(() => writer.send({},shared,{takeOwnership:true})).toThrow('private ArrayBuffer');
+  expect(shared.byteLength).toBe(8);
+  writer.send({ok:true}); socket.complete(0);
+  writer.close(); socket.finishClose();
+});
+
+test('synchronous write callbacks drain many queued messages without recursion or double release', () => {
+  const socket = new DelayedSocket(), writer = new PacketWriter(socket);
+  const first = tracked(8);
+  writer.send({id:1},first.pixels,{takeOwnership:true});
+  for (let i=0;i<2000;i++) writer.send({id:i+2});
+  socket.write = (chunk,callback) => { callback(); return true; };
+  socket.complete(0);
+  expect(first.releases).toBe(1);
+  expect(writer.bytes).toBe(0);
+  writer.close(); socket.finishClose();
+});
+
+async function socketPair(receive) {
+  let accepted;
+  const ready = new Promise(resolve => { accepted = resolve; });
+  const server = createServer(socket => {
+    socket.setNoDelay(true); socket.pause();
+    socket.on('data',receive);
+    socket.on('error',()=>{});
+    accepted(socket);
+  });
+  await new Promise(resolve => server.listen(0,'127.0.0.1',resolve));
+  const client = createConnection({host:'127.0.0.1',port:server.address().port});
+  client.setNoDelay(true);
+  await new Promise((resolve,reject) => { client.once('connect',resolve);client.once('error',reject); });
+  const peer = await ready;
+  return {client,peer,server,close() {client.destroy();peer.destroy();server.close();}};
+}
+
+test('large frames survive a paused receiver with queued control and copied messages', async () => {
+  const received = [], expected = [], deferred = Promise.withResolvers();
+  const reader = new PacketReader((message,pixels) => {
+    received.push([message,Bun.hash(pixels)]);
+    pixels.buffer.transfer(0);
+    if (received.length === 5) deferred.resolve();
+  });
+  const pair = await socketPair(chunk => {try { reader.push(chunk); } catch(error) {deferred.reject(error);}});
+  const writer = new PacketWriter(pair.client);
+  const first = tracked(8*1024*1024), last = tracked(8*1024*1024);
+  const copied = new Uint8Array(8*1024*1024);
+  first.pixels.fill(11); copied.fill(22); last.pixels.fill(33);
+  try {
+    for (const [message,pixels,owned] of [[{id:1},first.pixels,true],[{type:'frame'},null,false],
+      [{id:2},copied,false],[{type:'frame',sequence:2},null,false],[{id:3},last.pixels,true]]) {
+      expected.push([message,Bun.hash(pixels ?? new Uint8Array())]);
+      writer.send(message,pixels,owned ? {takeOwnership:true} : undefined);
+    }
+    copied.fill(99);
+    await Bun.sleep(80);
+    expect(last.releases).toBe(0);
+    pair.peer.resume();
+    await deferred.promise;
+    for (let i=0; i<100 && last.releases===0; i++) await Bun.sleep(5);
+    expect(received).toEqual(expected);
+    expect([first.releases,last.releases]).toEqual([1,1]);
+    expect(copied.byteLength).toBe(8*1024*1024);
+    expect(writer.bytes).toBe(0);
+  } finally { writer.close(); pair.close(); }
+},10000);
+
+test('disconnecting a paused real socket releases in-flight and queued owned frames', async () => {
+  const pair = await socketPair(()=>{}), writer = new PacketWriter(pair.client);
+  const closed = new Promise(resolve => pair.client.once('close',resolve));
+  const first = tracked(8*1024*1024), second = tracked(8*1024*1024);
+  try {
+    writer.send({id:1},first.pixels,{takeOwnership:true});
+    writer.send({id:2},second.pixels,{takeOwnership:true});
+    await Bun.sleep(40);
+    expect(second.releases).toBe(0);
+    pair.peer.destroy(); await closed;
+    expect([first.releases,second.releases]).toEqual([1,1]);
+    expect(writer.bytes).toBe(0);
+  } finally {writer.close();pair.close();}
+},10000);

package/test/compositor.test.js

@@ -2,6 +2,7 @@ import { afterAll, beforeAll, expect, test } from "bun:test";
 import { createBrowser } from "../lib/headless-shell.js";
 import { cropViewport, encodeImage, rgbaBitmap } from "../lib/paint/frame.js";
 import { RendererHost } from "../lib/renderer/host.js";
+import { NetworkService } from "../lib/network/network-service.js";
 
 const tallPage = `<!doctype html><title>tall</title><body style="margin:0">${
   Array.from({ length: 80 }, (_, index) => `<p style="margin:0;height:40px">line ${index}</p>`).join("")
@@ -27,7 +28,8 @@ test("frames: viewport crops fill uncovered areas, and Bun.Image encodes the BMP
 });
 
 test("the compositor answers screenshots and scrolling while the main thread is busy", async () => {
-  const host = new RendererHost({ timeout: 20_000 });
+  const frames = [];
+  const host = new RendererHost({ timeout: 20_000, onFrame: frame => frames.push(frame) });
   try {
     await host.start();
     await host.call("resize", 400, 300, 1);
@@ -42,6 +44,7 @@ test("the compositor answers screenshots and scrolling while the main thread is
     await Bun.sleep(300);
     const started = performance.now();
     expect(await host.composite("scroll", 0, 120)).toEqual({ x: 0, y: 120 });
+    expect(frames.at(-1)?.scrollOffset).toEqual({ x: 0, y: 120 });
     const scrolled = await host.composite("screenshot");
     expect(performance.now() - started).toBeLessThan(1500);
     expect(scrolled).not.toBe(top);
@@ -56,11 +59,34 @@ test("the compositor answers screenshots and scrolling while the main thread is
     await host.call("press", "End");
     const end = await host.composite("scrollOffset");
     expect(end.y).toBe(80 * 40 - 300);
+    expect(frames.at(-1)?.scrollOffset).toEqual(end);
   } finally {
     host.close();
   }
 }, 30_000);
 
+test("frame scroll snapshots follow the active renderer across origin replacement", async () => {
+  const browser = await createBrowser({ spareRenderer: false,
+    network: new NetworkService({fetch: async () => new Response(tallPage, {headers:{"content-type":"text/html"}})}) });
+  const {context} = browser, frames = [];
+  context.onFrame(frame => frames.push(frame));
+  try {
+    await context.resize(400, 300, 1);
+    await context.navigate("https://first.test/");
+    await context.scroll(0, 125.5);
+    expect(frames.at(-1)?.scrollOffset).toEqual({x:0,y:125.5});
+    await context.navigate("https://second.test/");
+    await context.screenshot();
+    const firstNewFrame = frames.length - 1;
+    expect(frames.at(-1)?.scrollOffset).toEqual({x:0,y:0});
+    await Bun.sleep(30);
+    expect(frames.slice(firstNewFrame).every(frame => frame?.scrollOffset?.y === 0)).toBe(true);
+    await context.scroll(0, 42.25);
+    expect(frames.at(-1)?.scrollOffset).toEqual({x:0,y:42.25});
+    expect(await context.scrollOffset()).toEqual(frames.at(-1).scrollOffset);
+  } finally { browser.close(); }
+}, 30_000);
+
 let server;
 test("video continues presenting while page JavaScript blocks, then freezes on pause", async () => {
   const host = new RendererHost({ timeout: 20_000,

package/test/computed-style-binding.test.js

@@ -8,6 +8,55 @@ beforeAll(async () => {
 });
 afterAll(() => renderer?.close());
 
+test("computed declarations stay live and only geometry reads flush layout", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/computed-style-lazy.js", import.meta.url).pathname],
+    { stdout:"pipe", stderr:"pipe" });
+  const [exit,stderr] = await Promise.all([child.exited,new Response(child.stderr).text()]);
+  expect(stderr).toBe("");
+  expect(exit).toBe(0);
+});
+
+test("stored computed declarations remain live inside the sandboxed page realm", async () => {
+  await renderer.call("loadDocument", { url:"https://page.test/",contentType:"text/html",status:200,
+    source:'<!doctype html><div id="box" style="width:100px;height:20px;color:red;--value:first"></div>' });
+  await renderer.call("whenLoaded");
+  const result = JSON.parse(await renderer.call("evaluate", `JSON.stringify((()=>{
+    const box=document.getElementById('box'),style=getComputedStyle(box);
+    const initial=[style.width,style.color,style.getPropertyValue('--value')];
+    box.style.width='160px';box.style.color='blue';box.style.setProperty('--value','second');
+    const changed=[style.width,style.color,style.getPropertyValue('--value')];
+    box.style.display='none';const hidden=style.display;box.style.display='block';
+    return [initial,changed,hidden,style.width];
+  })())`));
+  expect(result).toEqual([["100px","rgba(255, 0, 0, 1)","first"],
+    ["160px","rgba(0, 0, 255, 1)","second"],"none","160px"]);
+});
+
+test("computed property spellings stay consistent across declarations and live changes", async () => {
+  await renderer.call("loadDocument", { url:"https://page.test/",contentType:"text/html",status:200,
+    source:`<!doctype html><style>#one{-webkit-line-clamp:2}</style><div id="one" style="background-color:red;padding:2px 3px;--Tone:first;--tone:lower"></div>
+      <div id="two" style="background-color:blue;padding:7px"></div>` });
+  await renderer.call("whenLoaded");
+  const result = await renderer.call("evaluate", `(() => {
+    const one=document.getElementById('one'),a=getComputedStyle(one),b=getComputedStyle(document.getElementById('two'));
+    const names=Array.from({length:a.length},(_,i)=>a.item(i));
+    const read=style=>[style.backgroundColor,style.getPropertyValue('BACKGROUND-COLOR'),style.paddingLeft,
+      style.getPropertyValue('padding-left'),style.WebkitLineClamp,style.webkitLineClamp,style.getPropertyValue('-webkit-line-clamp')];
+    const initial=read(a),other=read(b);
+    one.style.backgroundColor='green';one.style.paddingLeft='9px';one.style.setProperty('--Tone','changed');
+    return {initial,other,changed:read(a),custom:[a.getPropertyValue('--Tone'),a.getPropertyValue('--tone')],
+      names:names.length===new Set(names).size&&names.includes('background-color')&&names.includes('-webkit-line-clamp'),
+      absent:['constructor','toString','unknown-property'].map(name=>a.getPropertyValue(name)),
+      stable:names.join('|')===Array.from({length:b.length},(_,i)=>b.item(i)).join('|')};
+  })()`);
+  expect(result).toEqual({
+    initial:["rgba(255, 0, 0, 1)","rgba(255, 0, 0, 1)","3px","3px","2","2","2"],
+    other:["rgba(0, 0, 255, 1)","rgba(0, 0, 255, 1)","7px","7px","none","none","none"],
+    changed:["rgba(0, 128, 0, 1)","rgba(0, 128, 0, 1)","9px","9px","2","2","2"],
+    custom:["changed","lower"],names:true,absent:["","",""],stable:true,
+  });
+});
+
 test("computed corner radii preserve percentages, elliptical axes and logical mappings", async () => {
   await renderer.call("loadDocument", {
     url: "https://page.test/", contentType: "text/html", status: 200,

package/test/computed-style-connectivity.test.js

@@ -0,0 +1,13 @@
+import { expect, test } from "bun:test";
+
+for (const mode of ["host", "ses"]) test(`computed declarations follow connectivity in ${mode} mode`, async () => {
+  const child = Bun.spawn([process.execPath,
+    new URL("./fixtures/computed-style-connectivity.js", import.meta.url).pathname, mode],
+  { stdout: "pipe", stderr: "pipe" });
+  const [exit, stdout, stderr] = await Promise.all([
+    child.exited, new Response(child.stdout).text(), new Response(child.stderr).text(),
+  ]);
+  expect(stderr).toBe("");
+  expect(stdout).toBe("");
+  expect(exit).toBe(0);
+}, 20_000);

package/test/computed-style.test.js

@@ -67,6 +67,92 @@ test("computes the initial UA and inherited style subset", () => {
   window.happyDOM.abort();
 });
 
+test("explicit inheritance preserves serialized values, factors and fallback fields", () => {
+  const { document, window } = parseHTMLDocument('<div id="parent"><span id="child"><i id="small"></i></span></div>');
+  try {
+    document.querySelector('#parent').setAttribute('style', `background-color: rgb(20, 40, 60); font-family: "Two Words", "Comma, Face", serif;
+      font-size: 20px; font-weight: 600; font-style: italic; font-stretch: 87.5%; line-height: 1.25;
+      list-style-type: decimal; pointer-events: none; user-select: all; text-align: right; white-space: pre-wrap;
+      color-scheme: dark; opacity: .6; margin: 1px 2px 3px 4px`);
+    const names = ['background-color', 'font-family', 'font-size', 'font-weight', 'font-style', 'font-width',
+      'line-height', 'list-style-type', 'pointer-events', 'user-select', 'text-align', 'white-space',
+      'color-scheme', 'opacity', 'margin'];
+    document.querySelector('#child').setAttribute('style', names.map(name => `${name}:inherit`).join(';'));
+    document.querySelector('#small').setAttribute('style', 'font-size:10px;line-height:inherit');
+    const engine = new StyleEngine().compute(document);
+    expect(engine.get(document.querySelector('#child'))).toMatchObject({
+      backgroundColor: 'rgba(20, 40, 60, 1)', fontFamily: ['Two Words', 'Comma, Face', 'serif'],
+      fontSize: 20, fontWeight: 600, fontStyle: 'italic', fontStretch: 87.5,
+      lineHeight: 25, lineHeightFactor: 1.25, listStyleType: 'decimal', pointerEvents: 'none',
+      userSelect: 'all', textAlign: 'end', whiteSpace: 'pre-wrap', colorScheme: 'dark', opacity: .6,
+      margin: [1, 2, 3, 4],
+    });
+    expect(engine.get(document.querySelector('#small'))).toMatchObject({ fontSize: 10, lineHeight: 12.5, lineHeightFactor: 1.25 });
+  } finally { window.happyDOM.abort(); }
+});
+
+test("ordinary inheritance does not serialize unrelated font families", () => {
+  const { document, window } = parseHTMLDocument('<div id="parent"></div><span id="child"></span>');
+  try {
+    const parent = computeElementStyle(document.querySelector('#parent'));
+    let serialized = 0;
+    const fontFamily = new Proxy(parent.fontFamily, {
+      get(target, key, receiver) {
+        if (key === 'map') serialized++;
+        return Reflect.get(target, key, receiver);
+      },
+    });
+    const inherited = { ...parent, fontFamily };
+    const child = document.querySelector('#child');
+    expect(computeElementStyle(child, inherited).fontFamily).toBe(fontFamily);
+    expect(serialized).toBe(0);
+    child.setAttribute('style', 'font-family:inherit;line-height:inherit');
+    expect(computeElementStyle(child, inherited).fontFamily).toEqual(parent.fontFamily);
+    expect(serialized).toBe(1);
+  } finally { window.happyDOM.abort(); }
+});
+
+test("immutable border and inset arrays are shared while descendant overrides stay isolated", () => {
+  const { document, window } = parseHTMLDocument('<div id="parent" style="border:3px solid red;inset:1px 2px 3px 4px"></div><span id="child"></span>');
+  try {
+    const parent = computeElementStyle(document.querySelector('#parent'));
+    const child = document.querySelector('#child');
+    const firstDefault = computeElementStyle(child), secondDefault = computeElementStyle(child);
+    for (const name of ['borderStyles', 'borderSpecifiedWidths', 'inset']) {
+      expect(firstDefault[name]).toBe(secondDefault[name]);
+      expect(Object.isFrozen(firstDefault[name])).toBe(true);
+    }
+    child.setAttribute('style', 'border:inherit;inset:inherit');
+    const inherited = computeElementStyle(child, parent);
+    for (const name of ['borderStyles', 'borderSpecifiedWidths', 'inset']) expect(inherited[name]).toBe(parent[name]);
+    child.setAttribute('style', 'border:inherit;inset:inherit;border-left-style:dashed;border-top-width:9px;right:12px');
+    const changed = computeElementStyle(child, inherited);
+    expect(changed).toMatchObject({borderStyles:['solid','solid','solid','dashed'], borderSpecifiedWidths:[9,3,3,3], inset:[1,12,3,4]});
+    expect(parent).toMatchObject({borderStyles:['solid','solid','solid','solid'], borderSpecifiedWidths:[3,3,3,3], inset:[1,2,3,4]});
+    for (const name of ['borderStyles', 'borderSpecifiedWidths', 'inset']) {
+      expect(changed[name]).not.toBe(parent[name]);
+      expect(Object.isFrozen(changed[name])).toBe(true);
+    }
+  } finally { window.happyDOM.abort(); }
+});
+
+test("inheriting mutable border and inset arrays copies without freezing caller-owned arrays", () => {
+  const { document, window } = parseHTMLDocument('<div id="parent"></div><span id="child" style="border:inherit;inset:inherit"></span>');
+  try {
+    const parent = {...computeElementStyle(document.querySelector('#parent')),
+      borderStyles:['solid','dotted','dashed','double'], borderSpecifiedWidths:[1,2,3,4], inset:[5,6,7,8]};
+    const child = computeElementStyle(document.querySelector('#child'), parent);
+    for (const name of ['borderStyles', 'borderSpecifiedWidths', 'inset']) {
+      expect(child[name]).toEqual(parent[name]);
+      expect(child[name]).not.toBe(parent[name]);
+      expect(Object.isFrozen(child[name])).toBe(true);
+      expect(Object.isFrozen(parent[name])).toBe(false);
+    }
+    parent.borderStyles[0]='hidden';parent.borderSpecifiedWidths[0]=99;parent.inset[0]=99;
+    expect(child).toMatchObject({borderStyles:['solid','dotted','dashed','double'], borderSpecifiedWidths:[1,2,3,4], inset:[5,6,7,8]});
+  } finally { window.happyDOM.abort(); }
+});
+
 test(":empty includes text nodes, but ignores comments and empty text nodes", () => {
   const { document, window } = parseHTMLDocument('<span id="text">0</span><span id="space"> </span><span id="empty"><!--comment--></span>');
   const styles = new StyleEngine().compute(document, ['span:empty { display:none }']);