buninu-browser 0.2.2 → 0.2.4

package/test/raster-readback.test.js

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test";
+import { loadGraphics } from "../lib/renderer/page-renderer.js";
+import { RasterReadback } from "../lib/paint/raster-readback.js";
+
+test("raster readback reuses native scratch while published shared frames stay immutable", async () => {
+  const { CanvasKit: kit } = await loadGraphics();
+  const malloc = kit._malloc, free = kit._free;
+  const pointers = new Set();
+  let allocations = 0, releases = 0;
+  kit._malloc = size => { const pointer = malloc(size); pointers.add(pointer); allocations++; return pointer; };
+  kit._free = pointer => { if (pointers.delete(pointer)) releases++; free(pointer); };
+  const surface = kit.MakeSurface(4, 4);
+  const capture = new RasterReadback(kit, { shared: true });
+  const read = (size = 4) => {
+    const image = surface.makeImageSnapshot();
+    try { return capture.read(image, size, size); } finally { image.delete(); }
+  };
+  try {
+    surface.getCanvas().clear(kit.Color(255, 0, 0, 0.5));
+    const first = read();
+    const afterFirst = allocations;
+    expect(first.buffer).toBeInstanceOf(SharedArrayBuffer);
+    expect([...first.subarray(0, 4)]).toEqual([255, 0, 0, 128]);
+    surface.getCanvas().clear(kit.Color(0, 0, 255, 1));
+    const second = read();
+    expect(allocations).toBe(afterFirst);
+    expect([...second.subarray(0, 4)]).toEqual([0, 0, 255, 255]);
+    expect([...first.subarray(0, 4)]).toEqual([255, 0, 0, 128]);
+    expect(read(2)).toHaveLength(16);
+    expect(allocations).toBe(afterFirst);
+    // Structured cloning shares pixels without another allocation or copy.
+    const clone = structuredClone(first);
+    expect(clone.buffer).toBeInstanceOf(SharedArrayBuffer);
+    expect([...clone]).toEqual([...first]);
+  } finally {
+    capture.dispose(); capture.dispose(); surface.dispose();
+    kit._malloc = malloc; kit._free = free;
+  }
+  expect(releases).toBe(allocations);
+});

package/test/render-tree.test.js

@@ -40,6 +40,34 @@ test("keeps node IDs stable across generations of the same DOM", () => {
   window.happyDOM.abort();
 });
 
+test("closed details show only their first summary and update when opened", async () => {
+  const { StyleEngine } = await import("../lib/style/computed-style.js");
+  const { document, window } = parseHTMLDocument(`<details><p>Before summary</p><summary>Menu</summary><summary>Extra summary</summary><p>Contents</p></details>`);
+  const builder = new RenderTreeBuilder();
+  const styles = new StyleEngine();
+  const first = builder.build(document, styles.compute(document));
+  expect(renderTreeText(first)).toBe("▶ Menu");
+  document.querySelector("details").setAttribute("open", "");
+  const second = builder.build(document, styles.compute(document));
+  expect(renderTreeText(second)).toContain("▼ Menu");
+  expect(renderTreeText(second)).toContain("Extra summary");
+  expect(renderTreeText(second)).toContain("Contents");
+  expect(renderTreeText(second)).toContain("Before summary");
+  window.happyDOM.abort();
+});
+
+test("details without summary generate the default label and author CSS can override hidden", async () => {
+  const { StyleEngine } = await import("../lib/style/computed-style.js");
+  const { document, window } = parseHTMLDocument(`<details style="padding:20px;border:3px solid;color:red">Contents</details><p hidden style="display:block">Visible</p>`);
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  expect(renderTreeText(tree)).toBe("▶ DetailsVisible");
+  const summary = [...tree.nodesById.values()].find(node => node.tagName === "SUMMARY");
+  expect(summary.style.padding).toEqual([0, 0, 0, 0]);
+  expect(summary.style.borderWidths).toEqual([0, 0, 0, 0]);
+  expect(summary.style.color).toBe("rgba(255, 0, 0, 1)");
+  window.happyDOM.abort();
+});
+
 test("includes visible elements appended beside body under html", async () => {
   const { StyleEngine } = await import("../lib/style/computed-style.js");
   const { document, window } = parseHTMLDocument(`<html><head></head><body><p>body</p></body></html>`);

package/test/renderer-memory.test.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'bun:test';
+
+test('CanvasKit renderer lifetimes release native surfaces and failed video readbacks', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/renderer-memory.js', import.meta.url).pathname],
+    { stdout: 'pipe', stderr: 'pipe' });
+  const [code, stdout, stderr] = await Promise.all([
+    child.exited, new Response(child.stdout).text(), new Response(child.stderr).text(),
+  ]);
+  expect({ code, stderr }).toEqual({ code: 0, stderr: '' });
+  expect(stdout).toContain('renderer memory lifecycle passed');
+}, 30_000);

package/test/selector-traits.test.js

@@ -17,3 +17,27 @@ test("finds :has() compounds and sibling-target compounds in a sheet", () => {
   expect(traits.descendantFeatures.has(".esc:a")).toBe(true);
   expect(traits.sibling && traits.firstChild && traits.lastChild).toBe(true);
 });
+
+test("focus pseudo-class features retain their complete names", () => {
+  const traits = sheetTraits('.a:focus .x{}.b:focus-visible .x{}.c:focus-within .x{}');
+  expect(traits.descendantStateCompounds.map(entry=>entry.states)).toEqual([[":focus"],[":focus-visible"],[":focus-within"]]);
+});
+
+test("nested rule groups retain their first selector's invalidation dependencies", () => {
+  const traits=sheetTraits('@media(min-width:1px){@layer app{.panel:focus-within .label{color:red}.panel:has([data-open]){color:blue}}}');
+  expect(traits.descendantStateCompounds.map(entry=>entry.states)).toEqual([[":focus-within"]]);
+  expect([...traits.hasCompounds]).toEqual(['.panel:has([data-open])']);
+  expect(traits.descendantFeatures.has('.panel')).toBe(true);
+});
+
+test("functional alternatives constrain state invalidation without assuming negated requirements", () => {
+  const traits = sheetTraits(':is(.a,.b):focus-within .x{}:where(.outer > .target,button):focus .x{}:not(:is(.a,.b)):focus .x{}');
+  expect(traits.descendantStateCompounds.map(entry=>entry.alternatives))
+    .toEqual([[[[".a"],[".b"]]],[[[".target"],["t:button"]]],[]]);
+});
+
+test("observed attributes include nested, subject and escaped selectors", () => {
+  const traits = sheetTraits(String.raw`@media (min-width:1px){[data-open] .x:has([aria-expanded="true"]){} }
+    :is([title],[data-foo\:bar]){}.x[DATA-STATE]{}[ns|data-mode]{}[|data-empty]{}[data\2d escaped]{}`);
+  expect([...traits.observedAttributes].sort()).toEqual(["aria-expanded","data-empty","data-escaped","data-foo:bar","data-mode","data-open","data-state","title"]);
+});

package/test/shared-frame-pool.test.js

@@ -0,0 +1,63 @@
+import { expect, test } from "bun:test";
+import { SharedFramePool, FrameLeaseTracker } from "../lib/paint/shared-frame-pool.js";
+
+test("pixel reuse waits for both current renderer ownership and every compositor lease", () => {
+  const pool = new SharedFramePool();
+  const first = pool.acquire(16); first.fill(7); pool.publish(1, first);
+  pool.publish(2, first); // Scroll publication with the same current pixels.
+  pool.release(1);
+  const second = pool.acquire(16); second.fill(9); pool.publish(3, second);
+  const third = pool.acquire(16);
+  expect(third.buffer).not.toBe(first.buffer);
+  expect([...first]).toEqual(Array(16).fill(7));
+  pool.release(2);
+  expect(pool.acquire(16).buffer).toBe(first.buffer);
+  pool.release(3);
+  expect(pool.acquire(16).buffer).not.toBe(second.buffer); // Still renderer's current tile.
+  pool.clear();
+});
+
+test("an old frame stays immutable while its asynchronous screenshot encoder is reading it", async () => {
+  const pool = new SharedFramePool();
+  const released = [];
+  const tracker = new FrameLeaseTracker(serial => { released.push(serial); pool.release(serial); });
+  const first = pool.acquire(8); first.fill(1); pool.publish(1, first); tracker.replace(1, first);
+  let finish;
+  const captured = tracker.capture(async pixels => { await new Promise(resolve => finish = resolve); return [...pixels]; });
+  const second = pool.acquire(8); second.fill(2); pool.publish(2, second); tracker.replace(2, second);
+  expect(released).toEqual([]);
+  const third = pool.acquire(8); third.fill(3); pool.publish(3, third); tracker.replace(3, third);
+  expect(released).toEqual([2]);
+  expect(pool.acquire(8).buffer).toBe(second.buffer);
+  finish();
+  expect(await captured).toEqual(Array(8).fill(1));
+  expect(released).toEqual([2, 1]);
+  expect(pool.acquire(8).buffer).toBe(first.buffer);
+  pool.clear();
+});
+
+test("idle pixel cache stays bounded and failed captures release their retired frames", async () => {
+  const pool = new SharedFramePool({ maxBuffers: 1, maxBytes: 8 });
+  const frames = Array.from({ length: 4 }, (_, i) => {
+    const pixels = pool.acquire(8); pool.publish(i, pixels); return pixels;
+  });
+  pool.release(0); pool.release(1); pool.release(2);
+  expect(pool.acquire(8).buffer).toBe(frames[2].buffer);
+  expect(frames.some(frame => pool.acquire(8).buffer === frame.buffer)).toBe(false);
+  const released = [];
+  const tracker = new FrameLeaseTracker(serial => released.push(serial));
+  tracker.replace(10, "old");
+  const pending = tracker.capture(() => { throw new Error("encoder failed"); });
+  tracker.replace(11, "new");
+  await expect(pending).rejects.toThrow("encoder failed");
+  expect(released).toEqual([10]);
+});
+
+test("a resize replaces idle warm-up buffers with reusable current-size buffers", () => {
+  const pool = new SharedFramePool({ maxBuffers: 2 });
+  const small = pool.acquire(4); pool.publish(1, small);
+  const medium = pool.acquire(8); pool.publish(2, medium); pool.release(1);
+  const large = pool.acquire(32); pool.publish(3, large); pool.release(2);
+  const next = pool.acquire(32); pool.publish(4, next); pool.release(3);
+  expect(pool.acquire(32).buffer).toBe(large.buffer);
+});

package/test/style-sheets.test.js

@@ -0,0 +1,51 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { RendererHost } from "../lib/renderer/host.js";
+
+let renderer;
+const requests = [];
+beforeAll(async () => {
+  renderer = new RendererHost({ timeout: 20_000, fetch: async url => {
+    requests.push(String(url));
+    return new Response("#target { color: blue }", { headers: { "content-type": "text/css" } });
+  }});
+  await renderer.start();
+});
+afterAll(() => renderer?.close());
+const read = (code = "") => renderer.call("evaluate", `(()=>{${code};return getComputedStyle(document.getElementById('target')).color})()`);
+async function load(source) {
+  await renderer.call("loadDocument", { url: "https://style.test/", contentType: "text/html", status: 200, source });
+  await renderer.call("whenLoaded");
+}
+
+test("inline sheet media and type are respected after mutation and viewport changes", async () => {
+  await renderer.call("resize", 800, 600, 1);
+  await load(`<!doctype html><style>#target{color:red}</style>
+    <style media="print">#target{color:purple}</style>
+    <style id="responsive" media="screen and (max-width:500px)">#target{color:green}</style>
+    <style id="typed" type="text/plain">#target{color:blue}</style><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  await renderer.call("resize", 400, 600, 1);
+  expect(await read()).toBe("rgba(0, 128, 0, 1)");
+  expect(await read("document.getElementById('responsive').setAttribute('media','print')")).toBe("rgba(255, 0, 0, 1)");
+  expect(await read("document.getElementById('typed').setAttribute('type','text/css')")).toBe("rgba(0, 0, 255, 1)");
+});
+
+test("linked sheet media can change without refetching and disabled sheets fetch on enable", async () => {
+  requests.length = 0;
+  await load(`<!doctype html><style>#target{color:red}</style>
+    <link id="linked" rel="stylesheet" href="/linked.css" media="print"><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  expect(requests).toEqual(["https://style.test/linked.css"]);
+  expect(await read("document.getElementById('linked').setAttribute('media','screen')")).toBe("rgba(0, 0, 255, 1)");
+  expect(requests.length).toBe(1);
+  expect(await read("document.getElementById('linked').setAttribute('disabled','')")).toBe("rgba(255, 0, 0, 1)");
+  await load(`<!doctype html><style>#target{color:red}</style>
+    <link id="linked" rel="stylesheet" disabled href="/disabled.css"><div id="target">Text</div>`);
+  expect(await read()).toBe("rgba(255, 0, 0, 1)");
+  expect(requests.length).toBe(1);
+  await read("document.getElementById('linked').removeAttribute('disabled')");
+  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/linked.css", "https://style.test/disabled.css"]);
+});

package/test/svg.test.js

@@ -39,6 +39,35 @@ test("parses transform lists into one matrix", () => {
   expect([a, b, c, d].map((value) => Math.round(value))).toEqual([0, 1, -1, 0]);
 });
 
+test("SVG paint follows the CSS cascade, inherited HTML fill and descendant currentColor", () => {
+  const { document, window } = parseHTMLDocument(`<main style="fill:green;color:blue"><svg viewBox="0 0 24 24" style="opacity:.5">
+    <path id="inherited" d="M0 0h3v3z"/>
+    <path id="overridden" fill="red" stroke-width="1" d="M4 0h3v3z"/>
+    <g style="color:red;fill:currentColor;opacity:.5"><path d="M8 0h3v3z"/></g>
+    <path id="inline" fill="red" style="fill:yellow" d="M12 0h3v3z"/>
+  </svg></main>`);
+  const styles = new StyleEngine().compute(document, ["#overridden {fill:blue;stroke:currentColor;stroke-width:2;fill-opacity:50%;fill-rule:evenodd}"]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const svg = [...tree.nodesById.values()].find(node => node.tagName === "SVG").svg;
+  expect(svg.shapes.map(shape => shape.fill)).toEqual([
+    "rgba(0, 128, 0, 1)", "rgba(0, 0, 255, 1)", "rgba(255, 0, 0, 1)", "rgba(255, 255, 0, 1)",
+  ]);
+  expect(svg.shapes[1]).toMatchObject({ stroke: "rgba(0, 0, 255, 1)", strokeWidth: 2, fillOpacity: .5, fillRule: "evenodd" });
+  expect(svg.shapes[0].fillOpacity).toBe(1); // Root opacity is applied by its CSS box, once.
+  expect(svg.shapes[2].fillOpacity).toBe(.5);
+  window.happyDOM.abort();
+});
+
+test("SVG CSS display removes a subtree while visible descendants can override visibility", () => {
+  const { document, window } = parseHTMLDocument(`<svg><g class="hidden"><path d="M0 0h3v3z"/><path class="visible" d="M4 0h3v3z"/></g>
+    <g class="none"><path class="visible" d="M8 0h3v3z"/></g></svg>`);
+  const styles = new StyleEngine().compute(document, [".hidden {visibility:hidden}.visible{visibility:visible}.none{display:none}"]);
+  const svg = extractSvg(document.querySelector("svg"), "black", styles);
+  expect(svg.shapes).toHaveLength(1);
+  expect(svg.shapes[0].d).toBe("M4 0h3v3z");
+  window.happyDOM.abort();
+});
+
 test("inline SVG is a replaced box with margins and vertical-align in the line", () => {
   const { document, window } = parseHTMLDocument(`<body style="margin:0"><p style="margin:0">
     <svg viewBox="0 0 16 16" width="16" height="16" style="margin-right:8px;vertical-align:text-bottom"><path d="M0 0h16v16z"/></svg>Readme</p></body>`);

package/test/text-layout.test.js

@@ -8,6 +8,94 @@ function boxFor(tree, layout, tagName) {
   return layout.boxes.find((box) => tree.nodesById.get(box.nodeId)?.tagName === tagName);
 }
 
+test("display contents removes the wrapper box while preserving inherited text styles", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0;font-size:10px;line-height:10px">
+    before <div id="wrapper" style="display:contents;padding:50px;border:10px solid;position:absolute;color:red"><span>inside</span></div> after
+  </body>`);
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  const layout = layoutText(tree, { x:0, y:0, width:200, measureText:text=>text.length });
+  expect(layout.boxes.some(box => tree.nodesById.get(box.nodeId)?.domNode?.id === "wrapper")).toBe(false);
+  expect(layout.fragments.length).toBe(1);
+  expect(layout.fragments[0].text.trim()).toBe("before inside after");
+  expect([...tree.nodesById.values()].find(node => node.type === "text" && node.text === "inside").style.color).toBe("rgba(255, 0, 0, 1)");
+  window.happyDOM.abort();
+});
+
+test("display contents promotes nested children into flex and grid item placement", () => {
+  for (const display of ["flex", "grid"]) {
+    const { document, window } = parseHTMLDocument(`<body style="margin:0"><main style="display:${display};grid-template-columns:20px 20px 20px;gap:5px">
+      <div style="display:contents"><i style="width:20px;height:10px"></i><span style="display:contents"><i style="width:20px;height:10px"></i></span></div>
+      <i style="width:20px;height:10px"></i></main></body>`);
+    const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+    const layout = layoutText(tree, { x:0, y:0, width:200 });
+    expect(layout.boxes.filter(box => tree.nodesById.get(box.nodeId)?.tagName === "I").map(box => [box.x,box.y,box.width,box.height]))
+      .toEqual([[0,0,20,10],[25,0,20,10],[50,0,20,10]]);
+    window.happyDOM.abort();
+  }
+});
+
+test("percentage and calc padding reserve an aspect-ratio box and reflow on resize", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">
+    <div id="ratio" style="position:relative;padding-bottom:calc(100% * 9 / 16)">
+      <div id="fill" style="position:absolute;inset:0"></div>
+    </div><div id="next" style="height:20px"></div>
+  </body>`);
+  const styles = new StyleEngine().compute(document);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  for (const width of [320, 640]) {
+    const layout = layoutText(tree, { x:0, y:0, width });
+    const rect = id => layout.boxes.find(box => tree.nodesById.get(box.nodeId)?.domNode?.id === id);
+    expect(rect('ratio').height).toBe(width * 9 / 16);
+    expect(rect('fill').height).toBe(width * 9 / 16);
+    expect(rect('next').y).toBe(width * 9 / 16);
+  }
+  window.happyDOM.abort();
+});
+
+test("nested absolute percentage heights use their own containing block, including on resize", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">
+    <div style="position:relative;height:500px"><div style="position:absolute;bottom:0;width:100%;height:60px">
+      <div id="track" style="position:absolute;bottom:56px;width:100%;height:6px">
+        <div id="fill" style="position:absolute;bottom:0;width:100%;height:100%"></div>
+      </div>
+    </div></div></body>`);
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  const engine = new LayoutEngine();
+  for (const width of [320, 640]) {
+    const layout = engine.layout(tree, { x:0, y:0, width });
+    const rect = id => layout.boxes.find(box => tree.nodesById.get(box.nodeId)?.domNode?.id === id);
+    expect(rect('fill').height).toBe(6);
+    expect(rect('fill').y).toBe(rect('track').y);
+    expect(rect('fill').width).toBe(width);
+  }
+  window.happyDOM.abort();
+});
+
+test("legacy vertical line clamping limits lines and adds an ellipsis without changing DOM text", () => {
+  for (const display of ["-webkit-box", "block"]) {
+    const { document, window } = parseHTMLDocument(`<body style="margin:0"><div style="display:${display};-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:10px;line-height:10px;width:40px;overflow:hidden;overflow-wrap:anywhere">abcdefghijklmnop</div></body>`);
+    const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+    const layout = layoutText(tree, { x:0, y:0, width:200, measureText:text=>text.length*10 });
+    expect(layout.fragments.length).toBe(display === "block" ? 4 : 2);
+    const painted = layout.fragments.flatMap(f=>f.runs).map(r=>r.text).join('');
+    expect(painted).toBe(display === "block" ? "abcdefghijklmnop" : "abcdefg…");
+    expect(document.querySelector('div').textContent).toBe("abcdefghijklmnop");
+    window.happyDOM.abort();
+  }
+});
+
+test("empty blocks do not add adjoining vertical margins twice", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0"><div style="padding-top:1px">
+    <div style="height:20px;margin-bottom:12px"></div>
+    <div style="margin-top:12px"></div><div></div>
+    <div id="next" style="height:20px;margin-top:12px"></div>
+  </div></body>`);
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  const layout = layoutText(tree, { x:0, y:0, width:200 });
+  expect(layout.boxes.find(box => tree.nodesById.get(box.nodeId)?.domNode?.id === 'next').y).toBe(33);
+  window.happyDOM.abort();
+});
+
 test("creates positioned immutable line fragments with fixed-column wrapping", () => {
   const { document, window } = parseHTMLDocument(
     `<body style="margin:0">1234567890ABCDEFGHIJ<br>中文😀abcdef</body>`,
@@ -277,6 +365,86 @@ function layoutFixture(html, css = "", width = 400) {
   return { ...parsed, tree, layout, box };
 }
 
+test("column flex distributes growth, scaled shrink and constrained free space", () => {
+  for (const [children, expected] of [
+    ['<i style="flex:1;min-height:0"></i><b style="flex:2;min-height:0"></b>', [100,200]],
+    ['<i style="height:200px;min-height:0"></i><b style="height:400px;min-height:0"></b>', [100,200]],
+    ['<i style="flex:1;max-height:70px"></i><b style="flex:1"></b>', [70,230]],
+    ['<i style="flex:.25"></i><b style="flex:.25"></b>', [75,75]],
+  ]) {
+    const {window,box} = layoutFixture(`<main>${children}</main>`, 'main{display:flex;flex-direction:column;height:300px}');
+    expect([box('i').height,box('b').height]).toEqual(expected);
+    expect(box('b').y).toBe(expected[0]);
+    window.happyDOM.abort();
+  }
+});
+
+test("column flex automatic minimum protects content, while scrollable items can shrink", () => {
+  for (const [overflow,height] of [["visible",100],["auto",80],["hidden",80]]) {
+    const {window,box} = layoutFixture('<main><section><i></i></section></main>',
+      `main{display:flex;flex-direction:column;height:80px}section{overflow:${overflow}}i{display:block;height:100px}`);
+    expect(box('section').height).toBe(height);
+    window.happyDOM.abort();
+  }
+});
+
+test("an omitted flex basis uses content in an auto-height column capped by max-height", () => {
+  for (const [flex,expected] of [["1",250],["1 1",250],["1 1 0",0],["1 1 0%",250]]) {
+    const {window,box} = layoutFixture('<main><header></header><section><i></i></section></main>',
+      `main{display:flex;flex-direction:column;max-height:300px}header{height:50px;flex:none}
+       section{flex:${flex};min-height:0;overflow-y:auto}i{display:block;height:800px}`);
+    expect(box('section').height).toBe(expected);
+    expect(box('main').height).toBe(expected+50);
+    window.happyDOM.abort();
+  }
+});
+
+test("column auto margins absorb free space before justify-content", () => {
+  const {window,box} = layoutFixture('<main><i></i><b></b></main>',
+    'main{display:flex;flex-direction:column;height:300px;justify-content:space-between}i{height:40px;margin-top:auto}b{height:60px;margin-bottom:auto}');
+  expect([box('i').y,box('b').y]).toEqual([100,140]);
+  window.happyDOM.abort();
+});
+
+test("stretched and inset-sized flex columns center within their final used height", () => {
+  for (const css of [
+    'main{display:flex;height:300px}section{display:flex;flex-direction:column;justify-content:center}',
+    'main{position:relative;height:300px}section{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}',
+  ]) {
+    const {window,box} = layoutFixture('<main><section><i></i></section></main>',css+'i{display:block;height:60px;width:30px}');
+    expect(box('section').height).toBe(300);
+    expect(box('i').y).toBe(120);
+    window.happyDOM.abort();
+  }
+});
+
+test("nested column flex growth fills the viewport-sized modal wrapper", () => {
+  const {window,box} = layoutFixture('<main><section><article><i></i></article></section></main>',
+    'main{display:flex;flex-direction:column;height:800px}section{display:flex;flex-direction:column;flex-grow:1;justify-content:center}article{display:flex;justify-content:center}i{height:300px;width:200px}');
+  expect(box('section').height).toBe(800);
+  expect(box('i')).toMatchObject({x:100,y:250,width:200,height:300});
+  window.happyDOM.abort();
+});
+
+test("percentage HTML image dimensions size flex items within their container", () => {
+  const {window,box,layout} = layoutFixture('<main><img width="100%" height="100%"></main>',
+    'main{display:flex;width:84px;height:84px}');
+  expect(box('img')).toMatchObject({width:84,height:84});
+  const image=layout.fragments.flatMap(fragment=>fragment.runs).find(run=>run.type==='image');
+  expect(image).toMatchObject({width:84,height:84});
+  window.happyDOM.abort();
+});
+
+test("author auto sizing overrides HTML dimension hints and uses the image's intrinsic size", () => {
+  const {document,window}=parseHTMLDocument('<body style="margin:0"><img width="30" height="20" style="width:auto;height:auto"></body>');
+  const element=document.querySelector('img'),resources=new Map([[element,{width:120,height:60}]]);
+  const styles=new StyleEngine().compute(document);
+  const tree=new RenderTreeBuilder().build(document,styles,resources);
+  const layout=layoutText(tree,{width:400,lineHeight:20,measureText:text=>text.length*10,fontMetrics:()=>({ascent:16,height:20})});
+  expect(layout.fragments.flatMap(fragment=>fragment.runs).find(run=>run.type==='image')).toMatchObject({width:120,height:60});
+  window.happyDOM.abort();
+});
+
 test("nests block boxes and includes ancestor padding and borders", () => {
   const { window, layout, box } = layoutFixture(
     `<section><div>text</div></section>`,

package/test/video-keyframe.test.js

@@ -0,0 +1,61 @@
+import { expect, test } from 'bun:test';
+import wasmpeg from '../vendor/wasmpeg/src/js/index.js';
+import { seekVideoKeyframe } from '../lib/media/video-keyframe.js';
+
+test('seeking within a GOP longer than ten seconds preserves the decoded frame timestamp', async () => {
+  await wasmpeg.load();
+  const bytes = new Uint8Array(await Bun.file(new URL('./fixtures/long-video.mp4', import.meta.url)).arrayBuffer());
+  const decoder = await wasmpeg.decode(bytes);
+  try {
+    // This thirty-second fixture has a different picture at every frame,
+    // but only its first frame is a keyframe.
+    const firstHash = Bun.hash(decoder.nextFrame(32, 18));
+    for (const target of [15, 20, 25, 29]) {
+      const timestamp = seekVideoKeyframe(decoder, target);
+      expect(Bun.hash(decoder.nextFrame(32, 18))).toBe(firstHash);
+      expect(timestamp).toBe(0);
+    }
+  } finally { decoder.close(); }
+});
+
+test('a later MP4 initialization keeps absolute seek times, including seeks back across its first GOP', async () => {
+  await wasmpeg.load();
+  const bytes = new Uint8Array(await Bun.file(new URL('./fixtures/mse-switch-large.mp4', import.meta.url)).arrayBuffer());
+  const view = new DataView(bytes.buffer);
+  const visit = (from, to, callback) => {
+    for (let offset = from; offset + 8 <= to;) {
+      const size = view.getUint32(offset);
+      if (size < 8 || offset + size > to) break;
+      const type = String.fromCharCode(...bytes.subarray(offset + 4, offset + 8));
+      callback(type, offset + 8);
+      if (['moov', 'trak', 'mdia', 'moof', 'traf'].includes(type)) visit(offset + 8, offset + size, callback);
+      offset += size;
+    }
+  };
+  let timescale;
+  visit(0, bytes.length, (type, data) => {
+    if (type === 'mdhd') timescale = view.getUint32(data + (bytes[data] === 1 ? 20 : 12));
+  });
+  let fragments = 0;
+  visit(0, bytes.length, (type, data) => {
+    if (type !== 'tfdt') return;
+    fragments++;
+    if (bytes[data] === 1) view.setBigUint64(data + 4, view.getBigUint64(data + 4) + BigInt(6 * timescale));
+    else view.setUint32(data + 4, view.getUint32(data + 4) + 6 * timescale);
+  });
+  expect(fragments).toBeGreaterThan(0);
+  const decoder = await wasmpeg.decode(bytes, { format: 'mp4' });
+  try {
+    const hashes = [];
+    for (let pixels; (pixels = decoder.nextFrame(32, 18));) hashes.push(Bun.hash(pixels));
+    expect(hashes).toHaveLength(60);
+    // The fixture's keyframes are 2s apart. After moving tfdt by six seconds,
+    // seek(8s) must return frame 20, not frame 0 or an offset-relative frame.
+    for (const [target, frame, expectedTime] of [[6, 0, 6], [7.9, 0, 6], [8, 20, 8], [11, 40, 10], [6.2, 0, 6], [5, 0, 6]]) {
+      const timestamp = seekVideoKeyframe(decoder, target, 6);
+      expect(Bun.hash(decoder.nextFrame(32, 18))).toBe(hashes[frame]);
+      expect(timestamp).toBeGreaterThanOrEqual(expectedTime);
+      expect(timestamp).toBeLessThan(expectedTime + 1 / decoder.fps);
+    }
+  } finally { decoder.close(); }
+});

package/test/video-presentation.test.js

@@ -0,0 +1,136 @@
+import { test, expect } from "bun:test";
+import { VideoPresentation, compositeVideo } from "../lib/renderer/video-presentation.js";
+
+test("video predecode is bounded and waits for measured audio, skipping stale frames", async () => {
+  let frames = 0, closed = 0;
+  const reports = [];
+  const engine = { decode: async () => ({ width: 2, height: 2, fps: 30,
+    nextFrame: () => { frames++; return new Uint8Array(16).fill(frames); }, close: () => closed++ }) };
+  const video = new VideoPresentation(engine, () => {}, r => reports.push(r));
+  try {
+    await video.open({ id: 1, time: 0, hasAudio: true, audioId: 4, audioStart: 0 });
+    await Bun.sleep(100);
+    expect(frames).toBeLessThanOrEqual(24);
+    expect(video.queue.length).toBeLessThanOrEqual(video.limit);
+    expect(video.frame.time).toBe(0);
+    const first = reports.length;
+    await Bun.sleep(80);
+    expect(reports).toHaveLength(first);
+    video.timing(4, 0.5);
+    await Bun.sleep(60);
+    expect(video.frame.time).toBeCloseTo(0.5);
+    expect(reports.filter(r => r.time > 0).length).toBe(1);
+    video.stop(1);
+    video.timing(4, 2);
+    await Bun.sleep(30);
+    expect(video.frame).toBeNull();
+    expect(closed).toBe(1);
+  } finally { video.stop(); }
+});
+
+test("a late decoder open cannot replace a newer playback generation", async () => {
+  let resolve, closed = 0;
+  const video = new VideoPresentation({ decode: () => new Promise(r => resolve = r) }, () => {}, () => {});
+  const opening = video.open({ id: 1, time: 0 });
+  video.stop();
+  resolve({ close: () => closed++ });
+  await opening;
+  expect(closed).toBe(1);
+  expect(video.config).toBeNull();
+});
+
+test("reopening at a keyframe does not show the prefix before the resume position", async () => {
+  let at = 0;
+  const reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    seek() { at = 0; }, nextFrame(w, h) { at++; return new Uint8Array(w * h * 4).fill(at); }, close() {} }) },
+    () => {}, report => reports.push(report));
+  try {
+    video.timing(9, 2);
+    await video.open({ id: 2, time: 2, hasAudio: true, audioId: 9, audioStart: 0 });
+    await Bun.sleep(100);
+    expect(reports.some(report => report.time >= 1.9)).toBe(true);
+    expect(reports.every(report => report.time === undefined || report.time >= 1.9)).toBe(true);
+  } finally { video.stop(); }
+});
+
+test("a presentation keeps absolute epoch times and ends before replaced frames", async () => {
+  let at = 0;
+  const seeks = [], reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    seek(ms) { seeks.push(ms); at = 0; },
+    nextFrame(w, h) { return new Uint8Array(w * h * 4).fill(++at); }, close() {} }) },
+    () => {}, report => reports.push(report));
+  const tick = seconds => {
+    clearTimeout(video.timer);
+    video.timing(9, seconds - 12);
+    video.step();
+  };
+  try {
+    video.timing(9, 0.2);
+    await video.open({ id: 3, time: 12.2, startTime: 12, endTime: 12.5,
+      hasAudio: true, audioId: 9, audioStart: 12 });
+    expect(Math.min(...seeks)).toBe(12000);
+    expect(video.frame.time).toBeCloseTo(12.2);
+    expect(reports.some(report => report.end !== undefined)).toBe(false);
+    tick(12.49);
+    expect(video.frame.time).toBeCloseTo(12.4);
+    expect(reports.some(report => report.end !== undefined)).toBe(false);
+    tick(12.5);
+    tick(13);
+    expect(reports.filter(report => report.end !== undefined)).toEqual([{ id: 3, end: 12.5 }]);
+    expect(reports.filter(report => report.time !== undefined).every(report => report.time >= 12.2 && report.time < 12.5)).toBe(true);
+  } finally { video.stop(); }
+});
+
+test("a short epoch snapshot reports its actual EOF so playback can request more bytes", async () => {
+  let at = 0;
+  const reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    nextFrame(w, h) { return ++at <= 2 ? new Uint8Array(w * h * 4).fill(at) : null; }, close() {} }) },
+    () => {}, report => reports.push(report));
+  try {
+    video.timing(10, 0.25);
+    await video.open({ id: 4, time: 40, startTime: 40, endTime: 45,
+      hasAudio: true, audioId: 10, audioStart: 40 });
+    expect(video.frame.time).toBeCloseTo(40.1);
+    expect(reports.find(report => report.end !== undefined)?.end).toBeCloseTo(40.2);
+  } finally { video.stop(); }
+});
+
+test("a later epoch discards queued old frames at its boundary without accepting stale bindings", async () => {
+  const reports = [];
+  const video = new VideoPresentation({ decode: async () => ({ width: 2, height: 2, fps: 10,
+    nextFrame(w, h) { return new Uint8Array(w * h * 4); }, close() {} }) },
+    () => {}, report => reports.push(report));
+  try {
+    video.timing(11, 0);
+    await video.open({ id: 5, time: 10, startTime: 10,
+      hasAudio: true, audioId: 11, audioStart: 10 });
+    expect(video.queue.some(frame => frame.time > 10.3)).toBe(true);
+    video.bind(4, 11, 10, 10, 10.1);
+    expect(video.config.endTime).toBeUndefined();
+    video.bind(5, undefined, undefined, undefined, 10.3);
+    expect(video.config.audioId).toBe(11);
+    expect(video.config.audioStart).toBe(10);
+    expect(video.config.time).toBe(10);
+    clearTimeout(video.timer);
+    video.timing(11, 0.3);
+    video.step();
+    expect(video.frame.time).toBeCloseTo(10.2);
+    expect(reports.find(report => report.end !== undefined)).toEqual({ id: 5, end: 10.3 });
+    expect(video.queue).toHaveLength(0);
+  } finally { video.stop(); }
+});
+
+test("video layer preserves opaque controls, translucent overlays and clipped pixels", () => {
+  const base = new Uint8Array([0,0,0,255, 255,255,255,255, 0,0,128,255, 10,20,30,255]);
+  const mask = new Uint8Array([255,255,255,0, 0,0,0,0, 127,127,127,0, 0,0,0,0]);
+  const tile = { pixelWidth: 4, pixelHeight: 1, pixels: base,
+    videoLayer: { base, mask, rect: { x: 0, y: 0, width: 4, height: 1 } } };
+  const frame = { width: 1, height: 1, pixels: new Uint8Array([200,100,0,255]) };
+  expect([...compositeVideo(tile, frame).pixels]).toEqual([
+    200,100,0,255, 255,255,255,255, 100,50,128,255, 10,20,30,255,
+  ]);
+  expect(compositeVideo(tile, null)).toBe(tile);
+});