buninu-browser 0.2.0 → 0.2.2

package/test/computed-style.test.js

@@ -1,7 +1,9 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
-import { computeElementStyle, parseDeclarations, StyleEngine } from "../lib/style/computed-style.js";
+import {
+  absolutizeStyleSheetUrls, computeElementStyle, matchSelectors, parseDeclarations, StyleEngine,
+} from "../lib/style/computed-style.js";
 
 test("computes the initial UA and inherited style subset", () => {
   const { document, window } = parseHTMLDocument(`<body>
@@ -381,6 +383,50 @@ test("cascade layers: unlayered beats layered, later layers win, !important reve
   window.happyDOM.abort();
 });
 
+test("sheets parsed once keep layer order and cascade when the sheet list changes or repeats", () => {
+  const { document, window } = parseHTMLDocument(`<p id="a" class="x">t</p><p id="b" class="y">u</p>`);
+  const base = `@layer one, two; @layer two { .x { color: blue } } @layer one { .x { color: red; display: flex } }`;
+  const anonymous = `@layer { .y { color: green !important } } .y { display: inline }`;
+  const later = `@layer three { .x { display: block } } .y { color: black }`;
+  const lists = [
+    [base, later],
+    [base, later, base], // a repeated sheet: its earlier copy still declares the layers first
+    [later, base],
+    [anonymous, later, anonymous], // anonymous layers: both copies count under !important
+    [later, `@layer two { .x { display: grid } }`, base],
+  ];
+  const engine = new StyleEngine();
+  for (const sheets of lists) {
+    engine.compute(document, sheets, {}, new Set([document.body]), null);
+    const fresh = new StyleEngine().compute(document, sheets.map((sheet) => `${sheet} `));
+    for (const id of ["a", "b"]) expect(engine.get(document.getElementById(id))).toEqual(fresh.get(document.getElementById(id)));
+  }
+  engine.compute(document, [base, later, base]);
+  expect(engine.get(document.getElementById("a")).color).toBe("rgba(0, 0, 255, 1)");
+  expect(engine.get(document.getElementById("a")).display).toBe("block");
+  window.happyDOM.abort();
+});
+
+test("matchSelectors finds what querySelectorAll finds, in one walk", () => {
+  const { document, window } = parseHTMLDocument(`<main><ul><li class="a">1</li><li id="i">2</li><li class="a b">3</li></ul>
+    <p>x</p><p class="a"><span>y</span></p><div><span hidden>z</span></div></main>`);
+  const selectors = ["li:first-child", ".a + li", "li ~ .b", "p:has(span)", ":is(ul, div) > *", "#i", "[hidden]", "*", ":root", "main span", "1x", "li:nth-child(2n+1)"];
+  // Elements compared as sets of document positions (deep equality of DOM
+  // nodes is slow, and querySelectorAll() may list an element twice).
+  const all = [...document.querySelectorAll("*")];
+  const positions = (elements) => [...new Set(elements)].map((element) => all.indexOf(element)).sort((x, y) => x - y);
+  const matched = matchSelectors(document, selectors);
+  for (const selector of selectors) {
+    let expected = null;
+    try { expected = positions(document.querySelectorAll(selector)); } catch {}
+    expect(matched.has(selector) ? positions(matched.get(selector)) : null).toEqual(expected);
+  }
+  // From an element: its descendants and the element itself.
+  const ul = document.querySelector("ul");
+  expect(positions(matchSelectors(ul, [":is(ul, li)"]).get(":is(ul, li)"))).toEqual(positions([ul, ...ul.children]));
+  window.happyDOM.abort();
+});
+
 test("the font shorthand resets its parts and competes with font-size in the cascade", () => {
   const { document, window } = parseHTMLDocument(`<h2 id="a" style="font-size:32px;line-height:3">t</h2><h2 id="b">x</h2>
     <p id="c" style="font:italic small-caps bold 12px/1.5 Georgia, serif">u</p><p id="d" style="font-size:large">v</p>`);
@@ -455,6 +501,22 @@ test("the font shorthand allows spaces around the line-height slash", () => {
   }
 });
 
+test("incremental restyling retains equal computed-style identities", () => {
+  const { document, window } = parseHTMLDocument(`<body><div><span>same</span></div></body>`);
+  const div = document.querySelector("div");
+  const span = document.querySelector("span");
+  const engine = new StyleEngine().compute(document, [".active { color: red }"]);
+  const before = [engine.get(div), engine.get(span)];
+  // Visiting this subtree is conservative: the class changes, but neither
+  // element's final values change.
+  div.className = "unmatched";
+  engine.compute(document, [".active { color: red }"], {}, new Set([div]));
+  expect([engine.get(div), engine.get(span)]).toEqual(before);
+  expect(engine.get(div)).toBe(before[0]);
+  expect(engine.get(span)).toBe(before[1]);
+  window.happyDOM.abort();
+});
+
 test("incremental restyles of changed subtrees and added sheets equal a full restyle", () => {
   const { document, window } = parseHTMLDocument(`<body><div id="a" class="x"><p>one</p><p>two</p></div><div id="b"><span>s</span></div></body>`);
   const sheets = [".x p { color: red } .y p { color: blue; font-size: 20px } #b span { font-weight: 700 }"];
@@ -484,3 +546,38 @@ test("incremental restyles of changed subtrees and added sheets equal a full res
   same("added sheet");
   window.happyDOM.abort();
 });
+
+test("background shorthand and longhands keep image layers with their position, size and repeat", () => {
+  const { document, window } = parseHTMLDocument(`<body>
+    <div id="short" style="background: url(icon.png) no-repeat center / 32px 16px, linear-gradient(red, blue) #fff"></div>
+    <div id="long" style="background: url('a.png'); background-size: cover; background-position: right 4px top; background-repeat: repeat-x"></div>
+    <div id="color" style="background: url(x.png); background: #000"></div>
+    <div id="invalid" style="background: url(x.png) bogus-token"></div>
+  </body>`);
+  const engine = new StyleEngine().compute(document);
+  const style = (id) => engine.get(document.getElementById(id));
+  expect(style("short")).toMatchObject({
+    backgroundImage: "url(icon.png), linear-gradient(red, blue)",
+    backgroundPosition: "center, 0% 0%",
+    backgroundSize: "32px 16px, auto",
+    backgroundRepeat: "no-repeat, repeat",
+    backgroundColor: "rgba(255, 255, 255, 1)",
+  });
+  expect(style("long")).toMatchObject({
+    backgroundImage: "url('a.png')", backgroundSize: "cover", backgroundPosition: "right 4px top", backgroundRepeat: "repeat-x",
+  });
+  // A later shorthand resets the image layers.
+  expect(style("color")).toMatchObject({ backgroundImage: null, backgroundColor: "rgba(0, 0, 0, 1)" });
+  // An invalid shorthand is dropped as a whole.
+  expect(style("invalid")).toMatchObject({ backgroundImage: null, backgroundColor: "rgba(0, 0, 0, 0)" });
+  window.happyDOM.abort();
+});
+
+test("a linked style sheet's url()s resolve against the sheet", () => {
+  expect(absolutizeStyleSheetUrls(
+    `a { background: url(img/a.png) } b { background: url("../b.png") } c { background: url(data:image/png;base64,AA) }
+     d { background: url(https://cdn.test/d.png) } e { mask: url(#m) }`,
+    "https://site.test/css/main.css",
+  )).toBe(`a { background: url(https://site.test/css/img/a.png) } b { background: url("https://site.test/b.png") } c { background: url(data:image/png;base64,AA) }
+     d { background: url(https://cdn.test/d.png) } e { mask: url(#m) }`);
+});

package/test/display-list.test.js

@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { layoutText } from "../lib/layout/text-layout.js";
-import { buildDisplayList, visibleItems } from "../lib/paint/display-list.js";
+import { buildDisplayList, hitTarget, visibleItems } from "../lib/paint/display-list.js";
 import { RenderTreeBuilder } from "../lib/render-tree/index.js";
 import { StyleEngine } from "../lib/style/computed-style.js";
 
@@ -126,3 +126,76 @@ test("visibility, opacity and overflow/clip clipping apply to descendants", () =
   window.happyDOM.abort();
 });
 
+
+function backgroundList(html, css, resources) {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">${html}</body>`);
+  const styles = new StyleEngine().compute(document, [css]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, {
+    x: 0, y: 0, width: 200, lineHeight: 20, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }),
+  });
+  const displayList = buildDisplayList(layout, tree, null, (url) => resources[url] ?? null);
+  window.happyDOM.abort();
+  return displayList;
+}
+
+test("background images are sized, positioned and repeated in the padding box, painted in the border box", () => {
+  const icon = { width: 48, height: 24, image: {} };
+  const items = backgroundList(
+    `<div class="a"></div><div class="b"></div><div class="c"></div><div class="missing"></div>`,
+    `div { height:60px; width:100px }
+     .a { background: url(icon.png) no-repeat center / 32px; border: 2px solid black }
+     .b { background-image: url(icon.png); background-size: cover; background-repeat: repeat-x }
+     .c { background: url(icon.png) no-repeat right 5px bottom 10px }
+     .missing { background: url(none.png) }`,
+    { "icon.png": icon },
+  ).items.filter((item) => item.op === "drawBackgroundImage");
+  // The image that has not arrived paints nothing.
+  expect(items).toHaveLength(3);
+  const [a, b, c] = items;
+  // 32px wide keeps the 2:1 ratio, centered in the 100x60 padding box inside the border.
+  expect(a).toMatchObject({ tile: { x: 2 + 34, y: 2 + 22, width: 32, height: 16 }, repeatX: false, repeatY: false });
+  expect(a.bounds).toEqual({ x: 36, y: 24, width: 32, height: 16 });
+  // cover: scaled to fill both sides; repeat-x spans the box horizontally only.
+  expect(b).toMatchObject({ tile: { x: 0, y: 64, width: 120, height: 60 }, repeatX: true, repeatY: false });
+  expect(b.bounds).toEqual({ x: 0, y: 64, width: 100, height: 60 });
+  // Edge offsets: 5px from the right, 10px from the bottom.
+  expect(c.tile).toEqual({ x: 100 - 5 - 48, y: 124 + 60 - 10 - 24, width: 48, height: 24 });
+});
+
+test("transform: scale paints and hit-tests a box and its contents about its origin", () => {
+  const displayList = backgroundList(
+    `<div class="tile"><span>x</span></div>`,
+    `.tile { width:100px; height:100px; background:#123; transform: scale(.5); overflow: hidden }`,
+    {},
+  );
+  const fill = displayList.items.find((item) => item.op === "fillRect");
+  expect(fill.transform).toEqual({ a: 0.5, d: 0.5, e: 25, f: 25 });
+  expect(fill.bounds).toEqual({ x: 25, y: 25, width: 50, height: 50 });
+  // Its overflow clip shrinks with it.
+  const text = displayList.items.find((item) => item.op === "drawText");
+  expect(text.clipRect).toEqual({ x: 25, y: 25, width: 50, height: 50 });
+  expect(hitTarget(displayList, 10, 10, { x: 0, y: 0 })).not.toBe(fill.nodeId);
+  expect(hitTarget(displayList, 30, 30, { x: 0, y: 0 })).toBe(fill.nodeId);
+});
+
+test("a scroll container moves its content by its scroll offset and reports how far the content reaches", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0"><div id="box"><p>a</p><p>b</p><p>c</p></div></body>`);
+  const styles = new StyleEngine().compute(document, [`#box { height:40px; overflow:auto; background:#123 } p { margin:0; height:20px }`]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, {
+    x: 0, y: 0, width: 200, lineHeight: 20, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }),
+  });
+  const box = document.getElementById("box");
+  const displayList = buildDisplayList(layout, tree, null, null, (element) => element === box ? { x: 0, y: 15 } : null);
+  window.happyDOM.abort();
+  const background = displayList.items.find((item) => item.op === "fillRect");
+  // The container itself stays; its text moves up by the offset, clipped to it.
+  expect(background.transform).toBeUndefined();
+  const second = displayList.items.find((item) => item.op === "drawText" && item.text === "b");
+  expect(second.transform).toEqual({ a: 1, d: 1, e: 0, f: -15 });
+  expect(second.clipRect).toEqual({ x: 0, y: 0, width: 200, height: 40 });
+  const boxId = [...tree.nodesById.values()].find((node) => node.domNode === box).id;
+  expect(displayList.scrollers.get(boxId)).toMatchObject({ bottom: 60 });
+  expect(hitTarget(displayList, 5, 10, { x: 0, y: 0 })).toBe(second.nodeId);
+});

package/test/download.test.js

@@ -151,6 +151,41 @@ test("CDP Page.getResourceContent returns the bytes base64-encoded", async () =>
   }
 });
 
+test("CDP downloads the committed document after a navigation outside CDP", async () => {
+  const { CdpServer } = await import("../lib/cdp-server.js");
+  const browser = await createBrowser({ spareRenderer: false });
+  const cdp = CdpServer.create(browser.context).listen(0, "127.0.0.1");
+  let socket;
+  try {
+    const target = await (await fetch(`http://127.0.0.1:${cdp.port}/json/new?about:blank`, { method: "PUT" })).json();
+    socket = new WebSocket(target.webSocketDebuggerUrl);
+    await new Promise(resolve => socket.addEventListener("open", resolve, { once: true }));
+    let nextId = 0;
+    const call = (method, params = {}) => new Promise(resolve => {
+      const id = ++nextId;
+      const listener = ({ data }) => {
+        const message = JSON.parse(data);
+        if (message.id !== id) return;
+        socket.removeEventListener("message", listener);
+        resolve(message);
+      };
+      socket.addEventListener("message", listener);
+      socket.send(JSON.stringify({ id, method, params }));
+    });
+    await browser.context.navigate(`http://127.0.0.1:${server.port}/start`);
+    const { result: { frameTree } } = await call("Page.getFrameTree");
+    expect(frameTree.frame.url).toBe(`http://127.0.0.1:${server.port}/page`);
+    expect(frameTree.frame.mimeType).toBe("text/html");
+    const result = await call("Page.getResourceContent", { frameId: frameTree.frame.id, url: frameTree.frame.url });
+    expect(result.error).toBeUndefined();
+    expect(Buffer.from(result.result.content, "base64")).toEqual(Buffer.from(BIG5));
+  } finally {
+    socket?.close();
+    cdp.stop(true);
+    browser.close();
+  }
+});
+
 test("CDP download behavior controls the directory and emits completion events", async () => {
   const { CdpServer } = await import("../lib/cdp-server.js");
   const dir = mkdtempSync(join(tmpdir(), "buninu-cdp-download-"));

package/test/fixtures/media-sync.js

@@ -0,0 +1,57 @@
+// Isolated because host scripting installs browser globals in this process.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+
+const sleep = Bun.sleep;
+const success = () => process.stdout.write("media clock integration passed\n");
+let output, frames = 0, samples = 0;
+const errors = [];
+const renderer = await createPageRenderer({
+  fetchResource: async () => ({ ok: true, body: new Uint8Array([1]), contentType: "video/mp4" }),
+  reportError: error => errors.push(String(error)),
+  videoDecoder: {
+    probe: async () => ({ duration: 10, video: { width: 2, height: 2 }, audio: { sampleRate: 1000 } }),
+    decode: async () => ({ width: 2, height: 2, fps: 10,
+      nextFrame(w, h) { frames++; return new Uint8Array(w * h * 4); }, seek() {}, close() {} }),
+    decodeAudio: async () => ({ sampleRate: 1000, channels: 1,
+      nextSamples() { return new Float32Array(100); }, close() {} }),
+  },
+  audio: {
+    open(options, listener) { output = listener; return 1; },
+    write(id, bytes) { samples += bytes.length / 2; },
+    close() { return Promise.resolve(samples * 2); },
+    finish() {},
+  },
+});
+try {
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://media.test/", source: '<video id="v" src="clip.mp4"></video>', contentType: "text/html" });
+  await renderer.evaluate("document.getElementById('v').play()");
+  output({ event: "request", bytes: 1000 });
+  assert.equal(samples, 500);
+  await sleep(180);
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0,
+    "queued samples are not played samples");
+  const firstFrames = frames;
+  await sleep(180);
+  assert.equal(frames, firstFrames, "video cannot outrun an audio device which hasn't started");
+  output({ event: "timing", seconds: 0.2, sentSeconds: 0.5, sinkSeconds: 0.3 });
+  await sleep(160);
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.2);
+  const stalledFrames = frames;
+  await sleep(300);
+  assert.equal(frames, stalledFrames, "no clock advance through missing feedback/network starvation");
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.2);
+  output({ event: "timing", seconds: 0.4, sentSeconds: 0.5, sinkSeconds: 0.1 });
+  await sleep(160);
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.4);
+  assert.ok(frames > stalledFrames, "frames resume only with measured audio progress");
+  await renderer.evaluate("document.getElementById('v').pause()");
+  output({ event: "timing", seconds: 0.5, sentSeconds: 0.5, sinkSeconds: 0 });
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.4,
+    "late feedback from a closed stream cannot move a paused element");
+  assert.deepEqual(errors, []);
+  success();
+} finally {
+  renderer.dispose();
+}

package/test/happy-dom-platform-adapters.test.js

@@ -1,12 +1,16 @@
 import { expect, test } from "bun:test";
 import imageSize from "../lib/happy-dom/image-size-adapter.js";
 import MIMEType from "../lib/happy-dom/mime-type-adapter.js";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 
 const ONE_PIXEL_PNG = Buffer.from(
   "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAF/gL+3MxZ5wAAAABJRU5ErkJggg==",
   "base64",
 );
 
+// A 2x3 PNG.
+const SMALL_PNG = "iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAIAAAA2iEnWAAAAEElEQVR4nGP4z8AARAwoFABE0AX7pM/egAAAAABJRU5ErkJggg==";
+
 test("MIME adapter supplies the FileReader surface without whatwg-mimetype", () => {
   expect(String(MIMEType.parse("Text/Plain; charset=UTF-8"))).toBe("text/plain");
   expect(MIMEType.parse("not a mime type")).toBeNull();
@@ -16,3 +20,24 @@ test("image size adapter uses Bun.Image metadata", async () => {
   expect(await imageSize(ONE_PIXEL_PNG)).toEqual({ width: 1, height: 1 });
 });
 
+
+test("an image whose src changes while its size is read reports only the latest image", async () => {
+  const { document, window } = parseHTMLDocument("<img>");
+  const image = document.querySelector("img");
+  const events = [];
+  image.addEventListener("load", () => events.push(`load ${image.naturalWidth}x${image.naturalHeight}`));
+  image.addEventListener("error", () => events.push("error"));
+  image.setAttribute("src", `data:image/png;base64,${ONE_PIXEL_PNG.toString("base64")}`);
+  image.setAttribute("src", `data:image/png;base64,${SMALL_PNG}`);
+  // Not complete until its size is known.
+  expect(image.complete).toBeFalse();
+  await Bun.sleep(100);
+  expect(events).toEqual(["load 2x3"]);
+  expect(image.complete).toBeTrue();
+  // A removed src drops the image being read.
+  image.setAttribute("src", `data:image/png;base64,${ONE_PIXEL_PNG.toString("base64")}`);
+  image.removeAttribute("src");
+  await Bun.sleep(100);
+  expect([events.length, image.naturalWidth]).toEqual([1, 0]);
+  window.happyDOM.abort();
+});

package/test/headless-shell.test.js

@@ -1,4 +1,5 @@
 import { expect, test } from "bun:test";
+import { createBrowser } from "../lib/headless-shell.js";
 
 async function readDevToolsUrl(stream, timeout = 15_000) {
   const reader = stream.getReader();
@@ -343,3 +344,31 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
     await browser.exited;
   }
 }, 30_000);
+
+test("a client may set up and navigate before the first renderer is up", async () => {
+  let fetched = 0;
+  const site = Bun.serve({ port: 0, fetch() {
+    fetched++;
+    return new Response("<!doctype html><title>early</title><p>x</p>", { headers: { "content-type": "text/html" } });
+  } });
+  const browser = await createBrowser({ spareRenderer: false, waitForRenderer: false, webkit: false });
+  let ready = false;
+  browser.ready.then(() => { ready = true; });
+  try {
+    // Viewport and user agent are recorded at once, not after the renderer starts.
+    await browser.context.resize(321, 234, 1);
+    await browser.context.setUserAgent("EarlyAgent/1");
+    expect(ready).toBe(false);
+    // The document is fetched meanwhile; it commits once the renderer is up.
+    const navigation = browser.context.navigate(`http://127.0.0.1:${site.port}/`);
+    while (!fetched) await Bun.sleep(5);
+    expect(ready).toBe(false);
+    await navigation;
+    expect(fetched).toBe(1);
+    expect(await browser.context.title()).toBe("early");
+    expect(await browser.context.evaluate("innerWidth + 'x' + innerHeight + ' ' + navigator.userAgent")).toBe("321x234 EarlyAgent/1");
+  } finally {
+    browser.close();
+    site.stop(true);
+  }
+}, 30_000);

package/test/hit-test.test.js

@@ -1,6 +1,7 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
-import { elementBounds, hitTest, interactiveRegions } from "../lib/input/hit-test.js";
+import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../lib/input/hit-test.js";
+import { buildDisplayList } from "../lib/paint/display-list.js";
 import { layoutText } from "../lib/layout/text-layout.js";
 import { RenderTreeBuilder } from "../lib/render-tree/index.js";
 import { StyleEngine } from "../lib/style/computed-style.js";
@@ -84,3 +85,26 @@ test("hidden and pointer-events: none boxes let clicks through, but their opted-
   expect(regions.map((region) => region.element.getAttribute("href") ?? region.element.tagName)).toEqual(["open", "shown", "plain"]);
   window.happyDOM.abort();
 });
+
+test("pointer events target the topmost element painted at a point, whatever its tag", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">
+    <table><tr><td id="cell" style="width:100px;height:50px"><span id="label">tile</span></td></tr></table>
+    <div id="under" style="height:40px"></div>
+    <div id="over" style="position:absolute;top:60px;left:0;width:50px;height:20px"></div>
+    <div id="ghost" style="position:absolute;top:60px;left:50px;width:50px;height:20px;pointer-events:none"></div>
+  </body>`);
+  const styles = new StyleEngine().compute(document);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, { x: 0, y: 0, width: 400, lineHeight: 20, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }) });
+  const displayList = buildDisplayList(layout, tree);
+  const at = (x, y) => elementAtPoint(tree, displayList, x, y, { x: 0, y: 0 })?.id ?? null;
+  const label = layout.fragments.flatMap((fragment) => fragment.runs.map((run) => ({ run, fragment })))
+    .find(({ run }) => tree.nodesById.get(run.nodeId)?.domNode?.parentElement?.id === "label");
+  // Text hits its element; the rest of the cell hits the cell.
+  expect(at(label.run.x + 1, label.fragment.y + 1)).toBe("label");
+  expect(at(label.run.x + label.run.width + 20, label.fragment.y + 1)).toBe("cell");
+  // A positioned box paints over the in-flow one; pointer-events:none passes through.
+  expect(at(10, 65)).toBe("over");
+  expect(at(60, 65)).toBe("under");
+  window.happyDOM.abort();
+});

package/test/log.test.js

@@ -22,13 +22,16 @@ test("the CLI writes controller and renderer output to the log file", async () =
     });
     const reader = child.stderr.getReader();
     let seen = "";
-    while (!seen.includes("DevTools listening")) {
+    // The endpoint opens first; the sandbox line follows once the first renderer is up.
+    while (!seen.includes("renderer sandbox:")) {
       const { value, done } = await reader.read();
       if (done) break;
       seen += new TextDecoder().decode(value);
     }
     child.kill();
     await child.exited;
+    expect(seen.indexOf("DevTools listening")).toBeGreaterThan(-1);
+    expect(seen.indexOf("DevTools listening")).toBeLessThan(seen.indexOf("renderer sandbox:"));
     const log = await Bun.file(`${dir}/${DEFAULT_LOG_FILE}`).text();
     expect(log).toContain("[log] started pid");
     expect(log).toContain("renderer sandbox: seccomp");

package/test/media-source.test.js

@@ -0,0 +1,156 @@
+import { expect, test } from "bun:test";
+import { createMediaSourceScope } from "../lib/renderer/media-source.js";
+
+function scope(options = {}) {
+  const tasks = [];
+  const media = createMediaSourceScope({
+    origin: "https://page.test",
+    schedule: (task) => tasks.push(task),
+    DOMException,
+    ...options,
+  });
+  const flush = () => {
+    while (tasks.length) tasks.shift()();
+  };
+  return { media, flush };
+}
+
+function openBuffer(context) {
+  const source = new context.media.MediaSource();
+  source.attach("blob:https://page.test/media");
+  context.flush();
+  return { source, buffer: source.addSourceBuffer('video/mp4; codecs="avc1.4d401e"') };
+}
+
+function box(type, ...parts) {
+  const size = 8 + parts.reduce((sum, part) => sum + part.byteLength, 0);
+  const bytes = new Uint8Array(size);
+  const view = new DataView(bytes.buffer);
+  view.setUint32(0, size);
+  for (let index = 0; index < 4; index++) bytes[4 + index] = type.charCodeAt(index);
+  let offset = 8;
+  for (const part of parts) {
+    bytes.set(part, offset);
+    offset += part.byteLength;
+  }
+  return bytes;
+}
+
+function fragmentedMp4Pieces() {
+  const mdhd = new Uint8Array(20);
+  new DataView(mdhd.buffer).setUint32(12, 1000);
+  const init = box("moov", box("trak", box("mdia", box("mdhd", mdhd))));
+  const segment = (base) => {
+    const tfhd = new Uint8Array(12);
+    tfhd[3] = 8; // default_sample_duration_present
+    new DataView(tfhd.buffer).setUint32(4, 1);
+    new DataView(tfhd.buffer).setUint32(8, 1000);
+    const tfdt = new Uint8Array(8);
+    new DataView(tfdt.buffer).setUint32(4, base);
+    const trun = new Uint8Array(8);
+    new DataView(trun.buffer).setUint32(4, 5);
+    return box("moof", box("traf", box("tfhd", tfhd), box("tfdt", tfdt), box("trun", trun)));
+  };
+  return [init, segment(0), segment(5000)];
+}
+
+test("SourceBuffer.abort is harmless while idle and cancels a pending append", () => {
+  const context = scope();
+  const { buffer } = openBuffer(context);
+  expect(() => buffer.abort()).not.toThrow();
+
+  const events = [];
+  buffer.addEventListener("abort", () => events.push("abort"));
+  buffer.addEventListener("updateend", () => events.push("updateend"));
+  buffer.appendBuffer(new Uint8Array([1, 2, 3]));
+  buffer.abort();
+  context.flush();
+
+  expect(buffer.updating).toBe(false);
+  expect(buffer._pipe.size).toBe(0);
+  expect(events).toEqual(["abort", "updateend"]);
+});
+
+test("removing an old buffered prefix releases append quota", () => {
+  const context = scope({ appendQuota: 10 });
+  const { source, buffer } = openBuffer(context);
+  buffer.appendBuffer(box("mdat", new Uint8Array(2)));
+  context.flush();
+  source.noteBuffered(10);
+
+  expect(() => buffer.appendBuffer(new Uint8Array(1))).toThrow("SourceBuffer is full");
+  buffer.remove(0, 5);
+  context.flush();
+  expect(buffer.buffered.length).toBe(1);
+  expect(buffer.buffered.start(0)).toBe(5);
+  expect(buffer.buffered.end(0)).toBe(10);
+  expect(() => buffer.appendBuffer(new Uint8Array(5))).not.toThrow();
+  context.flush();
+  expect(buffer.updating).toBe(false);
+});
+
+test("fragmented MP4 buffered end follows appended segments, not presentation duration", () => {
+  const context = scope();
+  const { source, buffer } = openBuffer(context);
+  const [init, first, second] = fragmentedMp4Pieces();
+  buffer.appendBuffer(init);
+  context.flush();
+  // Probing an init segment can expose the full presentation duration before
+  // the first media fragment supplies the actual buffered timeline.
+  source.noteBuffered(700);
+  for (const bytes of [first, second]) {
+    buffer.appendBuffer(bytes);
+    context.flush();
+  }
+  expect(buffer.buffered.length).toBe(1);
+  expect(buffer.buffered.end(0)).toBe(10);
+});
+
+test("WebM buffered end follows Cluster timecodes, not presentation duration", () => {
+  const context = scope();
+  const source = new context.media.MediaSource();
+  source.attach("blob:https://page.test/audio");
+  context.flush();
+  const buffer = source.addSourceBuffer('audio/webm; codecs="opus"');
+  // Cluster timecode 0, one SimpleBlock at +1000 ms, with a dummy payload.
+  buffer.appendBuffer(Uint8Array.from([
+    0x1f, 0x43, 0xb6, 0x75, 0x8a,
+    0xe7, 0x81, 0x00,
+    0xa3, 0x85, 0x81, 0x03, 0xe8, 0x00, 0x00,
+  ]));
+  context.flush();
+  source.noteBuffered(700);
+  expect(buffer.buffered.end(0)).toBeCloseTo(1.02, 5);
+});
+
+test("a media element reports the intersection of separate audio and video buffers", () => {
+  const context = scope();
+  const { source, buffer: video } = openBuffer(context);
+  const audio = source.addSourceBuffer('audio/webm; codecs="opus"');
+  video.noteEnd(5);
+  audio.noteEnd(8);
+  expect(source.bufferedEnd()).toBe(5);
+});
+
+test("a media segment appended again is not concatenated twice, while gaps are still filled", () => {
+  const context = scope();
+  const { buffer } = openBuffer(context);
+  const [init, first, second] = fragmentedMp4Pieces();
+  let updates = 0;
+  buffer.addEventListener("updateend", () => updates++);
+  // The second segment arrives first; the first then fills the gap before it.
+  for (const bytes of [init, second, first]) {
+    buffer.appendBuffer(bytes);
+    context.flush();
+  }
+  const size = buffer._pipe.size;
+  expect(size).toBe(init.byteLength + second.byteLength + first.byteLength);
+  // A player retrying both segments on a slow network.
+  for (const bytes of [first, second]) {
+    buffer.appendBuffer(bytes);
+    context.flush();
+  }
+  expect(buffer._pipe.size).toBe(size);
+  expect(updates).toBe(5);
+  expect(buffer.buffered.end(0)).toBe(10);
+});

package/test/media-sync.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test";
+
+test("renderer follows output progress, not wall time or submitted audio", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/media-sync.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 clock integration passed");
+}, 30_000);

package/test/mobile.test.js

@@ -52,8 +52,8 @@ test("--mobile sends the mobile user agent, ignores overrides and applies touch
   });
 }, 30_000);
 
-test("without --mobile nothing changes: overrides apply and touch rules do not", async () => {
-  const state = await pageState({});
+test("Chromium desktop allows overrides and does not apply touch rules", async () => {
+  const state = await pageState({ webkit: false });
   expect(state).toMatchObject({
     requestUserAgent: "Desktop/1.0 (casty override)",
     navigatorUserAgent: "Desktop/1.0 (casty override)",