buninu-browser 0.1.0 → 0.2.1

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/test/computed-style.test.js

@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
-import { computeElementStyle, parseDeclarations, StyleEngine } from "../lib/style/computed-style.js";
+import { computeElementStyle, matchSelectors, parseDeclarations, StyleEngine } from "../lib/style/computed-style.js";
 
 test("computes the initial UA and inherited style subset", () => {
   const { document, window } = parseHTMLDocument(`<body>
@@ -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>
@@ -372,6 +381,50 @@ test("cascade layers: unlayered beats layered, later layers win, !important reve
   window.happyDOM.abort();
 });
 
+test("sheets parsed once keep layer order and cascade when the sheet list changes or repeats", () => {
+  const { document, window } = parseHTMLDocument(`<p id="a" class="x">t</p><p id="b" class="y">u</p>`);
+  const base = `@layer one, two; @layer two { .x { color: blue } } @layer one { .x { color: red; display: flex } }`;
+  const anonymous = `@layer { .y { color: green !important } } .y { display: inline }`;
+  const later = `@layer three { .x { display: block } } .y { color: black }`;
+  const lists = [
+    [base, later],
+    [base, later, base], // a repeated sheet: its earlier copy still declares the layers first
+    [later, base],
+    [anonymous, later, anonymous], // anonymous layers: both copies count under !important
+    [later, `@layer two { .x { display: grid } }`, base],
+  ];
+  const engine = new StyleEngine();
+  for (const sheets of lists) {
+    engine.compute(document, sheets, {}, new Set([document.body]), null);
+    const fresh = new StyleEngine().compute(document, sheets.map((sheet) => `${sheet} `));
+    for (const id of ["a", "b"]) expect(engine.get(document.getElementById(id))).toEqual(fresh.get(document.getElementById(id)));
+  }
+  engine.compute(document, [base, later, base]);
+  expect(engine.get(document.getElementById("a")).color).toBe("rgba(0, 0, 255, 1)");
+  expect(engine.get(document.getElementById("a")).display).toBe("block");
+  window.happyDOM.abort();
+});
+
+test("matchSelectors finds what querySelectorAll finds, in one walk", () => {
+  const { document, window } = parseHTMLDocument(`<main><ul><li class="a">1</li><li id="i">2</li><li class="a b">3</li></ul>
+    <p>x</p><p class="a"><span>y</span></p><div><span hidden>z</span></div></main>`);
+  const selectors = ["li:first-child", ".a + li", "li ~ .b", "p:has(span)", ":is(ul, div) > *", "#i", "[hidden]", "*", ":root", "main span", "1x", "li:nth-child(2n+1)"];
+  // Elements compared as sets of document positions (deep equality of DOM
+  // nodes is slow, and querySelectorAll() may list an element twice).
+  const all = [...document.querySelectorAll("*")];
+  const positions = (elements) => [...new Set(elements)].map((element) => all.indexOf(element)).sort((x, y) => x - y);
+  const matched = matchSelectors(document, selectors);
+  for (const selector of selectors) {
+    let expected = null;
+    try { expected = positions(document.querySelectorAll(selector)); } catch {}
+    expect(matched.has(selector) ? positions(matched.get(selector)) : null).toEqual(expected);
+  }
+  // From an element: its descendants and the element itself.
+  const ul = document.querySelector("ul");
+  expect(positions(matchSelectors(ul, [":is(ul, li)"]).get(":is(ul, li)"))).toEqual(positions([ul, ...ul.children]));
+  window.happyDOM.abort();
+});
+
 test("the font shorthand resets its parts and competes with font-size in the cascade", () => {
   const { document, window } = parseHTMLDocument(`<h2 id="a" style="font-size:32px;line-height:3">t</h2><h2 id="b">x</h2>
     <p id="c" style="font:italic small-caps bold 12px/1.5 Georgia, serif">u</p><p id="d" style="font-size:large">v</p>`);
@@ -432,3 +485,62 @@ 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 restyling retains equal computed-style identities", () => {
+  const { document, window } = parseHTMLDocument(`<body><div><span>same</span></div></body>`);
+  const div = document.querySelector("div");
+  const span = document.querySelector("span");
+  const engine = new StyleEngine().compute(document, [".active { color: red }"]);
+  const before = [engine.get(div), engine.get(span)];
+  // Visiting this subtree is conservative: the class changes, but neither
+  // element's final values change.
+  div.className = "unmatched";
+  engine.compute(document, [".active { color: red }"], {}, new Set([div]));
+  expect([engine.get(div), engine.get(span)]).toEqual(before);
+  expect(engine.get(div)).toBe(before[0]);
+  expect(engine.get(span)).toBe(before[1]);
+  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));
+  });
+}