buninu-browser 0.2.0 → 0.2.1

package/test/log.test.js

@@ -22,13 +22,16 @@ test("the CLI writes controller and renderer output to the log file", async () =
     });
     const reader = child.stderr.getReader();
     let seen = "";
-    while (!seen.includes("DevTools listening")) {
+    // The endpoint opens first; the sandbox line follows once the first renderer is up.
+    while (!seen.includes("renderer sandbox:")) {
       const { value, done } = await reader.read();
       if (done) break;
       seen += new TextDecoder().decode(value);
     }
     child.kill();
     await child.exited;
+    expect(seen.indexOf("DevTools listening")).toBeGreaterThan(-1);
+    expect(seen.indexOf("DevTools listening")).toBeLessThan(seen.indexOf("renderer sandbox:"));
     const log = await Bun.file(`${dir}/${DEFAULT_LOG_FILE}`).text();
     expect(log).toContain("[log] started pid");
     expect(log).toContain("renderer sandbox: seccomp");

package/test/network-service.test.js

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

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({
@@ -392,6 +399,26 @@ test("style sheets that scripts add, change or remove apply to the page", async
   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(`(() => {
@@ -909,3 +936,25 @@ function pulseServerRunning() {
     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/render-tree.test.js

@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
-import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
+import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../lib/render-tree/index.js";
 
 test("builds an engine-owned tree and excludes non-rendered DOM nodes", () => {
   const { document, window } = parseHTMLDocument(`<body>
@@ -115,3 +115,24 @@ test("audio with controls is a 300x32 player painted from its state; without con
   expect(renderTreeText(tree)).not.toContain("fallback");
   window.happyDOM.abort();
 });
+
+test("detects whether a rebuilt tree changes layout input", async () => {
+  const { StyleEngine } = await import("../lib/style/computed-style.js");
+  const { document, window } = parseHTMLDocument(`<body><p>visible</p><script>old</script></body>`);
+  const builder = new RenderTreeBuilder();
+  const styles = new StyleEngine().compute(document);
+  const first = builder.build(document, styles);
+  const firstParagraph = first.root.children[0];
+
+  document.querySelector("script").textContent = "new metadata";
+  const metadataOnly = builder.build(document, styles);
+  expect(sameLayoutInput(first.root, metadataOnly.root)).toBe(true);
+  expect(metadataOnly.root).toBe(first.root);
+  expect(metadataOnly.root.children[0]).toBe(firstParagraph);
+
+  document.querySelector("p").textContent = "different visible text";
+  const visibleChange = builder.build(document, styles);
+  expect(sameLayoutInput(metadataOnly.root, visibleChange.root)).toBe(false);
+  expect(visibleChange.root.children[0]).not.toBe(firstParagraph);
+  window.happyDOM.abort();
+});

package/test/selector-keys.test.js

@@ -0,0 +1,39 @@
+import { expect, test } from "bun:test";
+import { selectorKeys } from "../lib/style/selector-keys.js";
+
+test("indexes a selector by its subject's first key and its ancestors' keys", () => {
+  expect(selectorKeys("DIV.Foo > SPAN#Bar.baz[Data-X]")).toEqual({
+    subject: [{ kind: "id", name: "Bar" }],
+    ancestors: ["div", ".Foo"],
+  });
+  // Sibling compounds are not ancestors; attribute and type names are lowercased.
+  expect(selectorKeys("ul [Role] + LI:hover")).toEqual({ subject: [{ kind: "tag", name: "li" }], ancestors: ["ul"] });
+  // :root is the "html" bucket as a subject, but not an ancestor filter key.
+  expect(selectorKeys(":root").subject).toEqual([{ kind: "tag", name: "html" }]);
+  expect(selectorKeys(":ROOT .x")).toEqual({ subject: [{ kind: "class", name: "x" }], ancestors: [] });
+});
+
+test("escapes, quotes and digits in names", () => {
+  expect(selectorKeys(".a\\:hover .b\\.c").ancestors).toEqual([".a:hover"]);
+  expect(selectorKeys(".a\\:hover .b\\.c").subject).toEqual([{ kind: "class", name: "b.c" }]);
+  // A hex escape cannot be resolved here: the name is left out.
+  expect(selectorKeys(".\\31 0").subject).toBeNull();
+  // Class names cannot start with a digit; ids can.
+  expect(selectorKeys(".1a").subject).toBeNull();
+  expect(selectorKeys("#1a").subject).toEqual([{ kind: "id", name: "1a" }]);
+  // Brackets and "." inside a quoted attribute value are not structure.
+  expect(selectorKeys('[data-x="a] .b"] .c')).toEqual({ subject: [{ kind: "class", name: "c" }], ancestors: ["[data-x"] });
+  expect(selectorKeys(".日本 .語")).toEqual({ subject: [{ kind: "class", name: "語" }], ancestors: [".日本"] });
+});
+
+test(":is() and :where() alternatives each need a key; anything not understood is unindexed", () => {
+  expect(selectorKeys(":is(.a, #b, p)").subject).toEqual([
+    { kind: "class", name: "a" }, { kind: "id", name: "b" }, { kind: "tag", name: "p" },
+  ]);
+  expect(selectorKeys(":where(.a .b, .c)").subject).toBeNull();
+  expect(selectorKeys(":is(.a, :not(.b))").subject).toBeNull();
+  expect(selectorKeys("ns|a b").ancestors).toEqual([]);
+  for (const selector of ["", "> a", "a >", "a 'unterminated", ":is(.a"]) {
+    expect(selectorKeys(selector)).toEqual({ subject: null, ancestors: [] });
+  }
+});

package/test/selector-traits.test.js

@@ -0,0 +1,19 @@
+import { expect, test } from "bun:test";
+import { sheetTraits } from "../lib/style/selector-traits.js";
+
+test("finds :has() compounds and sibling-target compounds in a sheet", () => {
+  const traits = sheetTraits(`
+    /* .ignored:has(a) {} */
+    .a:has(> img), .b .c:has(+ .d)::before { color: red }
+    @media (min-width: 1px) { .e { color: blue } }
+    .f:has(.g) .h, .i { color: green }
+    li:first-child + li .x, ul > li:last-child ~ li { color: black }
+    .esc\\:a .y:not([data-z="a b"]) { color: white }
+  `);
+  expect([...traits.hasCompounds]).toEqual([".a:has(> img)", ".c:has(+ .d)", ".f:has(.g)"]);
+  expect(traits.hasSiblings).toBe(true);
+  expect([...traits.siblingTargetCompounds]).toEqual(["li:first-child + li"]);
+  expect([...traits.structuralCompounds]).toEqual(["li:first-child", "li:last-child"]);
+  expect(traits.descendantFeatures.has(".esc:a")).toBe(true);
+  expect(traits.sibling && traits.firstChild && traits.lastChild).toBe(true);
+});

package/test/text-layout.test.js

@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
-import { layoutText } from "../lib/layout/text-layout.js";
+import { LayoutEngine, layoutText } from "../lib/layout/text-layout.js";
 import { RenderTreeBuilder } from "../lib/render-tree/index.js";
 import { StyleEngine } from "../lib/style/computed-style.js";
 
@@ -439,3 +439,71 @@ test("a grid body stacks items sharing an area and aligns its content with place
   expect([icon.x, a.x, b.x]).toEqual([180, 185, 165]);
   window.happyDOM.abort();
 });
+
+test("retained block results match a clean layout after a sibling changes", () => {
+  const { document, window } = parseHTMLDocument(`<body><section><p>unchanged subtree</p></section><section id="edit">short</section></body>`);
+  const styles = new StyleEngine().compute(document);
+  const builder = new RenderTreeBuilder();
+  const engine = new LayoutEngine({
+    measureText: (text) => text.length * 10,
+    fontMetrics: () => ({ ascent: 16, height: 20 }),
+  });
+  const options = { x: 0, y: 0, width: 240, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }) };
+  engine.layout(builder.build(document, styles), options);
+
+  document.getElementById("edit").textContent = "a changed sibling which wraps onto another line";
+  const tree = builder.build(document, styles);
+  const retained = engine.layout(tree, options);
+  const clean = layoutText(tree, options);
+  expect(retained).toEqual(clean);
+  window.happyDOM.abort();
+});
+
+/** A layout with paint layers as ranks: replays renumber layers, keeping their order. */
+function rankedLayout(layout) {
+  const orders = new Set([0]);
+  for (const entry of [...layout.boxes, ...layout.fragments]) {
+    for (let layer = entry.layer; layer; layer = layer.parent) orders.add(layer.order);
+  }
+  const rank = new Map([...orders].sort((a, b) => a - b).map((order, index) => [order, index]));
+  const layer = (value) => value && { rank: rank.get(value.order), z: value.z, context: value.context, parent: value.parent ? rank.get(value.parent.order) : null };
+  return {
+    height: layout.height,
+    boxes: layout.boxes.map((box) => ({ ...box, layer: layer(box.layer) })),
+    fragments: layout.fragments.map(({ id, ...fragment }) => ({ ...fragment, layer: layer(fragment.layer) })),
+  };
+}
+
+function retainedAndClean(html, change) {
+  const { document, window } = parseHTMLDocument(html);
+  const styles = new StyleEngine().compute(document);
+  const builder = new RenderTreeBuilder();
+  const measure = { measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }) };
+  const engine = new LayoutEngine(measure);
+  const options = { x: 0, y: 0, width: 240, viewportHeight: 300, ...measure };
+  engine.layout(builder.build(document, styles), options);
+  change(document);
+  const tree = builder.build(document, styles);
+  const result = { retained: engine.layout(tree, options), clean: layoutText(tree, options), document };
+  window.happyDOM.abort();
+  return result;
+}
+
+test("positioned boxes inside a retained block are replayed in their paint layers", () => {
+  const { retained, clean } = retainedAndClean(`<body><p id="edit">short</p>
+    <section><div style="position:relative;z-index:2">raised <span style="position:relative">inner</span></div>
+    <div style="position:relative">auto</div><p style="position:absolute;top:5px;z-index:-1">behind</p></section></body>`,
+  (document) => { document.getElementById("edit").textContent = "a longer paragraph that wraps onto two lines"; });
+  expect(rankedLayout(retained)).toEqual(rankedLayout(clean));
+  // The section moved down with the wrapped paragraph, and its layers came along.
+  expect(new Set(retained.boxes.map((box) => box.layer.order)).size).toBe(new Set(clean.boxes.map((box) => box.layer.order)).size);
+});
+
+test("an out-of-flow box keeps its static position when the block around its placeholder is replayed", () => {
+  // The absolute box's containing block is the positioned div; its placeholder is in the section,
+  // which is replayed (moved down) after the paragraph above it grows.
+  const { retained, clean } = retainedAndClean(`<body><div style="position:relative"><p id="edit">short</p>
+    <section><p>above</p><div style="position:absolute">static</div><p>below</p></section></div></body>`,
+  (document) => { document.getElementById("edit").textContent = "a longer paragraph that wraps onto two lines"; });
+  expect(rankedLayout(retained)).toEqual(rankedLayout(clean));
+});