buninu-browser 0.5.1 → 0.6.0

package/test/fixtures/media-track-refill.js

@@ -0,0 +1,132 @@
+// Host scripting globals are isolated from the test runner.
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+import {createBytePipe} from '../../lib/media/byte-pipe.js';
+
+const sleep = Bun.sleep, pipe = createBytePipe();
+pipe.append(new Uint8Array(1024));
+// A shared pipe with MSE-like epochs. Epoch 0's decoder may have more
+// frames than its boundary; the renderer must stop it exactly at 3 seconds.
+let thirdEpoch = false;
+pipe.snapshotAt = time => {
+  const id = time < 3 ? 1 : time < 6 || !thirdEpoch ? 2 : 3;
+  return {id, startTime:(id-1)*3, endTime:id < 3 ? id*3 : Infinity,
+    bytes:new Uint8Array([id, pipe.size / 1024])};
+};
+const outputs = [], messages = [], audioDecoders = [], errors = [];
+let finishVideoOpen, holdVideo = false, failAudio = false;
+const renderer = await createPageRenderer({
+  onFrame() {}, onVideo:message => messages.push(message),
+  fetchResource:async () => ({ok:true, contentType:'video/mp4', body:pipe}),
+  reportError:error => errors.push(String(error)),
+  videoDecoder:{
+    probe:async () => ({duration:30, video:{width:20,height:12}, audio:{sampleRate:1000}}),
+    async decode() {
+      if (holdVideo) {holdVideo=false; await new Promise(resolve => {finishVideoOpen=resolve;});}
+      return {width:20,height:12,fps:10, seek() {}, close() {},
+        nextFrame:(w,h) => new Uint8Array(w*h*4)};
+    },
+    async decodeAudio(bytes) {
+      if (failAudio) throw Error('decoder failure after the completed input');
+      const start = (bytes[0]-1)*3000;
+      const record = {position:start, end:start+bytes[1]*2000, closed:false};
+      audioDecoders.push(record);
+      return {sampleRate:1000,channels:1, close() {record.closed=true;},
+        nextSamples() {
+          if (record.position >= record.end) return null;
+          return Float32Array.from({length:Math.min(100,record.end-record.position)},
+            () => (record.position++ % 1000) / 1024);
+        }};
+    },
+  },
+  audio:{
+    open(options, listener) {outputs.push({listener,pcm:[]});return outputs.length;},
+    write(id, bytes) {outputs[id-1].pcm.push(...new Int16Array(bytes.buffer,bytes.byteOffset,bytes.byteLength/2));},
+    close(id) {return Promise.resolve(outputs[id-1].pcm.length*2);}, finish() {},
+  },
+});
+const current = () => messages.filter(message => message.type === 'video-open').at(-1);
+const waitFor = async condition => {
+  for(let n=0;n<200;n++) {if(condition())return;await sleep(5);}
+  assert.fail(`timed out: ${condition}; ${JSON.stringify({audioDecoders,errors})}`);
+};
+const clock = seconds => outputs[0].listener({event:'timing',seconds,sentSeconds:10});
+const request = samples => outputs[0].listener({event:'request',bytes:samples*2});
+const startRefill = time => {
+  pipe.append(new Uint8Array(1024));
+  holdVideo=true;finishVideoOpen=null;
+  clock(time);
+  renderer.videoReport({id:current().id,end:time});
+};
+try {
+  renderer.resize(240,180,1);renderer.setScripting('host');
+  await renderer.loadDocument({url:'https://track-refill.test/',contentType:'text/html',source:
+    '<style>video{width:100px;height:60px;display:block}</style><video id=v src="clip.mp4"></video>'});
+  await renderer.whenLoaded();
+  await renderer.evaluate('document.getElementById("v").play()');
+  request(500);
+  await waitFor(() => Boolean(current()));
+  assert.equal(audioDecoders.length,1);
+  const first = audioDecoders[0], firstId = current().id;
+
+  // Appending shared bytes does not make the sound decoder unusable. A small
+  // request queued behind video's async open must consume that SAME decoder.
+  startRefill(0.4);
+  await waitFor(() => Boolean(finishVideoOpen));
+  request(500);
+  finishVideoOpen();
+  await waitFor(() => current().id !== firstId && outputs[0].pcm.length === 1000);
+  assert.equal(audioDecoders.length,1,'video EOF does not reopen usable audio');
+  assert.equal(first.closed,false);
+  assert.equal(await renderer.evaluate('document.getElementById("v").currentTime'),0.4);
+
+  // Audio reaches its own old snapshot's EOF while draining a request held
+  // during another video refill. It must reopen once and continue at sample
+  // 2000, preserving both the in-flight request and the output stream.
+  const secondId = current().id;
+  startRefill(0.5);
+  await waitFor(() => Boolean(finishVideoOpen));
+  request(1500);
+  finishVideoOpen();
+  await waitFor(() => current().id !== secondId && outputs[0].pcm.length === 2500);
+  assert.equal(audioDecoders.length,2,'audio itself still refills at EOF');
+  assert.equal(first.closed,true);
+  assert.equal(outputs.length,1,'decoder refill keeps its sample clock/output stream');
+  assert.equal(await renderer.evaluate('document.getElementById("v").currentTime'),0.5);
+
+  // An epoch boundary must trigger a new configuration even when the old
+  // decoder still has PCM and no new append occurred since its last reopen.
+  request(1000);
+  await waitFor(() => outputs[0].pcm.length === 3500);
+  assert.equal(audioDecoders.length,3);
+  assert.equal(audioDecoders[1].closed,true);
+  assert.equal(audioDecoders[2].position,3500);
+  assert.equal(outputs.length,1);
+  for(let i=0;i<3500;i++) assert.equal(outputs[0].pcm[i],Math.round((i%1000)/1024*32767),`sample ${i}`);
+  assert.deepEqual(errors,[]);
+
+  // An exhausted range with no different snapshot must wait for an append,
+  // without reopening that same epoch in a loop. Then resume at its exact
+  // next sample when a genuinely different epoch arrives.
+  request(3000);
+  await sleep(80);
+  assert.equal(outputs[0].pcm.length,6000);
+  assert.equal(audioDecoders.length,3);
+  thirdEpoch=true;
+  pipe.append(new Uint8Array(1024));
+  await waitFor(() => outputs[0].pcm.length === 6500);
+  assert.equal(audioDecoders.length,4);
+  assert.equal(outputs.length,1);
+  for(let i=3500;i<6500;i++) assert.equal(outputs[0].pcm[i],Math.round((i%1000)/1024*32767),`sample ${i}`);
+
+  // Exhausting a finished input must surface a subsequent decoder failure,
+  // rather than treating it as another append or swallowing the error.
+  pipe.finish(); failAudio=true;
+  request(9000);
+  await waitFor(() => errors.length > 0);
+  assert.match(errors[0],/decoder failure after the completed input/);
+  await sleep(80);
+  assert.equal(errors.length,1,'fatal refill is reported once instead of restarting an EOF loop');
+  assert.equal(await renderer.evaluate('document.getElementById("v").paused'),true);
+  process.stdout.write('track-independent refill integration passed\n');
+} finally {renderer.dispose();}

package/test/fixtures/media-webm-seek.js

@@ -0,0 +1,51 @@
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+import {createMediaSourceScope} from '../../lib/renderer/media-source.js';
+import {createWebMStream} from '../../lib/media/webm-stream.js';
+import {floatToS16} from '../../lib/audio/pcm.js';
+import wasmpeg from '../../vendor/wasmpeg/src/js/index.js';
+
+const sleep=Bun.sleep, tasks=[];
+await wasmpeg.load();
+const fixture=await Bun.file(new URL('./mse-audio-chirp.webm',import.meta.url)).bytes();
+const elements=createWebMStream().append(fixture),clusters=elements.filter(e=>e.id===0x1f43b675);
+const scope=createMediaSourceScope({origin:'https://gap.test',DOMException,schedule:fn=>tasks.push(fn)});
+const flush=()=>{while(tasks.length)tasks.shift()()};
+const source=new scope.MediaSource();source.attach('blob:https://gap.test/audio');flush();
+const buffer=source.addSourceBuffer('audio/webm; codecs="opus"');
+for(const e of [...elements.slice(0,elements.indexOf(clusters[0])),clusters[0],clusters[3]]){buffer.appendBuffer(e.bytes);flush();}
+const pipe=buffer._pipe, selected=pipe.snapshotAt(7);
+const reference=await wasmpeg.decodeAudio(selected.bytes,{format:'webm'});
+let skip=Math.round((7-selected.startTime)*reference.sampleRate),expected;
+try {for(let samples;samples=reference.nextSamples();){if(skip>=samples.length){skip-=samples.length;continue;}expected=floatToS16(samples.subarray(skip,skip+100));break;}}
+finally{reference.close();}
+const outputs=[],errors=[];
+const renderer=await createPageRenderer({
+  fetchResource:async()=>({ok:true,body:pipe,contentType:'audio/webm'}),videoDecoder:wasmpeg,
+  reportError:error=>errors.push(String(error)),
+  audio:{open(options,listener){outputs.push({listener,pcm:[]});return outputs.length;},
+    write(id,bytes){outputs[id-1].pcm.push(bytes.slice());},finish(){},close(){return Promise.resolve(0);}},
+});
+const wait=async condition=>{for(let i=0;i<200;i++){if(await condition())return;await sleep(5);}assert.fail(`timed out; ${errors}`);};
+try{
+  renderer.setScripting('host');
+  await renderer.loadDocument({url:'https://gap.test/',contentType:'text/html',source:'<audio id=a src="sparse.webm"></audio>'});
+  await renderer.evaluate('document.getElementById("a").play()');
+  assert.equal(outputs.length,1);outputs[0].listener({event:'request',bytes:4800});
+  outputs[0].listener({event:'timing',seconds:.025,sentSeconds:.05});
+  await renderer.evaluate('globalThis.seekDone=0;const a=document.getElementById("a");a.addEventListener("seeked",()=>seekDone++);a.currentTime=7');
+  await wait(()=>outputs.length===2);
+  assert.equal(await renderer.evaluate('seekDone'),1,'the sparse seek completed');
+  outputs[1].listener({event:'request',bytes:200});
+  assert.deepEqual(outputs[1].pcm[0],expected,'resumed stream begins at the original timeline sample');
+  outputs[1].listener({event:'timing',seconds:.001,sentSeconds:.002});
+  assert.equal(await renderer.evaluate('document.getElementById("a").currentTime'),7.001);
+  await renderer.evaluate('document.getElementById("a").pause();document.getElementById("a").currentTime=.5');
+  await wait(async()=>await renderer.evaluate('seekDone')===2);
+  assert.equal(await renderer.evaluate('document.getElementById("a").currentTime'),.5);
+  assert.equal(outputs.length,2,'paused backwards seek does not open output');
+  await renderer.evaluate('document.getElementById("a").play()');
+  assert.equal(outputs.length,3,'play after backwards seek reopens audio normally');
+  assert.deepEqual(errors,[]);
+  process.stdout.write('sparse WebM seek and playback passed\n');
+}finally{pipe.finish();renderer.dispose();}

package/test/fixtures/mutation-observer.js

@@ -0,0 +1,201 @@
+import assert from 'node:assert/strict';
+import { createPageRenderer } from '../../lib/renderer/page-renderer.js';
+
+async function mutationObserverCases() {
+  const results = {};
+  const tick = () => new Promise(resolve => setTimeout(resolve, 0));
+  const describe = records => records.map(r => [r.type, r.target.id, r.attributeName, r.oldValue,
+    Array.from(r.addedNodes, n => n.id || n.nodeName), Array.from(r.removedNodes, n => n.id || n.nodeName)]);
+  async function run(name, fn) {
+    const root = document.createElement('div');root.id='root';
+    root.innerHTML='<div id="a"><span id="child"></span></div><div id="b"></div>';
+    document.body.appendChild(root);
+    const observers=[];
+    const make = callback => {const o=new MutationObserver(callback);observers.push(o);return o;};
+    try { results[name]=await fn(root,make); }
+    finally {for(const observer of observers)observer.disconnect();root.remove();await tick();}
+  }
+  await run('multipleTargets',async(root,make)=>{
+    const [a,b]=root.children,batches=[];const o=make(r=>batches.push(describe(r)));
+    o.observe(a,{attributes:true});o.observe(b,{attributes:true});
+    b.setAttribute('x','1');a.setAttribute('y','2');b.setAttribute('z','3');await tick();return batches;
+  });
+  await run('takeRecords',async(root,make)=>{
+    const [a,b]=root.children,batches=[];const o=make(r=>batches.push(describe(r)));
+    o.observe(a,{attributes:true});o.observe(b,{attributes:true});
+    b.setAttribute('x','1');a.setAttribute('y','2');b.setAttribute('z','3');
+    const records=describe(o.takeRecords());await tick();return {records,batches,empty:o.takeRecords().length};
+  });
+  await run('overlappingTargets',async(root,make)=>{
+    const child=root.querySelector('#child'),batches=[];child.setAttribute('value','old');
+    const o=make(r=>batches.push(describe(r)));
+    o.observe(root,{subtree:true,attributes:true,attributeOldValue:true});o.observe(child,{attributes:true});
+    child.setAttribute('value','new');await tick();return batches;
+  });
+  await run('creationAndPromiseOrder',async(root,make)=>{
+    const [a,b]=root.children,events=[];
+    const older=make(()=>events.push('older')),newer=make(()=>events.push('newer'));
+    newer.observe(b,{attributes:true});older.observe(a,{attributes:true});
+    b.setAttribute('x','1');Promise.resolve().then(()=>events.push('promise'));a.setAttribute('x','1');
+    await tick();return events;
+  });
+  await run('callbackMutation',async(root,make)=>{
+    const [a,b]=root.children,events=[];let calls=0;
+    const o=make(r=>{events.push(describe(r));if(++calls===1){a.setAttribute('second','a');b.setAttribute('second','b');}});
+    o.observe(a,{attributes:true});o.observe(b,{attributes:true});
+    a.setAttribute('first','1');Promise.resolve().then(()=>events.push('promise'));
+    await tick();return events;
+  });
+  await run('callbackMutatesLaterObserver',async(root,make)=>{
+    const [a,b]=root.children,events=[];
+    const first=make(r=>{events.push(['first',describe(r)]);b.setAttribute('later','2');});
+    const second=make(r=>events.push(['second',describe(r)]));
+    first.observe(a,{attributes:true});second.observe(b,{attributes:true});
+    b.setAttribute('initial','1');a.setAttribute('initial','1');await tick();return events;
+  });
+  await run('disconnectReobserve',async(root,make)=>{
+    const [a,b]=root.children,batches=[];const o=make(r=>batches.push(describe(r)));
+    o.observe(a,{attributes:true});a.setAttribute('discard','1');o.disconnect();
+    o.observe(b,{attributes:true});b.setAttribute('keep','2');await tick();return batches;
+  });
+  await run('drainOtherObserver',async(root,make)=>{
+    const [a,b]=root.children,events=[];let second;
+    const first=make(()=>events.push(['drained',describe(second.takeRecords())]));
+    second=make(r=>events.push(['second',describe(r)]));
+    first.observe(a,{attributes:true});second.observe(b,{attributes:true});
+    b.setAttribute('x','1');a.setAttribute('x','1');await tick();return events;
+  });
+  await run('reobserveOptions',async(root,make)=>{
+    const a=root.firstElementChild,batches=[];const o=make(r=>batches.push(describe(r)));
+    o.observe(a,{attributes:true,attributeFilter:['x']});a.setAttribute('x','first');
+    o.observe(a,{attributes:true,attributeFilter:['y']});a.setAttribute('x','ignored');a.setAttribute('y','kept');
+    await tick();return batches;
+  });
+  for(const childList of [false,true])await run('detachedSubtree'+childList,async(root,make)=>{
+    const a=root.firstElementChild,child=a.firstElementChild,batches=[];
+    const o=make(r=>batches.push(describe(r)));o.observe(root,{subtree:true,childList,attributes:true});
+    a.remove();child.setAttribute('before','1');await tick();child.setAttribute('after','2');await tick();return batches;
+  });
+  await run('moveAndEmpty',async(root,make)=>{
+    const [a,b]=root.children,child=a.firstElementChild,batches=[];
+    const o=make(r=>batches.push(describe(r)));o.observe(root,{subtree:true,childList:true,attributes:true});
+    a.remove();a.removeChild(child);b.appendChild(child);child.setAttribute('before','1');
+    await tick();child.setAttribute('after','2');await tick();return batches;
+  });
+  await run('detachedTarget',async(root,make)=>{
+    const a=root.firstElementChild,batches=[];a.remove();
+    const o=make(r=>batches.push(describe(r)));o.observe(a,{attributes:true});a.setAttribute('x','1');await tick();return batches;
+  });
+  await run('exceptionIsolation',async(root,make)=>{
+    const [a,b]=root.children,events=[];
+    const handler=e=>e.preventDefault();window.addEventListener('error',handler);
+    const first=make(()=>{events.push('first');throw new Error('observer-fixture-expected');});
+    const second=make(()=>events.push('second'));first.observe(a,{attributes:true});second.observe(b,{attributes:true});
+    a.setAttribute('x','1');b.setAttribute('x','1');await tick();window.removeEventListener('error',handler);return events;
+  });
+  await run('omittedAttributeOptions',async(root,make)=>{
+    const a=root.firstElementChild,events=[];
+    const o=make(r=>events.push(describe(r)));o.observe(a,{attributeOldValue:false});
+    a.setAttribute('x','first');a.setAttribute('x','second');await tick();return events;
+  });
+  await run('omittedCharacterOptions',async(root,make)=>{
+    const a=root.firstElementChild,text=document.createTextNode('old'),events=[];a.appendChild(text);
+    const o=make(r=>events.push(r.map(x=>[x.type,x.oldValue])));o.observe(text,{characterDataOldValue:false});
+    text.data='new';await tick();return events;
+  });
+  await run('invalidCallback',async()=>[null,undefined,{},1,'x'].map(value=>{
+    try {new MutationObserver(value);return false;} catch(error){return error.name;}
+  }));
+  await run('filterCase',async(root,make)=>{
+    const a=root.firstElementChild,events=[];const o=make(r=>events.push(describe(r)));
+    o.observe(a,{attributes:true,attributeFilter:['UPPER']});a.setAttribute('UPPER','1');
+    await tick();return events;
+  });
+  await run('reobserveSubtree',async(root,make)=>{
+    const a=root.firstElementChild,child=a.firstElementChild,events=[];const o=make(r=>events.push(describe(r)));
+    o.observe(root,{attributes:true,subtree:true});a.remove();
+    o.observe(root,{attributes:true,subtree:false});child.setAttribute('ignored','1');root.setAttribute('yes','1');
+    root.appendChild(a);child.setAttribute('also-ignored','1');await tick();
+    o.observe(root,{attributes:true,subtree:true});child.setAttribute('kept','1');await tick();return events;
+  });
+  await run('transientDuringCallback',async(root,make)=>{
+    const a=root.firstElementChild,child=a.firstElementChild,events=[];
+    const o=make(r=>{events.push(describe(r));child.setAttribute('callback','ignored');});
+    o.observe(root,{attributes:true,subtree:true,childList:true});a.remove();await tick();return events;
+  });
+  await run('takeRecordsKeepsTransient',async(root,make)=>{
+    const a=root.firstElementChild,child=a.firstElementChild,events=[];const o=make(r=>events.push(describe(r)));
+    o.observe(root,{attributes:true,subtree:true,childList:true});a.remove();const drained=describe(o.takeRecords());
+    child.setAttribute('before','yes');await tick();child.setAttribute('after','ignored');await tick();return {drained,events};
+  });
+  await run('optionValidation',async(root,make)=>{
+    const a=root.firstElementChild,callable=function(){};
+    callable[Symbol.iterator]=function*(){yield 'x'};
+    const options=[{}, {attributes:false,attributeOldValue:false},
+      {childList:true,attributes:false,attributeFilter:[]}, {characterData:false,characterDataOldValue:true},
+      {attributeFilter:[]}, {attributeFilter:new Set(['x'])}, {attributeFilter:callable},
+      {attributeFilter:'x'}, {attributeFilter:{length:1,0:'x'}}, {attributeFilter:null},
+      {attributeOldValue:undefined}, {characterDataOldValue:undefined},
+      {childList:true,attributes:false,attributeOldValue:false}, {attributeFilter:[Symbol('x')]}];
+    return options.map((option,i)=>{const observer=make(()=>{});try{
+      observer.observe(a,option);a.setAttribute('x',String(i));const records=observer.takeRecords();
+      observer.disconnect();return ['ok',records.map(record=>record.attributeName)];
+    }catch(error){return error.name;}});
+  });
+  await run('optionConversionOrder',async(root,make)=>{
+    const events=[],options={},filter={get [Symbol.iterator](){events.push('iterator');return function*(){
+      events.push('first');yield {toString(){events.push('string');return 'x'}};events.push('end');
+    }}};
+    for(const key of ['attributeFilter','attributeOldValue','attributes','characterData','characterDataOldValue','childList','subtree']){
+      Object.defineProperty(options,key,{get(){events.push(key);return key==='attributeFilter'?filter:undefined}});
+    }
+    make(()=>{}).observe(root,options);return events;
+  });
+  return results;
+}
+
+const expected = {
+  "multipleTargets": [[["attributes","b","x",null,[],[]],["attributes","a","y",null,[],[]],["attributes","b","z",null,[],[]]]],
+  "takeRecords": {"records":[["attributes","b","x",null,[],[]],["attributes","a","y",null,[],[]],["attributes","b","z",null,[],[]]],"batches":[],"empty":0},
+  "overlappingTargets": [[["attributes","child","value","old",[],[]]]],
+  "creationAndPromiseOrder": ["older","newer","promise"],
+  "callbackMutation": [[["attributes","a","first",null,[],[]]],"promise",[["attributes","a","second",null,[],[]],["attributes","b","second",null,[],[]]]],
+  "callbackMutatesLaterObserver": [["first",[["attributes","a","initial",null,[],[]]]],["second",[["attributes","b","initial",null,[],[]],["attributes","b","later",null,[],[]]]]],
+  "disconnectReobserve": [[["attributes","b","keep",null,[],[]]]],
+  "drainOtherObserver": [["drained",[["attributes","b","x",null,[],[]]]]],
+  "reobserveOptions": [[["attributes","a","x",null,[],[]],["attributes","a","y",null,[],[]]]],
+  "detachedSubtreefalse": [[["attributes","child","before",null,[],[]]]],
+  "detachedSubtreetrue": [[["childList","root",null,null,[],["a"]],["attributes","child","before",null,[],[]]]],
+  "moveAndEmpty": [[["childList","root",null,null,[],["a"]],["childList","a",null,null,[],["child"]],["childList","b",null,null,["child"],[]],["attributes","child","before",null,[],[]]],[["attributes","child","after",null,[],[]]]],
+  "detachedTarget": [[["attributes","a","x",null,[],[]]]],
+  "exceptionIsolation": ["first","second"],
+  "omittedAttributeOptions": [[["attributes","a","x",null,[],[]],["attributes","a","x",null,[],[]]]],
+  "omittedCharacterOptions": [[["characterData",null]]],
+  "invalidCallback": ["TypeError","TypeError","TypeError","TypeError","TypeError"],
+  "filterCase": [],
+  "reobserveSubtree": [[["attributes","root","yes",null,[],[]]],[["attributes","child","kept",null,[],[]]]],
+  "transientDuringCallback": [[["childList","root",null,null,[],["a"]]]],
+  "takeRecordsKeepsTransient": {"drained":[["childList","root",null,null,[],["a"]]],"events":[[["attributes","child","before",null,[],[]]]]},
+  "optionValidation": ["TypeError","TypeError","TypeError","TypeError",["ok",[]],["ok",["x"]],["ok",["x"]],"TypeError","TypeError","TypeError","TypeError","TypeError",["ok",[]],"TypeError"],
+  "optionConversionOrder": ["attributeFilter","iterator","first","string","end","attributeOldValue","attributes","characterData","characterDataOldValue","childList","subtree"]
+};
+
+const errors=[];
+const renderer=await createPageRenderer({reportError:error=>errors.push(String(error))});
+await import('../../vendor/ses/dist/ses.mjs');
+lockdown({errorTaming:'safe',overrideTaming:'severe',consoleTaming:'unsafe',localeTaming:'unsafe',stackFiltering:'concise',reporting:'none'});
+try {
+  renderer.setScripting('ses'); renderer.resize(400,300,1);
+  await renderer.loadDocument({url:'https://mutation.test/',contentType:'text/html',source:'<!doctype html><body></body>'});
+  await renderer.whenLoaded();
+  const result=JSON.parse(await renderer.evaluate('('+mutationObserverCases.toString()+')().then(JSON.stringify)'));
+  for (const [name,value] of Object.entries(expected)) assert.deepEqual(result[name],value,name);
+  assert.equal(errors.length,1); assert.match(errors[0],/observer-fixture-expected/);
+  // Navigation gives the next realm a fresh observer constructor and delivery.
+  await renderer.loadDocument({url:'https://mutation.test/next',contentType:'text/html',source:'<!doctype html><body></body>'});
+  await renderer.whenLoaded();
+  assert.equal(await renderer.evaluate(`new Promise(resolve=>{
+    const observer=new MutationObserver(records=>{observer.disconnect();resolve(records.length)});
+    observer.observe(document.body,{attributes:true});document.body.setAttribute('next','1');
+  })`),1);
+} finally { renderer.dispose(); }

package/test/fixtures/observer-invalidation.js

@@ -0,0 +1,105 @@
+// Host scripting and the style-read counter stay outside the test runner.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { nodeOf } from "../../lib/renderer/bindings.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const font = await Bun.file(new URL("../../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+const sleep = Bun.sleep;
+let finishFont;
+const fontResponse = new Promise(resolve => { finishFont = resolve; });
+const renderer = await createPageRenderer({
+  fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+  pageFetch: () => fontResponse,
+});
+const evaluate = code => renderer.evaluate(code);
+const eventually = async (code, check, message) => {
+  for (let attempt = 0; attempt < 100; attempt++) {
+    const value = await evaluate(code);
+    if (check(value)) return value;
+    await sleep(10);
+  }
+  assert.fail(message);
+};
+const originalGet = StyleEngine.prototype.get;
+try {
+  renderer.resize(400, 300, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://observer.test/", contentType: "text/html", source: `<!doctype html>
+    <style id=sheet>body{margin:0}#box{width:100px;height:50px}
+      body[data-wide] #box{width:175px}
+      #viewport{width:50%;height:10px}
+      #scroller{position:absolute;top:80px;width:100px;height:100px;overflow:auto}
+      #inside{position:absolute;top:150px;width:20px;height:20px}
+      #below{position:absolute;top:500px;width:20px;height:20px}</style>
+    <div id=box></div><div id=viewport></div>
+    <div id=scroller><div style="position:relative;height:300px"><div id=inside></div></div></div>
+    <div id=below></div><div style="height:1000px"></div>` });
+  await renderer.whenLoaded();
+  await evaluate(`window.box=document.getElementById('box');window.sizes=[];window.intersections=[];
+    window.ro=new ResizeObserver(entries=>sizes.push(entries[0].contentRect.width));ro.observe(box);
+    window.io=new IntersectionObserver(entries=>intersections.push(entries[0].isIntersecting));io.observe(box);`);
+  await eventually("sizes.length===1&&intersections.length===1", Boolean, "initial observers should be delivered");
+  // Consume initial focus bookkeeping, then count actual style measurements
+  // of the observed box. Reading body geometry itself cannot touch this box.
+  await evaluate("document.body.setAttribute('data-warm','1');document.body.clientWidth");
+  await sleep(40);
+  const target = nodeOf(globalThis.document.getElementById("box"));
+  let measurements = 0;
+  StyleEngine.prototype.get = function (element) {
+    if (element === target) measurements++;
+    return originalGet.call(this, element);
+  };
+  for (let i = 0; i < 5; i++) {
+    await evaluate(`document.body.setAttribute('data-counter','${i}');document.body.clientWidth`);
+    await sleep(30);
+  }
+  assert.equal(measurements, 0, "metadata flushes must not remeasure unchanged observer targets");
+  assert.deepEqual(await evaluate("[sizes,intersections]"), [[100], [true]]);
+  StyleEngine.prototype.get = originalGet;
+
+  // observe() itself still queues a first measurement without a new version.
+  await evaluate("window.newSizes=[];window.newRO=new ResizeObserver(e=>newSizes.push(e[0].contentRect.width));newRO.observe(box)");
+  await eventually("newSizes[0]", value => value === 100, "new observers must not wait for invalidation");
+  await evaluate("box.style.width='150px';document.body.clientWidth");
+  await eventually("sizes.at(-1)", value => value === 150, "inline size changes must notify");
+  await evaluate("box.style.width='';document.body.setAttribute('data-wide','');document.body.clientWidth");
+  await eventually("sizes.at(-1)", value => value === 175, "selector-observed metadata must still invalidate");
+  await evaluate("document.getElementById('sheet').textContent+='body[data-wide] #box{width:190px}';document.body.clientWidth");
+  await eventually("sizes.at(-1)", value => value === 190, "stylesheet changes must notify");
+
+  await evaluate(`window.insideChanges=[];window.belowChanges=[];window.viewportSizes=[];window.deviceSizes=[];
+    window.insideIO=new IntersectionObserver(e=>insideChanges.push(e[0].isIntersecting));insideIO.observe(document.getElementById('inside'));
+    window.belowIO=new IntersectionObserver(e=>belowChanges.push(e[0].isIntersecting));belowIO.observe(document.getElementById('below'));
+    window.viewportRO=new ResizeObserver(e=>viewportSizes.push(e[0].contentRect.width));viewportRO.observe(document.getElementById('viewport'));
+    window.deviceRO=new ResizeObserver(e=>deviceSizes.push(e[0].devicePixelContentBoxSize[0].inlineSize));deviceRO.observe(box,{box:'device-pixel-content-box'});`);
+  await eventually("insideChanges.length===1&&belowChanges.length===1&&viewportSizes.length===1&&deviceSizes.length===1", Boolean,
+    "scroll/viewport observers should be initialized");
+  assert.deepEqual(await evaluate("[insideChanges,belowChanges,viewportSizes,deviceSizes]"), [[false], [false], [200], [190]]);
+  await evaluate("document.getElementById('scroller').scrollTop=100");
+  await eventually("insideChanges.at(-1)", Boolean, "element scrolling must notify");
+  renderer.scrollTo(0, 450);
+  await eventually("belowChanges.at(-1)", Boolean, "viewport scrolling must notify");
+  renderer.scrollTo(0, 0);
+  renderer.resize(400, 300, 2);
+  await eventually("deviceSizes.at(-1)", value => value === 380, "DPR-only changes must notify without layout invalidation");
+  renderer.resize(600, 300, 2);
+  await eventually("viewportSizes.at(-1)", value => value === 300, "viewport resizing must notify");
+  await evaluate("box.remove();document.body.clientWidth");
+  await eventually("sizes.at(-1)===0&&intersections.at(-1)===false", Boolean, "removing a target must notify");
+  await evaluate("document.body.prepend(box);document.body.clientWidth");
+  await eventually("sizes.at(-1)===190&&intersections.at(-1)===true", Boolean, "reattaching a target must notify");
+
+  // Font completion is a resource invalidation even with no DOM mutation.
+  await evaluate(`document.body.insertAdjacentHTML('beforeend',
+    '<span id=text style="display:inline-block;font-family:ObserverMono,sans-serif;font-size:30px">iiii</span>')`);
+  await evaluate("window.fontSizes=[];window.fontRO=new ResizeObserver(e=>fontSizes.push(e[0].contentRect.width));fontRO.observe(document.getElementById('text'))");
+  const before = await eventually("fontSizes[0]", value => value > 0, "fallback font should be measured");
+  await evaluate(`document.getElementById('sheet').textContent+='@font-face{font-family:ObserverMono;src:url(/font.ttf)}';document.body.clientWidth`);
+  finishFont({ status: 200, body: font });
+  await eventually("fontSizes.at(-1)", value => value > before * 2, "loaded font metrics must notify");
+  process.stdout.write("observer invalidation integration passed\n");
+} finally {
+  StyleEngine.prototype.get = originalGet;
+  renderer.dispose();
+}

package/test/fixtures/prepaint-scheduling.js

@@ -0,0 +1,73 @@
+// Host scripting installs browser globals, so each scenario runs separately.
+import {strict as assert} from 'node:assert';
+import {createPageRenderer} from '../../lib/renderer/page-renderer.js';
+
+const scenario = process.argv[2];
+const frames = [], errors = [], videos = [];
+let finishScript;
+const pendingScript = new Promise(resolve => { finishScript = resolve; });
+const renderer = await createPageRenderer({
+  renderMinInterval: 180,
+  onFrame: ({tile}) => frames.push(tile),
+  onVideo: message => videos.push(message),
+  reportError: error => errors.push(String(error)),
+  fetchResource: async url => {
+    if (url.endsWith('slow.js')) await pendingScript;
+    return {ok:true, url, body:new Uint8Array([32]), contentType:url.endsWith('.js') ? 'text/javascript' : 'video/mp4'};
+  },
+  videoDecoder: {
+    probe: async () => ({duration:10, video:{width:20, height:12}}),
+    decode: async () => ({width:20, height:12, fps:30,
+      nextFrame(w,h) { return new Uint8Array(w*h*4).fill(255); }, seek() {}, close() {}}),
+  },
+});
+
+try {
+  renderer.resize(64,36,1);
+  renderer.setScripting('host');
+  frames.length = 0;
+  const loading = scenario.startsWith('loading');
+  const media = scenario === 'video';
+  await renderer.loadDocument({url:'https://prepaint.test/', contentType:'text/html',
+    source:'<style>body{margin:0}#marker{height:500px;background:red}video{display:block;width:20px;height:12px}</style>'
+      + (media ? '<video id=v src="clip.mp4"></video>' : '') + '<div id=marker></div>'
+      + (loading ? '<script src="slow.js"></script>' : '')});
+
+  if (loading) {
+    await Bun.sleep(400);
+    assert(frames.length > 0);
+    assert(frames.every(tile => tile.height === 36), 'pending scripts must not expand an already visible tile');
+    if (scenario === 'loading-scroll') {
+      renderer.applyCompositorScroll(0,140);
+      await Bun.sleep(90);
+      assert(frames.some(tile => tile.y <= 140 && tile.y+tile.height >= 176),
+        'scrolling beyond the old tile must still paint while loading');
+    }
+    finishScript();
+    await renderer.whenLoaded();
+    // The script has no visual effect: refresh need not call render. The
+    // deferred prepaint still needs to wake and expand the unchanged tile.
+    await Bun.sleep(550);
+    assert(frames.some(tile => tile.height > 36), 'prepaint resumes after a no-op load settles');
+  } else {
+    await renderer.whenLoaded();
+    if (media) {
+      await renderer.evaluate('document.getElementById("v").play()');
+      await Bun.sleep(400);
+      assert(videos.some(message => message.type === 'video-open'));
+      assert(frames.some(tile => tile.height > 36 && tile.videoLayer),
+        'independent video playback alone must not block idle prepaint');
+    } else {
+      await renderer.evaluate('setTimeout(()=>document.documentElement.setAttribute("data-bookkeeping","changed"),1)');
+      await Bun.sleep(80);
+      assert(frames.every(tile => tile.height === 36), 'pending frame takes priority over speculative raster');
+      await Bun.sleep(550);
+      assert(frames.some(tile => tile.height > 36), 'prepaint resumes after a queued no-op frame');
+    }
+  }
+  assert.deepEqual(errors, []);
+  process.stdout.write(`prepaint ${scenario} passed\n`);
+} finally {
+  finishScript();
+  renderer.dispose();
+}

package/test/fixtures/resource-discovery.js

@@ -0,0 +1,32 @@
+// Host scripting is isolated from the test runner's globals.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { nodeOf } from "../../lib/renderer/bindings.js";
+const renderer = await createPageRenderer({
+  fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+});
+try {
+  renderer.resize(400, 300, 1);
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://resource.test/", contentType: "text/html",
+    source: '<!doctype html><style>body{color:red}</style><body>' + '<div>Item</div>'.repeat(100) + '</body>' });
+  await renderer.whenLoaded();
+  await renderer.evaluate("document.body.setAttribute('data-warm','1');document.body.clientWidth");
+  const document = nodeOf(globalThis.document), query = document.querySelectorAll.bind(document);
+  const watched = new Set(["video, audio", "img", "style, link[rel~='stylesheet']", "iframe"]);
+  const queries = [];
+  document.querySelectorAll = selector => {
+    if (watched.has(selector)) queries.push(selector);
+    return query(selector);
+  };
+  await renderer.evaluate(`for(let i=0;i<30;i++) {
+    document.body.setAttribute('data-counter',String(i));
+    document.body.setAttribute('aria-label',String(i));
+    document.body.clientWidth;
+  }`);
+  assert.deepEqual(queries, [], "metadata-only geometry flushes retain resource discovery");
+  await renderer.evaluate("document.body.insertAdjacentHTML('beforeend','<video></video>');document.body.clientWidth");
+  assert.ok(queries.includes("video, audio"), "structural insertion refreshes media discovery synchronously");
+  assert.equal(await renderer.evaluate("document.querySelector('video').offsetWidth"), 300);
+  process.stdout.write("resource discovery integration passed\n");
+} finally { renderer.dispose(); }