buninu-browser 0.0.2 → 0.2.0

package/patches/happy-dom/README.md

@@ -15,6 +15,12 @@ git -C vendor/happy-dom apply --check ../../patches/happy-dom/0001-use-bun-entit
 git -C vendor/happy-dom apply ../../patches/happy-dom/0001-use-bun-entity-adapter.patch
 git -C vendor/happy-dom apply --check ../../patches/happy-dom/0002-use-bun-platform-adapters.patch
 git -C vendor/happy-dom apply ../../patches/happy-dom/0002-use-bun-platform-adapters.patch
+git -C vendor/happy-dom apply --check ../../patches/happy-dom/0003-defer-script-events-to-renderer.patch
+git -C vendor/happy-dom apply ../../patches/happy-dom/0003-defer-script-events-to-renderer.patch
+git -C vendor/happy-dom apply --check ../../patches/happy-dom/0004-insert-adjacent-html-in-order.patch
+git -C vendor/happy-dom apply ../../patches/happy-dom/0004-insert-adjacent-html-in-order.patch
+git -C vendor/happy-dom apply --check ../../patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch
+git -C vendor/happy-dom apply ../../patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch
 ```
 
 For the already-patched vendored tree, verify that the recorded patch can be
@@ -23,6 +29,9 @@ removed cleanly without changing files:
 ```sh
 git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0001-use-bun-entity-adapter.patch
 git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0002-use-bun-platform-adapters.patch
+git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0003-defer-script-events-to-renderer.patch
+git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0004-insert-adjacent-html-in-order.patch
+git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch
 ```
 
 ## Patch manifest
@@ -31,6 +40,9 @@ git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0002-use
 |---|---|---|---|
 | `0001-use-bun-entity-adapter.patch` | `packages/happy-dom/src/utilities/XMLEncodeUtility.ts` | Route entity decoding through the project-owned `Bun.markdown.render()` adapter instead of installing the external `entities` package. | `bun test test/entities-adapter.test.js` |
 | `0002-use-bun-platform-adapters.patch` | `packages/happy-dom/src/file/FileReader.ts`, `packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts`, `packages/happy-dom/src/web-socket/WebSocket.ts` | Route the remaining static package imports through project-owned adapters backed by Bun APIs, so importing the DOM tree does not require installing npm dependencies. | `bun test test/html-parser.test.js test/happy-dom-platform-adapters.test.js` |
+| `0003-defer-script-events-to-renderer.patch` | `packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts` | Suppress Happy DOM's synthetic load/error event when its own script loader is disabled; the renderer fetches and executes scripts and dispatches the real outcome itself. | `bun test test/page-scripts.test.js` (`page-inserted scripts run; innerHTML scripts do not; on* handlers fire`) |
+| `0004-insert-adjacent-html-in-order.patch` | `packages/happy-dom/src/nodes/element/Element.ts` | `insertAdjacentHTML` inserted the parsed nodes one at a time, which reversed their order at `afterbegin` and `afterend`; insert the parsed fragment as a whole. | `bun test test/page-scripts.test.js` (`insertAdjacentHTML keeps the order of the inserted nodes at every position`) |
+| `0005-invalidate-matches-on-structure-changes.patch` | `packages/happy-dom/src/query-selector/QuerySelector.ts` | `Element.matches()` cached results that were invalidated only by changes to the elements the matcher visited, so structural pseudo-classes and sibling combinators stayed stale after a child list change, and `:has()` after any change in the subtree; register the parent of every visited element, and do not cache `:has()` matches. | `bun test test/happy-dom-matches.test.js` |
 
 Keep each local Happy DOM change in a separate numbered patch and add it to
 this table with its reason and focused test. When updating Happy DOM, regenerate

package/patches/ses/0001-allow-regexp-own-tostring.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/ses.mjs b/dist/ses.mjs
+index c10f41b..8bda46b 100644
+--- a/dist/ses.mjs
++++ b/dist/ses.mjs
+@@ -8108,6 +8108,8 @@ const methods = {
+    * is accepted.
+    */
+   '%SetPrototype%': '*',
++  // Page scripts may assign an own toString method to a RegExp instance.
++  '%RegExpPrototype%': { toString: true },
+ };$h͏_once.severeEnablements(severeEnablements);
+ })()
+ ,

package/patches/ses/README.md

@@ -0,0 +1,16 @@
+# SES patch queue
+
+The vendored SES bundle is the `ses` 2.3.0 npm release. Patch paths are
+relative to `vendor/ses`.
+
+For the already-patched tree, verify the recorded patch without changing files:
+
+```sh
+git -C vendor/ses apply --reverse --check ../../patches/ses/0001-allow-regexp-own-tostring.patch
+```
+
+| Patch | Modified file | Reason | Verification |
+|---|---|---|---|
+| `0001-allow-regexp-own-tostring.patch` | `dist/ses.mjs` | Allow a page script to assign an own `toString` method to a `RegExp` instance despite the frozen prototype. This does not make the prototype writable. | `bun test test/page-scripts.test.js` |
+
+Keep future local SES changes in numbered patches and update this manifest.

package/patches/wasmpeg/0001-windows-wasm-path.patch

@@ -0,0 +1,14 @@
+diff --git a/src/js/gpu.js b/src/js/gpu.js
+index 2bb56f8..a9f4dc6 100644
+--- a/src/js/gpu.js
++++ b/src/js/gpu.js
+@@ -51,7 +51,8 @@ async function instantiate(path) {
+     let nodeOpts = {};
+     if (isNode) {
+         const { default: fsMod } = await import('node:fs');
+-        nodeOpts = { wasmBinary: fsMod.readFileSync(new URL(path).pathname.replace(/\.js$/, '.wasm')) };
++        const { fileURLToPath } = await import('node:url');
++        nodeOpts = { wasmBinary: fsMod.readFileSync(fileURLToPath(path).replace(/\.js$/, '.wasm')) };
+     }
+     const { default: factory } = await import(/* @vite-ignore */ path);
+     return factory({

package/patches/wasmpeg/README.md

@@ -0,0 +1,28 @@
+# wasmpeg patch queue
+
+The vendored wasmpeg JavaScript is the `@wasmpeg/cpu` 1.0.1 npm release, which
+matches upstream tag `v1.0.1`, commit `173b41e30f4dd21d15f4e564c3ad26cba5d89d80`:
+
+- Upstream: <https://github.com/wasmpeg/wasmpeg>
+- Vendored tree: `vendor/wasmpeg`
+- Patch paths are relative to the root of the npm package (`vendor/wasmpeg`).
+
+The patches change only wasmpeg's JavaScript loader; `dist/cpu.js` and
+`dist/cpu.wasm` (FFmpeg) are the published files, unmodified.
+
+For the already-patched vendored tree, verify that the recorded patch can be
+removed cleanly without changing files:
+
+```sh
+git -C vendor/wasmpeg apply --reverse --check ../../patches/wasmpeg/0001-windows-wasm-path.patch
+```
+
+## Patch manifest
+
+| Patch | Modified upstream file | Reason | Verification |
+|---|---|---|---|
+| `0001-windows-wasm-path.patch` | `src/js/gpu.js` | Read `cpu.wasm` from `fileURLToPath(path)` instead of `new URL(path).pathname`, which is `/C:/...` on Windows and not a file path there. | `bun test test/page-scripts.test.js` (every renderer start loads the decoder) |
+
+Keep each local change in a separate numbered patch and add it to this table
+with its reason and focused test. When updating wasmpeg, re-check the queue
+against the new release and update `vendor/wasmpeg/VENDORING.md`.

package/test/computed-style.test.js

@@ -43,6 +43,15 @@ test("inline declarations validate values and preserve important priority", () =
   window.happyDOM.abort();
 });
 
+test("light-dark colors follow the element's color scheme", () => {
+  const { document, window } = parseHTMLDocument(`<div id="light" style="color-scheme: light dark; background: light-dark(#eee, #222)"><span id="child" style="color: light-dark(black, white)">text</span></div><div id="dark" style="background-color: light-dark(#eee, #222); color-scheme: only dark"></div>`);
+  const engine = new StyleEngine().compute(document);
+  expect(engine.get(document.getElementById("light")).backgroundColor).toBe("rgba(238, 238, 238, 1)");
+  expect(engine.get(document.getElementById("child")).color).toBe("rgba(0, 0, 0, 1)");
+  expect(engine.get(document.getElementById("dark")).backgroundColor).toBe("rgba(34, 34, 34, 1)");
+  window.happyDOM.abort();
+});
+
 test("display none removes a subtree and inline white-space reaches layout input", () => {
   const { document, window } = parseHTMLDocument(`<body>
     <div style="display:none">hidden</div>
@@ -432,3 +441,46 @@ test("links get the UA link style; text decorations propagate to in-flow descend
   expect(style("invalid").textDecorations).toBeNull();
   window.happyDOM.abort();
 });
+
+test("the font shorthand allows spaces around the line-height slash", () => {
+  for (const font of ['14px / 1.5 "Mona Sans VF", sans-serif', '14px/ 1.5 "Mona Sans VF", sans-serif',
+    '14px /1.5 "Mona Sans VF", sans-serif', '14px/1.5 "Mona Sans VF", sans-serif']) {
+    const { document, window } = parseHTMLDocument(`<p style='font: ${font}'><span>x</span></p>`);
+    const engine = new StyleEngine().compute(document);
+    for (const element of [document.querySelector("p"), document.querySelector("span")]) {
+      const style = engine.get(element);
+      expect([style.fontSize, style.lineHeight, style.fontFamily]).toEqual([14, 21, ["Mona Sans VF", "sans-serif"]]);
+    }
+    window.happyDOM.abort();
+  }
+});
+
+test("incremental restyles of changed subtrees and added sheets equal a full restyle", () => {
+  const { document, window } = parseHTMLDocument(`<body><div id="a" class="x"><p>one</p><p>two</p></div><div id="b"><span>s</span></div></body>`);
+  const sheets = [".x p { color: red } .y p { color: blue; font-size: 20px } #b span { font-weight: 700 }"];
+  const engine = new StyleEngine().compute(document, sheets);
+  const same = (label) => {
+    const reference = new StyleEngine().compute(document, engine.sheets ?? sheets);
+    for (const element of document.querySelectorAll("*")) {
+      expect([label, JSON.stringify(engine.get(element))]).toEqual([label, JSON.stringify(reference.get(element))]);
+    }
+  };
+  // An attribute change: only #a's subtree.
+  document.getElementById("a").className = "y";
+  engine.compute(document, sheets, {}, new Set([document.getElementById("a")]));
+  expect([engine.incremental, engine.restyled]).toEqual([true, 3]);
+  same("class change");
+  // Inserted elements: their parent's subtree.
+  const b = document.getElementById("b");
+  b.insertAdjacentHTML("beforeend", "<span>t</span><p>u</p>");
+  engine.compute(document, sheets, {}, new Set([b]));
+  expect(engine.restyled).toBe(4);
+  same("insertion");
+  // An added sheet restyles what its rules match, nothing else.
+  const more = [...sheets, "span { color: green }"];
+  engine.compute(document, more, {}, new Set());
+  expect([engine.incremental, engine.restyled]).toEqual([true, 2]); // the two spans
+  engine.sheets = more;
+  same("added sheet");
+  window.happyDOM.abort();
+});

package/test/document-types.test.js

@@ -0,0 +1,111 @@
+import { expect, test } from "bun:test";
+import { audioDemoDocument, displayDocument, highlightJson, parseContentType } from "../lib/document-types.js";
+
+const bytes = (text) => new TextEncoder().encode(text);
+const show = (url, contentType, body) => displayDocument({ url, contentType, body: typeof body === "string" ? bytes(body) : body });
+
+test("HTML stays itself, decoded with its charset", () => {
+  expect(show("https://x.test/", "text/html; charset=utf-8", "<p>hi</p>")).toEqual({ source: "<p>hi</p>", contentType: "text/html; charset=utf-8" });
+  const big5 = new Uint8Array([0x3c, 0x70, 0x3e, 0xa4, 0xa4, 0xa4, 0xe5]);
+  expect(show("https://x.test/", "text/html; charset=big5", big5).source).toBe("<p>中文");
+  // No type: HTML-looking bytes are HTML.
+  expect(show("https://x.test/", "", "<!doctype html><p>x").source).toBe("<!doctype html><p>x");
+});
+
+test("images are shown alone: SVG inline, others as a data: URL", () => {
+  const png = show("https://x.test/a/pic.png?x=1", "image/png", new Uint8Array([137, 80, 78, 71]));
+  expect(png.contentType).toBe("text/html");
+  expect(png.source).toContain('<img src="data:image/png;base64,iVBORw==" alt="pic.png">');
+  expect(png.source).toContain("<title>pic.png</title>");
+  const svg = show("https://x.test/i.svg", "image/svg+xml", '<?xml version="1.0"?><svg width="4" height="4"></svg>');
+  expect(svg.source).toContain('<div class="image"><svg width="4" height="4"></svg></div>');
+});
+
+test("bunmsh serve's formats get its preview under a Pretty-print checkbox, checked", () => {
+  const toml = show("https://x.test/Cargo.toml", "application/toml", 'name = "buninu"\n').source;
+  expect(toml).toContain('<input type="checkbox" id="pretty-print" checked> Pretty-print');
+  expect(toml).toContain('<a class="download" href="https://x.test/Cargo.toml" download>Download</a>');
+  expect(toml).toContain("<title>Cargo.toml — Bun.TOML.parse</title>");
+  expect(toml).toContain("(Bun.TOML.parse)");
+  expect(toml).toContain('<span class="json-statement">&quot;name&quot;:</span> <span class="json-string">&quot;buninu&quot;</span>');
+  expect(toml).toContain('<pre id="raw" hidden>name = &quot;buninu&quot;');
+  // The extension decides first, as in serve.js (it sends octet-stream for .jsonc and .jsonl).
+  expect(show("https://x.test/a.jsonc", "application/octet-stream", '{ "a": 1, // c\n}').source).toContain("(Bun.JSONC.parse)");
+  expect(show("https://x.test/l.ndjson", "application/octet-stream", '{"a":1}\n').source).toContain("(Bun.JSONL.parse)");
+  expect(show("https://x.test/c.yml", "text/yaml", "a: [1, true]").source).toContain('<span class="json-constant">true</span>');
+  expect(show("https://x.test/f.xml", "application/xml", '<a x="1"><b>hi</b></a>').source).toContain("(Bun.XML.parse)");
+  // Markdown is rendered by Bun.markdown.html with headings.
+  const md = show("https://x.test/README.md", "text/markdown", "# Title\n\n- item").source;
+  expect(md).toContain("(Bun.markdown.html)");
+  expect(md).toContain('<div id="formatted"><h1 id="title"><a href="#title">Title</a></h1>');
+  expect(md).toContain('<pre id="raw" hidden># Title');
+  // Without a known extension, the Content-Type names the format.
+  expect(show("https://x.test/api", "application/vnd.api+json", '{"x":null}').source).toContain("(JSON.parse)");
+  expect(show("https://x.test/doc", "text/markdown", "*a*").source).toContain("<em>a</em>");
+  // What cannot be parsed is shown as serve.js reports it, with the text below.
+  const bad = show("https://x.test/b.json", "application/json", "{nope").source;
+  expect(bad).toContain("<h1>Cannot preview b.json</h1>");
+  expect(bad).toContain('<pre id="raw">{nope</pre>');
+  expect(bad).not.toContain("checkbox");
+  // Bun.TOML refuses integers a JavaScript number cannot hold exactly.
+  expect(show("https://x.test/n.toml", "application/toml", "n = 9007199254740993").source).toContain("Integer cannot be losslessly represented");
+});
+
+test("everything else is text, whatever the bytes: no file is unviewable", () => {
+  expect(show("https://x.test/a.txt", "text/plain", "a < b").source).toContain("<pre>a &lt; b</pre>");
+  expect(show("https://x.test/app.js", "text/javascript", "let x").source).toContain("<pre>let x</pre>");
+  expect(show("https://x.test/a.zip", "application/zip", new Uint8Array([80, 75, 3, 4])).source).toContain("<pre>PK\u0003\u0004</pre>");
+  expect(show("https://x.test/d.pdf", "application/pdf", "%PDF-1.7").source).toContain("<pre>%PDF-1.7</pre>");
+  // No meaningful type: shown as text even when the bytes are binary.
+  expect(show("https://x.test/blob", "application/octet-stream", new Uint8Array([65, 0, 66, 255])).source).toContain("<pre>A\u0000B\uFFFD</pre>");
+  for (const [url, type] of [["https://x.test/f.woff2", "font/woff2"], ["https://x.test/m.wasm", "application/wasm"]]) {
+    expect(show(url, type, new Uint8Array([0, 97])).source).toContain("<pre>");
+  }
+});
+
+test("video and audio get a media document playing the URL itself", () => {
+  const video = show("https://x.test/v/clip.mp4?t=1", "video/mp4", new Uint8Array(10)).source;
+  expect(video).toContain('<video controls autoplay src="https://x.test/v/clip.mp4?t=1"></video>');
+  expect(video).toContain("clip.mp4 (video/mp4, 10 bytes). Click the video to play.");
+  const audio = show("https://x.test/tone.mp3", "audio/mpeg", new Uint8Array(3)).source;
+  expect(audio).toContain('<audio controls src="https://x.test/tone.mp3"></audio><p class="note">tone.mp3 (audio/mpeg, 3 bytes). Click to play;');
+  expect(audio).toContain('id="buninu-piano-input"');
+  expect(video).not.toContain('id="buninu-piano-input"');
+  expect(show("https://x.test/tone.wav", "audio/wav", new Uint8Array(3)).source).not.toContain('id="buninu-piano-input"');
+});
+
+test("about:audio has a CSS piano and a focused-play input", () => {
+  const demo = audioDemoDocument();
+  expect(demo.contentType).toBe("text/html");
+  expect(demo.source).toContain('<div class="keyboard"');
+  expect(demo.source.match(/class="white-key"/g)).toHaveLength(8);
+  expect(demo.source.match(/class="black-key"/g)).toHaveLength(5);
+  expect(demo.source).toContain('class="black-key" data-piano-note="73"');
+  expect(demo.source).toContain('id="buninu-piano-input"');
+  expect(demo.source).toContain('Play Piano · 彈鋼琴 · ピアノを弾く');
+});
+
+test("content type parsing and JSON highlighting", () => {
+  expect(parseContentType('Text/HTML; Charset="Big5"')).toEqual({ type: "text/html", charset: "Big5" });
+  expect(parseContentType("")).toEqual({ type: "", charset: null });
+  expect(highlightJson('{"a": [1, "b\\n", false]}'))
+    .toBe('{<span class="json-statement">&quot;a&quot;:</span> [<span class="json-number">1</span>, '
+      + '<span class="json-string">&quot;b<span class="json-special">\\n</span>&quot;</span>, <span class="json-constant">false</span>]}');
+});
+
+test("large files show their start with a bar pointing to download; large previews show the text", async () => {
+  const { DISPLAY_LIMIT, PRETTY_LIMIT } = await import("../lib/document-types.js");
+  const big = "x".repeat(DISPLAY_LIMIT + 10);
+  const text = show("https://x.test/big.txt", "text/plain", big).source;
+  expect(text).toContain(`Large file (256 KB); showing the first 256 KB. The whole file: casty's <code>download</code>`);
+  expect(text).toContain('<a class="download" href="https://x.test/big.txt" download>Download</a>');
+  expect(text).toContain(`<pre>${"x".repeat(DISPLAY_LIMIT)}</pre>`);
+  // A small file still offers a download button.
+  expect(show("https://x.test/a.txt", "text/plain", "hi").source).toContain('href="https://x.test/a.txt" download');
+  const json = JSON.stringify(Array.from({ length: PRETTY_LIMIT / 4 }, (_, i) => i));
+  expect(json.length).toBeGreaterThan(PRETTY_LIMIT);
+  const preview = show("https://x.test/big.json", "application/json", json).source;
+  expect(preview).toContain("Too large to pretty-print quickly");
+  expect(preview).not.toContain("pretty-print\" checked");
+  expect(preview).toContain(`<pre>${json}</pre>`);
+});

package/test/download.test.js

@@ -0,0 +1,192 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createBrowser } from "../lib/headless-shell.js";
+import { isAttachment, suggestedFilename } from "../lib/download.js";
+import { downloadsDirectory } from "../lib/download-directory.js";
+
+// Big5 for 中文, which a UTF-8 decode would mangle: the download must be the bytes as sent.
+const BIG5 = new Uint8Array([0x3c, 0x70, 0x3e, 0xa4, 0xa4, 0xa4, 0xe5, 0x3c, 0x2f, 0x70, 0x3e]);
+let server;
+beforeAll(() => {
+  server = Bun.serve({
+    port: 0,
+    fetch: (request) => {
+      const path = new URL(request.url).pathname;
+      if (path === "/page") return new Response(BIG5, { headers: { "content-type": "text/html; charset=big5" } });
+      if (path === "/links") return new Response('<a id="explicit" href="/plain" download="chosen.txt">explicit</a>'
+        + '<a id="attachment" href="/attachment">attachment</a>'
+        + '<a id="data" href="data:text/plain,hello%20data" download="data.txt">data</a>'
+        + '<a id="blob" download="blob.txt">blob</a>'
+        + '<script>document.getElementById("blob").href = URL.createObjectURL(new Blob(["blob bytes"]));</script>',
+      { headers: { "content-type": "text/html" } });
+      if (path === "/plain") return new Response("original bytes", { headers: { "content-type": "text/plain" } });
+      if (path === "/attachment") return new Response("photo bytes", { headers: {
+        "content-type": "image/jpeg", "content-disposition": 'attachment; filename="photo.jpg"',
+      } });
+      if (path === "/preview.json") return new Response('{"a":1}\n', { headers: { "content-type": "application/json" } });
+      return Response.redirect("/page");
+    },
+  });
+});
+
+test("download names from headers and attributes are safe", () => {
+  expect(isAttachment('attachment; filename="x.jpg"')).toBeTrue();
+  expect(isAttachment('inline; filename="x.jpg"')).toBeFalse();
+  expect(suggestedFilename("https://x.test/a", "attachment; filename*=UTF-8''%E4%B8%AD%E6%96%87.jpg")).toBe("中文.jpg");
+  expect(suggestedFilename("https://x.test/a", "", "../escape.txt")).toBe("escape.txt");
+});
+
+test("download directory follows macOS defaults and relocated Windows folders", () => {
+  expect(downloadsDirectory({ platform: "darwin", home: "/Users/Ada" })).toBe("/Users/Ada/Downloads");
+  expect(downloadsDirectory({ platform: "win32", home: "C:\\Users\\Ada", queryWindows: () => "D:\\資料\\下載" }))
+    .toBe("D:\\資料\\下載");
+  expect(downloadsDirectory({ platform: "win32", home: "C:\\Users\\Ada", queryWindows: () => null }))
+    .toBe("C:\\Users\\Ada\\Downloads");
+});
+
+test("clicked downloads save files and leave the current page in place", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "buninu-download-"));
+  const browser = await createBrowser({ spareRenderer: false });
+  const events = [];
+  browser.context.setDownloadBehavior({ behavior: "allow", downloadPath: dir, eventsEnabled: true });
+  browser.context.onDownload((event, params) => events.push({ event, ...params }));
+  const origin = `http://127.0.0.1:${server.port}`;
+  const click = async (selector) => {
+    const bounds = await browser.context.evaluate(`JSON.stringify(document.querySelector('${selector}').getBoundingClientRect())`);
+    const rect = JSON.parse(bounds);
+    await browser.context.click(rect.left + rect.width / 2, rect.top + rect.height / 2);
+  };
+  try {
+    await browser.context.navigate(`${origin}/links`);
+    await click("#explicit");
+    expect(readFileSync(join(dir, "chosen.txt"), "utf8")).toBe("original bytes");
+    expect(browser.context.resourceContent()?.url).toBe(`${origin}/links`);
+    await click("#explicit");
+    expect(readFileSync(join(dir, "chosen (2).txt"), "utf8")).toBe("original bytes");
+    await browser.context.evaluate("document.getElementById('explicit').click()");
+    for (let attempt = 0; attempt < 30; attempt++) {
+      try { if (readFileSync(join(dir, "chosen (3).txt"), "utf8") === "original bytes") break; } catch {}
+      await Bun.sleep(20);
+    }
+    expect(readFileSync(join(dir, "chosen (3).txt"), "utf8")).toBe("original bytes");
+    await click("#attachment");
+    expect(readFileSync(join(dir, "photo.jpg"), "utf8")).toBe("photo bytes");
+    expect(browser.context.resourceContent()?.url).toBe(`${origin}/links`);
+    await click("#data");
+    expect(readFileSync(join(dir, "data.txt"), "utf8")).toBe("hello data");
+    await browser.context.evaluate("document.getElementById('blob').click()");
+    for (let attempt = 0; attempt < 30; attempt++) {
+      try { if (readFileSync(join(dir, "blob.txt"), "utf8") === "blob bytes") break; } catch {}
+      await Bun.sleep(20);
+    }
+    expect(readFileSync(join(dir, "blob.txt"), "utf8")).toBe("blob bytes");
+    await browser.context.navigate(`${origin}/preview.json`);
+    const positions = JSON.parse(await browser.context.evaluate(`JSON.stringify({
+      pretty: document.getElementById('pretty-print').getBoundingClientRect().right,
+      download: document.querySelector('.download').getBoundingClientRect().left,
+      right: document.querySelector('.download').getBoundingClientRect().right
+    })`));
+    expect(positions.download).toBeGreaterThan(positions.pretty);
+    expect(positions.right).toBeGreaterThan(700);
+    await click(".download");
+    expect(readFileSync(join(dir, "preview.json"), "utf8")).toBe('{"a":1}\n');
+    expect(browser.context.resourceContent()?.url).toBe(`${origin}/preview.json`);
+    expect(events.filter((item) => item.event === "willBegin")).toHaveLength(7);
+    expect(events.filter((item) => item.event === "progress" && item.state === "completed")).toHaveLength(7);
+  } finally {
+    browser.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30_000);
+afterAll(() => server?.stop(true));
+
+test("the current document's raw bytes stay available for Page.getResourceContent", async () => {
+  const browser = await createBrowser({ spareRenderer: false });
+  try {
+    const { context } = browser;
+    expect(context.resourceContent()).toBeNull();
+    await context.navigate(`http://127.0.0.1:${server.port}/start`);
+    const page = `http://127.0.0.1:${server.port}/page`;
+    const resource = context.resourceContent(page);
+    expect(resource).toMatchObject({ url: page, contentType: "text/html; charset=big5" });
+    expect([...resource.body]).toEqual([...BIG5]);
+    // The URL that was asked for, a fragment of it, and no URL at all mean the current document.
+    await context.navigate(`${page}#part`);
+    expect(context.resourceContent(`${page}#other`)?.body).toBe(resource.body);
+    expect(context.resourceContent()?.body).toBe(resource.body);
+    expect(context.resourceContent(`http://127.0.0.1:${server.port}/elsewhere`)).toBeNull();
+    await context.navigate("about:blank");
+    expect(context.resourceContent()).toBeNull();
+  } finally {
+    browser.close();
+  }
+}, 30_000);
+
+test("CDP Page.getResourceContent returns the bytes base64-encoded", async () => {
+  const { CdpServer } = await import("../lib/cdp-server.js");
+  const body = new Uint8Array([0, 1, 2, 255]);
+  const cdp = new CdpServer({ resourceContent: (url) => url === "https://x.test/f" ? { body, contentType: "image/png" } : null }).listen(0, "127.0.0.1");
+  try {
+    const target = await (await fetch(`http://127.0.0.1:${cdp.port}/json/new?https://x.test/f`, { method: "PUT" })).json();
+    const socket = new WebSocket(target.webSocketDebuggerUrl);
+    await new Promise((resolve) => socket.addEventListener("open", resolve));
+    const call = (id, method, params) => new Promise((resolve) => {
+      socket.addEventListener("message", ({ data }) => {
+        const message = JSON.parse(data);
+        if (message.id === id) resolve(message);
+      });
+      socket.send(JSON.stringify({ id, method, params }));
+    });
+    // The frame reports the document's own type, not the HTML shown for it.
+    expect((await call(0, "Page.getFrameTree", {})).result.frameTree.frame).toMatchObject({ url: "https://x.test/f", mimeType: "image/png" });
+    expect((await call(1, "Page.getResourceContent", { frameId: target.id, url: "https://x.test/f" })).result)
+      .toEqual({ content: "AAEC/w==", base64Encoded: true });
+    expect((await call(2, "Page.getResourceContent", { frameId: target.id, url: "https://x.test/g" })).error?.message)
+      .toBe("No resource with given URL found");
+    socket.close();
+  } finally {
+    cdp.stop(true);
+  }
+});
+
+test("CDP download behavior controls the directory and emits completion events", async () => {
+  const { CdpServer } = await import("../lib/cdp-server.js");
+  const dir = mkdtempSync(join(tmpdir(), "buninu-cdp-download-"));
+  const browser = await createBrowser({ spareRenderer: false });
+  const cdp = CdpServer.create(browser.context).listen(0, "127.0.0.1");
+  const socket = new WebSocket(`ws://127.0.0.1:${cdp.port}/devtools/browser/cdp-server`);
+  const events = [];
+  try {
+    await new Promise((resolve) => socket.addEventListener("open", resolve, { once: true }));
+    socket.addEventListener("message", ({ data }) => {
+      const message = JSON.parse(data);
+      if (message.method?.startsWith("Browser.download")) events.push(message);
+    });
+    const configured = new Promise((resolve) => socket.addEventListener("message", ({ data }) => {
+      if (JSON.parse(data).id === 1) resolve();
+    }));
+    socket.send(JSON.stringify({ id: 1, method: "Browser.setDownloadBehavior", params: {
+      behavior: "allowAndName", downloadPath: dir, eventsEnabled: true,
+    } }));
+    await configured;
+    await browser.context.navigate(`http://127.0.0.1:${server.port}/links`);
+    const rect = JSON.parse(await browser.context.evaluate("JSON.stringify(document.getElementById('attachment').getBoundingClientRect())"));
+    await browser.context.click(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    await Bun.sleep(30);
+    expect(readFileSync(join(dir, events[0].params.guid), "utf8")).toBe("photo bytes");
+    expect(events.map((item) => item.method)).toEqual([
+      "Browser.downloadWillBegin", "Browser.downloadProgress", "Browser.downloadProgress",
+    ]);
+    expect(events[0].params.suggestedFilename).toBe("photo.jpg");
+    expect(events[1].params.state).toBe("inProgress");
+    expect(events[2].params.state).toBe("completed");
+    expect(events[2].params.filePath).toBe(join(dir, events[0].params.guid));
+  } finally {
+    socket.close();
+    cdp.stop(true);
+    browser.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30_000);

package/test/flex.test.js

@@ -148,3 +148,14 @@ test("a calc() max-width with a percentage caps a flex item's automatic minimum
   expect(rect("#a")).toMatchObject({ left: 0, width: 200 });
   done();
 });
+
+test("justify-content distributes a column container's extra height (min-height taller than the items)", () => {
+  const cases = { center: [40, 50], "flex-end": [80, 90], "space-between": [0, 90], "space-evenly": [26.666, 63.333], normal: [0, 10] };
+  for (const [justify, [first, second]] of Object.entries(cases)) {
+    const { rect, done } = flex(`<div id="root"><div id="a"></div><div id="b"></div></div>`,
+      `#root { display:flex; flex-direction:column; min-height:100px; justify-content:${justify} } #a, #b { height:10px }`);
+    expect(rect("#a").top).toBeCloseTo(first, 2);
+    expect(rect("#b").top).toBeCloseTo(second, 2);
+    done();
+  }
+});

package/test/happy-dom-matches.test.js

@@ -0,0 +1,25 @@
+import { expect, test } from "bun:test";
+import Window from "../vendor/happy-dom/packages/happy-dom/src/window/Window.ts";
+
+// Element.matches() caches its result; each case matches once, changes the
+// DOM, and expects the same answer querySelectorAll gives.
+const cases = [
+  [":has() after a removal deep inside", '<div id="x"><p><img></p></div>', "div:has(img)", (d) => d.querySelector("img").remove()],
+  [":has() after an insertion deep inside", '<div id="x"><p></p></div>', "div:has(img)", (d) => d.querySelector("p").append(d.createElement("img"))],
+  ["+ after an insertion between", '<i></i><li id="x"></li>', "i + li", (d) => d.querySelector("i").after(d.createElement("b"))],
+  ["+ on an ancestor", '<i></i><li><b id="x"></b></li>', "i + li b", (d) => d.querySelector("i").after(d.createElement("b"))],
+  [":first-child after a prepend", '<li id="x"></li>', "li:first-child", (d) => d.body.prepend(d.createElement("b"))],
+  [":first-child on an ancestor", '<ul><li><b id="x"></b></li></ul>', "li:first-child b", (d) => d.querySelector("ul").prepend(d.createElement("li"))],
+  [":last-child after an append", '<li id="x"></li>', "li:last-child", (d) => d.body.append(d.createElement("b"))],
+];
+
+for (const [name, html, selector, change] of cases) {
+  test(`matches() is current for ${name}`, () => {
+    const document = new Window().document;
+    document.body.innerHTML = html;
+    const element = document.getElementById("x");
+    element.matches(selector);
+    change(document);
+    expect(element.matches(selector)).toBe([...document.querySelectorAll(selector)].includes(element));
+  });
+}

package/test/headless-shell.test.js

@@ -63,6 +63,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 +112,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 +192,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);

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();
+});