buninu-browser 0.2.3 → 0.2.4

package/test/positioning.test.js

@@ -107,6 +107,28 @@ test("relative offsets and translate move a box and its content without affectin
   expect(box(".centered")).toMatchObject({ x: -20, y: 40 + 10 });
 });
 
+test("transform lists compose pixel and percentage translations in order", () => {
+  const { box } = render(
+    `<div class="popup"></div><div class="scaled"></div><div class="reversed"></div><div class="math"></div>`,
+    `.popup,.scaled,.reversed,.math { position:absolute;left:0;top:0;width:100px;height:153px }
+     .popup { transform:translate(56px,780px) translate(0,-100%) }
+     .scaled { transform:scale(2,3) translate(10px,20%) translateX(5px) }
+     .reversed { transform:translate(10px,20%) scale(2,3) translateX(5px) }
+     .math { transform:translate(calc(25% + 10px),min(20%,40px)) translate(10%,5px) }`,
+  );
+  expect(box(".popup")).toEqual({x:56,y:627,width:100,height:153});
+  expect(box(".scaled")).toMatchObject({x:30,y:91.8});
+  expect(box(".reversed")).toMatchObject({x:20,y:30.6});
+  expect(box(".math")).toMatchObject({x:45,y:35.6});
+});
+
+test("individual translate precedes the transform list and preserves normal flow", () => {
+  const {box} = render('<div class="translated"></div><div class="next"></div>',
+    '.translated{width:100px;height:80px;translate:10px -50%;transform:scale(2) translate(5px,10px)}.next{height:20px}');
+  expect(box('.translated')).toEqual({x:20,y:-20,width:100,height:80});
+  expect(box('.next').y).toBe(80);
+});
+
 test("an absolutely positioned ::after arrow is centred on its host's edge", () => {
   // The buninu.org step arrow: top:50%; right:-.75rem; translate(50%,-50%).
   const { box } = render(

package/test/prepared-script-cache.test.js

@@ -0,0 +1,45 @@
+import { expect, test } from "bun:test";
+import { PreparedScriptCache, prepareClassicScript } from "../lib/renderer/prepared-script-cache.js";
+import { escapeSesHtmlComments, rewriteClassicScriptSource } from "../lib/renderer/script-rewrite.js";
+
+test("cached preparation preserves source semantics and does not retain evaluated globals", () => {
+  const source = "var result = supplied + 1; function read() { return result; }";
+  const prepared = prepareClassicScript(source);
+  const original = rewriteClassicScriptSource(source);
+  expect(prepared).toEqual({ code: escapeSesHtmlComments(original.code), parsed: true, strict: false });
+  expect(prepareClassicScript(source)).toBe(prepared);
+  const run = supplied => {
+    const page = { supplied, $buninu$ref: name => { throw new ReferenceError(name); } };
+    page.globalThis = page;
+    Function("page", "source", "with(page) { eval(source); }")(page, prepared.code);
+    return page;
+  };
+  const first = run(2), second = run(8);
+  expect(first.read()).toBe(3);
+  expect(second.read()).toBe(9);
+  expect(first.read).not.toBe(second.read);
+  expect(Object.isFrozen(prepared)).toBeTrue();
+});
+
+test("preparation retains a bounded working set and never keeps oversized sources", () => {
+  const calls = [];
+  const cache = new PreparedScriptCache({ maxBytes: 40, maxEntries: 2, prepare(source) {
+    calls.push(source); return { code: source, parsed: true, strict: false };
+  } });
+  cache.prepare("first"); cache.prepare("next"); cache.prepare("first"); cache.prepare("third");
+  expect(calls).toEqual(["first", "next", "third"]);
+  cache.prepare("next");
+  expect(calls).toEqual(["first", "next", "third", "next"]);
+  const oversized = "a".repeat(11);
+  cache.prepare(oversized); cache.prepare(oversized);
+  expect(calls.filter(source => source === oversized)).toHaveLength(2);
+  expect(cache.prepare("next").code).toBe("next");
+  expect(calls.filter(source => source === "next")).toHaveLength(2);
+});
+
+test("different strictness and invalid sources never share a prepared result", () => {
+  const cache = new PreparedScriptCache();
+  expect(cache.prepare("'use strict'; var value = 1;").strict).toBeTrue();
+  expect(cache.prepare("var value = 1;").strict).toBeFalse();
+  expect(cache.prepare("var = ;").parsed).toBeFalse();
+});

package/test/pulse-client.test.js

@@ -135,6 +135,13 @@ test("measured device progress governs the media clock and bounded audio queue t
   const { createServer } = await import("node:net");
   let received = 0, played = 0, reports = 0;
   const times = [], errors = [], requests = [];
+  // The suite also runs CPU-heavy renderers in parallel. Observe protocol
+  // progress instead of assuming a polling timer ran within 120 ms.
+  const waitFor = async predicate => {
+    const deadline = Date.now() + 2000;
+    while (!predicate() && Date.now() < deadline) await Bun.sleep(10);
+    expect(predicate()).toBe(true);
+  };
   const scalar64 = (tag, value) => {
     const bytes = Buffer.alloc(9);
     bytes[0] = tag;
@@ -178,13 +185,13 @@ test("measured device progress governs the media clock and bounded audio queue t
     await Bun.sleep(80);
     expect(received).toBe(0); // a short prefix does not start/stop playback
     stream.write(new Uint8Array(1900));
-    await Bun.sleep(180);
+    await waitFor(() => reports > 0 && received === 500 && times.length > 0);
     expect(reports).toBeGreaterThan(0);
     expect(received).toBe(500); // at most the 0.5 s queue budget, not 2 s
     expect(stream.queued).toBe(1500); // survives a renderer busy spell in the controller
     expect(times.at(-1)).toBe(0); // server/device hasn't played anything
     played = 100;
-    await Bun.sleep(120);
+    await waitFor(() => times.at(-1) === 0.1 && received === 600);
     expect(times.at(-1)).toBeCloseTo(0.1, 5);
     expect(received).toBe(600);
     // A long network/producer pause is NOT permission to catch up by queuing seconds.
@@ -192,7 +199,7 @@ test("measured device progress governs the media clock and bounded audio queue t
     expect(times.at(-1)).toBeCloseTo(0.1, 5);
     expect(received).toBe(600);
     played = 600;
-    await Bun.sleep(120);
+    await waitFor(() => times.at(-1) === 0.6 && received > 1000);
     expect(times.at(-1)).toBeCloseTo(0.6, 5);
     expect(received).toBeGreaterThan(1000);
     expect(received).toBeLessThanOrEqual(1100);

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,32 @@ 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)">
@@ -339,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

@@ -54,6 +54,75 @@ test("reopening at a keyframe does not show the prefix before the resume positio
   } 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]);