buninu-browser 0.0.2

package/test/headless-shell.test.js

@@ -0,0 +1,318 @@
+import { expect, test } from "bun:test";
+
+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();
+  }
+}
+
+test("top-level shell exposes the parsed document through Bun.WebView", async () => {
+  const pixelPng = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURf8AAP///0EdNBEAAAABYktHRAH/Ai3eAAAAB3RJTUUH6gkcDhU6l/MKvgAAAAxJREFUCNdjYGBgAAAABAABJzQnCgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNi0wOS0yOFQxNDoyMTo1OCswMDowMJYWtzsAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjYtMDktMjhUMTQ6MjE6NTgrMDA6MDDnSw+HAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI2LTA5LTI4VDE0OjIxOjU4KzAwOjAwsF4uWAAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  const fixture = Bun.serve({
+    port: 0,
+    fetch(request) {
+      const pathname = new URL(request.url).pathname;
+      if (pathname === "/destination") {
+        return new Response(`<!doctype html><title>Destination</title><h1>arrived</h1>`, {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        });
+      }
+      if (pathname === "/site.css") {
+        return new Response(`:root{--bg:#0d1117;--text:#e6edf3}html,body{background:var(--bg)}body{color:var(--text)}`, {
+          headers: { "Content-Type": "text/css" },
+        });
+      }
+      if (pathname === "/pixel.png") {
+        return new Response(pixelPng, { headers: { "Content-Type": "image/png" } });
+      }
+      if (pathname === "/editor") {
+        return new Response(`<!doctype html><textarea id="editor" style="width:180px;height:60px"></textarea><p id="result"></p>
+          <script>document.getElementById('editor').addEventListener('input', () => {
+            document.getElementById('result').textContent = document.getElementById('editor').value;
+          })</script>`, {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        });
+      }
+      if (pathname === "/prevented-editor") {
+        return new Response(`<!doctype html><textarea id="editor" style="width:180px;height:60px"
+          onkeydown="event.preventDefault(); document.getElementById('result').textContent = event.key"
+          onbeforeinput="Object.defineProperty(event, 'key', {value:event.data}); this.onkeydown(event)">original</textarea><p id="result"></p>`, {
+          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";
+        const script = pathname === "/dynamic-data-image"
+          ? `<script>setTimeout(() => { document.querySelector("img").src = ${JSON.stringify(dataUrl)}; }, 10)</script>`
+          : "";
+        return new Response(`<!doctype html><style>body{background:#222}</style><body><img src="${src}" width="80" height="40">${script}</body>`, {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        });
+      }
+      if (pathname === "/plain" || pathname === "/styled") {
+        const link = pathname === "/styled" ? `<link rel="stylesheet" href="/site.css">` : "";
+        return new Response(`<!doctype html><head>${link}</head><body><p>same pixels</p></body>`, {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        });
+      }
+      return new Response(`<!doctype html>
+        <title>Formal parser &amp; CDP</title>
+        <body data-ready="yes"><a href="/destination">destination</a><br>第一行 😀<br>second &copy;
+          <script>document.title = "script ran"</script>
+          <pre>${Array.from({ length: 30 }, (_, index) => `line ${index}`).join("\n")}</pre>
+          <h2 id="target">fragment target</h2>
+        </body>`, {
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    },
+  });
+  const browser = Bun.spawn({
+    cmd: [process.execPath, "buninu-browser.js", "--remote-debugging-port=0"],
+    cwd: new URL("..", import.meta.url).pathname,
+    stdin: "ignore",
+    stdout: "ignore",
+    stderr: "pipe",
+  });
+
+  let view;
+  try {
+    const browserWebSocketUrl = await readDevToolsUrl(browser.stderr);
+    view = new Bun.WebView({
+      backend: { type: "chrome", url: browserWebSocketUrl },
+      width: 480,
+      height: 240,
+    });
+    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.
+    expect(view.title).toBe("script ran");
+    expect(await view.evaluate("document.title")).toBe("script ran");
+    expect(await view.evaluate("document.body.innerText")).toContain("第一行 😀\nsecond ©");
+    const html = await view.evaluate("document.documentElement.outerHTML");
+    expect(html).toContain('data-ready="yes"');
+    expect(html).toContain("<script>document.title = \"script ran\"</script>");
+
+    const screenshot = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(await new Bun.Image(screenshot).metadata()).toEqual({
+      width: 480,
+      height: 240,
+      format: "png",
+    });
+    await view.cdp("Emulation.setDeviceMetricsOverride", {
+      width: 480,
+      height: 240,
+      deviceScaleFactor: 2,
+      mobile: false,
+    });
+    const hidpiScreenshot = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(await new Bun.Image(hidpiScreenshot).metadata()).toEqual({
+      width: 960,
+      height: 480,
+      format: "png",
+    });
+    await view.cdp("Emulation.setDeviceMetricsOverride", {
+      width: 480,
+      height: 240,
+      deviceScaleFactor: 1,
+      mobile: false,
+    });
+
+    await view.navigate(`http://127.0.0.1:${fixture.port}/plain`);
+    const plain = await view.screenshot({ encoding: "buffer", format: "png" });
+    await view.navigate(`http://127.0.0.1:${fixture.port}/styled`);
+    expect(await view.evaluate("document.documentElement.outerHTML")).toContain("site.css");
+    const styled = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(styled)).not.toBe(Bun.hash(plain));
+    await view.navigate(`http://127.0.0.1:${fixture.port}/image`);
+    const withImage = await view.screenshot({ encoding: "buffer", format: "png" });
+    await view.navigate(`http://127.0.0.1:${fixture.port}/broken-image`);
+    const withBrokenImage = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(withImage)).not.toBe(Bun.hash(withBrokenImage));
+    await view.navigate(`http://127.0.0.1:${fixture.port}/data-image`);
+    const withDataImage = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(withDataImage)).toBe(Bun.hash(withImage));
+    await view.navigate(`http://127.0.0.1:${fixture.port}/dynamic-data-image`);
+    await Bun.sleep(150);
+    const withDynamicDataImage = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(withDynamicDataImage)).toBe(Bun.hash(withImage));
+    await view.navigate(`http://127.0.0.1:${fixture.port}/editor`);
+    const editorRect = await view.evaluate("document.getElementById('editor').getBoundingClientRect().toJSON()");
+    await view.cdp("Input.dispatchMouseEvent", { type: "mousePressed", x: editorRect.x + 10, y: editorRect.y + 10, button: "left", clickCount: 1 });
+    await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", x: editorRect.x + 10, y: editorRect.y + 10, button: "left", clickCount: 1 });
+    await view.cdp("Input.insertText", { text: "hello" });
+    expect(await view.evaluate("document.getElementById('result').textContent")).toBe("hello");
+    await view.navigate(`http://127.0.0.1:${fixture.port}/prevented-editor`);
+    const blockedRect = await view.evaluate("document.getElementById('editor').getBoundingClientRect().toJSON()");
+    await view.cdp("Input.dispatchMouseEvent", { type: "mousePressed", x: blockedRect.x + 10, y: blockedRect.y + 10, button: "left", clickCount: 1 });
+    await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", x: blockedRect.x + 10, y: blockedRect.y + 10, button: "left", clickCount: 1 });
+    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}/`);
+
+    expect(await view.evaluate("scrollY")).toBe(0);
+    await view.cdp("Input.dispatchMouseEvent", {
+      type: "mouseWheel",
+      x: 100,
+      y: 100,
+      deltaX: 0,
+      deltaY: 100,
+    });
+    expect(await view.evaluate("scrollY")).toBe(100);
+    const scrolled = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(scrolled)).not.toBe(Bun.hash(screenshot));
+
+    await view.cdp("Input.dispatchKeyEvent", {
+      type: "rawKeyDown",
+      key: "End",
+      code: "End",
+    });
+    const endOffset = await view.evaluate("scrollY");
+    expect(endOffset).toBeGreaterThan(100);
+    await view.cdp("Input.dispatchKeyEvent", { type: "keyUp", key: "End", code: "End" });
+
+    await view.navigate(`http://127.0.0.1:${fixture.port}/again`);
+    expect(await view.evaluate("scrollY")).toBe(0);
+    await view.navigate(`http://127.0.0.1:${fixture.port}/again#target`);
+    expect(view.url).toBe(`http://127.0.0.1:${fixture.port}/again#target`);
+    expect(await view.evaluate("scrollY")).toBeGreaterThan(0);
+    await view.navigate(`http://127.0.0.1:${fixture.port}/again`);
+    expect(await view.evaluate("scrollY")).toBe(0);
+
+    const hintResult = await view.cdp("Runtime.evaluate", {
+      expression: `(() => {
+        const CLICKABLE = 'a';
+        return 'data-casty-hint-id';
+      })()`,
+      returnByValue: true,
+    });
+    const hints = JSON.parse(hintResult.result.value);
+    expect(hints).toHaveLength(1);
+    expect(hints[0]).toMatchObject({ id: "0", label: "a", type: "click" });
+
+    await view.cdp("Runtime.evaluate", {
+      expression: `(() => { const el = document.getElementById('__casty_hints'); if (el) el.remove(); })()`,
+    });
+    const resolvedHint = await view.cdp("Runtime.evaluate", {
+      expression: `(() => {
+        const el = document.querySelector('[data-casty-hint-id="0"]');
+        if (!el) throw new Error('hint target disappeared');
+      })()`,
+      returnByValue: true,
+    });
+    const click = {
+      x: resolvedHint.result.value.x,
+      y: resolvedHint.result.value.y,
+      button: "left",
+      clickCount: 1,
+    };
+    const beforeMarker = await view.screenshot({ encoding: "buffer", format: "png" });
+    await view.cdp("Runtime.evaluate", {
+      expression: `(async () => {
+        const marker = document.createElement('div');
+        marker.id = '__casty_click_marker';
+        marker.style.cssText = [
+          'position:fixed',
+          'left:' + ${click.x} + 'px',
+          'top:' + ${click.y} + 'px',
+          'width:14px',
+          'height:14px',
+          'margin-left:-7px',
+          'margin-top:-7px',
+          'box-sizing:border-box',
+          'border:2px solid white',
+          'border-radius:50%',
+          'background:#f00',
+          'box-shadow:0 0 0 2px rgba(255,0,0,.45)',
+          'pointer-events:none',
+          'z-index:2147483647',
+        ].join(';');
+        document.documentElement.appendChild(marker);
+        setTimeout(() => marker.remove(), 800);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+      })()`,
+    });
+    const markerState = await view.cdp("Runtime.evaluate", {
+      expression: `(() => { const marker = document.getElementById('__casty_click_marker'); return marker ? marker.style.cssText : null })()`,
+      returnByValue: true,
+    });
+    expect(markerState.result.value).toContain("background");
+    const markerLayout = await view.cdp("Runtime.evaluate", {
+      expression: `(() => { const e = document.getElementById('__casty_click_marker'); const s = getComputedStyle(e); const r = e.getBoundingClientRect(); return { position:s.position, display:s.display, background:s.backgroundColor, x:r.x, y:r.y, width:r.width, height:r.height } })()`,
+      returnByValue: true,
+    });
+    expect(markerLayout.result.value).toEqual({
+      position: "fixed",
+      display: "block",
+      background: "rgba(255, 0, 0, 1)",
+      x: click.x - 7,
+      y: click.y - 7,
+      width: 14,
+      height: 14,
+    });
+    const withMarker = await view.screenshot({ encoding: "buffer", format: "png" });
+    expect(Bun.hash(withMarker)).not.toBe(Bun.hash(beforeMarker));
+    await view.cdp("Input.dispatchMouseEvent", { type: "mousePressed", ...click, buttons: 1 });
+    await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", ...click, buttons: 0 });
+    // The URL changes when the navigation commits; the title follows once the
+    // page reports load, as in Chromium.
+    for (let attempt = 0; attempt < 200 && !(view.url.endsWith("/destination") && view.title === "Destination"); attempt++) {
+      await Bun.sleep(10);
+    }
+    expect(view.url).toBe(`http://127.0.0.1:${fixture.port}/destination`);
+    expect(view.title).toBe("Destination");
+
+    const history = await view.cdp("Page.getNavigationHistory");
+    const previous = history.entries[history.currentIndex - 1];
+    await view.cdp("Page.navigateToHistoryEntry", { entryId: previous.id });
+    for (let attempt = 0; attempt < 20 &&
+      (!view.url.endsWith("/again") || view.title !== "script ran"); attempt++) {
+      await Bun.sleep(10);
+    }
+    expect(view.url).toBe(`http://127.0.0.1:${fixture.port}/again`);
+    expect(view.title).toBe("script ran");
+
+    await view.cdp("Input.dispatchMouseEvent", {
+      type: "mouseWheel", x: 100, y: 100, deltaX: 0, deltaY: 100,
+    });
+    expect(await view.evaluate("scrollY")).toBe(100);
+    await view.navigate(`http://127.0.0.1:${fixture.port}/destination`);
+    const secondHistory = await view.cdp("Page.getNavigationHistory");
+    await view.cdp("Page.navigateToHistoryEntry", {
+      entryId: secondHistory.entries[secondHistory.currentIndex - 1].id,
+    });
+    expect(await view.evaluate("scrollY")).toBe(100);
+
+  } finally {
+    view?.close();
+    Bun.WebView.closeAll();
+    browser.kill();
+    fixture.stop(true);
+    await browser.exited;
+  }
+}, 30_000);

package/test/hit-test.test.js

@@ -0,0 +1,49 @@
+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 { layoutText } from "../lib/layout/text-layout.js";
+import { RenderTreeBuilder } from "../lib/render-tree/index.js";
+
+test("creates separate clickable regions for links sharing a line", () => {
+  const { document, window } = parseHTMLDocument(
+    `<body><a href="first">first</a> gap <a href="second">second</a></body>`,
+    "https://example.test/root/",
+  );
+  const tree = new RenderTreeBuilder().build(document);
+  const layout = layoutText(tree);
+  const regions = interactiveRegions(tree, layout, { x: 0, y: 0 }, { width: 800, height: 600 });
+
+  expect(regions).toHaveLength(2);
+  expect(regions.map((region) => region.element.getAttribute("href"))).toEqual(["first", "second"]);
+  expect(regions[0].rects[0].right).toBeLessThan(regions[1].rects[0].left);
+  expect(hitTest(tree, layout, regions[1].rects[0].left + 1, regions[1].rects[0].top + 1, { x: 0, y: 0 }, { width: 800, height: 600 })?.element.getAttribute("href")).toBe("second");
+  window.happyDOM.abort();
+});
+
+test("finds content bounds for fragment navigation targets", () => {
+  const { document, window } = parseHTMLDocument(
+    `<body><pre>before\nbefore\nbefore</pre><section id="target"><h2>Target</h2></section></body>`,
+  );
+  const tree = new RenderTreeBuilder().build(document);
+  const layout = layoutText(tree);
+  const bounds = elementBounds(tree, layout, document.getElementById("target"));
+
+  expect(bounds.top).toBeGreaterThan(12);
+  expect(bounds.height).toBeGreaterThan(0);
+  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>`,
+  );
+  const tree = new RenderTreeBuilder().build(document);
+  const layout = layoutText(tree);
+  const scroll = { x: 0, y: 62 };
+  const regions = interactiveRegions(tree, layout, scroll, { width: 800, height: 100 });
+
+  expect(regions).toHaveLength(1);
+  const rect = regions[0].rects[0];
+  expect(hitTest(tree, layout, rect.left + 1, rect.top + 1, scroll, { width: 800, height: 100 })?.element.getAttribute("href")).toBe("target");
+  window.happyDOM.abort();
+});

package/test/html-parser.test.js

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
+
+test("formal parser builds an inert Happy DOM document tree", () => {
+  const { document, window } = parseHTMLDocument(`<!doctype html>
+    <title>A &amp; B</title>
+    <body data-page="main">
+      before<br>after &copy; 中文 😀
+      <p id="unclosed">malformed
+      <script>document.title = "script ran"</script>
+      <style>body { color: red }</style>
+    </body>`, "https://example.test/page");
+
+  expect(document.URL).toBe("https://example.test/page");
+  expect(document.title).toBe("A & B");
+  expect(document.body.dataset.page).toBe("main");
+  expect(document.querySelector("#unclosed")?.tagName).toBe("P");
+  const text = renderTreeText(new RenderTreeBuilder().build(document));
+  expect(text).toContain("before\nafter © 中文 😀");
+  expect(text).not.toContain("script ran");
+  expect(text).not.toContain("color: red");
+  window.happyDOM.abort();
+});
+
+test("places leading metadata in the implicit head", () => {
+  const { document, window } = parseHTMLDocument(`<!doctype html>
+    <meta charset="utf-8">
+    <title>Index of /</title>
+    <style>body { color: red }</style>
+    <h1>Index of /</h1>`);
+
+  expect(document.head.querySelector("title")?.textContent).toBe("Index of /");
+  expect(document.head.querySelector("meta")?.getAttribute("charset")).toBe("utf-8");
+  expect(document.head.querySelector("style")?.textContent).toContain("color: red");
+  expect(document.body.querySelector("title")).toBeNull();
+  expect(document.body.textContent.trim()).toBe("Index of /");
+  expect(document.body.firstChild.tagName).toBe("H1");
+  window.happyDOM.abort();
+});

package/test/index.test.js

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { castyCommand, chooseFrontend } from "../index.js";
+
+test("the first argument picks the frontend; anything else goes to casty whole", () => {
+  expect(chooseFrontend(["--casty", "example.com", "--", "--mobile"])).toEqual({ frontend: "casty", args: ["example.com", "--", "--mobile"] });
+  expect(chooseFrontend(["--headless", "--remote-debugging-port=9222"])).toEqual({ frontend: "headless", args: ["--remote-debugging-port=9222"] });
+  expect(chooseFrontend(["--gtk", "x"])).toEqual({ frontend: "gtk", args: ["x"], reserved: true });
+  expect(chooseFrontend(["github.com", "--", "--mobile"])).toEqual({ frontend: "casty", args: ["github.com", "--", "--mobile"] });
+  expect(chooseFrontend(["--mobile"])).toEqual({ frontend: "casty", args: ["--mobile"] });
+  expect(chooseFrontend([])).toEqual({ frontend: "casty", args: [] });
+  expect(chooseFrontend(["-V"])).toEqual({ frontend: "version", args: [], information: true });
+  expect(chooseFrontend(["-h"])).toMatchObject({ frontend: "help", information: true });
+  expect(chooseFrontend(["--docs"])).toMatchObject({ frontend: "readme", information: true });
+  // Only the first position is special.
+  expect(chooseFrontend(["example.com", "--headless"])).toEqual({ frontend: "casty", args: ["example.com", "--headless"] });
+  expect(chooseFrontend(["--casty", "--help"])).toEqual({ frontend: "casty", args: ["--help"] });
+});
+
+test("casty runs with npx when npx and bun exist, else bunx, else bun x", () => {
+  const casty = ["@drxiaozhi/casty"];
+  const all = (name) => `/bin/${name}`;
+  expect(castyCommand(["a", "--", "--mobile"], all))
+    .toEqual(["/bin/npx", "--loglevel=error", "-p", "@drxiaozhi/casty", "--", "casty", "a", "--", "--mobile"]);
+  // npx without bun could not run casty's `#!/usr/bin/env bun` bin.
+  expect(castyCommand(["a"], (name) => name === "bun" ? null : `/bin/${name}`)).toEqual(["/bin/bunx", ...casty, "a"]);
+  expect(castyCommand(["a"], (name) => name === "npx" ? null : `/bin/${name}`)).toEqual(["/bin/bunx", ...casty, "a"]);
+  expect(castyCommand(["a"], (name) => name === "bun" ? "/bin/bun" : null)).toEqual(["/bin/bun", "x", ...casty, "a"]);
+  expect(castyCommand([], () => null)).toEqual([process.argv0, "x", ...casty]);
+});

package/test/log.test.js

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test";
+import { DEFAULT_LOG_FILE, logFileFromEnv } from "../lib/log.js";
+
+test("BUNINU_LOG picks the log file", () => {
+  expect(logFileFromEnv({}, "/work")).toBeNull();
+  expect(logFileFromEnv({ BUNINU_LOG: "0" }, "/work")).toBeNull();
+  expect(logFileFromEnv({ BUNINU_LOG: "1" }, "/work")).toBe(`/work/${DEFAULT_LOG_FILE}`);
+  expect(logFileFromEnv({ BUNINU_LOG: "true" }, "/work")).toBe(`/work/${DEFAULT_LOG_FILE}`);
+  expect(logFileFromEnv({ BUNINU_LOG: "logs/b.log" }, "/work")).toBe("/work/logs/b.log");
+  expect(logFileFromEnv({ BUNINU_LOG: "/tmp/b.log" }, "/work")).toBe("/tmp/b.log");
+});
+
+test("the CLI writes controller and renderer output to the log file", async () => {
+  const dir = `${import.meta.dir}/../.test-log-${process.pid}`;
+  await Bun.$`mkdir -p ${dir}`.quiet();
+  try {
+    const child = Bun.spawn([process.execPath, `${import.meta.dir}/../buninu-browser.js`, "--remote-debugging-port=0"], {
+      cwd: dir,
+      env: { ...process.env, BUNINU_LOG: "1" },
+      stdout: "ignore",
+      stderr: "pipe",
+    });
+    const reader = child.stderr.getReader();
+    let seen = "";
+    while (!seen.includes("DevTools listening")) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      seen += new TextDecoder().decode(value);
+    }
+    child.kill();
+    await child.exited;
+    const log = await Bun.file(`${dir}/${DEFAULT_LOG_FILE}`).text();
+    expect(log).toContain("[log] started pid");
+    expect(log).toContain("renderer sandbox: seccomp");
+    // Renderer output (its warm-up timings) arrives through the controller.
+    expect(log).toMatch(/\[renderer \d+\] timing: about:warm-up/);
+  } finally {
+    await Bun.$`rm -rf ${dir}`.quiet();
+  }
+}, 30_000);

package/test/mobile.test.js

@@ -0,0 +1,85 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { createBrowser } from "../lib/headless-shell.js";
+import { MOBILE_USER_AGENT } from "../lib/renderer/flags.js";
+import { mediaQueryMatches } from "../lib/style/computed-style.js";
+
+let server;
+beforeAll(() => {
+  server = Bun.serve({
+    port: 0,
+    fetch: (request) => new Response(`<!doctype html><title>${request.headers.get("user-agent")}</title>
+      <style>@media (hover: none) and (pointer: coarse) { body { background: rgb(0, 0, 255) } }</style>
+      <p>ua</p>`, { headers: { "content-type": "text/html" } }),
+  });
+});
+afterAll(() => server?.stop(true));
+
+test("touch media features match only in mobile mode", () => {
+  const desktop = { width: 400, height: 800 };
+  const mobile = { ...desktop, mobile: true };
+  for (const query of ["(hover: none)", "(pointer: coarse)", "(any-pointer: coarse)", "(hover: hover)", "(pointer: fine)"]) {
+    expect(mediaQueryMatches(query, desktop)).toBeFalse();
+  }
+  expect(mediaQueryMatches("(hover: none)", mobile)).toBeTrue();
+  expect(mediaQueryMatches("(pointer: coarse)", mobile)).toBeTrue();
+  expect(mediaQueryMatches("(pointer)", mobile)).toBeTrue();
+  expect(mediaQueryMatches("(hover: hover)", mobile)).toBeFalse();
+  expect(mediaQueryMatches("(pointer: fine)", mobile)).toBeFalse();
+});
+
+async function pageState(options) {
+  const browser = await createBrowser({ spareRenderer: false, ...options });
+  try {
+    await browser.context.setUserAgent("Desktop/1.0 (casty override)");
+    await browser.context.navigate(`http://127.0.0.1:${server.port}/`);
+    return {
+      requestUserAgent: await browser.context.title(),
+      navigatorUserAgent: await browser.context.evaluate("navigator.userAgent"),
+      touch: await browser.context.evaluate("matchMedia('(pointer: coarse)').matches"),
+      background: await browser.context.evaluate("getComputedStyle(document.body).backgroundColor"),
+    };
+  } finally {
+    browser.close();
+  }
+}
+
+test("--mobile sends the mobile user agent, ignores overrides and applies touch media rules", async () => {
+  expect(await pageState({ mobile: true })).toEqual({
+    requestUserAgent: MOBILE_USER_AGENT,
+    navigatorUserAgent: MOBILE_USER_AGENT,
+    touch: true,
+    background: "rgba(0, 0, 255, 1)",
+  });
+}, 30_000);
+
+test("without --mobile nothing changes: overrides apply and touch rules do not", async () => {
+  const state = await pageState({});
+  expect(state).toMatchObject({
+    requestUserAgent: "Desktop/1.0 (casty override)",
+    navigatorUserAgent: "Desktop/1.0 (casty override)",
+    touch: false,
+  });
+  expect(state.background).not.toBe("rgba(0, 0, 255, 1)");
+}, 30_000);
+
+async function viewportState(options) {
+  const browser = await createBrowser({ spareRenderer: false, ...options });
+  try {
+    await browser.context.resize(824, 600, 1);
+    await browser.context.navigate(`http://127.0.0.1:${server.port}/`);
+    const png = Buffer.from(await browser.context.screenshot(), "base64");
+    return {
+      innerWidth: await browser.context.evaluate("innerWidth"),
+      scale: await browser.context.evaluate("visualViewport.scale"),
+      devicePixelRatio: await browser.context.evaluate("devicePixelRatio"),
+      frameWidth: png.readUInt32BE(16),
+    };
+  } finally {
+    browser.close();
+  }
+}
+
+test("--mobile lays a wide viewport out at phone width and scales it up to the same frame size", async () => {
+  expect(await viewportState({ mobile: true })).toEqual({ innerWidth: 412, scale: 2, devicePixelRatio: 2, frameWidth: 824 });
+  expect(await viewportState({})).toEqual({ innerWidth: 824, scale: 1, devicePixelRatio: 1, frameWidth: 824 });
+}, 60_000);