buninu-browser 0.5.1 → 0.7.0

package/test/idle-callback.test.js

@@ -0,0 +1,89 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { RendererHost } from "../lib/renderer/host.js";
+
+let renderer;
+beforeAll(async () => {
+  renderer = new RendererHost({ timeout: 20_000 });
+  await renderer.start();
+  await renderer.call("loadDocument", {
+    url: "https://page.test/", source: "<!doctype html><p>idle callbacks</p>",
+    contentType: "text/html", status: 200,
+  });
+  await renderer.call("whenLoaded");
+});
+afterAll(() => renderer?.close());
+const evaluate = (source) => renderer.call("evaluate", source);
+
+test("idle work consumes its monotonic budget and yields", async () => {
+  const result = await evaluate(`new Promise(resolve => requestIdleCallback(deadline => {
+    const start = performance.now(), before = deadline.timeRemaining();
+    // Bound the regression: the old constant deadline must not hang the test.
+    while (deadline.timeRemaining() > 0 && performance.now() - start < 30) {}
+    resolve({before, after: deadline.timeRemaining(), didTimeout: deadline.didTimeout});
+  }))`);
+  expect(result.before).toBeGreaterThanOrEqual(0);
+  expect(result.before).toBeLessThanOrEqual(10);
+  expect(result.after).toBe(0);
+  expect(result.didTimeout).toBeFalse();
+});
+
+test("a burst of idle work does not drain before an ordinary due timer", async () => {
+  const result = await evaluate(`new Promise(resolve => {
+    let completed = 0, whenTimer = null;
+    const finish = () => { if (completed === 16 && whenTimer !== null) resolve({completed, whenTimer}); };
+    for (let i = 0; i < 16; i++) requestIdleCallback(deadline => {
+      const start = performance.now();
+      while (deadline.timeRemaining() > 0 && performance.now() - start < 30) {}
+      completed++; finish();
+    });
+    setTimeout(() => { whenTimer = completed; finish(); }, 20);
+  })`);
+  expect(result.completed).toBe(16);
+  // Check task ordering, rather than imposing a real-clock upper bound on a
+  // slow CI machine. The old separate 1ms timers drain all sixteen first.
+  expect(result.whenTimer).toBeLessThan(16);
+});
+
+test("an expired timeout has no idle budget", async () => {
+  const result = await evaluate(`new Promise(resolve => {
+    requestIdleCallback(deadline => resolve({
+      didTimeout: deadline.didTimeout, remaining: deadline.timeRemaining()
+    }), {timeout: 1});
+    const start = performance.now();
+    while (performance.now() - start < 20) {}
+  })`);
+  expect(result).toEqual({ didTimeout: true, remaining: 0 });
+});
+
+test("zero timeout does not expire and cancellation prevents delivery", async () => {
+  const result = await evaluate(`new Promise(resolve => {
+    const calls = [];
+    const id = requestIdleCallback(() => calls.push("cancelled"), {timeout: 1});
+    cancelIdleCallback(id);
+    requestIdleCallback(deadline => {
+      calls.push(deadline.didTimeout);
+      setTimeout(() => resolve(calls), 10);
+    }, {timeout: 0});
+    const start = performance.now();
+    while (performance.now() - start < 10) {}
+  })`);
+  expect(result).toEqual([false]);
+});
+
+test("a timeout above the host timer limit does not expire immediately", async () => {
+  const result = await evaluate(`new Promise(resolve => {
+    requestIdleCallback(deadline => resolve({didTimeout: deadline.didTimeout}), {timeout: 2147483648});
+  })`);
+  expect(result).toEqual({ didTimeout: false });
+});
+
+test("idle callbacks validate their Web IDL inputs", async () => {
+  expect(await evaluate(`(() => {
+    const failures = [];
+    for (const args of [[null], ["code"], [() => {}, 1], [() => {}, {timeout: Symbol()}]]) {
+      try { requestIdleCallback(...args); failures.push(false); }
+      catch (error) { failures.push(error.name === "TypeError"); }
+    }
+    return failures;
+  })()`)).toEqual([true, true, true, true]);
+});

package/test/idle-scheduler.test.js

@@ -0,0 +1,148 @@
+import { expect, test } from 'bun:test';
+import { createIdleCallbacks } from '../lib/renderer/idle-callbacks.js';
+
+function fixture() {
+  let time = 0, id = 0;
+  const tasks = new Map(), errors = [];
+  const clock = {
+    now: () => time,
+    consume: ms => { time += ms; },
+    setTimer(callback, delay) {
+      const handle = ++id;
+      tasks.set(handle, { callback, at: time + Math.max(1, delay) });
+      return handle;
+    },
+    clearTimer: handle => tasks.delete(handle),
+    run() {
+      let iterations = 0;
+      while (tasks.size) {
+        if (++iterations > 1000) throw new Error('Idle scheduler did not finish');
+        const [handle, task] = [...tasks].sort((a, b) => a[1].at - b[1].at || a[0] - b[0])[0];
+        tasks.delete(handle);
+        time = Math.max(time, task.at);
+        task.callback();
+      }
+    },
+  };
+  const idle = createIdleCallbacks({ ...clock, invoke(callback, deadline) {
+    try { callback(deadline); } catch (error) { errors.push(error.message); }
+  } });
+  return { clock, idle, tasks, errors };
+}
+
+test('a burst of cooperative idle work gives an already due timer a turn', () => {
+  const { clock, idle, tasks } = fixture();
+  let completed = 0, timer;
+  for (let i = 0; i < 16; i++) idle.request(i, deadline => {
+    expect(deadline.didTimeout).toBe(false);
+    clock.consume(deadline.timeRemaining());
+    expect(deadline.timeRemaining()).toBe(0);
+    completed++;
+  }, 0);
+  clock.setTimer(() => { timer = { at: clock.now(), completed }; }, 20);
+  // Sixteen requests share one dispatch task; they are not sixteen overdue timers.
+  expect(tasks.size).toBe(2);
+  clock.run();
+  expect(timer).toEqual({ at: 22, completed: 2 });
+  expect(completed).toBe(16);
+  expect(tasks.size).toBe(0);
+});
+
+test('callbacks share their period deadline and nested requests wait for the next period', () => {
+  const { clock, idle } = fixture();
+  const seen = [];
+  idle.request(1, deadline => {
+    seen.push({ id: 1, at: clock.now(), budget: deadline.timeRemaining() });
+    idle.request(3, nested => seen.push({ id: 3, at: clock.now(), budget: nested.timeRemaining() }), 0);
+    clock.consume(3);
+  }, 0);
+  idle.request(2, deadline => seen.push({ id: 2, at: clock.now(), budget: deadline.timeRemaining() }), 0);
+  clock.run();
+  expect(seen).toEqual([{ id: 1, at: 1, budget: 10 }, { id: 2, at: 5, budget: 6 }, { id: 3, at: 11, budget: 10 }]);
+});
+
+test('positive timeout interrupts an idle backlog once, with no budget or retained timeout', () => {
+  const { clock, idle, tasks } = fixture();
+  let completed = 0;
+  const seen = [];
+  for (let i = 0; i < 16; i++) idle.request(i, deadline => {
+    clock.consume(deadline.timeRemaining()); completed++;
+  }, 0);
+  idle.request(20, deadline => seen.push({ at: clock.now(), completed, didTimeout: deadline.didTimeout, remaining: deadline.timeRemaining() }), 5);
+  clock.run();
+  expect(seen).toEqual([{ at: 11, completed: 1, didTimeout: true, remaining: 0 }]);
+  expect(completed).toBe(16);
+  expect(tasks.size).toBe(0);
+});
+
+test('unsigned-long timeouts are chunked and rechecked before expiring', () => {
+  let time = 0, next = 0;
+  const timers = new Map(), seen = [];
+  const idle = createIdleCallbacks({
+    now: () => time,
+    setTimer(callback, delay) {
+      expect(delay).toBeGreaterThanOrEqual(1);
+      expect(delay).toBeLessThanOrEqual(2147483647);
+      timers.set(++next, { callback, delay });
+      return next;
+    },
+    clearTimer: id => timers.delete(id),
+    invoke: (callback, deadline) => callback(deadline),
+  });
+  idle.request(1, deadline => seen.push([deadline.didTimeout, deadline.timeRemaining()]), 4294967295);
+  const fire = (id, at) => {
+    time = at;
+    const task = timers.get(id);
+    timers.delete(id);
+    task.callback();
+  };
+  expect(timers.get(1).delay).toBe(2147483647);
+  // Exercise timeout tasks without running the idle-dispatch task: reaching a
+  // host timer's maximum delay is not the idle callback's expiration.
+  fire(1, 2147483647);
+  expect(seen).toEqual([]);
+  expect(timers.get(3).delay).toBe(2147483647);
+  fire(3, 4294967294);
+  expect(seen).toEqual([]);
+  expect(timers.get(4).delay).toBe(1);
+  fire(4, 4294967295);
+  expect(seen).toEqual([[true, 0]]);
+  expect(timers.size).toBe(0);
+});
+
+test('cancellation works before dispatch, inside a period and for timeout tasks', () => {
+  const { clock, idle, tasks } = fixture();
+  const seen = [];
+  idle.request(1, () => seen.push(1), 1);
+  idle.cancel(1);
+  expect(tasks.size).toBe(0);
+  idle.request(2, () => { seen.push(2); idle.cancel(3); }, 0);
+  idle.request(3, () => seen.push(3), 3);
+  idle.request(4, () => seen.push(4), 50);
+  clock.run();
+  expect(seen).toEqual([2, 4]);
+  expect(clock.now()).toBeLessThan(50);
+  expect(tasks.size).toBe(0);
+});
+
+test('disposal inside a callback clears remaining dispatch and timeout work', () => {
+  const { clock, idle, tasks } = fixture();
+  const seen = [];
+  idle.request(1, () => { seen.push(1); idle.dispose(); idle.request(3, () => seen.push(3), 1); }, 0);
+  idle.request(2, () => seen.push(2), 50);
+  clock.run();
+  expect(seen).toEqual([1]);
+  expect(tasks.size).toBe(0);
+  idle.dispose();
+});
+
+test('reported callback errors leave subsequent idle work runnable', () => {
+  const { clock, idle, tasks, errors } = fixture();
+  let complete = false;
+  idle.request(1, () => { throw Error('page exception'); }, 0);
+  idle.request(2, () => { complete = true; }, 0);
+  clock.run();
+  expect(errors).toEqual(['page exception']);
+  expect(complete).toBe(true);
+  expect(tasks.size).toBe(0);
+});

package/test/index.test.js

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

package/test/inline-style-cascade.test.js

@@ -0,0 +1,63 @@
+import { expect, test } from 'bun:test';
+import { parseHTMLDocument } from '../lib/happy-dom/parser.js';
+import { computeElementStyle, parseDeclarations, StyleEngine } from '../lib/style/computed-style.js';
+
+test('inline importance and variables reach principal styles without leaking into pseudos', () => {
+  const { document, window } = parseHTMLDocument('<div id="target" style="--accent:blue!important;--accent:orange;color:var(--accent);margin:2px;margin-left:7px!important;content:\'principal\'">text</div>');
+  const sheets = [
+    '#target {--accent:red!important;color:purple!important;margin-left:9px!important;background-color:var(--accent)}',
+    '#target::before {--accent:gold;content:"before";color:var(--accent);margin-left:inherit}',
+  ];
+  try {
+    const target = document.getElementById('target');
+    const engine = new StyleEngine().compute(document, sheets);
+    const original = engine.get(target), originalCustom = engine.customPropertiesOf(target);
+    expect(original).toMatchObject({
+      color:'rgba(128, 0, 128, 1)', backgroundColor:'rgba(0, 0, 255, 1)', margin:[2,2,2,7], content:'principal',
+    });
+    expect(originalCustom.get('--accent')).toBe('blue');
+    expect(engine.getPseudo(target, 'before')).toMatchObject({ content:'before', color:'rgba(255, 215, 0, 1)', margin:[0,0,0,7] });
+
+    target.setAttribute('style', '--accent:lime!important;color:var(--accent)!important;margin:4px;margin-left:8px!important');
+    engine.compute(document, sheets, {}, new Set([target]));
+    expect(engine.get(target)).toMatchObject({
+      color:'rgba(0, 255, 0, 1)', backgroundColor:'rgba(0, 255, 0, 1)', margin:[4,4,4,8], content:null,
+    });
+    expect(engine.customPropertiesOf(target).get('--accent')).toBe('lime');
+    expect(engine.getPseudo(target, 'before')).toMatchObject({ content:'before', color:'rgba(255, 215, 0, 1)', margin:[0,0,0,8] });
+    expect(original.backgroundColor).toBe('rgba(0, 0, 255, 1)');
+    expect(originalCustom.get('--accent')).toBe('blue');
+  } finally { window.happyDOM.abort(); }
+});
+
+test('inline shorthands retain their priority over UA defaults and dimension hints', () => {
+  const { document, window } = parseHTMLDocument('<h1 id="heading" style="font:italic 20px serif;margin:3px">heading</h1><img id="picture" width="17" height="19" style="width:33px;height:44px">');
+  try {
+    const engine = new StyleEngine().compute(document, ['#picture {width:80px!important}']);
+    expect(engine.get(document.getElementById('heading'))).toMatchObject({
+      fontSize:20, fontWeight:400, fontStyle:'italic', fontFamily:['serif'], margin:[3,3,3,3],
+    });
+    expect(engine.get(document.getElementById('picture'))).toMatchObject({ width:80, height:44 });
+  } finally { window.happyDOM.abort(); }
+});
+
+test('direct computed-style calls still cascade inline values without mutating supplied declarations', () => {
+  const { document, window } = parseHTMLDocument('<div style="color:blue;width:31px;padding:2px">text</div>');
+  try {
+    const element = document.querySelector('div');
+    const declarations = parseDeclarations('color:purple!important;width:10px');
+    const originalWidth = declarations.get('width');
+    const first = computeElementStyle(element, null, declarations);
+    expect(first).toMatchObject({ color:'rgba(128, 0, 128, 1)', width:31, padding:[2,2,2,2] });
+    expect(declarations.size).toBe(2);
+    expect(declarations.get('width')).toBe(originalWidth);
+    expect(originalWidth.value).toBe('10px');
+
+    declarations.set('color', { ...declarations.get('color'), value:'green' });
+    element.setAttribute('style', 'color:blue;width:41px;padding:4px');
+    const second = computeElementStyle(element, null, declarations);
+    expect(second).toMatchObject({ color:'rgba(0, 128, 0, 1)', width:41, padding:[4,4,4,4] });
+    expect(first.width).toBe(31);
+    expect(first.color).toBe('rgba(128, 0, 128, 1)');
+  } finally { window.happyDOM.abort(); }
+});

package/test/layout-repaint-renderer.test.js

@@ -0,0 +1,9 @@
+import { expect, test } from 'bun:test';
+
+test('paint-only geometry reads skip layout and match full-layout pixels', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/layout-repaint.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);
+}, 15_000);

package/test/layout-repaint.test.js

@@ -0,0 +1,222 @@
+import {test, expect} from 'bun:test';
+import {parseHTMLDocument} from '../lib/happy-dom/parser.js';
+import {StyleEngine} from '../lib/style/computed-style.js';
+import {RenderTreeBuilder} from '../lib/render-tree/index.js';
+import {LayoutEngine} from '../lib/layout/text-layout.js';
+import {buildDisplayList} from '../lib/paint/display-list.js';
+import {repaintLayout} from '../lib/layout/repaint.js';
+
+function fixture(source='<body><div id="a" style="width:100px;height:30px;transform:scaleX(0.3);background-image:linear-gradient(red, blue);background-size:20px 20px">hello <span>world</span></div><p>after</p></body>') {
+  const parsed=parseHTMLDocument(source);
+  const builder=new RenderTreeBuilder(),engine=new LayoutEngine();
+  const first=builder.build(parsed.document,new StyleEngine().compute(parsed.document));
+  const options={width:300,viewportHeight:200};
+  const layout=engine.layout(first,options);
+  return {...parsed,builder,engine,first,layout,options,element:parsed.document.getElementById('a')};
+}
+for (const [name,value] of [['transform','scaleX(0.8)'],['backgroundSize','40px 15px'],['transformOrigin','left top'],['opacity','0.4'],['backgroundColor','blue']]) {
+  test(`retained ${name} paint matches a complete layout, leaving prior geometry immutable`,()=>{
+    const f=fixture();
+    try {
+      const before=JSON.stringify(f.layout);
+      f.element.style[name]=value;
+      const next=f.builder.build(f.document,new StyleEngine().compute(f.document)),retained=repaintLayout(f.layout,f.first,next);
+      expect(retained).not.toBeNull();
+      expect(buildDisplayList(retained,next)).toEqual(buildDisplayList(f.engine.layout(next,f.options),next));
+      expect(JSON.stringify(f.layout)).toBe(before);
+      const unchanged=f.layout.fragments.findIndex(fragment=>fragment.runs.some(run=>run.text==='after'));
+      expect(unchanged).toBeGreaterThanOrEqual(0);
+      expect(retained.fragments[unchanged]).toBe(f.layout.fragments[unchanged]);
+      expect(retained.fragments[unchanged].runs).toBe(f.layout.fragments[unchanged].runs);
+    } finally {f.window.happyDOM.abort();}
+  });
+}
+for (const [name,value] of [['transform','translateX(10px) scaleX(0.8)'],['transform','none'],['width','120px'],['color','red'],['display','none']]) {
+  test(`changing ${name} outside the paint-only subset retains full layout`,()=>{
+    const f=fixture();try {f.element.style[name]=value;expect(repaintLayout(f.layout,f.first,f.builder.build(f.document,new StyleEngine().compute(f.document)))).toBeNull();}
+    finally{f.window.happyDOM.abort();}
+  });
+}
+test('text changes cannot reuse old line breaking',()=>{
+  const f=fixture();try{f.element.firstChild.data='a much longer paragraph';expect(repaintLayout(f.layout,f.first,f.builder.build(f.document,new StyleEngine().compute(f.document)))).toBeNull();}
+  finally{f.window.happyDOM.abort();}
+});
+
+function expectEquivalent(f, next, retained) {
+  expect(retained).not.toBeNull();
+  const full = new LayoutEngine().layout(next, f.options);
+  // Fragment IDs retain the generation in which their geometry was created.
+  const comparable = layout => ({ ...layout, fragments: layout.fragments.map(({ id, ...fragment }) => fragment) });
+  expect(comparable(retained)).toEqual(comparable(full));
+  const painted = buildDisplayList(retained, next), reference = buildDisplayList(full, next);
+  expect(painted).toEqual(reference);
+  // Hit testing, text selection, and scroll extents are non-enumerable.
+  expect(painted.hits).toEqual(reference.hits);
+  expect(painted.scrollers).toEqual(reference.scrollers);
+  expect(painted.extent).toEqual(reference.extent);
+  return painted;
+}
+
+test('ancestor opacity updates nested positioned content and survives zero opacity', () => {
+  const f = fixture(`<body><div id="a" style="position:relative;z-index:2;width:100px;height:70px;background:red">
+    text <span style="opacity:.5;background:yellow">faint</span>
+    <span style="position:absolute;z-index:-1;left:2px;top:4px;background:blue">behind</span>
+    <span style="position:absolute;z-index:3;left:8px;top:15px;background:green">above</span>
+    </div><div style="position:relative;z-index:1">outside</div></body>`);
+  try {
+    let previous = f.first, layout = f.layout;
+    for (const opacity of ['0.5', '0', '1']) {
+      f.element.style.opacity = opacity;
+      const next = f.builder.build(f.document, new StyleEngine().compute(f.document));
+      const retained = repaintLayout(layout, previous, next);
+      const list = expectEquivalent(f, next, retained);
+      const faint = list.items.find(item => item.text === 'faint');
+      if (opacity === '0') expect(faint).toBeUndefined();
+      else expect(faint.opacity).toBe(Number(opacity) * 0.5);
+      for (let index = 0; index < retained.boxes.length; index++) {
+        expect(retained.boxes[index].layer).toBe(layout.boxes[index].layer);
+      }
+      previous = next;
+      layout = retained;
+    }
+  } finally { f.window.happyDOM.abort(); }
+});
+
+for (const [description, content] of [
+  ['wrapped inline', '<div style="width:90px">before <span id="a" style="background:red">several wrapped words</span> after</div>'],
+  ['bordered inline', '<div><span id="a" style="border:1px solid currentColor">text</span></div>'],
+  ['bordered image', '<div><img id="a" width="30" height="20" style="border:1px solid currentColor"></div>'],
+  ['table cell with resolved padding', '<table style="width:140px"><tr><td id="a" style="padding:10%;background:red">cell</td><td>other</td></tr></table>'],
+  ['block with anonymous lines', '<div id="a" style="padding:5%">before<p>middle</p>after</div>'],
+]) {
+  test(`background color retains ${description} geometry and paint`, () => {
+    const f = fixture(`<body>${content}</body>`);
+    try {
+      f.element.style.backgroundColor = 'blue';
+      const next = f.builder.build(f.document, new StyleEngine().compute(f.document));
+      expectEquivalent(f, next, repaintLayout(f.layout, f.first, next));
+    } finally { f.window.happyDOM.abort(); }
+  });
+}
+
+for (const [description, content, color] of [
+  ['new inline background', '<span id="a">text</span>', 'red'],
+  ['removed inline background', '<span id="a" style="background:red">text</span>', 'transparent'],
+  ['new image background', '<img id="a" width="30" height="20">', 'red'],
+  ['removed image background', '<img id="a" width="30" height="20" style="background:red">', 'transparent'],
+]) {
+  test(`${description} regenerates inline decoration boxes`, () => {
+    const f = fixture(`<body><div>${content}</div></body>`);
+    try {
+      f.element.style.backgroundColor = color;
+      const next = f.builder.build(f.document, new StyleEngine().compute(f.document));
+      expect(repaintLayout(f.layout, f.first, next)).toBeNull();
+    } finally { f.window.happyDOM.abort(); }
+  });
+}
+
+test('retained styles preserve gradient text identity across repeated paint changes', () => {
+  const f = fixture('<body><div id="a" style="width:100px;background-image:linear-gradient(red,blue);background-clip:text">gradient text</div></body>');
+  try {
+    let previous = f.first, layout = f.layout;
+    for (const [property, value] of [['opacity', '.5'], ['background-size', '40px 20px'], ['background-color', 'green']]) {
+      f.element.setAttribute('style', `${f.element.getAttribute('style')};${property}:${value}`);
+      const next = f.builder.build(f.document, new StyleEngine().compute(f.document));
+      const retained = repaintLayout(layout, previous, next);
+      const list = expectEquivalent(f, next, retained);
+      expect(list.items.filter(item => item.op === 'drawText').every(item => item.gradient)).toBe(true);
+      previous = next;
+      layout = retained;
+    }
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('color changes with inherited currentColor borders, decorations and SVG keep full layout', () => {
+  const f = fixture(`<body><div id="a" style="color:red;text-decoration:underline">
+    <span style="border:1px solid currentColor">text</span>
+    <svg width="20" height="20"><rect width="20" height="20" fill="currentColor"/></svg>
+    </div></body>`);
+  try {
+    f.element.style.color = 'blue';
+    const next = f.builder.build(f.document, new StyleEngine().compute(f.document));
+    expect(repaintLayout(f.layout, f.first, next)).toBeNull();
+  } finally { f.window.happyDOM.abort(); }
+});
+
+for (const otherOpacity of [null, '0.7', '0.3']) {
+  test(`a shared old style cannot leak into an alias with opacity ${otherOpacity ?? 'unchanged'}`, () => {
+    const f = fixture('<body><div id="a" style="width:100px">first</div><div id="b" style="width:100px">second</div></body>');
+    try {
+      const a = [...f.first.nodesById.values()].find(node => node.domNode === f.element);
+      const other = f.document.getElementById('b');
+      const b = [...f.first.nodesById.values()].find(node => node.domNode === other);
+      expect(a.style).toEqual(b.style);
+      // Render trees may share immutable styles. Give both elements and their
+      // text nodes that same style, then split it in the next generation.
+      const nodesById = new Map();
+      const share = node => {
+        const shared = Object.freeze({ ...node,
+          style: node.style === b.style ? a.style : node.style,
+          children: Object.freeze(node.children.map(share)),
+        });
+        nodesById.set(shared.id, shared);
+        return shared;
+      };
+      const previous = { ...f.first, root: share(f.first.root), nodesById };
+      const layout = new LayoutEngine().layout(previous, f.options);
+      f.element.style.opacity = '0.3';
+      if (otherOpacity != null) other.style.opacity = otherOpacity;
+      const next = f.builder.build(f.document, new StyleEngine().compute(f.document));
+      const retained = repaintLayout(layout, previous, next);
+      if (otherOpacity === '0.3') expectEquivalent(f, next, retained);
+      else expect(retained).toBeNull();
+    } finally { f.window.happyDOM.abort(); }
+  });
+}
+test('a changed run only replaces its own immutable fragment and preserves sibling runs',()=>{
+  const f=fixture('<body><div style="width:280px">before <span id="a" style="background-size:20px 20px">target</span> after</div><p>outside</p></body>');
+  try {
+    const before=JSON.stringify(f.layout);
+    const index=f.layout.fragments.findIndex(fragment=>fragment.runs.some(run=>run.text==='target'));
+    const original=f.layout.fragments[index];
+    expect(original.runs.length).toBeGreaterThan(1);
+    f.element.style.backgroundSize='40px 15px';
+    const next=f.builder.build(f.document,new StyleEngine().compute(f.document)),retained=repaintLayout(f.layout,f.first,next);
+    expect(retained).not.toBeNull();
+    const updated=retained.fragments[index];
+    expect(updated).not.toBe(original);
+    expect(updated.runs).not.toBe(original.runs);
+    for(let runIndex=0;runIndex<original.runs.length;runIndex++) {
+      const run=original.runs[runIndex],replacement=updated.runs[runIndex];
+      if(run.text==='target') {
+        expect(replacement).not.toBe(run);
+        expect(Object.isFrozen(replacement)).toBe(true);
+        expect(Object.isFrozen(replacement.style)).toBe(true);
+      } else expect(replacement).toBe(run);
+    }
+    expect(Object.isFrozen(updated)).toBe(true);
+    expect(Object.isFrozen(updated.runs)).toBe(true);
+    expect(Object.isFrozen(retained.fragments)).toBe(true);
+    expect(buildDisplayList(retained,next)).toEqual(buildDisplayList(f.engine.layout(next,f.options),next));
+    expect(JSON.stringify(f.layout)).toBe(before);
+  } finally {f.window.happyDOM.abort();}
+});
+test('box-only and no-op paint updates keep unchanged fragment and record arrays',()=>{
+  const f=fixture('<body><div id="a" style="width:100px;height:30px;background-size:20px 20px"></div><p>after</p></body>');
+  try {
+    const before=JSON.stringify(f.layout);
+    f.element.style.backgroundSize='40px 15px';
+    const next=f.builder.build(f.document,new StyleEngine().compute(f.document)),retained=repaintLayout(f.layout,f.first,next);
+    expect(retained).not.toBeNull();
+    expect(retained.boxes).not.toBe(f.layout.boxes);
+    expect(Object.isFrozen(retained.boxes)).toBe(true);
+    expect(retained.fragments).toBe(f.layout.fragments);
+    expect(buildDisplayList(retained,next)).toEqual(buildDisplayList(f.engine.layout(next,f.options),next));
+    expect(JSON.stringify(f.layout)).toBe(before);
+    const unchanged=f.builder.build(f.document,new StyleEngine().compute(f.document));
+    const again=repaintLayout(retained,next,unchanged);
+    expect(again.boxes).toBe(retained.boxes);
+    expect(again.fragments).toBe(retained.fragments);
+    expect(again.generation).toBe(unchanged.generation);
+  } finally {f.window.happyDOM.abort();}
+});

package/test/media-presentation-continuation.test.js

@@ -0,0 +1,14 @@
+import { test, expect } from 'bun:test';
+
+for (const scenario of ['success', 'pause', 'controls', 'seek', 'source', 'format', 'worker-failure', 'epoch', 'no-growth']) {
+  test(`presentation continuation: ${scenario}`, async () => {
+    const child = Bun.spawn([process.execPath,
+      new URL('./fixtures/media-presentation-continuation.js', import.meta.url).pathname, scenario],
+    { 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(`continuation ${scenario} passed`);
+  }, 15000);
+}

package/test/media-presentation-refill.test.js

@@ -0,0 +1,8 @@
+import {test,expect} from 'bun:test';
+
+test('presentation refill avoids duplicate page decoding and retains local fallbacks',async()=>{
+  const child=Bun.spawn([process.execPath,new URL('./fixtures/media-presentation-refill.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('presentation refill avoids duplicate page decode and preserves fallbacks');
+},15000);

package/test/media-probe.test.js

@@ -0,0 +1,16 @@
+import { expect, test } from 'bun:test';
+
+for (const scenario of ['initial-shared', 'initial-growth', 'initial-source', 'initial-rejected', 'audio-only',
+  'refresh-growth', 'pipe-change', 'failed-retry', 'mime-change', 'epoch', 'epoch-inflight', 'moving-snapshot']) {
+  test(`media metadata probe: ${scenario}`, async () => {
+    const child = Bun.spawn([process.execPath, new URL('./fixtures/media-probe.js', import.meta.url).pathname, scenario],
+      { stdout: 'pipe', stderr: 'pipe' });
+    try {
+      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(`media probe ${scenario} passed`);
+    } finally { child.kill(); }
+  }, 10000);
+}

package/test/media-repaint.test.js

@@ -0,0 +1,8 @@
+import {test,expect} from 'bun:test';
+
+test('independent media coalesces page UI painting while pause, seek and native controls remain live',async()=>{
+  const child=Bun.spawn([process.execPath,new URL('./fixtures/media-repaint.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('media repaint integration passed');
+},15000);

package/test/media-source-attachment.test.js

@@ -0,0 +1,34 @@
+import {expect, test} from 'bun:test';
+
+test('only the currently attached MediaSource can change media state across src, srcObject and documents', async () => {
+  const child=Bun.spawn([process.execPath,new URL('./fixtures/media-source-attachment.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('MediaSource attachment isolation passed');
+},15000);
+
+for(const action of ['src','attribute','load'])test(`explicit ${action} reselects media while passive base changes preserve it`,async()=>{
+  const child=Bun.spawn([process.execPath,new URL('./fixtures/media-resource-reselection.js',import.meta.url).pathname,action],{
+    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(`Media resource reselection ${action} passed`);
+},15000);
+
+test('MediaSource attachment queues sourceopen without a playback decoder', async () => {
+  const child=Bun.spawn([process.execPath,new URL('./fixtures/media-source-no-decoder.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('Decoder-less MediaSource attachment passed');
+},15000);

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

@@ -0,0 +1,26 @@
+import {expect, test} from 'bun:test';
+
+test('video-only refills retain audio until its own EOF or epoch boundary, including pending output requests', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/media-track-refill.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('track-independent refill integration passed');
+}, 15_000);
+
+for (const action of ['seek', 'pause', 'navigate']) {
+  test(`a failed audio refill cancelled by ${action} does not fail the current playback`, async () => {
+    const child = Bun.spawn([process.execPath,
+      new URL('./fixtures/media-refill-cancel.js', import.meta.url).pathname, action], {
+      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(`${action} ignores an obsolete refill rejection`);
+  }, 15_000);
+}