buninu-browser 0.5.1 → 0.7.0

package/test/style-propagation.test.js

@@ -0,0 +1,225 @@
+import { expect, test } from 'bun:test';
+import { parseHTMLDocument } from '../lib/happy-dom/parser.js';
+import { StyleEngine } from '../lib/style/computed-style.js';
+
+function fixture(source, sheets = []) {
+  const parsed = parseHTMLDocument(source);
+  const engine = new StyleEngine().compute(parsed.document, sheets);
+  return { ...parsed, engine, sheets, get: id => parsed.document.getElementById(id) };
+}
+function self(f, element = f.get('parent')) {
+  f.engine.compute(f.document, f.sheets, {}, new Set(), new Set([element]));
+}
+function fullOracle(f) {
+  const full = new StyleEngine().compute(f.document, f.sheets);
+  for (const element of f.document.querySelectorAll('*')) {
+    expect(f.engine.get(element)).toEqual(full.get(element));
+    expect(f.engine.customPropertiesOf(element)).toEqual(full.customPropertiesOf(element));
+    for (const pseudo of ['before', 'after']) expect(f.engine.getPseudo(element, pseudo)).toEqual(full.getPseudo(element, pseudo));
+  }
+}
+
+test('self-only width, padding and opacity updates preserve unaffected descendant styles', () => {
+  const f = fixture('<div id="parent"><span id="child"><b id="grandchild">text</b></span></div>');
+  try {
+    const before = [f.get('child'), f.get('grandchild')].map(element => f.engine.get(element));
+    for (const [property, value] of [['width', '180px'], ['padding', '5px'], ['opacity', '.4']]) {
+      f.get('parent').style[property] = value;
+      self(f);
+      expect(f.engine.restyled).toBe(1);
+      expect(f.engine.get(f.get('child'))).toBe(before[0]);
+      expect(f.engine.get(f.get('grandchild'))).toBe(before[1]);
+      fullOracle(f);
+    }
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('explicit inheritance propagates through dependent children and stops at unchanged ones', () => {
+  const f = fixture(`<div id="parent" style="width:100px">
+    <div id="child" style="width:inherit"><span id="chain" style="width:inherit">chain</span></div>
+    <div id="barrier" style="width:80px"><span id="shielded" style="width:inherit">shielded</span></div></div>`);
+  try {
+    const shielded = f.engine.get(f.get('shielded'));
+    f.get('parent').style.width = '200px';
+    self(f);
+    expect(f.engine.restyled).toBe(3);
+    expect(f.engine.get(f.get('chain')).width).toBe(200);
+    expect(f.engine.get(f.get('shielded'))).toBe(shielded);
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('dependency metadata changes even when the computed-style identity is retained', () => {
+  const f = fixture('<div id="parent" style="width:100px"><span id="child" style="width:100px">text</span></div>');
+  try {
+    const before = f.engine.get(f.get('child'));
+    f.get('child').style.width = 'inherit';
+    self(f, f.get('child'));
+    expect(f.engine.get(f.get('child'))).toBe(before);
+    f.get('parent').style.width = '200px';
+    self(f);
+    expect(f.engine.restyled).toBe(2);
+    expect(f.engine.get(f.get('child')).width).toBe(200);
+    const inherited = f.engine.get(f.get('child'));
+    f.get('child').style.width = '200px';
+    self(f, f.get('child'));
+    expect(f.engine.get(f.get('child'))).toBe(inherited);
+    f.get('parent').style.width = '300px';
+    self(f);
+    expect(f.engine.restyled).toBe(1);
+    expect(f.engine.get(f.get('child')).width).toBe(200);
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+for (const [name, parentStyle, childStyle, property, value, field, expected] of [
+  ['resolved variable', 'width:100px;--choice:inherit', 'width:var(--choice)', 'width', '200px', 'width', 200],
+  ['variable fallback', 'width:100px', 'width:var(--missing,inherit)', 'width', '200px', 'width', 200],
+  ['all shorthand', 'width:100px', 'all:inherit', 'width', '200px', 'width', 200],
+  ['variable all shorthand', 'width:100px;--choice:inherit', 'all:var(--choice)', 'width', '200px', 'width', 200],
+  ['logical size', 'width:100px', 'inline-size:inherit', 'width', '200px', 'width', 200],
+  ['margin shorthand', 'margin:1px', 'margin:inherit', 'margin', '8px', 'margin', [8,8,8,8]],
+  ['logical padding shorthand', 'padding:1px', 'padding-inline:inherit', 'padding', '8px', 'padding', [0,8,0,8]],
+  ['border shorthand', 'border:1px solid red', 'border:inherit', 'borderWidth', '3px', 'borderWidths', [3,3,3,3]],
+]) {
+  test(`${name} records explicit parent dependencies`, () => {
+    const f = fixture(`<div id="parent" style="${parentStyle}"><span id="child" style="${childStyle}">text</span></div>`);
+    try {
+      f.get('parent').style[property] = value;
+      self(f);
+      expect(f.engine.get(f.get('child'))[field]).toEqual(expected);
+      fullOracle(f);
+    } finally { f.window.happyDOM.abort(); }
+  });
+}
+
+test('UA table inheritance propagates vertical alignment through rows and cells', () => {
+  const f = fixture('<table><tbody id="parent" style="vertical-align:top"><tr id="row"><td id="child">cell</td></tr></tbody></table>');
+  try {
+    f.get('parent').style.verticalAlign = 'bottom';
+    self(f);
+    expect(f.engine.restyled).toBe(3);
+    expect(f.engine.get(f.get('row')).verticalAlign).toBe('bottom');
+    expect(f.engine.get(f.get('child')).verticalAlign).toBe('bottom');
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('stylesheet and pseudo inheritance follow the originating element', () => {
+  const f = fixture('<div id="parent" style="width:100px"><span id="child">text</span></div>', [
+    '#child { width:inherit } #child::before { content:"x";width:var(--missing,inherit) } #parent[data-ready]::after { content:"ready" }',
+  ]);
+  try {
+    f.get('parent').style.width = '200px';
+    self(f);
+    expect(f.engine.getPseudo(f.get('child'), 'before').width).toBe(200);
+    fullOracle(f);
+    const child = f.engine.get(f.get('child'));
+    f.get('parent').setAttribute('data-ready', '');
+    self(f);
+    expect(f.engine.restyled).toBe(1);
+    expect(f.engine.get(f.get('child'))).toBe(child);
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+for (const [name, parentStyle, childStyle, property, value, field, expected] of [
+  ['color scheme', 'color-scheme:light', 'color:light-dark(red,blue)', 'colorScheme', 'dark', 'color', 'rgba(0, 0, 255, 1)'],
+  ['line-height factor at equal parent height', 'font-size:10px;line-height:2', 'font-size:20px', 'lineHeight', '20px', 'lineHeight', 20],
+  ['parent display and float suppression', 'display:block', 'float:left', 'display', 'flex', 'float', 'none'],
+  ['font shorthand', 'font:16px serif', 'font:inherit', 'font', 'italic 20px monospace', 'fontSize', 20],
+]) {
+  test(`${name} keeps full inherited-input propagation`, () => {
+    const f = fixture(`<div id="parent" style="${parentStyle}"><div id="child" style="${childStyle}"><span>descendant</span></div></div>`);
+    try {
+      f.get('parent').style[property] = value;
+      self(f);
+      expect(f.engine.restyled).toBe(3);
+      expect(f.engine.get(f.get('child'))[field]).toEqual(expected);
+      fullOracle(f);
+    } finally { f.window.happyDOM.abort(); }
+  });
+}
+
+test('font inheritance is recorded even when a non-font parent property changes', () => {
+  const f = fixture('<div id="parent"><span id="child" style="font:inherit">text</span></div>');
+  try {
+    f.get('parent').style.width = '200px';
+    self(f);
+    expect(f.engine.restyled).toBe(2);
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('custom properties and propagated decorations remain descendant inputs', () => {
+  const f = fixture('<div id="parent" style="--tone:red"><span id="child" style="color:var(--tone)"><i>descendant</i></span></div>');
+  try {
+    const parent = f.engine.get(f.get('parent'));
+    f.get('parent').style.setProperty('--tone', 'blue');
+    self(f);
+    expect(f.engine.get(f.get('parent'))).toBe(parent);
+    expect(f.engine.restyled).toBe(3);
+    expect(f.engine.get(f.get('child')).color).toBe('rgba(0, 0, 255, 1)');
+    fullOracle(f);
+    f.get('parent').style.textDecoration = 'underline';
+    self(f);
+    expect(f.engine.restyled).toBe(3);
+    expect(f.engine.get(f.get('child')).textDecorations.lines).toContain('underline');
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('root font changes reach rem descendants behind a fixed-font child', () => {
+  const f = fixture('<html style="font-size:16px"><body style="font-size:8px"><div id="child" style="width:2rem">text</div></body></html>');
+  try {
+    f.document.documentElement.style.fontSize = '20px';
+    self(f, f.document.documentElement);
+    expect(f.engine.get(f.get('child')).width).toBe(40);
+    expect(f.engine.get(f.get('child')).fontSize).toBe(8);
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('partial root propagation keeps independently dirty roots and self-only descendants', () => {
+  const f = fixture('<html style="width:100px"><body style="width:inherit"><div id="subtree"><span id="child">text</span></div><p id="other">other</p></body></html>');
+  try {
+    const root = f.document.documentElement;
+    root.style.width = '200px';
+    f.get('subtree').style.color = 'red';
+    f.get('other').style.color = 'blue';
+    f.engine.compute(f.document, f.sheets, {}, new Set([f.get('subtree')]), new Set([root, f.get('other')]));
+    expect(f.engine.get(f.document.body).width).toBe(200);
+    expect(f.engine.get(f.get('child')).color).toBe('rgba(255, 0, 0, 1)');
+    expect(f.engine.get(f.get('other')).color).toBe('rgba(0, 0, 255, 1)');
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('unknown children receive a full first style pass during partial propagation', () => {
+  const f = fixture('<div id="parent"><span>old</span></div>');
+  try {
+    f.get('parent').insertAdjacentHTML('beforeend', '<span id="new" style="width:inherit"><b id="nested">new</b></span>');
+    f.get('parent').style.width = '200px';
+    self(f);
+    expect(f.engine.restyled).toBe(3);
+    expect(f.engine.get(f.get('new')).width).toBe(200);
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('an explicitly dirty selector subtree still receives the complete traversal', () => {
+  const f = fixture('<div id="parent"><span id="child">text</span></div>', ['.active span { color:red }']);
+  try {
+    f.get('parent').className = 'active';
+    f.engine.compute(f.document, f.sheets, {}, new Set([f.get('parent')]));
+    expect(f.engine.restyled).toBe(2);
+    expect(f.engine.get(f.get('child')).color).toBe('rgba(255, 0, 0, 1)');
+    fullOracle(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('a 600-child style update prunes unchanged descendants under SES', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/style-propagation.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({exit,stdout,stderr}).toEqual({exit:0,stdout:'',stderr:''});
+}, 15_000);

package/test/style-sheets.test.js

@@ -49,3 +49,22 @@ test("linked sheet media can change without refetching and disabled sheets fetch
   expect(await read()).toBe("rgba(0, 0, 255, 1)");
   expect(requests).toEqual(["https://style.test/linked.css", "https://style.test/disabled.css"]);
 });
+
+test("cached discovery observes rel, sheet text, base URL and detached/reinserted sheets", async () => {
+  requests.length = 0;
+  await load(`<!doctype html><base href="/first/"><style id="inline">#target{color:red}</style>
+    <link id="linked" rel="preload" href="dynamic.css"><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  expect(requests).toEqual([]);
+  await read("document.querySelector('base').href='/second/';document.getElementById('linked').rel='stylesheet'");
+  const deadline = Date.now() + 3000;
+  while (await read() !== "rgba(0, 0, 255, 1)" && Date.now() < deadline) await Bun.sleep(10);
+  expect(await read()).toBe("rgba(0, 0, 255, 1)");
+  expect(requests).toEqual(["https://style.test/second/dynamic.css"]);
+  expect(await read("document.getElementById('linked').rel='preload'")).toBe("rgba(255, 0, 0, 1)");
+  expect(await read("document.getElementById('inline').firstChild.data='#target{color:green}'")).toBe("rgba(0, 128, 0, 1)");
+  expect(await read("window.saved=document.getElementById('linked');saved.rel='stylesheet';saved.remove()"))
+    .toBe("rgba(0, 128, 0, 1)");
+  expect(await read("document.head.append(saved)")).toBe("rgba(0, 0, 255, 1)");
+  expect(requests).toHaveLength(1);
+});

package/test/svg.test.js

@@ -88,3 +88,48 @@ test("inline SVG is a replaced box with margins and vertical-align in the line",
   expect(items.find((item) => item.op === "drawSvg")).toMatchObject({ rect: { x: 0, width: 16, height: 16 } });
   window.happyDOM.abort();
 });
+
+test("unchanged SVG nodes and their containers survive unrelated content edits", () => {
+  const { document, window } = parseHTMLDocument(`<main><section><svg viewBox="0 0 24 24" width="24" height="24">
+    <g transform="translate(2 3)"><path d="M0 0h4v4z" fill="currentColor"/></g>
+  </svg></section><p>before</p></main>`);
+  try {
+    const styles = new StyleEngine().compute(document), builder = new RenderTreeBuilder();
+    const before = builder.build(document, styles);
+    expect(builder.build(document, styles).root).toBe(before.root);
+    document.querySelector("p").firstChild.data = "after";
+    const after = builder.build(document, styles);
+    for (const node of before.nodesById.values()) if (["SVG", "SECTION"].includes(node.tagName)) {
+      expect(after.nodesById.get(node.id)).toBe(node);
+    }
+    expect(after.root).not.toBe(before.root);
+  } finally { window.happyDOM.abort(); }
+});
+
+test("SVG reuse compares transform numbers exactly, including overflow", () => {
+  const { document, window } = parseHTMLDocument(`<svg width="24" height="24">
+    <g transform="scale(1e308) scale(1e308)"><path d="M0 0h4v4z"/></g></svg>`);
+  try {
+    const styles = new StyleEngine().compute(document), builder = new RenderTreeBuilder();
+    const icon = tree => [...tree.nodesById.values()].find(node => node.tagName === "SVG");
+    const before = icon(builder.build(document, styles));
+    document.querySelector("g").setAttribute("transform", "scale(1e308) scale(-1e308)");
+    const after = icon(builder.build(document, styles));
+    // JSON turns both infinities and NaN into null; those are not equal
+    // extracted matrices, even though their JSON representations coincide.
+    expect(JSON.stringify(after.svg)).toBe(JSON.stringify(before.svg));
+    expect(after).not.toBe(before);
+    expect(before.svg.shapes[0].matrix[0]).toBe(Infinity);
+    expect(after.svg.shapes[0].matrix[0]).toBe(-Infinity);
+    expect(icon(builder.build(document, styles))).toBe(after);
+  } finally { window.happyDOM.abort(); }
+});
+
+test("retained SVG layout and edited SVG paint match fresh renderer pixels", async () => {
+  const result = Bun.spawnSync([process.execPath, new URL("fixtures/svg-node-reuse.js", import.meta.url).pathname], {
+    stdout: "pipe", stderr: "pipe",
+  });
+  expect(new TextDecoder().decode(result.stderr)).toBe("");
+  expect(result.exitCode).toBe(0);
+  expect(new TextDecoder().decode(result.stdout)).toContain("SVG node reuse renderer oracle passed");
+}, 60_000);

package/test/timers.test.js

@@ -0,0 +1,58 @@
+import { expect, test } from 'bun:test';
+import { createTimers } from '../lib/renderer/timers.js';
+function fixture() {
+  let id=0, handle=0;
+  const pending=new Map(), tasks=new Map(), delays=[], errors=[];
+  const timers=createTimers({nextId:()=>++id, invoke(fn){try{fn();}catch(error){errors.push(error.message);}},
+    setTimer(callback,delay){delays.push(delay);pending.set(++handle,callback);return handle;},
+    clearTimer(handle){pending.delete(handle);},
+    queueTask(callback){tasks.set(++handle,callback);return handle;},clearTask(handle){tasks.delete(handle);}});
+  const fire=()=>{const [handle,callback]=pending.entries().next().value;pending.delete(handle);callback();};
+  const checkpoint=()=>{for(const [handle,callback] of [...tasks]){tasks.delete(handle);callback();}};
+  return {timers,pending,tasks,delays,errors,fire,checkpoint};
+}
+test('timer delay is converted once to a Web IDL long before repeats',()=>{
+  const f=fixture();let conversions=0,calls=0,id;
+  id=f.timers.schedule(()=>{if(++calls===9)f.timers.cancel(id);},{valueOf(){conversions++;return 0;}},true);
+  for(let i=0;i<9;i++){f.fire();f.checkpoint();}
+  expect(conversions).toBe(1);expect(calls).toBe(9);
+  expect(f.delays).toEqual([0,0,0,0,0,0,4,4,4,4]);
+  expect(f.pending.size).toBe(0);f.timers.dispose();expect(f.tasks.size).toBe(0);
+});
+test('nested timeout, Promise chains and queueMicrotask share timer nesting',async()=>{
+  for(const defer of [fn=>fn(),fn=>Promise.resolve().then(fn),fn=>Promise.resolve().then(()=>{}).then(()=>{}).then(fn),fn=>queueMicrotask(fn)]){
+    const f=fixture();let count=0;
+    const step=()=>{if(++count<9)defer(()=>f.timers.schedule(step,0));};
+    f.timers.schedule(step,0);
+    for(let i=0;i<9;i++){f.fire();for(let n=0;n<5;n++)await Promise.resolve();f.checkpoint();}
+    expect(f.delays).toEqual([0,0,0,0,0,0,4,4,4]);f.timers.dispose();
+  }
+});
+test('a later task or deferred promise cannot inherit a finished timer task',async()=>{
+  const f=fixture();let count=0,resolveLate;
+  const step=()=>{if(++count<7)f.timers.schedule(step,0);else{
+    Promise.resolve().then(()=>f.timers.schedule(()=>{},0));
+    new Promise(resolve=>resolveLate=resolve).then(()=>f.timers.schedule(()=>{},0));
+  }};
+  f.timers.schedule(step,0);
+  for(let i=0;i<7;i++){f.fire();await Promise.resolve();f.checkpoint();}
+  expect(f.delays.at(-1)).toBe(4);
+  resolveLate();await Promise.resolve();expect(f.delays.at(-1)).toBe(0);
+  f.timers.schedule(()=>{},0);expect(f.delays.at(-1)).toBe(0);f.timers.dispose();
+});
+test('signed delay conversion rejects invalid conversions synchronously without queuing',()=>{
+  const f=fixture();for(const value of [undefined,-1,Infinity,NaN,2147483648,4294967296])f.timers.schedule(()=>{},value);
+  f.timers.schedule(()=>{},4294967301);f.timers.schedule(()=>{},2.9);
+  expect(f.delays).toEqual([0,0,0,0,0,0,5,2]);
+  expect(()=>f.timers.schedule(()=>{},1n)).toThrow(TypeError);
+  expect(()=>f.timers.schedule(()=>{},Symbol())).toThrow(TypeError);
+  expect(()=>f.timers.schedule(()=>{},{valueOf(){throw Error('delay failure');}})).toThrow('delay failure');
+  expect(f.delays).toHaveLength(8);f.timers.dispose();
+});
+test('cancel inside callback, exceptions and disposal keep one live repeat and no late tasks',()=>{
+  const f=fixture();let calls=0,id=f.timers.schedule(()=>{calls++;if(calls===1)throw Error('tick');else f.timers.cancel(id);},1,true);
+  f.fire();expect(f.pending.size).toBe(1);f.checkpoint();f.fire();expect(f.pending.size).toBe(0);expect(f.errors).toEqual(['tick']);
+  const never=f.timers.schedule(()=>{throw Error('canceled');},0);f.timers.cancel(never);expect(f.pending.size).toBe(0);
+  f.timers.schedule(()=>f.timers.dispose(),0,true);f.fire();expect(f.pending.size).toBe(0);expect(f.tasks.size).toBe(0);
+  f.timers.schedule(()=>{throw Error('disposed');},0);expect(f.pending.size).toBe(0);
+});

package/test/video-black-replay.test.js

@@ -0,0 +1,34 @@
+import {expect, test} from 'bun:test';
+import {videoLayerGeometry} from '../lib/renderer/video-mask.js';
+
+test('video replay rejects nonfinite painter and final compositor coordinates', () => {
+  const item = {rect:{x:12,y:14,width:640,height:360}};
+  expect(videoLayerGeometry(item,{x:0,y:0},1.25)).toEqual({
+    rect:{x:15,y:18,width:800,height:450},replayable:true,
+  });
+  for (const changed of [
+    {...item,fixed:true}, {...item,rect:{...item.rect,width:0}},
+    {...item,rect:{...item.rect,x:NaN}}, {...item,rect:{...item.rect,height:Infinity}},
+    {...item,transform:{a:1,b:.1,c:0,d:1,e:0,f:0}},
+    {...item,transform:{a:-1,b:0,c:0,d:1,e:0,f:0}},
+    {...item,transform:{a:1e308,b:0,c:0,d:1,e:0,f:0}},
+  ]) expect(videoLayerGeometry(changed,{x:0,y:0},1.25).replayable).toBe(false);
+  expect(videoLayerGeometry(item,{x:0,y:0},1e308).replayable).toBe(false);
+  // The painter's reordered expression remains finite here; the compositor's
+  // actual subtraction overflows before its tiny scale can reduce the value.
+  const overflow = videoLayerGeometry({rect:{x:0,y:0,width:1e308,height:1e308},
+    transform:{a:1,b:0,c:0,d:1,e:-1e308,f:0}}, {x:1e308,y:0},1e-308);
+  expect(overflow.rect.x).toBe(-Infinity);
+  expect(overflow.replayable).toBe(false);
+});
+
+test('opaque shared video reuses black raster with compositor pixels and conservative fallbacks', async () => {
+  const child = Bun.spawn([process.execPath,new URL('./fixtures/video-black-replay.js',import.meta.url).pathname],{
+    stdout:'pipe',stderr:'pipe',
+  });
+  const [out,error,code] = await Promise.all([
+    new Response(child.stdout).text(),new Response(child.stderr).text(),child.exited,
+  ]);
+  expect({code,error}).toEqual({code:0,error:''});
+  expect(out).toContain('video black replay integration passed');
+},30_000);

package/test/video-capture.test.js

@@ -0,0 +1,170 @@
+import {expect, test} from 'bun:test';
+import {captureViewport, rawFrame} from '../lib/paint/frame.js';
+import {FrameLeaseTracker} from '../lib/paint/shared-frame-pool.js';
+import {captureVideoViewport, compositeVideo} from '../lib/renderer/video-presentation.js';
+
+function fixture(width = 19, height = 31, sourceOffset = 0, shared = false) {
+  const base = new Uint8Array(shared ? new SharedArrayBuffer(width * height * 4) : new ArrayBuffer(width * height * 4));
+  const mask = new Uint8Array(base.length);
+  for (let i = 0; i < width * height; i++) {
+    const at = i * 4, kind = i < width * 4 ? 0 : i % 4;
+    base.set(kind === 2 ? [20, 30, 40, 200] : [0, 0, 0, kind === 1 ? 93 : 255], at);
+    if (kind !== 3) mask.set(kind === 2 ? [127, 80, 190, 0] : [255, 255, 255, 0], at);
+  }
+  const pixels = new Uint8Array(new ArrayBuffer(5 * 7 * 4 + sourceOffset), sourceOffset);
+  for (let i = 0; i < pixels.length; i++) pixels[i] = i * 71 % 256;
+  return {
+    tile: {x:3.2, y:8.7, width:width/1.25, height:height/1.25, scale:1.25,
+      pixelWidth:width, pixelHeight:height, pixels:base, background:[12, 34, 56, 128],
+      videoLayer:{base, mask, rect:{x:-1.25, y:0.6, width:22.5, height:30.2}}},
+    frame: {width:5, height:7, pixels},
+  };
+}
+
+function compare(tile, frame, viewport, clip, format) {
+  const whole = compositeVideo(tile, frame, format);
+  const expected = captureViewport(whole, ...viewport, clip);
+  const actual = captureVideoViewport(tile, frame, ...viewport, clip, format);
+  expect(actual).not.toBeNull();
+  expect([actual.width, actual.height]).toEqual([expected.width, expected.height]);
+  expect(actual.pixels).toEqual(expected.pixels);
+  expect(actual.pixels.buffer).not.toBe(tile.pixels.buffer);
+  expect(actual.pixels.buffer).not.toBe(tile.videoLayer.base.buffer);
+  expect(actual.pixels.buffer.byteLength).toBe(actual.width * actual.height * 4);
+  expect(actual.pixelFormat).toBe(format);
+  whole.pixels.buffer.transfer(0);
+  actual.pixels.buffer.transfer(0);
+}
+
+test('viewport-first video preserves fractional clip phase, clipped masks, alpha and outside background', () => {
+  for (const offset of [0, 1]) {
+    const {tile, frame} = fixture(19, 31, offset);
+    const original = new Uint8Array(tile.pixels), mask = new Uint8Array(tile.videoLayer.mask);
+    for (const format of ['rgba', 'bgra']) {
+      // Full-width zero-copy base crop, then partial and completely outside
+      // crops. A fractional viewport without clip keeps its floor semantics.
+      for (const viewport of [[3.2, 13.1, 15.2, 6.3], [4.13, 17.91, 7.3, 9.8], [-5, -4, 12, 15], [90, 90, 8, 5]]) {
+        compare(tile, frame, viewport, undefined, format);
+        compare(tile, frame, viewport, {x:viewport[0], y:viewport[1], width:viewport[2], height:viewport[3], scale:1}, format);
+      }
+      frame.pixels[0] ^= 255;
+      compare(tile, frame, [3.2, 13.1, 15.2, 6.3], undefined, format);
+    }
+    expect(tile.pixels).toEqual(original);
+    expect(tile.videoLayer.mask).toEqual(mask);
+  }
+});
+
+test('original tile coordinates remain exact over changing DPR, crop and decoded dimensions', () => {
+  let seed = 0x831d24;
+  const random = () => ((seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0) / 0x100000000);
+  for (let sample = 0; sample < 150; sample++) {
+    const {tile, frame} = fixture(1 + Math.floor(random() * 29), 1 + Math.floor(random() * 37), sample % 2);
+    tile.scale = [0.75, 1, 1.25, 1.5, 2.25][sample % 5];
+    tile.width = tile.pixelWidth / tile.scale;
+    tile.height = tile.pixelHeight / tile.scale;
+    tile.videoLayer.rect = {x:random() * 12 - 6, y:random() * 12 - 6,
+      width:0.2 + random() * 34, height:0.2 + random() * 43};
+    const viewport = [random() * 24 - 8, random() * 35 - 8, 0.2 + random() * 26, 0.2 + random() * 22];
+    const clip = sample % 3 ? {x:viewport[0], y:viewport[1], width:viewport[2], height:viewport[3], scale:1} : undefined;
+    compare(tile, frame, viewport, clip, sample % 2 ? 'bgra' : 'rgba');
+    // Reusing this layer with another crop/decoded size must rebuild only the
+    // geometry plan, never retain pixels from an earlier decoded frame.
+    frame.width = 7; frame.height = 5;
+    frame.pixels[0] ^= 127;
+    viewport[1] += 0.49 / tile.scale;
+    compare(tile, frame, viewport, clip && {...clip, y:viewport[1]}, sample % 2 ? 'rgba' : 'bgra');
+  }
+});
+
+test('unsupported scaled clips keep the original path and invalid unit-scale clips still reject', () => {
+  const {tile, frame} = fixture();
+  for (const scale of [0, 0.5, 2, NaN]) expect(captureVideoViewport(tile, frame, 0, 0, 5, 5,
+    {x:0, y:0, width:5, height:5, scale})).toBeNull();
+  expect(captureVideoViewport(tile, null, 0, 0, 5, 5)).toBeNull();
+  expect(captureVideoViewport({...tile, videoLayer:null}, frame, 0, 0, 5, 5)).toBeNull();
+  for (const clip of [{x:NaN, y:0, width:5, height:5, scale:1}, {x:0, y:0, width:0, height:5, scale:1},
+    {x:0, y:0, width:9000, height:5, scale:1}]) expect(() => captureVideoViewport(tile, frame, 0, 0, 5, 5, clip)).toThrow();
+});
+
+test('raw cropped captures own their buffers independently of recyclable frame leases', async () => {
+  const {tile, frame} = fixture(20, 40, 0, true);
+  const released = [], leases = new FrameLeaseTracker(serial => released.push(serial));
+  leases.replace(1, tile);
+  const result = await leases.capture(retained => {
+    const capture = captureVideoViewport(retained, frame, tile.x, tile.y + 4, 16, 8, undefined, 'bgra');
+    return rawFrame(capture.pixels, capture.width, capture.height, 'bgra', {takeOwnership:true, inputFormat:capture.pixelFormat});
+  });
+  const expected = new Uint8Array(result.pixels);
+  leases.replace(2, {...tile});
+  expect(released).toEqual([1]);
+  tile.videoLayer.base.fill(42);
+  expect(result.pixels).toEqual(expected);
+  result.pixels.buffer.transfer(0);
+  expect(tile.pixels.byteLength).toBe(20 * 40 * 4);
+  expect(frame.pixels.byteLength).toBe(5 * 7 * 4);
+});
+
+test('opaque-run skipping initializes dirty allocations, including unaligned sources and preserved alpha', () => {
+  const allocate = Bun.allocUnsafe;
+  let allocations = 0;
+  Bun.allocUnsafe = size => { allocations++; return new Uint8Array(size).fill(0xa5); };
+  try {
+    for (const offset of [0, 1]) for (const rectHeight of [4, 30.2]) {
+      const {tile, frame} = fixture(20, 40, offset);
+      tile.videoLayer.rect.height = rectHeight;
+      const base = new Uint8Array(tile.videoLayer.base);
+      // A full-width crop borrows the base. Alternate channel order and crop
+      // origins to invalidate cached source views, while reusing the layer.
+      for (const format of ['rgba', 'bgra', 'rgba']) for (const y of [tile.y, tile.y + 4, tile.y]) {
+        compare(tile, frame, [tile.x, y, 16, 8], undefined, format);
+        frame.pixels[0] ^= 127;
+      }
+      expect(tile.videoLayer.base).toEqual(base);
+    }
+    expect(allocations).toBe(36);
+  } finally { Bun.allocUnsafe = allocate; }
+});
+
+test('an entirely opaque capture writes every channel while a capture without opaque runs copies every byte', () => {
+  const allocate = Bun.allocUnsafe;
+  Bun.allocUnsafe = size => new Uint8Array(size).fill(0xa5);
+  try {
+    for (const offset of [0, 1]) for (const opaque of [false, true]) {
+      const {tile, frame} = fixture(20, 40, offset);
+      tile.videoLayer.rect = {x:0, y:0, width:20, height:40};
+      tile.videoLayer.base.fill(0);
+      for (let i=3;i<tile.videoLayer.base.length;i+=4) tile.videoLayer.base[i] = 255;
+      tile.videoLayer.mask.fill(opaque ? 255 : 0);
+      for (const format of ['rgba', 'bgra']) compare(tile, frame, [tile.x, tile.y, 16, 8], undefined, format);
+    }
+  } finally { Bun.allocUnsafe = allocate; }
+});
+
+test('unexpected pooled allocations fall back to independently owned aligned capture bytes', () => {
+  const allocate = Bun.allocUnsafe, borrowed = [];
+  Bun.allocUnsafe = size => {
+    const pixels = new Uint8Array(size + 8).subarray(4, size + 4);
+    borrowed.push(pixels);
+    return pixels;
+  };
+  try {
+    const {tile, frame} = fixture(20, 40);
+    for (const format of ['rgba', 'bgra']) compare(tile, frame, [tile.x, tile.y, 16, 8], undefined, format);
+    expect(borrowed).toHaveLength(2);
+    // compare() detached the returned captures; the unexpected pool is intact.
+    expect(borrowed.every(pixels => pixels.byteLength === 20 * 10 * 4)).toBe(true);
+  } finally { Bun.allocUnsafe = allocate; }
+});
+
+test('partial-width and out-of-tile crops preserve the initialized crop fallback', () => {
+  const allocate = Bun.allocUnsafe;
+  Bun.allocUnsafe = () => { throw Error('noncontiguous crops already own their initialized pixels'); };
+  try {
+    const {tile, frame} = fixture(20, 40, 1);
+    for (const format of ['rgba', 'bgra']) {
+      compare(tile, frame, [tile.x + 1, tile.y, 12, 8], undefined, format);
+      compare(tile, frame, [tile.x - 4, tile.y - 3, 16, 8], undefined, format);
+    }
+  } finally { Bun.allocUnsafe = allocate; }
+});