buninu-browser 0.1.0 → 0.2.1

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();
@@ -63,6 +64,11 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
           headers: { "Content-Type": "text/html; charset=utf-8" },
         });
       }
+      if (pathname === "/piano-input") {
+        return new Response('<!doctype html><input id="buninu-piano-input" type="text">', {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        });
+      }
       if (["/image", "/broken-image", "/data-image", "/dynamic-data-image"].includes(pathname)) {
         const dataUrl = `data:image/png;base64,${pixelPng.toString("base64")}`;
         const src = pathname === "/image" ? "/pixel.png" : pathname === "/data-image" ? dataUrl : "/missing.png";
@@ -107,6 +113,20 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
       height: 240,
     });
     await view.resize(480, 240);
+    await view.resize(480, 500);
+    await view.navigate("about:audio");
+    expect(view.url).toBe("about:audio");
+    expect(await view.evaluate("document.getElementById('buninu-piano-input').placeholder"))
+      .toBe("Play Piano · 彈鋼琴 · ピアノを弾く");
+    const blackWidths = await view.evaluate("[...document.querySelectorAll('.black-key')].map(key => key.getBoundingClientRect().width)");
+    expect(new Set(blackWidths).size).toBe(1);
+    const demoKey = await view.evaluate("document.querySelector('[data-piano-note=\"69\"]').getBoundingClientRect().toJSON()");
+    await view.cdp("Input.dispatchMouseEvent", { type: "mousePressed", x: demoKey.x + demoKey.width / 2,
+      y: demoKey.y + demoKey.height - 15, button: "left", clickCount: 1 });
+    await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", x: demoKey.x + demoKey.width / 2,
+      y: demoKey.y + demoKey.height - 15, button: "left", clickCount: 1 });
+    expect(await view.evaluate("document.activeElement.id")).toBe("buninu-piano-input");
+    await view.resize(480, 240);
     await view.navigate(`http://127.0.0.1:${fixture.port}/`);
 
     // The inline script runs (in the page sandbox) and renames the document.
@@ -173,6 +193,14 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
     await view.cdp("Input.insertText", { text: "q" });
     expect(await view.evaluate("document.getElementById('result').textContent")).toBe("q");
     expect(await view.evaluate("document.getElementById('editor').value")).toBe("original");
+    await view.navigate(`http://127.0.0.1:${fixture.port}/piano-input`);
+    const pianoRect = await view.evaluate("document.getElementById('buninu-piano-input').getBoundingClientRect().toJSON()");
+    await view.cdp("Input.dispatchMouseEvent", { type: "mousePressed", x: pianoRect.x + 10, y: pianoRect.y + 10, button: "left", clickCount: 1 });
+    await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", x: pianoRect.x + 10, y: pianoRect.y + 10, button: "left", clickCount: 1 });
+    await view.cdp("Input.insertText", { text: "j" });
+    await view.cdp("Input.dispatchKeyEvent", { type: "rawKeyDown", key: "k", code: "KeyK" });
+    await view.cdp("Input.dispatchKeyEvent", { type: "keyUp", key: "k", code: "KeyK" });
+    expect(await view.evaluate("document.getElementById('buninu-piano-input').value")).toBe("");
     await view.navigate(`http://127.0.0.1:${fixture.port}/`);
 
     expect(await view.evaluate("scrollY")).toBe(0);
@@ -316,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 });
+  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

@@ -3,6 +3,7 @@ import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { elementBounds, hitTest, interactiveRegions } from "../lib/input/hit-test.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";
 
 test("creates separate clickable regions for links sharing a line", () => {
   const { document, window } = parseHTMLDocument(
@@ -47,3 +48,39 @@ test("hit testing accounts for viewport scrolling", () => {
   expect(hitTest(tree, layout, rect.left + 1, rect.top + 1, scroll, { width: 800, height: 100 })?.element.getAttribute("href")).toBe("target");
   window.happyDOM.abort();
 });
+
+test("an overlapping broad text region does not steal a form control's click", () => {
+  const { document, window } = parseHTMLDocument(`<button id="button">+</button><textarea id="field"></textarea>`);
+  const button = document.getElementById("button");
+  const field = document.getElementById("field");
+  const tree = { nodesById: new Map([
+    [1, { domNode: button, style: {} }],
+    [2, { domNode: field, style: {} }],
+  ]) };
+  const layout = {
+    fragments: [{ y: 0, height: 40, runs: [{ nodeId: 1, x: 0, width: 500 }] }],
+    boxes: [
+      { nodeId: 1, x: 0, y: 0, width: 40, height: 40 },
+      { nodeId: 2, x: 50, y: 0, width: 400, height: 40 },
+    ],
+  };
+  expect(hitTest(tree, layout, 100, 20, { x: 0, y: 0 }, { width: 500, height: 100 })?.element).toBe(field);
+  window.happyDOM.abort();
+});
+
+test("hidden and pointer-events: none boxes let clicks through, but their opted-in descendants take them", () => {
+  const { document, window } = parseHTMLDocument(
+    `<body>
+      <div class="menu"><a href="through">through</a> <a class="open" href="open">open</a></div>
+      <div style="visibility: hidden"><a href="hidden">hidden</a> <button>ghost</button>
+        <a style="visibility: visible" href="shown">shown</a></div>
+      <a href="plain">plain</a>
+    </body>`,
+  );
+  const tree = new RenderTreeBuilder().build(document, new StyleEngine().compute(document, [`.menu { pointer-events: none } .menu .open { pointer-events: auto }`]));
+  const layout = layoutText(tree);
+  const regions = interactiveRegions(tree, layout, { x: 0, y: 0 }, { width: 800, height: 600 });
+
+  expect(regions.map((region) => region.element.getAttribute("href") ?? region.element.tagName)).toEqual(["open", "shown", "plain"]);
+  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/network-service.test.js

@@ -149,6 +149,73 @@ test("preflights non-simple requests and strips forbidden headers", async () =>
   await expect(network.pageFetch({ url: "file:///etc/passwd" }, document)).rejects.toThrow("cannot load file:");
 });
 
+test("coalesces identical subresources, caches fresh bodies, and revalidates ETags", async () => {
+  let freshRequests = 0;
+  let validatedRequests = 0;
+  const network = new NetworkService({ fetch: async (input, init = {}) => {
+    const url = new URL(typeof input === "string" ? input : input.url);
+    const headers = new Headers(init.headers ?? input.headers);
+    if (url.pathname === "/fresh") {
+      freshRequests++;
+      await Bun.sleep(10);
+      return new Response("fresh", { headers: { "cache-control": "public, max-age=60" } });
+    }
+    validatedRequests++;
+    if (headers.get("if-none-match") === '"v1"') return new Response(null, { status: 304 });
+    return new Response("validated", { headers: { "cache-control": "no-cache", etag: '"v1"' } });
+  } });
+  const document = "https://page.test/";
+  const [left, right] = await Promise.all([
+    network.subresource("https://asset.test/fresh", document),
+    network.subresource("https://asset.test/fresh", document),
+  ]);
+  expect([new TextDecoder().decode(left.body), new TextDecoder().decode(right.body), freshRequests])
+    .toEqual(["fresh", "fresh", 1]);
+  await network.subresource("https://asset.test/fresh", document);
+  expect(freshRequests).toBe(1);
+
+  const first = await network.subresource("https://asset.test/revalidate", document);
+  const second = await network.subresource("https://asset.test/revalidate", document);
+  expect([new TextDecoder().decode(first.body), new TextDecoder().decode(second.body), validatedRequests])
+    .toEqual(["validated", "validated", 2]);
+});
+
+test("at most six requests per host are in flight; waiting stylesheets go before scripts", async () => {
+  let active = 0;
+  let peak = 0;
+  const started = [];
+  const gates = [];
+  const network = new NetworkService({ fetch: async (input) => {
+    const url = new URL(typeof input === "string" ? input : input.url);
+    started.push(url.host + url.pathname);
+    if (url.host === "slow.test") {
+      active++;
+      peak = Math.max(peak, active);
+      await new Promise((resolve) => gates.push(resolve));
+      active--;
+    }
+    return new Response("x", { headers: { "cache-control": "no-store" } });
+  } });
+  const document = "https://page.test/";
+  const scripts = Array.from({ length: 8 }, (_, index) => network.subresource(`https://slow.test/s${index}.js`, document, "script"));
+  await Bun.sleep(5);
+  const stylesheet = network.subresource("https://slow.test/late.css", document, "stylesheet");
+  // Another host is not held up by this one's queue.
+  await network.subresource("https://other.test/free.js", document, "script");
+  expect(started.filter((entry) => entry.startsWith("slow.test"))).toHaveLength(6);
+  gates.shift()();
+  await Bun.sleep(5);
+  // The freed slot went to the stylesheet that came after the waiting scripts.
+  expect(started.at(-1)).toBe("slow.test/late.css");
+  while (active || gates.length) {
+    gates.shift()?.();
+    await Bun.sleep(1);
+  }
+  await Promise.all([...scripts, stylesheet]);
+  expect(peak).toBe(6);
+  expect(started.filter((entry) => entry.startsWith("slow.test"))).toHaveLength(9);
+});
+
 /** Opens a page WebSocket and resolves with how it ended. */
 function socketOutcome(socket) {
   return new Promise((resolve) => {