buninu-browser 0.2.3 → 0.3.0

package/test/font-loading.test.js

@@ -0,0 +1,97 @@
+import { expect, test } from "bun:test";
+import { DocumentFonts, neededFontFaces } from "../lib/renderer/font-loading.js";
+import { createPageRenderer, loadGraphics } from "../lib/renderer/page-renderer.js";
+
+const face = (family, weight = 400, ranges = [[0, 0x10ffff]], extra = {}) => ({ family, weight: [weight, weight],
+  style: "normal", unicodeRanges: ranges, sources: [{ url: `https://font.test/${family}-${weight}.ttf` }], ...extra });
+const run = (text, fontFamily, fontWeight = 400, fontStyle = "normal") => ({ text, style: { fontFamily, fontWeight, fontStyle } });
+
+test("font selection requests only used families, styles, weights, and Unicode subsets", () => {
+  const latin = face("Example", 400, [[0, 127]]);
+  const cjk = face("Example", 400, [[0x4e00, 0x9fff]]);
+  const bold = face("Example", 700);
+  const italic = face("Example", 400, [[0, 127]], { style: "italic" });
+  const unused = face("Unused");
+  const all = [latin, cjk, bold, italic, unused];
+  expect([...neededFontFaces(all, [run("hello", ["Example", "Unused"])])]).toEqual([latin]);
+  expect([...neededFontFaces(all, [run("中文", ["Example"])])]).toEqual([cjk]);
+  expect([...neededFontFaces(all, [run("hello", ["Example"], 600)])]).toEqual([bold]);
+  expect([...neededFontFaces(all, [run("hello", ["Example"], 400, "italic")])]).toEqual([italic]);
+  expect([...neededFontFaces(all, [run("hello", ["system-ui", "Unused"])], new Set(["system-ui"]))]).toEqual([]);
+  const earlier = face("Later");
+  const later = face("Later");
+  expect([...neededFontFaces([earlier, later], [run("hello", ["Later"])])][0]).toBe(later);
+});
+
+test("document web fonts share builtin typefaces, use CORS, deduplicate sources, and honor Unicode aliases", async () => {
+  const { CanvasKit, builtinTypefaces, fontCollection } = await loadGraphics();
+  const bytes = await Bun.file(new URL("../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+  const requests = [], errors = [];
+  let changed = 0;
+  const fonts = new DocumentFonts({ CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection,
+    fetch: async request => { requests.push(request); return { status: 200, body: bytes }; },
+    changed: () => changed++, error: error => errors.push(error) });
+  const latin = face("Example", 400, [[0, 127]]);
+  const cjk = face("Example", 400, [[0x4e00, 0x9fff]]);
+  fonts.update([latin, cjk], [run("Hello中文", ["Example"])]);
+  await fonts.ready();
+  expect(requests).toHaveLength(1);
+  expect(requests[0]).toMatchObject({ mode: "cors", credentials: "same-origin", redirect: "follow" });
+  expect(changed).toBe(2);
+  expect(errors).toEqual([]);
+  expect(fonts.collection).not.toBe(fontCollection);
+  expect(fonts.resolve("Example", 400, "normal", 65)).toHaveLength(1);
+  expect(fonts.resolve("Example", 400, "normal", 0x4e00)).toHaveLength(1);
+  expect(fonts.resolve("Example", 400, "normal", 0x400)).toEqual([]);
+  fonts.dispose();
+  fonts.dispose();
+  expect(fonts.collection).toBe(fontCollection);
+});
+
+test("font sources try local/fetch alternatives and pending requests abort on document disposal", async () => {
+  const { CanvasKit, builtinTypefaces, fontCollection } = await loadGraphics();
+  let fetched = 0, aborted = 0;
+  const fonts = new DocumentFonts({ CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection,
+    fetch: () => {
+      fetched++;
+      let reject;
+      const pending = new Promise((_, fail) => reject = fail);
+      pending.abort = () => { aborted++; reject(new Error("disposed")); };
+      return pending;
+    } });
+  const local = face("Local", 400, undefined, { sources: [{ local: "missing" }, { local: builtinTypefaces[0].family }] });
+  fonts.update([local], [run("hello", ["Local"])]);
+  await fonts.ready();
+  expect(fonts.resolve("Local")).toHaveLength(1);
+  expect(fetched).toBe(0);
+  const remote = face("Remote");
+  fonts.update([remote], [run("hello", ["Remote"])]);
+  expect(fetched).toBe(1);
+  fonts.dispose();
+  await fonts.ready();
+  expect(aborted).toBe(1);
+});
+
+test("loaded web font updates geometry, respects Unicode ranges, and resets on navigation", async () => {
+  const bytes = await Bun.file(new URL("../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+  let finish;
+  const fontResponse = new Promise(resolve => finish = resolve);
+  let requests = 0;
+  const renderer = await createPageRenderer({ fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+    pageFetch: () => { requests++; return fontResponse; } });
+  try {
+    const source = `<style>@font-face {font-family:TestMono;src:url(/font.ttf);unicode-range:U+0069} span{font-family:TestMono,sans-serif;font-size:30px}</style><span id=i>iiii</span><span id=m>mmmm</span>`;
+    await renderer.loadDocument({ url: "https://font.test/", status: 200, contentType: "text/html", source });
+    const before = renderer.inspect("span").map(item => item.box.width);
+    finish({ status: 200, body: bytes });
+    await renderer.whenLoaded();
+    const after = renderer.inspect("span").map(item => item.box.width);
+    expect(requests).toBe(1);
+    expect(after[0]).toBeGreaterThan(before[0] * 2);
+    expect(after[1]).toBe(before[1]);
+    await renderer.loadDocument({ url: "https://font.test/next", status: 200, contentType: "text/html",
+      source: `<span style="font-family:TestMono,sans-serif;font-size:30px">iiii</span>` });
+    await renderer.whenLoaded();
+    expect(renderer.inspect("span")[0].box.width).toBe(before[0]);
+  } finally { renderer.dispose(); }
+});

package/test/grid.test.js

@@ -220,6 +220,64 @@ test("implicit columns are created past the explicit grid", () => {
   expect(item(0)).toEqual({ left: 4, top: 0, width: 6, height: 1 });
 });
 
+test("column auto-flow fills each explicit row before adding a column", () => {
+  const { items } = render(grid("grid-template-rows: 2px 3px; grid-auto-columns: 4px; grid-auto-flow: column", letters(5)));
+  expect(items().map((box) => [box.left, box.top, box.width, box.height])).toEqual([
+    [0, 0, 4, 2], [0, 2, 4, 3], [4, 0, 4, 2], [4, 2, 4, 3], [8, 0, 4, 2],
+  ]);
+});
+
+test("column auto-flow honors row spans and dense packing", () => {
+  const content = `<i style="grid-row: 2 / 4">a</i><i style="grid-row: span 2">b</i><i>c</i>`;
+  const sparse = render(grid("grid-template-rows: repeat(3, 2px); grid-auto-columns: 4px; grid-auto-flow: column", content));
+  const dense = render(grid("grid-template-rows: repeat(3, 2px); grid-auto-columns: 4px; grid-auto-flow: column dense", content));
+  expect(sparse.items().map((box) => [box.left, box.top])).toEqual([[0, 2], [4, 0], [4, 4]]);
+  expect(dense.items().map((box) => [box.left, box.top])).toEqual([[0, 2], [4, 0], [0, 0]]);
+});
+
+test("named areas place source-order-independent content and spanning cells", () => {
+  const { items } = render(grid('grid-template-columns: 4px 20px 6px; grid-template-rows: 2px 3px; grid-template-areas: "icon title meta" "icon body meta"',
+    '<i style="grid-area: title">title</i><i style="grid-area: meta">m</i><i style="grid-area: icon">i</i><i style="grid-area: body">body</i>'));
+  expect(items()).toEqual([
+    { left: 4, top: 0, width: 20, height: 2 }, { left: 24, top: 0, width: 6, height: 5 },
+    { left: 0, top: 0, width: 4, height: 5 }, { left: 4, top: 2, width: 20, height: 3 },
+  ]);
+});
+
+test("named areas create explicit tracks and implicit start/end line names", () => {
+  const { items } = render(grid('grid-template-areas: "a a ." "b b ."; grid-auto-columns: 4px; grid-auto-rows: 2px',
+    '<i style="grid-column: a; grid-row: 1">a</i><i style="grid-column: b-start / b-end; grid-row: b">b</i><i style="grid-column: -2 / -1; grid-row: 1">c</i>'));
+  expect(items()).toEqual([
+    { left: 0, top: 0, width: 8, height: 2 }, { left: 0, top: 2, width: 8, height: 2 },
+    { left: 8, top: 0, width: 4, height: 2 },
+  ]);
+});
+
+test("grid-template shorthand combines area strings, row sizes and columns", () => {
+  const { items } = render(grid('grid-template:"icon title"2px"icon body"3px/4px 20px',
+    '<i style="grid-area: title">title</i><i style="grid-area: icon">i</i><i style="grid-area: body">body</i>'));
+  expect(items()).toEqual([
+    { left: 4, top: 0, width: 20, height: 2 }, { left: 0, top: 0, width: 4, height: 5 },
+    { left: 4, top: 2, width: 20, height: 3 },
+  ]);
+  const defaults = render(grid('grid-template: "a b" / 4px 6px', '<i style="grid-area:b">b</i>'));
+  expect(defaults.item(0)).toEqual({ left: 4, top: 0, width: 6, height: 1 });
+});
+
+test("grid-template track shorthand resets old area placement", () => {
+  const { items } = render(grid('grid-template-areas:"b a";grid-template:2px / 4px 6px', letters(2)));
+  expect(items()).toEqual([
+    { left: 0, top: 0, width: 4, height: 2 }, { left: 4, top: 0, width: 6, height: 2 },
+  ]);
+});
+
+test("nonrectangular or unequal-width area declarations are discarded", () => {
+  for (const invalid of ['"a a" "a b"', '"a a" "b"', '"a ?"']) {
+    const { items } = render(grid(`grid-template-columns: 4px 6px; grid-template-areas: ${invalid}`, letters(2)));
+    expect(items().map((box) => box.width)).toEqual([4, 6]);
+  }
+});
+
 // Gaps (css-align-3)
 
 test("column-gap separates the columns and comes off the free space", () => {

package/test/hit-test.test.js

@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
-import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../lib/input/hit-test.js";
+import { elementAtPoint, elementBounds, elementBox, 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";
@@ -35,6 +35,26 @@ test("finds content bounds for fragment navigation targets", () => {
   window.happyDOM.abort();
 });
 
+test("geometry lookups combine inline descendants and follow replacement layouts", () => {
+  const { document, window } = parseHTMLDocument('<div id="box"><span id="outer">one <b>two</b></span><span id="other">tail</span></div><div id="hidden" style="display:none">hidden</div>');
+  const styles = new StyleEngine().compute(document, ['body{margin:0} #box{width:70px}']);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const options = { width:200, x:0, y:0, measureText:text=>text.length*10, lineHeight:20, fontMetrics:()=>({ascent:16,height:20}) };
+  const layout = layoutText(tree, options);
+  const box = document.getElementById('box'), outer = document.getElementById('outer');
+  expect(elementBox(tree, layout, box).box.width).toBe(70);
+  expect(elementBox(tree, layout, outer)).toBe(null);
+  const bounds = elementBounds(tree, layout, outer);
+  expect(bounds.width).toBeGreaterThan(0);
+  expect(elementBounds(tree, layout, box).bottom).toBeGreaterThanOrEqual(bounds.bottom);
+  expect(elementBounds(tree, layout, document.getElementById('hidden'))).toBe(null);
+  const shifted = layoutText(tree, { ...options, x:40, y:100 });
+  expect(elementBox(tree, shifted, box).box.y).toBe(elementBox(tree, layout, box).box.y + 100);
+  expect(elementBounds(tree, shifted, outer).left).toBe(bounds.left + 40);
+  expect(elementBounds(tree, shifted, outer).top).toBe(bounds.top + 100);
+  window.happyDOM.abort();
+});
+
 test("hit testing accounts for viewport scrolling", () => {
   const { document, window } = parseHTMLDocument(
     `<body><pre>line 0\nline 1\nline 2\n<a href="target">target</a></pre></body>`,

package/test/image-lifetime.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test";
+
+test("dynamic image bursts batch paint and release removed, replaced, and late resources", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/image-lifetime.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("image lifetime integration passed");
+}, 30_000);

package/test/image-resources.test.js

@@ -0,0 +1,94 @@
+import { beforeAll, expect, test } from "bun:test";
+import CanvasKitInit from "../usr/lib/canvaskit/canvaskit.js";
+import { createImageResourceLoader } from "../lib/renderer/image-resources.js";
+
+const PNG = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAIAAAA2iEnWAAAAEElEQVR4nGP4z8AARAwoFABE0AX7pM/egAAAAABJRU5ErkJggg==", "base64");
+let CanvasKit;
+beforeAll(async () => {
+  CanvasKit = await CanvasKitInit({ wasmBinary: await Bun.file(new URL("../usr/lib/canvaskit/canvaskit.wasm", import.meta.url)).arrayBuffer() });
+});
+
+test("concurrent image consumers share one fetch and encoded image while owning independent handles", async () => {
+  let fetched = 0;
+  let decoded = 0;
+  const makeImage = CanvasKit.MakeImageFromEncoded;
+  CanvasKit.MakeImageFromEncoded = (bytes) => { decoded++; return makeImage(bytes); };
+  const load = createImageResourceLoader(CanvasKit, async url => {
+    fetched++;
+    return { ok: true, url, body: PNG };
+  });
+  const resources = [];
+  try {
+    const document = {};
+    resources.push(...await Promise.all(Array.from({ length: 20 }, () => load(document, "https://image.test/icon.png"))));
+    expect(fetched).toBe(1);
+    expect(decoded).toBe(1);
+    expect(resources[0]).not.toBe(resources[1]);
+    expect(resources[0].image).not.toBe(resources[1].image);
+    expect(resources[0].image.isAliasOf(resources[1].image)).toBe(true);
+    expect([resources[0].width, resources[0].height]).toEqual([2, 3]);
+    resources.shift().image.delete();
+    expect(resources[0].image.width()).toBe(2);
+    // Completed requests are not a permanent cache of possibly stale bytes.
+    resources.push(await load(document, "https://image.test/icon.png"));
+    expect(fetched).toBe(2);
+    expect(decoded).toBe(2);
+  } finally {
+    for (const resource of resources) resource.image.delete();
+    CanvasKit.MakeImageFromEncoded = makeImage;
+  }
+});
+
+test("image failures retry and requests from different documents do not coalesce", async () => {
+  let fetched = 0;
+  const load = createImageResourceLoader(CanvasKit, async url => {
+    fetched++;
+    return { ok: fetched > 1, status: fetched > 1 ? 200 : 404, url, body: PNG };
+  });
+  const document = {};
+  const failures = await Promise.allSettled([load(document, "https://image.test/a.png"), load(document, "https://image.test/a.png")]);
+  expect(fetched).toBe(1);
+  expect(failures.every(result => result.status === "rejected")).toBe(true);
+  const resources = await Promise.all([load(document, "https://image.test/a.png"), load({}, "https://image.test/a.png")]);
+  try {
+    expect(fetched).toBe(3);
+    expect(resources[0].image.isAliasOf(resources[1].image)).toBe(false);
+  } finally {
+    for (const resource of resources) resource.image.delete();
+  }
+});
+
+test("CORS image policies remain separate from unfiltered images and pending CORS loads cancel with their document", async () => {
+  let unfiltered = 0, aborted = 0;
+  const requests = [];
+  const load = createImageResourceLoader(CanvasKit, async url => {
+    unfiltered++;
+    return { ok: true, url: `${url}?redirected`, body: PNG };
+  }, request => {
+    requests.push(request);
+    if (request.url.endsWith("pending")) {
+      const deferred = Promise.withResolvers();
+      deferred.promise.abort = () => { aborted++; deferred.reject(new Error("aborted")); };
+      return deferred.promise;
+    }
+    return Promise.resolve({ status: 200, url: request.url, body: new Blob([PNG]).stream() });
+  });
+  const document = {};
+  const url = "https://foreign.test/icon.png";
+  const resources = await Promise.all([load(document, url), load(document, url, "same-origin"),
+    load(document, url, "same-origin"), load(document, url, "include")]);
+  try {
+    expect(unfiltered).toBe(1);
+    expect(requests.map(request => [request.mode, request.credentials])).toEqual([["cors", "same-origin"], ["cors", "include"]]);
+    expect(resources.map(resource => resource.originClean)).toEqual([undefined, true, true, true]);
+    expect(resources[0].requestedURL).toBe(url);
+    expect(resources[0].url).toBe(`${url}?redirected`);
+    expect(resources[1].image.isAliasOf(resources[2].image)).toBe(true);
+    const pending = load(document, "https://foreign.test/pending", "same-origin");
+    load.cancelDocument(document);
+    await expect(pending).rejects.toThrow("aborted");
+    expect(aborted).toBe(1);
+  } finally {
+    for (const resource of resources) resource.image.delete();
+  }
+});

package/test/local-media.test.js

@@ -0,0 +1,84 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { mkdtemp, rm } from "node:fs/promises";
+import { connect } from "node:net";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createBrowser } from "../lib/headless-shell.js";
+
+const pulseAvailable = await new Promise((resolve) => {
+  const socket = connect({ host: "127.0.0.1", port: 4713 });
+  const finish = (available) => { clearTimeout(timer); socket.destroy(); resolve(available); };
+  const timer = setTimeout(() => finish(false), 1000);
+  socket.once("connect", () => finish(true));
+  socket.once("error", () => finish(false));
+});
+
+let directory, browser, server, videoURL, audioURL;
+beforeAll(async () => {
+  directory = await mkdtemp(join(tmpdir(), "buninu-local-media-"));
+  videoURL = Bun.pathToFileURL(join(directory, "影片 空白.mp4")).href;
+  audioURL = Bun.pathToFileURL(join(directory, "音訊 空白.mp3")).href;
+  await Bun.write(Bun.fileURLToPath(videoURL), Bun.file(new URL("./fixtures/long-video.mp4", import.meta.url)));
+  await Bun.write(Bun.fileURLToPath(audioURL), Bun.file(new URL("./fixtures/tone.mp3", import.meta.url)));
+  server = Bun.serve({ port: 0, fetch: () => new Response(
+    `<!doctype html><video src="${videoURL}"></video>`, { headers: { "content-type": "text/html" } },
+  ) });
+  browser = await createBrowser({ spareRenderer: false });
+});
+afterAll(async () => {
+  browser?.close();
+  server?.stop(true);
+  if (directory) await rm(directory, { recursive: true, force: true });
+});
+
+const evaluate = (source) => browser.context.evaluate(source);
+async function until(expression) {
+  const deadline = Date.now() + 5000;
+  while (Date.now() < deadline) {
+    if (await evaluate(expression)) return;
+    await Bun.sleep(25);
+  }
+  expect(await evaluate(expression)).toBe(true);
+}
+
+test("a standalone file video with spaces and Unicode in its URL decodes and plays", async () => {
+  await browser.context.navigate(videoURL);
+  expect(await evaluate("document.querySelector('video').src")).toBe(videoURL);
+  await evaluate("document.querySelector('video').play()");
+  await until("(() => { const v = document.querySelector('video'); return v.readyState >= 2 && v.currentTime > 0.1; })()");
+  expect(await evaluate("document.querySelector('video').error")).toBe(null);
+  expect(await evaluate("document.querySelector('video').duration")).toBeGreaterThan(1);
+  await evaluate("document.querySelector('video').pause()");
+});
+
+test("a standalone file audio document decodes and seeks without requiring an output server", async () => {
+  await browser.context.navigate(audioURL);
+  expect(await evaluate("document.querySelector('audio').src")).toBe(audioURL);
+  await evaluate("document.querySelector('audio').currentTime = 0.1");
+  await until("document.querySelector('audio').readyState >= 2");
+  expect(await evaluate("document.querySelector('audio').error")).toBe(null);
+  expect(await evaluate("document.querySelector('audio').duration")).toBeGreaterThan(0.5);
+  expect(await evaluate("document.querySelector('audio').currentTime")).toBeCloseTo(0.1);
+  // Local rendering permission does not grant JavaScript file fetch access.
+  expect(await evaluate(`fetch(${JSON.stringify(audioURL)}).then(() => 'read', () => 'blocked')`)).toBe("blocked");
+});
+
+test.skipIf(!pulseAvailable)("a standalone file audio document advances playback with an output server", async () => {
+  await browser.context.navigate(audioURL);
+  await evaluate("document.querySelector('audio').play()");
+  await until("(() => { const a = document.querySelector('audio'); return a.readyState >= 2 && a.currentTime > 0.1; })()");
+  expect(await evaluate("document.querySelector('audio').error")).toBe(null);
+  await evaluate("document.querySelector('audio').pause()");
+});
+
+test("HTTP and data documents cannot load file media or fetch local bytes after local navigation", async () => {
+  const html = `<!doctype html><video src="${videoURL}"></video>`;
+  for (const url of [`http://127.0.0.1:${server.port}/`, `data:text/html,${encodeURIComponent(html)}`]) {
+    await browser.context.navigate(url);
+    await evaluate("document.querySelector('video').play()");
+    await until("document.querySelector('video').error !== null");
+    expect(await evaluate("document.querySelector('video').error.message")).toBe("blocked video request for file:");
+    expect(await evaluate("document.querySelector('video').readyState")).toBe(0);
+    expect(await evaluate(`fetch(${JSON.stringify(audioURL)}).then(() => 'read', () => 'blocked')`)).toBe("blocked");
+  }
+});

package/test/media-seek-snapshot.test.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'bun:test';
+
+test('seeking uses media bytes appended after the current decoder was opened', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/media-seek-snapshot.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('latest video snapshot seek passed');
+}, 30_000);

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

@@ -0,0 +1,98 @@
+import { beforeAll, expect, test } from 'bun:test';
+import wasmpeg from '../vendor/wasmpeg/src/js/index.js';
+import { createMediaSourceScope } from '../lib/renderer/media-source.js';
+
+// These synthetic fMP4 fixtures were generated from ffmpeg's testsrc2 filter:
+// 6 seconds, 10 fps, x264/yuv420p, 2-second GOPs, fragmented empty-moov MP4;
+// dimensions are 64x48 and 128x96. They contain no third-party media.
+let small, large;
+beforeAll(async () => {
+  await wasmpeg.load();
+  [small, large] = await Promise.all(['small', 'large'].map(async name =>
+    new Uint8Array(await Bun.file(new URL(`./fixtures/mse-switch-${name}.mp4`, import.meta.url)).arrayBuffer())));
+});
+function visit(bytes, callback, from = 0, to = bytes.length) {
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.length);
+  for (let offset = from; offset + 8 <= to;) {
+    const size = view.getUint32(offset), type = String.fromCharCode(...bytes.subarray(offset + 4, offset + 8));
+    if (size < 8 || offset + size > to) break;
+    callback(type, offset + 8, offset + size, offset);
+    if (['moov', 'trak', 'mdia', 'moof', 'traf'].includes(type)) visit(bytes, callback, offset + 8, offset + size);
+    offset += size;
+  }
+}
+function shifted(original, seconds) {
+  const bytes = original.slice(), view = new DataView(bytes.buffer);
+  let timescale;
+  visit(bytes, (type, data) => { if (type === 'mdhd') timescale = view.getUint32(data + (bytes[data] ? 20 : 12)); });
+  visit(bytes, (type, data) => {
+    if (type !== 'tfdt') return;
+    if (bytes[data]) view.setBigUint64(data + 4, view.getBigUint64(data + 4) + BigInt(seconds * timescale));
+    else view.setUint32(data + 4, view.getUint32(data + 4) + seconds * timescale);
+  });
+  return bytes;
+}
+function context() {
+  const tasks = [], scope = createMediaSourceScope({ origin: 'https://media.test', schedule: task => tasks.push(task), DOMException });
+  const flush = () => { while (tasks.length) tasks.shift()(); };
+  const source = new scope.MediaSource(); source.attach('blob:https://media.test/clip'); flush();
+  const buffer = source.addSourceBuffer('video/mp4; codecs="avc1.64000a"');
+  return { source, pipe: buffer._pipe, append(bytes) { buffer.appendBuffer(bytes); flush(); } };
+}
+async function frameHashes(bytes) {
+  const decoder = await wasmpeg.decode(bytes, { format: 'mp4' }), hashes = [];
+  try { for (let frame; (frame = decoder.nextFrame(128, 96));) hashes.push(Bun.hash(frame)); }
+  finally { decoder.close(); }
+  return hashes;
+}
+
+test('MSE configuration changes preserve every frame and allow backward selection across A-B-A epochs', async () => {
+  const c = context(), second = shifted(large, 6), third = shifted(small, 12);
+  c.append(small); c.append(second); c.append(third); c.source.endOfStream();
+  const a = c.pipe.snapshotAt(2), b = c.pipe.snapshotAt(8), a2 = c.pipe.snapshotAt(14);
+  expect([a.startTime, a.endTime, b.startTime, b.endTime, a2.startTime, a2.endTime]).toEqual([0, 6, 6, 12, 12, Infinity]);
+  expect(new Set([a.id, b.id, a2.id]).size).toBe(3);
+  expect(await frameHashes(a.bytes)).toEqual(await frameHashes(small));
+  expect(await frameHashes(b.bytes)).toEqual(await frameHashes(second));
+  expect(await frameHashes(a2.bytes)).toEqual(await frameHashes(third));
+  expect(await frameHashes(c.pipe.snapshotAt(1).bytes)).toEqual(await frameHashes(small));
+});
+
+test('identical init retries do not create an epoch or duplicate media, while split init headers remain usable', async () => {
+  const c = context();
+  let initEnd;
+  visit(small, (type, data, end) => { if (type === 'moov') initEnd = end; });
+  c.append(small.subarray(0, initEnd));
+  const pendingId = c.pipe.snapshotAt(0).id;
+  c.append(small.subarray(0, initEnd));
+  expect(c.pipe.snapshotAt(0).id).toBe(pendingId);
+  for (let offset = 0; offset < small.length; offset += 37) c.append(small.subarray(offset, offset + 37));
+  const initial = c.pipe.snapshotAt(2);
+  c.append(small);
+  const retry = c.pipe.snapshotAt(2);
+  expect(retry.id).toBe(initial.id);
+  expect(retry.endTime).toBe(Infinity);
+  expect(await frameHashes(retry.bytes)).toEqual(await frameHashes(small));
+});
+
+test('overlapping replacement fragments are deduplicated only within their initialization', async () => {
+  const c = context(); c.append(small);
+  const second = shifted(large, 2); c.append(second);
+  expect(c.pipe.snapshotAt(1).endTime).toBe(2);
+  expect(c.pipe.snapshotAt(3).startTime).toBe(2);
+  expect(await frameHashes(c.pipe.snapshotAt(3).bytes)).toEqual(await frameHashes(second));
+});
+
+test('ordinary MP4 including a zero-sized final mdat keeps its complete bytes across appends', async () => {
+  const bytes = new Uint8Array(await Bun.file(new URL('./fixtures/video.mp4', import.meta.url)).arrayBuffer());
+  const expected = await frameHashes(bytes);
+  for (const zeroSized of [false, true]) {
+    const input = bytes.slice();
+    if (zeroSized) visit(input, (type, data, end, offset) => { if (type === 'mdat') new DataView(input.buffer).setUint32(offset, 0); });
+    const c = context();
+    for (let offset = 0; offset < input.length; offset += 113) c.append(input.subarray(offset, offset + 113));
+    c.source.endOfStream();
+    expect(c.pipe.snapshotAt(0).bytes).toEqual(input);
+    expect(await frameHashes(c.pipe.snapshotAt(0).bytes)).toEqual(expected);
+  }
+});

package/test/media-source-webm-accounting.test.js

@@ -0,0 +1,98 @@
+import { expect, test } from "bun:test";
+import { createMediaSourceScope } from "../lib/renderer/media-source.js";
+
+function context(appendQuota = 1000) {
+  const tasks = [];
+  const media = createMediaSourceScope({
+    origin: "https://media.test", DOMException, appendQuota,
+    schedule: task => tasks.push(task),
+  });
+  const flush = () => { while (tasks.length) tasks.shift()(); };
+  const source = new media.MediaSource();
+  source.attach("blob:https://media.test/audio");
+  flush();
+  const buffer = source.addSourceBuffer('audio/webm; codecs="opus"');
+  const append = bytes => { buffer.appendBuffer(bytes); flush(); };
+  return { source, buffer, flush, append };
+}
+
+// One finite Cluster, timecode 0, with a SimpleBlock at 1000 ms.
+const cluster = Uint8Array.from([
+  0x1f, 0x43, 0xb6, 0x75, 0x8a, 0xe7, 0x81, 0x00,
+  0xa3, 0x85, 0x81, 0x03, 0xe8, 0x00, 0x00,
+]);
+const header = Uint8Array.from([0x1a, 0x45, 0xdf, 0xa3, 0x80]);
+
+test("idle abort discards an incomplete WebM element before the next initialization", () => {
+  const { buffer, flush, append } = context();
+  append(cluster.subarray(0, 7));
+  expect(buffer._pipe.size).toBe(0);
+  const events = [];
+  buffer.addEventListener("abort", () => events.push("abort"));
+  buffer.addEventListener("updateend", () => events.push("updateend"));
+  buffer.abort();
+  flush();
+  expect(buffer._accountedBytes).toBe(0);
+  expect(events).toEqual([]);
+  const next = new Uint8Array(Bun.concatArrayBuffers([header, cluster]));
+  append(next);
+  expect(buffer._pipe.bytes()).toEqual(next);
+  expect(buffer.buffered.end(0)).toBeCloseTo(1.02, 5);
+});
+
+test("abort cancels a queued WebM append and clears a previous incomplete element", () => {
+  const { buffer, flush, append } = context();
+  append(cluster.subarray(0, 7));
+  const events = [];
+  buffer.addEventListener("abort", () => events.push("abort"));
+  buffer.addEventListener("updateend", () => events.push("updateend"));
+  buffer.appendBuffer(cluster.subarray(7));
+  buffer.abort();
+  flush();
+  expect(buffer.updating).toBe(false);
+  expect(buffer._accountedBytes).toBe(0);
+  expect(buffer._pipe.size).toBe(0);
+  expect(events).toEqual(["abort", "updateend"]);
+  append(cluster);
+  expect(buffer._pipe.bytes()).toEqual(cluster);
+});
+
+test("a split retry completed after eviction cannot refund another buffer's quota", () => {
+  const { source, buffer, flush, append } = context(100);
+  const other = source.addSourceBuffer('audio/webm; codecs="opus"');
+  // An independent 50-byte Void element reserves the other buffer's quota.
+  const padding = new Uint8Array(50);
+  padding.set([0xec, 0xb0]);
+  other.appendBuffer(padding);
+  flush();
+  append(cluster);
+  append(cluster.subarray(0, 7));
+  buffer.remove(0, 2);
+  flush();
+  append(cluster.subarray(7));
+  expect(buffer._accountedBytes).toBe(0);
+  expect(other._accountedBytes).toBe(50);
+  expect(buffer._pipe.bytes()).toEqual(cluster);
+  expect(() => buffer.appendBuffer(new Uint8Array(51))).toThrow("The SourceBuffer is full.");
+});
+
+test("repeated unknown Clusters retain only the current unused prefix until abort or EOF", () => {
+  for (const finish of ["abort", "endOfStream"]) {
+    const { source, buffer, append } = context();
+    const live = cluster.slice();
+    live[4] = 0xff;
+    append(live);
+    expect(buffer._accountedBytes).toBe(live.length);
+    for (let retry = 0; retry < 3; retry++) {
+      append(live);
+      // The current prefix remains necessary if a later Block is new.
+      expect(buffer._webmStream.pendingSize).toBe(8);
+      expect(buffer._accountedBytes).toBe(live.length + 8);
+      expect(buffer._pipe.bytes()).toEqual(live);
+    }
+    if (finish === "abort") buffer.abort();
+    else source.endOfStream();
+    expect(buffer._webmStream.pendingSize).toBe(0);
+    expect(buffer._accountedBytes).toBe(live.length);
+  }
+});