buninu-browser 0.0.2

package/test/poc-backend.js

@@ -0,0 +1,189 @@
+#!/usr/bin/env bun
+
+import CanvasKitInit from "../usr/lib/canvaskit/canvaskit.js";
+import { CdpServer } from "../lib/cdp-server.js";
+
+const canvasKitDirectory = new URL("../usr/lib/canvaskit/", import.meta.url);
+const fontDirectory = new URL("../usr/share/fonts/", import.meta.url);
+const wasmBinary = await Bun.file(new URL("canvaskit.wasm", canvasKitDirectory)).arrayBuffer();
+const CanvasKit = await CanvasKitInit({ wasmBinary });
+const fontCatalogue = await Bun.file(new URL("fonts.json", fontDirectory)).json();
+const uiFontNames = [
+  fontCatalogue.sets.ui.regular,
+  ...fontCatalogue.sets.ui.fallback,
+];
+const fontBuffers = await Promise.all(uiFontNames.map((name) =>
+  Bun.file(new URL(fontCatalogue.fonts[name].file, fontDirectory)).arrayBuffer()));
+const fontManager = CanvasKit.FontMgr.FromData(...fontBuffers);
+const fontFamilies = uiFontNames.flatMap((name) =>
+  fontCatalogue.fonts[name].families ?? [name]);
+const emojiFontFamilies = [
+  ...fontFamilies.filter((name) => name.includes("Emoji")),
+  ...fontFamilies.filter((name) => !name.includes("Emoji")),
+];
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const emojiPresentation = /^\p{Emoji_Presentation}/u;
+
+if (!fontManager) {
+  throw new Error("Unable to load the bundled UI, CJK, and emoji fonts");
+}
+
+const page = {
+  url: "about:blank",
+  title: "",
+  text: "",
+  width: 800,
+  height: 600,
+  png: "",
+};
+
+function decodeEntities(text) {
+  const named = new Map([
+    ["amp", "&"], ["apos", "'"], ["gt", ">"], ["lt", "<"],
+    ["nbsp", " "], ["quot", '"'],
+  ]);
+  return text.replace(/&(#x[\da-f]+|#\d+|[a-z]+);/gi, (entity, name) => {
+    if (name[0] !== "#") return named.get(name.toLowerCase()) ?? entity;
+    const hexadecimal = name[1]?.toLowerCase() === "x";
+    const codePoint = Number.parseInt(name.slice(hexadecimal ? 2 : 1), hexadecimal ? 16 : 10);
+    try {
+      return String.fromCodePoint(codePoint);
+    } catch {
+      return "\uFFFD";
+    }
+  });
+}
+
+function extractPage(html, contentType = "") {
+  if (!contentType.toLowerCase().includes("html")) {
+    return { title: "", text: html };
+  }
+  const title = decodeEntities(
+    html.match(/<title\b[^>]*>([\s\S]*?)<\/title\s*>/i)?.[1]
+      ?.replace(/<[^>]*>/g, "")
+      .trim() ?? "",
+  );
+  let body = html.match(/<body\b[^>]*>([\s\S]*?)<\/body\s*>/i)?.[1] ?? html;
+  body = body
+    .replace(/<!--([\s\S]*?)-->/g, "")
+    .replace(/<(script|style|noscript|template)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "")
+    .replace(/<br\b[^>]*\/?\s*>/gi, "\n")
+    .replace(/<[^>]*>/g, "");
+  return { title, text: decodeEntities(body) };
+}
+
+function wrapText(text) {
+  return text
+    .replace(/\r\n?/g, "\n")
+    .split("\n")
+    .flatMap((line) => {
+      const normalized = line.replace(/[\t\f\v ]+/g, " ").trim();
+      return normalized ? Bun.wrapAnsi(normalized, 40, { hard: true, trim: false }).split("\n") : [""];
+    });
+}
+
+function render() {
+  const width = Math.max(1, Math.floor(page.width));
+  const height = Math.max(1, Math.floor(page.height));
+  const surface = CanvasKit.MakeSurface(width, height);
+  if (!surface) throw new Error(`Unable to create a ${width}x${height} CanvasKit surface`);
+  const canvas = surface.getCanvas();
+  canvas.clear(CanvasKit.WHITE);
+  let y = 12;
+  for (const line of wrapText(page.text)) {
+    if (y > height) break;
+    const style = new CanvasKit.ParagraphStyle({
+      textStyle: {
+        color: CanvasKit.BLACK,
+        fontFamilies,
+        fontSize: 22,
+      },
+      maxLines: 1,
+    });
+    const builder = CanvasKit.ParagraphBuilder.Make(style, fontManager);
+    for (const { segment } of graphemes.segment(line || " ")) {
+      const emoji = emojiPresentation.test(segment) || segment.includes("\uFE0F");
+      if (emoji) {
+        builder.pushStyle(CanvasKit.TextStyle({
+          color: CanvasKit.BLACK,
+          fontFamilies: emojiFontFamilies,
+          fontSize: 22,
+        }));
+      }
+      builder.addText(segment);
+      if (emoji) builder.pop();
+    }
+    const paragraph = builder.build();
+    builder.delete();
+    paragraph.layout(Math.max(1, width - 32));
+    canvas.drawParagraph(paragraph, 16, y);
+    paragraph.delete();
+    y += 31;
+  }
+  surface.flush();
+  const image = surface.makeImageSnapshot();
+  const bytes = image.encodeToBytes(CanvasKit.ImageFormat.PNG, 100);
+  page.png = Buffer.from(bytes).toString("base64");
+  image.delete();
+  surface.delete();
+}
+
+async function navigate(url) {
+  page.url = url;
+  if (url === "about:blank") {
+    page.title = "";
+    page.text = "";
+    render();
+    return;
+  }
+  try {
+    const response = await fetch(url);
+    const html = await response.text();
+    const extracted = extractPage(html, response.headers.get("content-type") ?? "text/html");
+    page.title = extracted.title;
+    page.text = response.ok
+      ? extracted.text
+      : `HTTP ${response.status} ${response.statusText}\n${extracted.text}`;
+  } catch (error) {
+    page.title = "Network error";
+    page.text = `${error}`;
+  }
+  render();
+}
+
+const context = {
+  navigate,
+  async reload() {
+    await navigate(page.url);
+  },
+  resize(width, height) {
+    page.width = width;
+    page.height = height;
+    render();
+  },
+  screenshot() {
+    return page.png;
+  },
+  title() {
+    return page.title;
+  },
+  cdp() {
+    return {};
+  },
+};
+
+render();
+
+const portArgument = Bun.argv.find((argument) => argument.startsWith("--remote-debugging-port="));
+const requestedPort = Number(portArgument?.slice("--remote-debugging-port=".length) ?? 9222);
+const server = CdpServer.create(context).listen(requestedPort, "127.0.0.1");
+console.error(`DevTools listening on ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+
+function shutdown() {
+  server.stop(true);
+  fontManager.delete();
+  process.exit(0);
+}
+
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/test/poc-backend.test.js

@@ -0,0 +1,154 @@
+import { expect, test } from "bun:test";
+
+const TEST_WIDTH = 640;
+const TEST_HEIGHT = 360;
+const RESIZED_WIDTH = 480;
+const RESIZED_HEIGHT = 240;
+
+function fixtureHtml(includeScript = true) {
+  const script = includeScript
+    // Runs in the page sandbox without changing what is rendered.
+    ? "<script>var sandboxProbe = [typeof process, typeof Bun, typeof require].join('/')</script>"
+    : "";
+  return `<!doctype html>
+    <meta charset="utf-8">
+    <title>POC integration</title>
+    <style>title { display: none }</style>
+    <h1>POC integration</h1>
+    Buninu Browser 的第一個整合測試 😀 🎉 ✅ 🏳️‍🌈 🇹🇼<br>
+    This line is deliberately longer than forty columns so wrapping is exercised.
+    <strong>Tags are discarded but their text remains.</strong>
+    ${script}`;
+}
+
+async function readDevToolsUrl(stream, timeout = 15_000) {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let output = "";
+  let timer;
+  try {
+    return await Promise.race([
+      (async () => {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) throw new Error(`Browser exited before announcing CDP:\n${output}`);
+          output += decoder.decode(value, { stream: true });
+          const match = output.match(/DevTools listening on (ws:\/\/[^\s]+)/);
+          if (match) return match[1];
+        }
+      })(),
+      new Promise((_, reject) => {
+        timer = setTimeout(() => reject(new Error(`Timed out waiting for CDP:\n${output}`)), timeout);
+      }),
+    ]);
+  } finally {
+    clearTimeout(timer);
+    reader.releaseLock();
+  }
+}
+
+async function pngMetadata(bytes) {
+  return new Bun.Image(bytes).metadata();
+}
+
+test("PATH shim launches the formal shell with the Chromium and Bun.WebView contract", async () => {
+  const fixture = Bun.serve({
+    port: 0,
+    fetch(request) {
+      const url = new URL(request.url);
+      return new Response(fixtureHtml(url.pathname !== "/without-script"), {
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    },
+  });
+
+  const path = `${import.meta.dir}:${Bun.env.PATH ?? ""}`;
+  const executable = Bun.which("chromium-headless-shell", { PATH: path });
+  expect(executable).toBe(`${import.meta.dir}/chromium-headless-shell`);
+
+  const browser = Bun.spawn({
+    cmd: [
+      executable,
+      "--remote-debugging-port=0",
+      "--no-first-run",
+      "--no-default-browser-check",
+      "--headless",
+    ],
+    cwd: new URL("..", import.meta.url).pathname,
+    stdin: "ignore",
+    stdout: "ignore",
+    stderr: "pipe",
+  });
+
+  let view;
+  try {
+    const browserWebSocketUrl = await readDevToolsUrl(browser.stderr);
+    const port = new URL(browserWebSocketUrl).port;
+
+    const version = await fetch(`http://127.0.0.1:${port}/json/version`).then((response) => response.json());
+    expect(version["Protocol-Version"]).toBe("1.3");
+    expect(version.webSocketDebuggerUrl).toBe(browserWebSocketUrl);
+
+    view = new Bun.WebView({
+      backend: { type: "chrome", url: browserWebSocketUrl },
+      width: TEST_WIDTH,
+      height: TEST_HEIGHT,
+    });
+
+    const screencastFrame = new Promise((resolve) => {
+      view.addEventListener("Page.screencastFrame", (event) => resolve(event.data), { once: true });
+    });
+
+    await view.resize(TEST_WIDTH, TEST_HEIGHT);
+    await view.navigate(`http://127.0.0.1:${fixture.port}/with-script`);
+    expect(view.url).toBe(`http://127.0.0.1:${fixture.port}/with-script`);
+    expect(view.title).toBe("POC integration");
+    expect(await view.evaluate("document.title")).toBe("POC integration");
+    const renderedText = await view.evaluate("document.body.innerText");
+    expect(renderedText.split("POC integration")).toHaveLength(2);
+    // Page scripts run, but see none of Bun's host APIs.
+    expect(await view.evaluate("sandboxProbe")).toBe("undefined/undefined/undefined");
+
+    await view.cdp("Page.startScreencast", {
+      format: "png",
+      maxWidth: TEST_WIDTH,
+      maxHeight: TEST_HEIGHT,
+      everyNthFrame: 1,
+    });
+    const frame = await screencastFrame;
+    expect(typeof frame.data).toBe("string");
+    expect(frame.data.length).toBeGreaterThan(100);
+    await view.cdp("Page.screencastFrameAck", { sessionId: frame.sessionId });
+    await view.cdp("Page.stopScreencast");
+
+    const first = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(await pngMetadata(first)).toEqual({ width: TEST_WIDTH, height: TEST_HEIGHT, format: "png" });
+    expect(first.length).toBeGreaterThan(1_000);
+
+    await view.navigate(`http://127.0.0.1:${fixture.port}/without-script`);
+    const withoutScript = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(withoutScript)).toBe(Bun.hash(first));
+
+    await view.resize(RESIZED_WIDTH, RESIZED_HEIGHT);
+    const resized = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(await pngMetadata(resized)).toEqual({
+      width: RESIZED_WIDTH,
+      height: RESIZED_HEIGHT,
+      format: "png",
+    });
+    expect(Bun.hash(resized)).not.toBe(Bun.hash(first));
+
+    const capture = await view.cdp("Page.captureScreenshot", { format: "png" });
+    expect(await pngMetadata(Buffer.from(capture.data, "base64"))).toEqual({
+      width: RESIZED_WIDTH,
+      height: RESIZED_HEIGHT,
+      format: "png",
+    });
+  } finally {
+    view?.close();
+    Bun.WebView.closeAll();
+    browser.kill();
+    fixture.stop(true);
+    await browser.exited;
+  }
+}, 30_000);

package/test/positioning.test.js

@@ -0,0 +1,112 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+import { layoutText } from "../lib/layout/text-layout.js";
+import { buildDisplayList } from "../lib/paint/display-list.js";
+import { RenderTreeBuilder } from "../lib/render-tree/index.js";
+import { StyleEngine } from "../lib/style/computed-style.js";
+
+function render(html, css) {
+  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: 400,
+    viewportHeight: 300,
+    lineHeight: 20,
+    measureText: (text) => text.length * 10,
+    fontMetrics: () => ({ ascent: 16, height: 20 }),
+  });
+  const box = (selector, pseudo = null) => {
+    const element = document.querySelector(selector);
+    const found = layout.boxes.find((candidate) => {
+      const node = tree.nodesById.get(candidate.nodeId);
+      return node?.domNode === element && (node.pseudo ?? null) === pseudo;
+    });
+    return found && { x: found.x, y: found.y, width: found.width, height: found.height };
+  };
+  window.happyDOM.abort();
+  return { layout, tree, box };
+}
+
+test("absolute boxes leave the flow and resolve insets against the positioned ancestor's padding box", () => {
+  const { box } = render(
+    `<div class="card"><p>one</p><span class="badge">!</span><p>two</p></div>`,
+    `.card { position:relative; margin:10px; padding:5px; border:2px solid red; height:100px }
+     p { margin:0 }
+     .badge { position:absolute; top:4px; right:6px; width:30px; height:12px }`,
+  );
+  // The second paragraph follows the first directly: the badge takes no space.
+  expect(box("p:last-of-type").y).toBe(10 + 2 + 5 + 20);
+  // Padding box: x 12..388 (card 10..390 minus border), y 12.
+  expect(box(".badge")).toEqual({ x: 388 - 6 - 30, y: 12 + 4, width: 30, height: 12 });
+});
+
+test("left+right and top+bottom stretch an absolute box, percentages use the containing block", () => {
+  const { box } = render(
+    `<div class="frame"><div class="fill"></div><div class="half"></div></div>`,
+    `.frame { position:relative; width:200px; height:100px }
+     .fill { position:absolute; inset:10px 20px }
+     .half { position:absolute; top:50%; left:25%; width:10px; height:10px }`,
+  );
+  expect(box(".fill")).toEqual({ x: 20, y: 10, width: 160, height: 80 });
+  expect(box(".half")).toMatchObject({ x: 50, y: 50 });
+});
+
+test("relative offsets and translate move a box and its content without affecting siblings", () => {
+  const { box, layout } = render(
+    `<div class="moved">text</div><div class="next">after</div><div class="centered"></div>`,
+    `.moved { position:relative; top:5px; left:7px }
+     .centered { width:40px; height:20px; transform: translate(-50%, 50%) }`,
+  );
+  expect(box(".moved")).toMatchObject({ x: 7, y: 5 });
+  expect(layout.fragments.find((fragment) => fragment.text === "text")).toMatchObject({ x: 7, y: 5 });
+  expect(box(".next").y).toBe(20);
+  expect(box(".centered")).toMatchObject({ x: -20, y: 40 + 10 });
+});
+
+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(
+    `<ol><li class="step">one</li><li class="step">two</li></ol>`,
+    `ol { margin:0; padding:0; list-style:none }
+     .step { position:relative; height:100px; width:200px }
+     .step:not(:last-child)::after { content:"\\2192"; position:absolute; top:50%; right:-12px;
+       transform:translate(50%,-50%); width:28px; height:28px; display:flex; box-sizing:border-box }`,
+  );
+  const arrow = box(".step", "after");
+  // Right edge at 200 + 12 = 212, then shifted right by half its width and up by half its height.
+  expect(arrow).toEqual({ x: 212 - 28 + 14, y: 50 - 14, width: 28, height: 28 });
+});
+
+test("positioned boxes paint after in-flow content, ordered by z-index", () => {
+  const { layout } = render(
+    `<div class="a">A</div><div class="b">B</div><div class="c">C</div>`,
+    `.a { position:relative; z-index:2; background:#111 }
+     .b { background:#222 }
+     .c { position:absolute; top:0; background:#333; z-index:-1 }`,
+  );
+  const colors = buildDisplayList(layout).items.filter((item) => item.op === "fillRect").map((item) => item.color);
+  expect(colors).toEqual(["rgba(51, 51, 51, 1)", "rgba(34, 34, 34, 1)", "rgba(17, 17, 17, 1)"]);
+});
+
+test("a z-index stacking context paints its auto-positioned descendants after its own background", () => {
+  const { layout } = render(
+    `<header class="h"><nav class="n"><span class="t">Platform</span></nav></header><div class="later">L</div>`,
+    `.h { position:relative; z-index:32; background:#000 }
+     .n { position:relative; background:#111 }
+     .later { position:relative; background:#222 }`,
+  );
+  const items = buildDisplayList(layout).items;
+  const index = (predicate) => items.findIndex(predicate);
+  const header = index((item) => item.op === "fillRect" && item.color === "rgba(0, 0, 0, 1)");
+  const nav = index((item) => item.op === "fillRect" && item.color === "rgba(17, 17, 17, 1)");
+  const text = index((item) => item.op === "drawText" && item.text === "Platform");
+  const later = index((item) => item.op === "fillRect" && item.color === "rgba(34, 34, 34, 1)");
+  // Inside the z-index 32 context: header background, then nav, then text.
+  expect(header).toBeLessThan(nav);
+  expect(nav).toBeLessThan(text);
+  // The z-index auto sibling (z 0) paints before the z 32 context.
+  expect(later).toBeLessThan(header);
+});

package/test/render-tree.test.js

@@ -0,0 +1,103 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
+
+test("builds an engine-owned tree and excludes non-rendered DOM nodes", () => {
+  const { document, window } = parseHTMLDocument(`<body>
+    <div id="block">hello <span id="inline">中文 😀</span><br>next</div>
+    <p hidden>hidden attribute</p>
+    <script>script source</script><style>style source</style>
+  </body>`);
+  const tree = new RenderTreeBuilder().build(document);
+  const block = [...tree.nodesById.values()].find((node) => node.domNode.id === "block");
+  const inline = [...tree.nodesById.values()].find((node) => node.domNode.id === "inline");
+
+  expect(tree.root.type).toBe("root");
+  expect(tree.root.tagName).toBe("BODY");
+  expect(block.type).toBe("block");
+  expect(inline.type).toBe("inline");
+  expect(renderTreeText(tree)).toContain("hello 中文 😀\nnext");
+  expect(renderTreeText(tree)).not.toContain("hidden attribute");
+  expect(renderTreeText(tree)).not.toContain("script source");
+  window.happyDOM.abort();
+});
+
+test("keeps node IDs stable across generations of the same DOM", () => {
+  const { document, window } = parseHTMLDocument(`<body><p id="item">before</p></body>`);
+  const builder = new RenderTreeBuilder();
+  const first = builder.build(document);
+  const element = document.querySelector("#item");
+  const firstNode = [...first.nodesById.values()].find((node) => node.domNode === element);
+
+  element.firstChild.data = "after";
+  const second = builder.build(document);
+  const secondNode = second.nodesById.get(firstNode.id);
+
+  expect(second.generation).toBe(first.generation + 1);
+  expect(secondNode.domNode).toBe(element);
+  expect(secondNode.id).toBe(firstNode.id);
+  expect(renderTreeText(second)).toContain("after");
+  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>`);
+  const badge = document.createElement("div");
+  badge.id = "badge";
+  badge.style.cssText = "position:fixed;left:20px;top:30px;background:red";
+  badge.textContent = "overlay";
+  document.documentElement.appendChild(badge);
+
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document));
+  expect(tree.root.tagName).toBe("BODY");
+  expect(tree.root.children.at(-1).domNode).toBe(badge);
+  expect(tree.root.children.at(-1).style.position).toBe("fixed");
+  expect(renderTreeText(tree)).toContain("overlay");
+  window.happyDOM.abort();
+});
+
+test("never creates boxes for metadata misplaced in body", () => {
+  const { document, window } = parseHTMLDocument(`<body>
+    <h1>painted once</h1><title>not painted</title><meta name="x">
+  </body>`);
+  const tree = new RenderTreeBuilder().build(document);
+
+  expect(renderTreeText(tree).match(/painted once/g)).toHaveLength(1);
+  expect(renderTreeText(tree)).not.toContain("not painted");
+  window.happyDOM.abort();
+});
+
+test("form controls render their live value, placeholder, selection and checked state", async () => {
+  const { StyleEngine } = await import("../lib/style/computed-style.js");
+  const { document, window } = parseHTMLDocument(`<body>
+    <textarea id="area" rows="3">initial</textarea>
+    <input id="empty" placeholder="type here"><input id="secret" type="password" value="abc">
+    <input id="box" type="checkbox" checked><input id="off" type="checkbox"><input type="hidden" value="h">
+    <select id="pick"><option>one</option><option selected>two</option></select>
+    <input id="submit" type="submit"><button id="button"><b>bold</b> label</button>
+  </body>`);
+  document.getElementById("area").value = "changed\nby script";
+  const engine = new StyleEngine().compute(document);
+  const tree = new RenderTreeBuilder().build(document, engine);
+  const node = (id) => [...tree.nodesById.values()].find((candidate) => candidate.domNode.id === id && !candidate.pseudo);
+  const text = (id) => node(id).children.map((child) => child.text).join("");
+
+  expect(text("area")).toBe("changed\nby script");
+  expect(node("area").style).toMatchObject({ whiteSpace: "pre-wrap", fontFamily: ["monospace"] });
+  // Three rows of 13.333px * 1.2 lines, plus 2px padding and 1px border on each side.
+  expect(node("area").style.minHeight).toBeCloseTo(3 * 13.333 * 1.2, 2);
+  expect(text("empty")).toBe("type here");
+  expect(node("empty").children[0].style.color).toBe("rgba(117, 117, 117, 1)");
+  expect(text("secret")).toBe("•••");
+  expect(text("box")).toBe("✓");
+  expect(node("box").style.backgroundColor).toBe("rgba(0, 117, 255, 1)");
+  expect(text("off")).toBe("");
+  expect(renderTreeText(tree)).not.toContain("h\n");
+  expect(text("pick")).toBe("two ▾");
+  expect(text("submit")).toBe("Submit");
+  // A <button> keeps its own content.
+  expect(node("button").type).toBe("inline-block");
+  expect(renderTreeText(tree)).toContain("bold label");
+  window.happyDOM.abort();
+});

package/test/renderer-host.test.js

@@ -0,0 +1,69 @@
+import { afterEach, expect, test } from "bun:test";
+import { RendererHost } from "../lib/renderer/host.js";
+
+const entry = new URL("./fixtures/fake-renderer.js", import.meta.url).pathname;
+const hosts = [];
+afterEach(() => {
+  for (const host of hosts.splice(0)) host.close();
+});
+function host(options = {}) {
+  const created = new RendererHost({ entry, timeout: 1500, ...options });
+  hosts.push(created);
+  return created;
+}
+
+test("runs calls in a separate process with an empty environment", async () => {
+  const renderer = host();
+  await renderer.start();
+  const result = await renderer.call("echo", { hello: new Uint8Array([1, 2]) });
+  expect(result.pid).not.toBe(process.pid);
+  expect(result.pid).toBe(renderer.pid);
+  expect(result.argument.hello).toEqual(new Uint8Array([1, 2]));
+});
+
+test("kills a renderer that misses its deadline and restarts it on the next call", async () => {
+  const restarts = [];
+  const renderer = host({
+    onRestart: async (call) => {
+      restarts.push((await call("echo", "restored")).argument);
+    },
+  });
+  await renderer.start();
+  const firstPid = renderer.pid;
+  const started = performance.now();
+  await expect(renderer.call("hang")).rejects.toThrow("timed out");
+  expect(performance.now() - started).toBeLessThan(5000);
+  const after = await renderer.call("echo", "next");
+  expect(after.pid).not.toBe(firstPid);
+  expect(after.argument).toBe("next");
+  expect(restarts).toEqual(["restored"]);
+});
+
+test("surfaces renderer errors without their stack", async () => {
+  const renderer = host();
+  await expect(renderer.call("fail")).rejects.toThrow("renderer: Error: page crashed");
+  // An empty error is still a failure, not a successful undefined result.
+  await expect(renderer.call("fail-blank")).rejects.toThrow("renderer: unknown error");
+});
+
+test("ignores forged results and unknown messages from the renderer", async () => {
+  const renderer = host();
+  expect(await renderer.call("forge")).toBe("real");
+});
+
+test("fetches only http(s)/data resources on the renderer's behalf", async () => {
+  const requested = [];
+  const renderer = host({
+    fetch: async (url) => {
+      requested.push(new URL(String(url)).href);
+      return new Response("body!", { status: 200, headers: { "content-type": "text/css" } });
+    },
+  });
+  expect(await renderer.call("fetch", { url: "https://example.test/a.css", kind: "stylesheet" }))
+    .toEqual({ status: 200, bytes: 5 });
+  expect(await renderer.call("fetch", { url: "file:///etc/passwd", kind: "stylesheet" }))
+    .toEqual({ error: "blocked stylesheet request for file:" });
+  expect(await renderer.call("fetch", { url: "https://example.test/x", kind: "script-with-cookies" }))
+    .toEqual({ error: "blocked script-with-cookies request for https:" });
+  expect(requested).toEqual(["https://example.test/a.css"]);
+});

package/test/resolver.test.js

@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test";
+import { fetchResolved, HostResolver } from "../lib/network/resolver.js";
+
+const lookupFrom = (table, calls = []) => async (name, { family }) => {
+  calls.push(`${name}/${family}`);
+  const addresses = table[`${name}/${family}`];
+  if (!addresses) throw Object.assign(new Error("not found"), { code: "ENOTFOUND" });
+  return addresses.map((address) => ({ address, family }));
+};
+
+test("looks each family up separately, IPv4 first, and caches for the TTL", async () => {
+  const calls = [];
+  let now = 0;
+  const resolver = new HostResolver({
+    lookup: lookupFrom({ "a.test/4": ["192.0.2.1"], "a.test/6": ["2001:db8::1"] }, calls), ttl: 1000, now: () => now,
+  });
+  expect(await resolver.addresses("A.test")).toEqual([
+    { address: "192.0.2.1", family: 4 }, { address: "2001:db8::1", family: 6 },
+  ]);
+  await resolver.addresses("a.test");
+  expect(calls).toEqual(["a.test/4", "a.test/6"]);
+  now = 1001;
+  await resolver.addresses("a.test");
+  expect(calls).toHaveLength(4);
+  // One family missing is fine; none is an error that is not cached.
+  const v6only = new HostResolver({ lookup: lookupFrom({ "b.test/6": ["2001:db8::2"] }) });
+  expect(await v6only.addresses("b.test")).toEqual([{ address: "2001:db8::2", family: 6 }]);
+  await expect(v6only.addresses("c.test")).rejects.toThrow("Unable to resolve c.test");
+});
+
+test("connects to the address with the host name in Host and TLS, falling back on connect errors", async () => {
+  const resolver = new HostResolver({ lookup: lookupFrom({ "a.test/4": ["192.0.2.1"], "a.test/6": ["2001:db8::1"] }) });
+  const seen = [];
+  const fakeFetch = async (url, init) => {
+    seen.push({ url, host: new Headers(init.headers).get("host"), serverName: init.tls?.serverName });
+    if (url.includes("192.0.2.1")) throw Object.assign(new Error("refused"), { code: "ConnectionRefused" });
+    return new Response("ok");
+  };
+  const response = await fetchResolved(fakeFetch, resolver, "https://a.test:8443/p?q=1", { headers: { accept: "*/*" } });
+  expect(await response.text()).toBe("ok");
+  expect(seen).toEqual([
+    { url: "https://192.0.2.1:8443/p?q=1", host: "a.test:8443", serverName: "a.test" },
+    { url: "https://[2001:db8::1]:8443/p?q=1", host: "a.test:8443", serverName: "a.test" },
+  ]);
+  // IP literals are not resolved; other errors are not retried.
+  seen.length = 0;
+  await fetchResolved(fakeFetch, resolver, "http://[::1]/", {});
+  expect(seen[0].url).toBe("http://[::1]/");
+  const failing = async () => { throw Object.assign(new Error("bad cert"), { code: "ERR_TLS_CERT_ALTNAME_INVALID" }); };
+  await expect(fetchResolved(failing, resolver, "https://a.test/", {})).rejects.toThrow("bad cert");
+});