buninu-browser 0.1.0 → 0.2.1

package/test/page-scripts.test.js

@@ -7,6 +7,8 @@ import { RendererHost } from "../lib/renderer/host.js";
  */
 const scripts = new Map();
 const navigations = [];
+// Every resource request with its time, for the preload test.
+const requests = [];
 let renderer;
 
 beforeAll(async () => {
@@ -15,6 +17,11 @@ beforeAll(async () => {
     onNavigate: (url) => navigations.push(url),
     fetch: async (url, init = {}) => {
       const target = new URL(String(url));
+      requests.push({ url: target.href, at: performance.now() });
+      if (target.pathname === "/slow.css") {
+        await Bun.sleep(400);
+        return new Response("body { color: red }", { headers: { "content-type": "text/css" } });
+      }
       const headers = new Headers(init.headers);
       if (target.pathname === "/api/echo") {
         return new Response(JSON.stringify({
@@ -30,13 +37,10 @@ beforeAll(async () => {
           headers: target.searchParams.has("allow") ? { "access-control-allow-origin": "*" } : {},
         });
       }
-      if (target.hostname === "api.github.com") {
-        return new Response(JSON.stringify(target.pathname.endsWith("/compare/HEAD...fork:main")
-          ? { ahead_by: 37, behind_by: 0 }
-          : { default_branch: "main" }), { headers: { "content-type": "application/json" } });
-      }
       if (target.pathname === "/video.mp4") return new Response(Bun.file(new URL("./fixtures/video.mp4", import.meta.url)),
         { headers: { "content-type": "video/mp4" } });
+      if (target.pathname === "/tone.mp3") return new Response(Bun.file(new URL("./fixtures/tone.mp3", import.meta.url)),
+        { headers: { "content-type": "audio/mpeg" } });
       const body = scripts.get(target.href);
       return body === undefined
         ? new Response("missing", { status: 404 })
@@ -82,6 +86,32 @@ test("classic scripts share globals, load in order and fire DOMContentLoaded the
   expect(await evaluate("document.readyState")).toBe("complete");
 });
 
+test("parser-blocking head scripts run before document.body exists", async () => {
+  await load(`<head><script>window.bodyDuringHead = document.body</script></head><body><p>ready</p></body>`);
+  expect(await evaluate("bodyDuringHead === null")).toBe(true);
+  expect(await evaluate("document.body.textContent")).toBe("ready");
+});
+
+test("anchors expose parsed hyperlink URL components", async () => {
+  await load(`<a id="link" href="/path?q=one#part"></a>`);
+  expect(await evaluate(`(() => { const a = document.getElementById("link"); return [
+    a.href, a.origin, a.protocol, a.host, a.hostname, a.port, a.pathname, a.search, a.hash
+  ] })()`)).toEqual([
+    "https://page.test/path?q=one#part", "https://page.test", "https:", "page.test", "page.test", "",
+    "/path", "?q=one", "#part",
+  ]);
+  await evaluate(`document.getElementById("link").hostname = "other.test"`);
+  expect(await evaluate(`document.getElementById("link").href`)).toBe("https://other.test/path?q=one#part");
+});
+
+test("getAttributeNode exposes a live Attr view", async () => {
+  await load(`<form id="search" onsubmit="return false"></form>`);
+  expect(await evaluate(`(() => { const form = document.getElementById("search"); const attr = form.getAttributeNode("onsubmit");
+    const before = [attr.name, attr.value, attr.nodeType, attr.ownerElement === form, attr.specified];
+    attr.value = "return true"; return [...before, form.getAttribute("onsubmit"), form.getAttributeNode("missing")]; })()`))
+    .toEqual(["onsubmit", "return false", 2, true, true, "return true", null]);
+});
+
 test("scripts change the DOM and the next screenshot shows it", async () => {
   await load(`<div id="box" style="height:20px"></div>
     <script>document.getElementById('box').style.background = 'rgb(255, 0, 0)';
@@ -136,20 +166,136 @@ test("template content can be cloned and typed arrays are available", async () =
   expect(await evaluate("document.getElementById('mount').dataset.number")).toBe("1.5");
 });
 
-test("a GitHub fork branch placeholder shows the live comparison", async () => {
-  const embedded = JSON.stringify({ payload: {
-    codeViewLayoutRoute: { repo: { isFork: true, ownerLogin: "fork" } },
-    sidebarAbout: { repo: { parentRepo: { ownerLogin: "upstream", name: "repo" } } },
-    codeViewRepoRoute: { refInfo: { refType: "branch", name: "main" } },
-  } });
-  await load(`<div data-testid="branch-info-bar"><div class="Skeleton">&nbsp;</div></div>
-    <script type="application/json" data-target="react-app.embeddedData">${embedded}</script>`, "https://github.com/fork/repo");
-  for (let attempt = 0; attempt < 20; attempt++) {
-    if ((await evaluate("document.querySelector('[data-testid=branch-info-bar]').textContent")).includes("37 commits")) break;
-    await Bun.sleep(10);
-  }
-  expect(await evaluate("document.querySelector('[data-testid=branch-info-bar]').textContent"))
-    .toBe("This branch is 37 commits ahead of upstream/repo:main.");
+test("DOM collection interfaces expose iterable array-compatible prototypes", async () => {
+  await load(`<p>one</p><p>two</p>`);
+  expect(await evaluate("typeof NodeList.prototype.forEach")).toBe("function");
+  expect(await evaluate("typeof HTMLCollection.prototype.item")).toBe("undefined");
+  expect(await evaluate("[...document.querySelectorAll('p')].map(p => p.textContent).join(',')")).toBe("one,two");
+});
+
+test("an unfocused page exposes an empty Selection", async () => {
+  await load(`<p>text</p>`);
+  expect(await evaluate("[getSelection().type, getSelection().rangeCount, getSelection().toString()].join(',')"))
+    .toBe("None,0,");
+});
+
+test("page-local DOM prototypes remain writable after binding hardening", async () => {
+  await load(`<button id="toggle">Toggle</button><p id="result"></p>
+    <script>
+      Document.prototype.customQuery = function (selector) { return this.querySelector(selector); };
+      Element.prototype.customMarker = "page-local";
+      document.querySelector("#toggle").addEventListener("click", () => {
+        document.customQuery("#result").textContent = "clicked";
+      });
+      window.ready = document.querySelector("#toggle").customMarker === "page-local";
+    </script>`);
+  expect(await evaluate("ready")).toBe(true);
+  const rect = await evaluate("document.getElementById('toggle').getBoundingClientRect().toJSON()");
+  await renderer.call("click", rect.x + 1, rect.y + 1);
+  expect(await evaluate("document.getElementById('result').textContent")).toBe("clicked");
+  await load("<p>next document</p>");
+  expect(await evaluate("Element.prototype.customMarker")).toBeUndefined();
+});
+
+test("comments expose their data like text nodes", async () => {
+  // React finds its hydration boundaries by reading comment data (<!--&-->).
+  await load(`<div id="host"><!--&--><!--/&--></div>`);
+  expect(await evaluate("[...document.getElementById('host').childNodes].map((node) => node.data).join(' ')")).toBe("& /&");
+  expect(await evaluate(`(() => {
+    const comment = document.createComment("a");
+    comment.data = "bc";
+    return [comment.data, comment.length, comment instanceof CharacterData, comment instanceof Text, comment instanceof Comment].join(",");
+  })()`)).toBe("bc,2,true,false,true");
+  expect(await evaluate("document.createTextNode('xy') instanceof CharacterData")).toBe(true);
+});
+
+test("EventTarget can be constructed and subclassed", async () => {
+  expect(await evaluate(`(() => {
+    class Store extends EventTarget {
+      constructor() { super(); this.value = 1; }
+      bump() { this.value++; this.dispatchEvent(new CustomEvent("change", { detail: this.value })); }
+    }
+    const store = new Store();
+    const seen = [];
+    const listener = function (event) { seen.push([event.detail, this === store, event.target === store, event.currentTarget === store]); };
+    store.addEventListener("change", listener);
+    store.bump();
+    store.removeEventListener("change", listener);
+    store.bump();
+    const plain = new EventTarget();
+    let fired = 0;
+    plain.addEventListener("ping", () => fired++, { once: true });
+    plain.dispatchEvent(new Event("ping"));
+    plain.dispatchEvent(new Event("ping"));
+    return JSON.stringify({ seen, fired, value: store.value,
+      checks: [store instanceof Store, store instanceof EventTarget, document.body instanceof EventTarget, window instanceof EventTarget, {} instanceof EventTarget] });
+  })()`)).toBe(JSON.stringify({ seen: [[2, true, true, true]], fired: 1, value: 3, checks: [true, true, true, true, false] }));
+});
+
+test("elements attach shadow roots, and prototype patches can wrap attachShadow", async () => {
+  await load(`<div id="host">light</div>`);
+  expect(await evaluate(`(() => {
+    // A polyfill pattern: keep the original and wrap it.
+    const original = HTMLElement.prototype.attachShadow;
+    let wrapped = 0;
+    HTMLElement.prototype.attachShadow = function (init) { wrapped++; return original.call(this, init); };
+    const host = document.getElementById("host");
+    const root = host.attachShadow({ mode: "open" });
+    root.innerHTML = "<span>shadow</span>";
+    const closed = document.createElement("div").attachShadow({ mode: "closed" });
+    return JSON.stringify({ wrapped, same: host.shadowRoot === root, host: root.host === host, mode: root.mode,
+      html: root.innerHTML, shadow: root instanceof ShadowRoot, fragment: root instanceof DocumentFragment,
+      closedHidden: closed.host.shadowRoot === null, light: host.textContent });
+  })()`)).toBe(JSON.stringify({ wrapped: 2, same: true, host: true, mode: "open", html: "<span>shadow</span>",
+    shadow: true, fragment: true, closedHidden: true, light: "light" }));
+});
+
+test("TreeWalker follows the DOM traversal algorithms with page filters", async () => {
+  await load(`<div id="root"><p id="a"><b id="a1"></b>text</p><!--c--><p id="b" data-skip><i id="b1"></i></p><p id="c" data-reject><i id="c1"></i></p><p id="d"></p></div>`);
+  expect(await evaluate(`(() => {
+    const root = document.getElementById("root");
+    const walk = (walker, step) => { const seen = []; for (let node = walker[step](); node; node = walker[step]()) seen.push(node.id || node.nodeName); return seen.join(","); };
+    const elements = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (node) => node.hasAttribute("data-reject") ? NodeFilter.FILTER_REJECT
+        : node.hasAttribute("data-skip") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT,
+    });
+    const forward = walk(elements, "nextNode");
+    const backward = walk(elements, "previousNode");
+    const children = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, (node) => node.hasAttribute("data-skip") ? 3 : 1);
+    const first = children.firstChild().id, last = children.lastChild(), top = children.currentNode.id;
+    children.currentNode = document.getElementById("a");
+    const siblings = walk(children, "nextSibling");
+    const everything = document.createTreeWalker(root);
+    const all = walk(everything, "nextNode");
+    const comments = walk(document.createTreeWalker(root, NodeFilter.SHOW_COMMENT), "nextNode");
+    return [forward, backward, first, last && last.id, top, siblings, all, comments, everything.parentNode() && everything.currentNode.id].join(" | ");
+  })()`)).toBe("a,a1,b1,d | b1,a1,a,root | a | a1 | a1 | b1,c,d | a,a1,#text,#comment,b,b1,c,c1,d | #comment | root");
+});
+
+test("style feature detection only finds properties the renderer implements", async () => {
+  await load("<p>x</p>");
+  expect(await evaluate(`["color", "backgroundColor", "setProperty", "cssText", "anchorName", "positionTryFallbacks", "notAProperty"]
+    .map((name) => name in document.body.style).join(",")`)).toBe("true,true,true,true,false,false,false");
+  expect(await evaluate(`[
+    CSS.supports("color", "red"),
+    CSS.supports("animation-timeline", "scroll()"),
+    CSS.supports("(display: grid)")
+  ].join(",")`)).toBe("true,false,false");
+});
+
+test("the root element's client size is the viewport, and computed style reports painting properties", async () => {
+  await load(`<div id="box" style="visibility: hidden; opacity: 0.5; overflow: hidden; pointer-events: none">x</div>
+    <div style="height: 5000px; width: 3000px"></div>`);
+  expect(await evaluate(`[document.documentElement.clientWidth === innerWidth, document.documentElement.clientHeight === innerHeight,
+    document.getElementById("box").clientWidth < 3000].join(",")`)).toBe("true,true,true");
+  expect(await evaluate(`(() => { const style = getComputedStyle(document.getElementById("box"));
+    return [style.visibility, style.opacity, style.overflow, style.overflowY, style.pointerEvents,
+      getComputedStyle(document.body).overflow].join(","); })()`)).toBe("hidden,0.5,hidden,hidden,none,visible");
+});
+
+test("CSS.escape produces selectors for leading digits and punctuation", async () => {
+  await load(`<div id="1:a"></div>`);
+  expect(await evaluate("CSS.escape('1:a')")).toBe("\\31 \\:a");
 });
 
 test("a video plays frames and pauses when clicked", async () => {
@@ -212,6 +358,108 @@ test("clicks reach page listeners; preventDefault cancels link navigation", asyn
   expect(await evaluate("clicks.join(',')")).toBe("click:kept:true,inline");
 });
 
+test("fragment links navigate at once: later handlers see the new location, popstate fires, history grows", async () => {
+  await load(`<a href="#b" style="display:block;height:40px">b</a><div style="height:900px"></div>
+    <h2 id="b">b</h2><div style="height:900px"></div>
+    <script>var seen = [];
+      document.addEventListener('click', () => setTimeout(() => seen.push('timer ' + location.hash), 0));
+      addEventListener('popstate', (event) => seen.push('popstate ' + location.hash + ' ' + event.state));
+      addEventListener('hashchange', (event) => seen.push('hashchange ' + event.newURL.split('#')[1]));</script>`);
+  const clicked = await renderer.call("click", 3, 10);
+  expect(clicked).toEqual({ url: "https://page.test/#b", fragmentFrom: { x: 0, y: 0 } });
+  await Bun.sleep(50);
+  expect(await evaluate("seen.join(',')")).toBe("popstate #b null,timer #b,hashchange b");
+  expect(await evaluate(`[location.hash, history.length, history.state,
+    Math.round(scrollY) === Math.round(document.getElementById('b').getBoundingClientRect().top + scrollY)].join('|')`)).toBe("#b|2||true");
+  // Setting location.hash is a fragment navigation too: it reads back at once.
+  expect(await evaluate("(() => { location.hash = 'c'; return location.hash + ' ' + history.length })()")).toBe("#c 3");
+});
+
+test("insertAdjacentHTML keeps the order of the inserted nodes at every position", async () => {
+  await load(`<div id="host"><b id="ref">ref</b></div>`);
+  expect(await evaluate(`(() => {
+    const ref = document.getElementById("ref");
+    ref.insertAdjacentHTML("afterend", "<i>1</i><i>2</i>");
+    ref.insertAdjacentHTML("beforebegin", "<u>1</u><u>2</u>");
+    ref.insertAdjacentHTML("afterbegin", "<s>1</s><s>2</s>");
+    ref.insertAdjacentHTML("beforeend", "<em>1</em><em>2</em>");
+    return document.getElementById("host").innerHTML;
+  })()`)).toBe("<u>1</u><u>2</u><b id=\"ref\"><s>1</s><s>2</s>ref<em>1</em><em>2</em></b><i>1</i><i>2</i>");
+});
+
+test("style sheets that scripts add, change or remove apply to the page", async () => {
+  await load(`<p id="p">text</p><script>
+    document.body.insertAdjacentHTML("afterbegin", "<style id=s>#p { display: none }</style>");
+  </script>`);
+  const height = () => evaluate("document.getElementById('p').getBoundingClientRect().height");
+  expect(await height()).toBe(0);
+  await evaluate("document.getElementById('s').textContent = '#p { padding: 10px }'");
+  expect(await height()).toBeGreaterThan(20);
+  await evaluate("document.getElementById('s').remove()");
+  expect(await height()).toBeLessThan(25);
+});
+
+test("DOM records and live form state take their distinct style invalidation paths", async () => {
+  await load(`<style>
+    .on .child { color: red }
+    input:checked + span { display: none }
+  </style>
+  <div id="parent"><span class="child">child</span></div>
+  <input id="box" type="checkbox"><span id="after">after</span>`);
+  expect(await evaluate(`(() => {
+    const parent = document.getElementById("parent");
+    const child = parent.querySelector(".child");
+    parent.className = "on";
+    void child.offsetWidth;
+    const color = getComputedStyle(child).color;
+    const box = document.getElementById("box");
+    box.checked = true;
+    void document.getElementById("after").offsetWidth;
+    return color + "/" + getComputedStyle(document.getElementById("after")).display;
+  })()`)).toBe("rgba(255, 0, 0, 1)/none");
+});
+
+test("childNodes, children and getElementsBy* are live collections", async () => {
+  await load(`<div id="host"></div>`);
+  expect(await evaluate(`(() => {
+    const host = document.getElementById("host");
+    const source = document.createElement("div");
+    source.innerHTML = "<b>1</b>text<i class=x>2</i><u class=x>3</u>";
+    const nodes = source.childNodes, tags = source.getElementsByTagName("*"), named = source.getElementsByClassName("x");
+    const before = [nodes.length, source.children.length, tags.length, named.length, nodes === source.childNodes];
+    // Moving nodes out empties the live list, so this loop ends.
+    const fragment = document.createDocumentFragment();
+    let moves = 0;
+    while (nodes.length && moves < 10) { fragment.appendChild(nodes[0]); moves++; }
+    host.appendChild(fragment);
+    return JSON.stringify({ before, moves, after: [nodes.length, tags.length, named.length],
+      hostTags: Array.prototype.map.call(host.children, (element) => element.tagName).join(),
+      spread: [...host.childNodes].length, item: host.childNodes.item(1).nodeType, missing: host.childNodes.item(9),
+      named: host.children.namedItem("nope") });
+  })()`)).toBe(JSON.stringify({ before: [4, 3, 3, 2, true], moves: 4, after: [0, 0, 0],
+    hostTags: "B,I,U", spread: 4, item: 3, missing: null, named: null }));
+});
+
+test("the shown document is visible", async () => {
+  await load("<p>x</p>");
+  expect(await evaluate("[document.visibilityState, document.hidden].join()")).toBe("visible,false");
+});
+
+test("performance.timing follows the document lifecycle", async () => {
+  await load(`<script>var atParse = JSON.stringify([performance.timing.navigationStart > 0,
+    performance.timing.domInteractive, performance.timing.loadEventEnd]);
+    var atLoad; addEventListener("load", () => { atLoad = [performance.timing.loadEventStart > 0, performance.timing.loadEventEnd]; });</script>`);
+  await Bun.sleep(50);
+  expect(await evaluate("atParse")).toBe("[true,0,0]");
+  expect(await evaluate(`(() => { const t = performance.timing;
+    return JSON.stringify([atLoad, t.navigationStart === Math.round(performance.timeOrigin),
+      t.fetchStart <= t.responseEnd && t.responseEnd <= t.domLoading && t.domLoading <= t.domInteractive
+      && t.domInteractive <= t.domContentLoadedEventStart && t.domContentLoadedEventEnd <= t.domComplete
+      && t.domComplete <= t.loadEventStart && t.loadEventStart <= t.loadEventEnd,
+      performance.navigation.type, Object.keys(t.toJSON()).length]); })()`))
+    .toBe(JSON.stringify([[true, 0], true, true, 0, 21]));
+});
+
 test("location assignment asks the controller to navigate", async () => {
   navigations.length = 0;
   await load(`<script>setTimeout(() => { location.href = '/elsewhere?x=1' }, 0)</script>`);
@@ -238,7 +486,7 @@ test("page scripts cannot escape the sandbox or reach engine state", async () =>
     attempt('patchPrototype', () => { Object.getPrototypeOf(document.body).appendChild = () => 'pwned'; return 'patched'; });
     attempt('patchIntrinsic', () => { Array.prototype.includes = () => true; return 'patched'; });
     attempt('patchUrl', () => { URL.prototype.toString = () => 'pwned'; return 'patched'; });
-    attempt('dynamicImport', () => eval('import("node:fs")'));
+    attempt('dynamicImport', () => { const pending = eval('import("node:fs")'); pending.catch(() => {}); return pending instanceof Promise ? 'promise' : 'wrong'; });
   </script>`);
   const probes = await evaluate("JSON.stringify(probes)");
   expect(JSON.parse(probes)).toEqual({
@@ -248,11 +496,13 @@ test("page scripts cannot escape the sandbox or reach engine state", async () =>
     hostGlobals: "undefined/undefined/undefined/function",
     privateState: "0/0",
     newBinding: "blocked",
-    patchPrototype: "blocked",
+    patchPrototype: "patched",
     patchIntrinsic: "blocked",
     patchUrl: "blocked",
-    dynamicImport: "blocked",
+    dynamicImport: "promise",
   });
+  await load("<p>another page</p>");
+  expect(await evaluate("document.body.appendChild.toString().includes('pwned')")).toBe(false);
   // Page fetch cannot read local files.
   expect(await evaluate("fetch('file:///etc/passwd').then(() => 'read', (error) => 'blocked')")).toBe("blocked");
   // The engine itself is unaffected: the page still renders and URLs still work.
@@ -273,6 +523,7 @@ test("page-inserted scripts run; innerHTML scripts do not; on* handlers fire", a
     const external = document.createElement('script');
     external.src = '/dynamic.js';
     external.onload = () => log.push('external onload');
+    external.onerror = () => log.push('external onerror');
     document.head.appendChild(external);
     const inline = document.createElement('script');
     inline.textContent = "log.push('inline ran during insertion')";
@@ -284,6 +535,9 @@ test("page-inserted scripts run; innerHTML scripts do not; on* handlers fire", a
     inFragment.textContent = "log.push('fragment script ran')";
     fragment.appendChild(inFragment);
     document.body.appendChild(fragment);
+    const blobScript = document.createElement('script');
+    blobScript.src = URL.createObjectURL(new Blob(["log.push('blob script ran')"], { type: 'text/javascript' }));
+    document.head.appendChild(blobScript);
   </script>`);
   await Bun.sleep(100);
   expect(await evaluate("log.join(' | ')")).toBe([
@@ -291,12 +545,80 @@ test("page-inserted scripts run; innerHTML scripts do not; on* handlers fire", a
     "after inline insertion",
     "fragment script ran",
     // A script inserted during loading delays the window load event.
+    "blob script ran",
     "external ran:true",
     "external onload",
     "window.onload",
   ].join(" | "));
 });
 
+test("a GET form submitted by page script navigates with its field values", async () => {
+  navigations.length = 0;
+  await load(`<form action="/search?old=1"><textarea name="q"></textarea><input type="hidden" name="source" value="home"></form>
+    <script>document.querySelector('textarea').value = 'two words'; document.forms[0].submit()</script>`);
+  expect(navigations).toEqual(["https://page.test/search?q=two+words&source=home"]);
+});
+
+test("a search textarea can be focused across its form and submitted with Enter", async () => {
+  navigations.length = 0;
+  await load(`<form role="search" action="/search" style="width:300px;height:50px">
+    <textarea name="q" inputmode="search" style="width:100px;height:25px"></textarea>
+    <input type="hidden" name="source" value="home"></form>`);
+  const rect = await evaluate(`document.querySelector('form').getBoundingClientRect().toJSON()`);
+  await renderer.call("click", rect.x + 200, rect.y + 15);
+  expect(await evaluate("document.activeElement.tagName")).toBe("TEXTAREA");
+  await renderer.call("type", "two words");
+  await renderer.call("press", "Enter", { code: "Enter" });
+  expect(navigations).toEqual(["https://page.test/search?q=two+words&source=home"]);
+
+  navigations.length = 0;
+  await load(`<form action="/note"><textarea name="body"></textarea></form>`);
+  const plain = await evaluate(`document.querySelector('textarea').getBoundingClientRect().toJSON()`);
+  await renderer.call("click", plain.x + 5, plain.y + 5);
+  await renderer.call("press", "Enter", { code: "Enter" });
+  expect(await evaluate("document.querySelector('textarea').value")).toBe("\n");
+  expect(navigations).toEqual([]);
+});
+
+test("restyles follow :has() and structural matches of inserted subtrees after later changes", async () => {
+  await load(`<style>.box:has(img) { display: none } li:first-child + li span { display: none }</style>
+    <div id="host"></div><ul id="list"><li>a</li></ul>`);
+  // Inserted, styled, then changed inside: the inserted elements' matches
+  // are what the next change is compared with.
+  expect(await evaluate(`(() => {
+    const host = document.getElementById("host");
+    const template = document.createElement("template");
+    template.innerHTML = '<div class="box" id="box"><p><img></p></div>';
+    host.append(template.content); // built detached, inserted whole
+    const before = getComputedStyle(document.getElementById("box")).display;
+    document.querySelector("#box img").remove();
+    return before + "," + getComputedStyle(document.getElementById("box")).display;
+  })()`)).toBe("none,block");
+  expect(await evaluate(`(() => {
+    const list = document.getElementById("list");
+    list.insertAdjacentHTML("beforeend", '<li><span id="s">b</span></li>');
+    const before = getComputedStyle(document.getElementById("s")).display;
+    list.prepend(document.createElement("li"));
+    list.firstElementChild.remove();
+    list.firstElementChild.remove();
+    return before + "," + getComputedStyle(document.getElementById("s")).display;
+  })()`)).toBe("none,inline");
+});
+
+test("styles inside noscript do not apply while page scripting is enabled", async () => {
+  await load(`<noscript><style>p { display: none }</style></noscript><p id="visible">visible</p>`);
+  expect(await evaluate(`getComputedStyle(document.getElementById("visible")).display`)).toBe("block");
+});
+
+test("page RegExp instances can override their own toString without changing the intrinsic", async () => {
+  await load(`<script>
+    const pattern = /demo/;
+    pattern.toString = () => "custom";
+    window.regexpOverride = [pattern.toString(), (/other/).toString()];
+  </script>`);
+  expect(await evaluate("regexpOverride")).toEqual(["custom", "/other/"]);
+});
+
 test("ES modules: graphs, live exports, JSON, import.meta, dynamic import, TLA, cycles, import maps", async () => {
   const base = "https://page.test/modules/";
   scripts.set(`${base}math.js`, `
@@ -421,7 +743,6 @@ test("fragment navigation updates location, fires hashchange, and lets the page
   await load(`
     <div style="height:1000px"></div><h2 id="plain">plain</h2>
     <div style="height:1000px"></div><h2 id="custom-target">custom</h2>
-    <div style="height:1000px"></div><h2><a id="user-content-readme">readme</a></h2>
     <div style="height:2000px"></div>
     <script>var changes = []; window.addEventListener('hashchange', () => {
       changes.push(location.hash + ':' + document.URL.split('#')[1]);
@@ -436,13 +757,10 @@ test("fragment navigation updates location, fires hashchange, and lets the page
   // A listener that maps the fragment scrolls itself.
   await renderer.call("showFragment", "https://page.test/#custom");
   expect(await scrollY()).toBe(await top("custom-target"));
-  // No target and no script: rendered Markdown's "user-content-" id.
-  await renderer.call("showFragment", "https://page.test/#readme");
-  expect(await scrollY()).toBe(await top("user-content-readme"));
   // The same fragment again does not fire hashchange.
-  await renderer.call("showFragment", "https://page.test/#readme");
-  expect(await evaluate("changes.join(',')")).toBe("#plain:plain,#custom:custom,#readme:readme");
-  expect(await evaluate("location.href")).toBe("https://page.test/#readme");
+  await renderer.call("showFragment", "https://page.test/#custom");
+  expect(await evaluate("changes.join(',')")).toBe("#plain:plain,#custom:custom");
+  expect(await evaluate("location.href")).toBe("https://page.test/#custom");
 });
 
 test("WebSocket connects through the controller: text, binary, subprotocol, Origin and close", async () => {
@@ -550,3 +868,93 @@ test("UI event constructors, table rows/cells and select options are available",
       out.push(key.key + ':' + key.code + ':' + key.repeat);</script>`);
   expect(await evaluate("JSON.stringify(out)")).toBe(JSON.stringify([2, 1, 2, 1, 1, "THEAD", 2, 1, "y", "x", true, "click:5:true:false", true, "Enter:Enter:true"]));
 });
+
+test("labels and unchecked checkboxes are clickable; each click toggles once, as in Chromium", async () => {
+  await load(`<label id="l" style="display:block"><input type="checkbox" id="c"> Label text</label>
+    <script>var changes = 0; document.getElementById('c').addEventListener('change', () => changes++);</script>`);
+  const rect = async (id) => JSON.parse(await evaluate(`JSON.stringify(document.getElementById('${id}').getBoundingClientRect())`));
+  const box = await rect("c");
+  // The unchecked box has no text; it is hit over its whole box.
+  await renderer.call("click", box.left + box.width / 2, box.top + box.height / 2);
+  expect(await evaluate("[document.getElementById('c').checked, changes].join()")).toBe("true,1");
+  const label = await rect("l");
+  await renderer.call("click", label.left + label.width - 5, label.top + label.height / 2);
+  expect(await evaluate("[document.getElementById('c').checked, changes].join()")).toBe("false,2");
+});
+
+test("media elements share the HTMLMediaElement API: seek, play, pause, end, replay, events", async () => {
+  await load(`<video id="v" src="/video.mp4" width="160" height="120"></video><audio id="a" controls src="/tone.mp3"></audio>
+    <script>var events = [], v = document.getElementById("v"), a = document.getElementById("a");
+      for (const id of ["v", "a"]) for (const type of ["loadedmetadata", "seeked", "play", "pause", "ended"]) {
+        document.getElementById(id).addEventListener(type, () => events.push(id + ":" + type));
+      }</script>`);
+  const until = async (expression, ms = 3000) => {
+    for (const end = Date.now() + ms; Date.now() < end; await Bun.sleep(25)) if (await evaluate(expression)) return true;
+    return false;
+  };
+  expect(await evaluate("[v.paused, v.ended, v.currentTime, Number.isNaN(v.duration), a.paused]")).toEqual([true, false, 0, true, true]);
+
+  await evaluate("v.currentTime = 0.5; a.currentTime = 0.4");
+  expect(await until("events.includes('v:seeked') && events.includes('a:seeked')")).toBeTrue();
+  expect(await evaluate("[v.duration, Math.round(v.currentTime * 10), a.duration, Math.round(a.currentTime * 10), v.paused, a.paused]"))
+    .toEqual([1, 5, 1, 4, true, true]);
+
+  await evaluate("v.play()");
+  expect(await until("!v.paused && v.currentTime > 0.55")).toBeTrue();
+  await evaluate("v.pause()");
+  expect(await evaluate("v.paused")).toBeTrue();
+
+  // Playing to the end, then play starts over.
+  await evaluate("v.currentTime = 0.9; v.play()");
+  expect(await until("v.ended && v.paused")).toBeTrue();
+  await evaluate("v.play()");
+  expect(await until("!v.paused && !v.ended && v.currentTime < 0.5")).toBeTrue();
+  await evaluate("v.pause()");
+  const seen = await evaluate("events.join()");
+  for (const event of ["v:loadedmetadata", "a:loadedmetadata", "v:play", "v:pause", "v:ended"]) expect(seen).toContain(event);
+
+  // Audio plays through a PulseAudio server on 127.0.0.1:4713 when one runs (this makes a short tone).
+  if (await pulseServerRunning()) {
+    await evaluate("a.currentTime = 0; a.play()");
+    expect(await until("!a.paused && a.currentTime > 0.2")).toBeTrue();
+    await evaluate("a.pause()");
+    expect(await evaluate("a.paused")).toBeTrue();
+    await evaluate("a.currentTime = 0.8; a.play()");
+    expect(await until("a.ended && a.paused")).toBeTrue();
+  }
+});
+
+function pulseServerRunning() {
+  return new Promise((resolve) => {
+    const socket = require("node:net").connect({ host: "127.0.0.1", port: 4713 });
+    const done = (running) => {
+      socket.destroy();
+      resolve(running);
+    };
+    socket.once("connect", () => done(true));
+    socket.once("error", () => done(false));
+    setTimeout(() => done(false), 1000);
+  });
+}
+
+test("scripts and module preloads are fetched while the stylesheets load, each once", async () => {
+  const base = "https://page.test/preload/";
+  scripts.set(`${base}main.js`, "import { value } from './dep.js'; window.preloaded = value;");
+  scripts.set(`${base}dep.js`, "export const value = 'dep';");
+  scripts.set(`${base}classic.js`, "window.classic = 'ran';");
+  scripts.set(`${base}skipped.js`, "window.skipped = 'ran';");
+  requests.length = 0;
+  const started = performance.now();
+  await load(`<link rel="stylesheet" href="/slow.css"><link rel="modulepreload" href="/preload/dep.js">
+    <script type="module" src="/preload/main.js"></script><script src="/preload/classic.js"></script>
+    <script nomodule src="/preload/skipped.js"></script>`);
+  expect(await evaluate("[window.preloaded, window.classic, window.skipped].join()")).toBe("dep,ran,");
+  const times = (path) => requests.filter((request) => request.url === `https://page.test${path}`).map((request) => request.at - started);
+  // Requested before the 400 ms stylesheet arrived, not after it.
+  for (const path of ["/preload/main.js", "/preload/dep.js", "/preload/classic.js"]) {
+    expect(times(path).length).toBe(1);
+    expect(times(path)[0]).toBeLessThan(times("/slow.css")[0] + 300);
+  }
+  expect(times("/preload/skipped.js")).toEqual([]);
+});
+

package/test/piano.test.js

@@ -0,0 +1,65 @@
+import { test, expect } from "bun:test";
+import { PIANO_KEYS, PIANO_DO, pianoNote, pianoTone, PianoMixer } from "../lib/audio/piano.js";
+
+test("piano keyboard mapping is editable in one table", () => {
+  expect(Object.keys(PIANO_KEYS)).toHaveLength(61);
+  expect(PIANO_DO).toBe(69);
+  expect(PIANO_KEYS[" "]).toBe(60);
+  expect(pianoNote(" ")).toBe(69);
+  expect(pianoNote("j")).toBe(71);
+  expect(pianoNote("K")).toBe(73);
+  expect(pianoNote("l")).toBe(74);
+  expect(pianoNote("F1")).toBe(38);
+  expect(pianoNote("F12")).toBe(98);
+  expect(pianoNote("z")).toBe(37);
+  expect(pianoNote("q")).toBe(40);
+  expect(pianoNote("/", "Slash")).toBe(71);
+  expect(pianoNote("Unidentified", "KeyJ")).toBe(71);
+  expect(pianoNote("!", "Digit1")).toBe(45);
+  expect(pianoNote("Escape")).toBeNull();
+});
+
+test("piano tone is 48 kHz mono PCM with a nonzero, decaying sound", () => {
+  const tone = pianoTone(60);
+  expect(tone.byteLength).toBe(Math.round(48000 * 0.7) * 2);
+  const view = new DataView(tone.buffer);
+  const peak = (start, end) => {
+    let value = 0;
+    for (let i = start; i < end; i++) value = Math.max(value, Math.abs(view.getInt16(i * 2, true)));
+    return value;
+  };
+  expect(peak(1000, 2000)).toBeGreaterThan(1000);
+  expect(peak(20000, 21000)).toBeLessThan(peak(1000, 2000));
+  expect(peak(0, tone.byteLength / 2)).toBeLessThan(32767);
+  const low = pianoTone(37);
+  const lowView = new DataView(low.buffer);
+  let lowPeak = 0;
+  for (let i = 1000; i < 2000; i++) lowPeak = Math.max(lowPeak, Math.abs(lowView.getInt16(i * 2, true)));
+  expect(lowPeak).toBeGreaterThan(peak(1000, 2000));
+});
+
+test("piano mixer keeps notes continuous across requests and limits chords", () => {
+  const one = new PianoMixer();
+  one.trigger(69);
+  const first = one.render(4096);
+  const second = one.render(4096);
+  const reference = pianoTone(69);
+  expect(first.byteLength).toBe(4096);
+  expect(second.byteLength).toBe(4096);
+  const combined = new Uint8Array(8192);
+  combined.set(first);
+  combined.set(second, 4096);
+  expect(combined.some((value) => value !== 0)).toBe(true);
+  const uninterrupted = new PianoMixer();
+  uninterrupted.trigger(69);
+  expect(combined).toEqual(uninterrupted.render(8192));
+  expect(reference.byteLength).toBeGreaterThan(combined.byteLength);
+  const chord = new PianoMixer();
+  for (const note of [69, 73, 76, 81]) chord.trigger(note);
+  const pcm = chord.render(8192);
+  const view = new DataView(pcm.buffer);
+  let peak = 0;
+  for (let i = 0; i < pcm.byteLength; i += 2) peak = Math.max(peak, Math.abs(view.getInt16(i, true)));
+  expect(peak).toBeGreaterThan(1000);
+  expect(peak).toBeLessThan(32767);
+});