buninu-browser 0.2.0 → 0.2.2

package/test/position-audio.test.js

@@ -0,0 +1,67 @@
+import { expect, test } from "bun:test";
+import { advanceAudio } from "../lib/media/position-audio.js";
+import { createBytePipe } from "../lib/media/byte-pipe.js";
+
+function track(pipe, length) {
+  let next = 2;
+  return { position: 0, pending: new Float32Array([0, 1]), pipe, openedGeneration: pipe.generation,
+    decoder: { sampleRate: 1, channels: 1, nextSamples() {
+      if (next >= length) return null;
+      const samples = new Float32Array([next, next + 1]);
+      next += 2;
+      return samples;
+    } } };
+}
+
+test.each([4, 5, 6])("snapshot reopen consumes the pending first chunk before reaching sample %i", async (target) => {
+  const pipe = createBytePipe();
+  pipe.append(new Uint8Array(1));
+  let sound = track(pipe, 2);
+  pipe.append(new Uint8Array(1)); // newer data already present: don't wait for another append
+  let reopened = 0;
+  expect(await advanceAudio(() => sound, target, {
+    needsMore: () => true,
+    reopen: async () => { reopened++; sound = track(pipe, 10); return true; },
+  })).toBe(true);
+  expect(reopened).toBe(1);
+  expect(sound.position).toBe(target);
+  expect([...(sound.pending ?? sound.decoder.nextSamples())][0]).toBe(target);
+});
+
+test("network starvation waits for data without replaying an earlier prefix", async () => {
+  const pipe = createBytePipe();
+  pipe.append(new Uint8Array(1));
+  let sound = track(pipe, 2), completed = false;
+  const job = advanceAudio(() => sound, 4, {
+    needsMore: () => true,
+    reopen: async () => { sound = track(pipe, 8); return true; },
+  }).then(value => { completed = true; return value; });
+  await Bun.sleep(30);
+  expect(completed).toBe(false);
+  expect(sound.pending).toBeNull();
+  pipe.append(new Uint8Array(1));
+  expect(await job).toBe(true);
+  expect(sound.decoder.nextSamples()[0]).toBe(4);
+});
+
+test("a cancelled seek cannot reopen a stale decoder after data arrives", async () => {
+  const pipe = createBytePipe();
+  pipe.append(new Uint8Array(1));
+  const sound = track(pipe, 2);
+  let active = true, reopened = false;
+  const job = advanceAudio(() => sound, 8, {
+    needsMore: () => true, active: () => active,
+    reopen: async () => { reopened = true; return true; },
+  });
+  active = false;
+  pipe.append(new Uint8Array(1));
+  expect(await job).toBe(false);
+  expect(reopened).toBe(false);
+});
+
+test("an ended prefix or failed reopen never claims to have reached the target", async () => {
+  const pipe = createBytePipe();
+  pipe.append(new Uint8Array(1));
+  const sound = track(pipe, 2);
+  expect(await advanceAudio(() => sound, 8, { needsMore: () => false, reopen: async () => false })).toBe(false);
+});

package/test/positioning.test.js

@@ -26,8 +26,21 @@ function render(html, css) {
     });
     return found && { x: found.x, y: found.y, width: found.width, height: found.height };
   };
+  // The first line run of an element (an image) or of its text.
+  const run = (selector) => {
+    const element = document.querySelector(selector);
+    for (const fragment of layout.fragments) {
+      for (const candidate of fragment.runs) {
+        const node = tree.nodesById.get(candidate.nodeId)?.domNode;
+        if (node === element || node?.parentElement === element) {
+          return { x: candidate.x, y: candidate.y, width: candidate.width, height: candidate.height };
+        }
+      }
+    }
+    return null;
+  };
   window.happyDOM.abort();
-  return { layout, tree, box };
+  return { layout, tree, box, run };
 }
 
 test("absolute boxes leave the flow and resolve insets against the positioned ancestor's padding box", () => {
@@ -54,6 +67,23 @@ test("left+right and top+bottom stretch an absolute box, percentages use the con
   expect(box(".half")).toMatchObject({ x: 50, y: 50 });
 });
 
+test("a percentage height fills a containing block whose height is definite", () => {
+  const { box } = render(
+    `<div class="frame"><div class="mid"><div class="fill"></div></div></div>`,
+    `.frame { height:200px } .mid { height:50% } .fill { height:100%; background:black }`,
+  );
+  expect(box(".mid").height).toBe(100);
+  expect(box(".fill").height).toBe(100);
+});
+
+test("a percentage height of an auto-sized parent stays the content height", () => {
+  const { box } = render(
+    `<div class="frame"><div class="fill">x</div></div>`,
+    `.fill { height:100% }`,
+  );
+  expect(box(".fill").height).toBe(20);
+});
+
 test("absolute percentage width uses the full containing block after a left inset", () => {
   const { box } = render(
     `<div class="frame"><div class="first"></div><div class="second"></div></div>`,
@@ -121,3 +151,67 @@ test("a z-index stacking context paints its auto-positioned descendants after it
   // The z-index auto sibling (z 0) paints before the z 32 context.
   expect(later).toBeLessThan(header);
 });
+
+test("relative offsets resolve percentages against the containing block, for blocks and inline boxes", () => {
+  const { box, run } = render(
+    `<div class="frame"><div class="moved"></div><p><span class="up">text</span> <img class="tile" width="20" height="20"></p></div>`,
+    `.frame { width:200px; height:100px }
+     .moved { position:relative; left:-25%; top:10%; height:10px }
+     p { margin:0 }
+     .up { position:relative; left:-10px; top:-5px }
+     .tile { position:relative; left:-100%; top:0% }`,
+  );
+  // Percentages of the 200x100 containing block.
+  expect(box(".moved")).toMatchObject({ x: -50, y: 10 });
+  // The span's text moves with it; the image by a whole containing-block width.
+  expect(run(".up")).toMatchObject({ x: -10 });
+  expect(run(".tile").x).toBe(50 - 200);
+});
+
+test("an inline image sized in percentages takes its line space from the containing block", () => {
+  const { run } = render(
+    `<div class="wrapper"><img class="big"></div>`,
+    `.wrapper { width:100px; height:100px; text-align:center; overflow:hidden }
+     .big { width:300%; height:300% }`,
+  );
+  // 300px wide: the line overflows, so it starts at the left instead of being centered.
+  expect(run(".big")).toMatchObject({ x: 0, width: 300, height: 300 });
+});
+
+test("a float shrinks to fit its contents' min-width and sits at the top of its line", () => {
+  const { box } = render(
+    `<div class="footer"><div class="left"></div><div class="right"><span class="button">Go</span></div></div>`,
+    `.footer { width:300px; height:60px }
+     .left { float:left; width:50px; height:48px; margin:6px }
+     .right { float:right; margin:8px }
+     .button { display:inline-block; min-width:100px; padding:0 10px; height:40px }`,
+  );
+  // min-width 100 plus padding: 120 wide, against the right edge less its margin.
+  expect(box(".right")).toMatchObject({ x: 300 - 8 - 120, y: 8, width: 120 });
+  expect(box(".left")).toMatchObject({ x: 6, y: 6 });
+});
+
+test("a column flex item with a main-axis auto margin is still centered across", () => {
+  const { box } = render(
+    `<div class="column"><div class="item"></div></div>`,
+    `.column { display:flex; flex-direction:column; align-items:center; width:400px }
+     .item { margin-top:auto; width:100px; height:20px }`,
+  );
+  expect(box(".item")).toMatchObject({ x: 150, width: 100 });
+});
+
+test("an svg without width and height fills its container and keeps its viewBox's ratio", () => {
+  const { run } = render(
+    `<div class="icon"><svg id="plain" viewBox="0 -960 960 960"><path d="M0 0h10v10z"/></svg></div>
+     <div class="icon"><svg id="lower" viewbox="0 0 24 12"></svg></div>
+     <div class="icon"><svg id="sized" width="10" height="5" viewBox="0 0 24 24"></svg></div>
+     <div class="icon"><svg id="bare"></svg></div>`,
+    `.icon { width:24px }`,
+  );
+  // 100% of the 24px container; height by the viewBox (a lowercase viewbox too).
+  expect(run("#plain")).toMatchObject({ width: 24, height: 24 });
+  expect(run("#lower")).toMatchObject({ width: 24, height: 12 });
+  // Its own attributes win; with nothing at all it is 150px high.
+  expect(run("#sized")).toMatchObject({ width: 10, height: 5 });
+  expect(run("#bare")).toMatchObject({ width: 24, height: 150 });
+});

package/test/pulse-client.test.js

@@ -111,6 +111,8 @@ test("audio is sent in whole frames, so stereo channels never swap", async () =>
   expect(sizes.every((size) => size % 4 === 0)).toBeTrue();
   expect(offsets.every((offset) => offset === 0n)).toBeTrue();
   expect(flags.every((flag) => flag === 0)).toBeTrue();
+  // What the server holds, which it may still play after the stream closes.
+  expect(stream.sentBytes).toBe(sizes.reduce((sum, size) => sum + size, 0));
   expect(bufferAttributes[0]).toEqual([76800, 15360, 7680]); // 400/80/40 ms at 48 kHz stereo
   await client.openPlayback({ rate: 48000, channels: 1, leadSeconds: 0.12 });
   expect(bufferAttributes[1]).toEqual([15360, 3840, 3840]); // 160/40/40 ms at 48 kHz mono
@@ -128,3 +130,70 @@ function header(length, channel) {
   out.writeUInt32BE(channel, 4);
   return out;
 }
+
+test("measured device progress governs the media clock and bounded audio queue through starvation", async () => {
+  const { createServer } = await import("node:net");
+  let received = 0, played = 0, reports = 0;
+  const times = [], errors = [];
+  const scalar64 = (tag, value) => {
+    const bytes = Buffer.alloc(9);
+    bytes[0] = tag;
+    bytes.writeBigInt64BE(BigInt(value), 1);
+    return bytes;
+  };
+  const server = createServer(socket => {
+    let input = Buffer.alloc(0);
+    socket.on("data", chunk => {
+      input = Buffer.concat([input, chunk]);
+      while (input.length >= 20 && input.length >= 20 + input.readUInt32BE(0)) {
+        const length = input.readUInt32BE(0), channel = input.readUInt32BE(4);
+        const body = input.subarray(20, 20 + length);
+        input = input.subarray(20 + length);
+        if (channel !== 0xffffffff) { received += length; continue; }
+        const command = body.readUInt32BE(1), tag = body.readUInt32BE(6);
+        let extra = Buffer.alloc(0);
+        if (command === 3) extra = Buffer.from([0x4c, ...u32(1), 0x4c, ...u32(1), 0x4c, ...u32(1e7)]);
+        if (command === 14) {
+          reports++;
+          expect(body[15]).toBe(0x54); // timestamp request, protocol v8
+          const timeval = Buffer.from([0x54, ...u32(1), ...u32(0)]);
+          // Everything has reached the backend, but the device still holds
+          // received-played bytes. REQUEST credits are deliberately unrelated.
+          extra = Buffer.concat([scalar64(0x55, (received - played) * 1000), scalar64(0x55, 0),
+            Buffer.from([0x31]), timeval, timeval, scalar64(0x72, received), scalar64(0x72, received)]);
+        }
+        const reply = Buffer.concat([Buffer.from([0x4c, ...u32(2), 0x4c, ...u32(tag)]), extra]);
+        socket.write(Buffer.concat([header(reply.length, 0xffffffff), reply]));
+      }
+    });
+  });
+  await new Promise(resolve => server.listen(0, "127.0.0.1", resolve));
+  const client = await PulseClient.connect({ port: server.address().port });
+  try {
+    const stream = await client.openPlayback({ rate: 500, channels: 1,
+      onTiming: timing => times.push(timing.seconds), onTimingError: error => errors.push(error) });
+    stream.write(new Uint8Array(2000));
+    await Bun.sleep(180);
+    expect(reports).toBeGreaterThan(0);
+    expect(received).toBe(500); // at most the 0.5 s queue budget, not 2 s
+    expect(times.at(-1)).toBe(0); // server/device hasn't played anything
+    played = 100;
+    await Bun.sleep(120);
+    expect(times.at(-1)).toBeCloseTo(0.1, 5);
+    expect(received).toBe(600);
+    // A long network/producer pause is NOT permission to catch up by queuing seconds.
+    await Bun.sleep(180);
+    expect(times.at(-1)).toBeCloseTo(0.1, 5);
+    expect(received).toBe(600);
+    played = 600;
+    await Bun.sleep(120);
+    expect(times.at(-1)).toBeCloseTo(0.6, 5);
+    expect(received).toBeGreaterThan(1000);
+    expect(received).toBeLessThanOrEqual(1100);
+    expect(errors).toEqual([]);
+    await stream.close();
+  } finally {
+    client.close();
+    await new Promise(resolve => server.close(resolve));
+  }
+});

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/renderer-host.test.js

@@ -6,8 +6,11 @@ const hosts = [];
 afterEach(() => {
   for (const host of hosts.splice(0)) host.close();
 });
+// The watchdog deadline: long enough for a fresh renderer to answer while
+// test files run in parallel, short enough to see a hang killed.
+const TIMEOUT = 4000;
 function host(options = {}) {
-  const created = new RendererHost({ entry, timeout: 1500, ...options });
+  const created = new RendererHost({ entry, timeout: TIMEOUT, ...options });
   hosts.push(created);
   return created;
 }
@@ -32,7 +35,7 @@ test("kills a renderer that misses its deadline and restarts it on the next call
   const firstPid = renderer.pid;
   const started = performance.now();
   await expect(renderer.call("hang")).rejects.toThrow("timed out");
-  expect(performance.now() - started).toBeLessThan(5000);
+  expect(performance.now() - started).toBeLessThan(TIMEOUT + 3000);
   const after = await renderer.call("echo", "next");
   expect(after.pid).not.toBe(firstPid);
   expect(after.argument).toBe("next");

package/test/screenshot-cli.test.js

@@ -1,5 +1,9 @@
 import { expect, test } from "bun:test";
-import { screenshotTargetUrl } from "../lib/screenshot-cli.js";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { runScreenshot, screenshotTargetUrl } from "../lib/screenshot-cli.js";
+import { DESKTOP_USER_AGENT, WEBKIT_USER_AGENT } from "../lib/user-agent.js";
 
 test("screenshot target treats Windows drive and UNC paths as files", () => {
   const options = {
@@ -17,3 +21,23 @@ test("screenshot target preserves URLs and bare hostnames", () => {
   expect(screenshotTargetUrl("https://example.com", { platform: "win32" })).toBe("https://example.com");
   expect(screenshotTargetUrl("example.com", { platform: "win32" })).toBe("https://example.com");
 });
+
+test("screenshot mode defaults to WebKit and accepts both explicit desktop profiles", async () => {
+  const directory = await mkdtemp(join(tmpdir(), "buninu-profile-test-"));
+  let userAgent;
+  const server = Bun.serve({ port: 0, fetch(request) {
+    userAgent = request.headers.get("user-agent");
+    return new Response("<!doctype html><p>identity</p>", { headers: { "content-type": "text/html" } });
+  } });
+  try {
+    for (const [flags, expected] of [[[], WEBKIT_USER_AGENT], [["--webkit"], WEBKIT_USER_AGENT], [["--chromium"], DESKTOP_USER_AGENT]]) {
+      const filename = join(directory, "page.png");
+      await runScreenshot([`--screenshot=${filename}`, "--window-size=64,64", ...flags, `http://127.0.0.1:${server.port}/`]);
+      expect(userAgent).toBe(expected);
+      expect((await Bun.file(filename).bytes()).slice(0, 8)).toEqual(new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]));
+    }
+  } finally {
+    server.stop(true);
+    await rm(directory, { recursive: true, force: true });
+  }
+}, 60_000);

package/test/script-rewrite.test.js

@@ -1,7 +1,19 @@
 import { expect, test } from "bun:test";
-import { rewriteConstructorReads } from "../lib/renderer/script-rewrite.js";
+import {
+  escapeSesHtmlComments, prepareDirectEvalSource, restoreSourceText, rewriteClassicScript, rewriteConstructorReads,
+  referenceHelper, rewriteClassicScriptSource, rewriteDirectEval,
+} from "../lib/renderer/script-rewrite.js";
 
-const rewrite = (source, type) => rewriteConstructorReads(source, type).code;
+// The comment each constructor rewrite leaves for restoreSourceText.
+const rewrite = (source, type) => rewriteConstructorReads(source, type).code.replace(/\/\*\$buninu\$ctor:[^*]*\*\//g, "");
+
+test("HTML comment markers in JavaScript values are escaped without changing them", () => {
+  const source = 'const a = "<!-- start -->"; const b = /-->/g; const c = `<!-- ${1} -->`;';
+  const escaped = escapeSesHtmlComments(source);
+  expect(escaped).not.toContain("<!--");
+  expect(escaped).not.toContain("-->");
+  expect(Function(`${escaped}; return [a, b.test('-->'), c]`)()).toEqual(["<!-- start -->", true, "<!-- 1 -->"]);
+});
 
 test("constructor reads go through the helper; writes, delete and optional chains do not", () => {
   expect(rewrite("var A = Object.getPrototypeOf(async function () {}).constructor;"))
@@ -14,18 +26,111 @@ test("constructor reads go through the helper; writes, delete and optional chain
   expect(rewrite(`y = a . constructor ['constructor'];${trigger}`))
     .toBe("y = $buninu$constructor($buninu$constructor(a) ) ; ($buninu$constructor(async () => {}));");
   // Calls keep the receiver (the helper's second argument).
-  expect(rewrite(`b.constructor(1); new c.constructor();${trigger}`))
-    .toBe("$buninu$constructor(b, true)(1); new $buninu$constructor(c)(); ($buninu$constructor(async () => {}));");
+  // A constructed one is parenthesized so `new` applies to the result.
+  expect(rewrite(`b.constructor(1); new c.constructor(); new d.constructor;${trigger}`))
+    .toBe("$buninu$constructor(b, true)(1); new ($buninu$constructor(c))(); new ($buninu$constructor(d)); ($buninu$constructor(async () => {}));");
   const untouched = "a.constructor = 1; a.constructor++; delete a.constructor; for (a.constructor of []); c?.constructor; "
     + "class K extends B { constructor() { super(); super.constructor } } ({ constructor: 1 });";
   expect(rewrite(untouched + trigger)).toBe(`${untouched} ($buninu$constructor(async () => {}));`);
 });
 
+test("new on a rewritten constructor read constructs the object's constructor", () => {
+  const code = rewrite("class Point { constructor(x) { this.x = x; } } const p = new Point(1);"
+    + " result = new p.constructor(2); (async () => {}).constructor;");
+  const run = new Function("$buninu$constructor", `let result; ${code} return result;`);
+  const result = run((object) => object.constructor);
+  expect(result).toBeObject();
+  expect(result.constructor.name).toBe("Point");
+  expect(result.x).toBe(2);
+});
+
+test("constructor reads preserve comma expressions as a single receiver", () => {
+  const source = 'var a = {}, b = {}; var result = (a.x = 1, b).constructor; (async () => {}).constructor;';
+  const rewritten = rewriteConstructorReads(source).code;
+  const run = new Function("$buninu$constructor", `${rewritten}; return [result, a.x];`);
+  expect(run((value, call = false) => {
+    expect(call).toBe(false);
+    return value.constructor;
+  })).toEqual([Object, 1]);
+  expect(restoreSourceText(rewritten)).toBe(source);
+});
+
 test("sources that cannot reach Function constructors are not parsed; bad syntax is left to the engine", () => {
-  expect(rewriteConstructorReads("x.constructor.name")).toEqual({ code: "x.constructor.name", rewritten: false });
+  expect(rewriteConstructorReads("x.constructor.name")).toEqual({ code: "x.constructor.name", rewritten: false, program: null });
   // this.constructor is common and harmless; alone it does not trigger a parse.
   expect(rewriteConstructorReads("async function f() { return this.constructor }").rewritten).toBe(false);
-  expect(rewriteConstructorReads("(async () => {}).constructor(")).toEqual({ code: "(async () => {}).constructor(", rewritten: false });
+  expect(rewriteConstructorReads("(async () => {}).constructor(")).toEqual({ code: "(async () => {}).constructor(", rewritten: false, program: null });
   expect(rewrite("export const A = (async () => {}).constructor;", "module"))
     .toBe("export const A = ($buninu$constructor(async () => {}));");
 });
+
+test("every rewrite of a function's text is undone for Function.prototype.toString", () => {
+  const functions = [
+    "function f(n) { var t = this; for (; n-->0;) eval(\"n\" + t); return (async () => {}).constructor; }",
+    "function g() { return [eval(eval(\"x\")), new (Object.getPrototypeOf(function* () {})).constructor(\"yield 1\"), \"<!-- -->\"]; }",
+    "function h() { \"use strict\"; return [this, eval(\"1\"), a.b().constructor(2)]; }",
+  ];
+  for (const text of functions) {
+    const classic = rewriteClassicScript(rewriteConstructorReads(rewriteDirectEval(text).code).code);
+    const code = escapeSesHtmlComments(classic.code);
+    // The function's own text in the rewritten program (after the prologue).
+    const own = code.slice(code.indexOf("function ", code.indexOf("=")));
+    expect(restoreSourceText(own.slice(0, own.lastIndexOf("}") + 1))).toBe(text);
+  }
+  // The prepared program starts with its constants; the function's own text follows.
+  const prepared = prepareDirectEvalSource("(function () { return this; })", [], false).code;
+  expect(restoreSourceText(prepared.slice(prepared.indexOf("(function")))).toBe("(function () { return this; })");
+});
+
+test("only parsed, non-strict programs are reported as sloppy-mode code", () => {
+  expect(rewriteClassicScript("var a = this;")).toMatchObject({ parsed: true, strict: false });
+  expect(rewriteClassicScript("'use strict'; var a = 1;")).toMatchObject({ parsed: true, strict: true });
+  expect(rewriteClassicScript("var = ;")).toMatchObject({ parsed: false });
+  // A sloppy program's own `this` and its functions' go through the helper.
+  expect(rewriteClassicScript("x = this; function f() { return this; }").code).not.toMatch(/[^(]this[^)]/);
+});
+
+test("the classic-script pipeline parses once when earlier rewrites change nothing, with the same result", () => {
+  const sources = [
+    "var a = 1; function f() { return this; }",
+    "var s = 'eval(1)'; for (var i = 0; i < 2; i++) {}",
+    "var g = (async () => {}).constructor; var t = this;",
+    "function h(x) { return eval(x); } var y = eval('2');",
+    "return 1;",
+  ];
+  for (const source of sources) {
+    const stepwise = rewriteClassicScript(rewriteConstructorReads(rewriteDirectEval(source).code).code);
+    expect(rewriteClassicScriptSource(source)).toEqual(stepwise);
+  }
+  const direct = rewriteDirectEval("var s = 'eval(1)';");
+  expect([direct.rewritten, direct.program?.type]).toEqual([false, "Program"]);
+  expect(rewriteDirectEval("eval(x); return 1;").program).toBe(null);
+});
+
+test("global variable reads go through the script's global binding, keeping their semantics and text", () => {
+  const global = { Q: (x) => x + 1, n: 2, nothing: null };
+  global.$buninu$ref = referenceHelper(global);
+  const run = (source) => {
+    const { code } = rewriteClassicScript(source);
+    // Evaluated the way the page realm does: inside `with` scopes over the global.
+    return Function("g", `with (g) { return eval(arguments[1]); }`)(global, code.replace("globalThis", "g"));
+  };
+  expect(rewriteClassicScript("function f(x) { return Q(x) + n; }").code).toContain("($buninu$g.Q ?? $buninu$g.$buninu$ref(\"Q\"))");
+  expect(run("(function () { return nothing; })")()).toBe(null);
+  expect(run("(function (x) { return Q(x) + n; })")(1)).toBe(4);
+  expect(run("(function () { return [typeof missing, typeof Q]; })")()).toEqual(["undefined", "function"]);
+  expect(() => run("(function () { return missing; })")()).toThrow("missing is not defined");
+  // Locals, parameters and names inside the page's own `with` stay variables; writes stay identifiers.
+  const source = "function f(Q, o) { var n = 1; with (o) { k; } k = Q; k += n; return {n, Q, z: x => x + n}; }";
+  expect(rewriteClassicScript(source).code).not.toContain("$buninu$g.Q");
+  expect(rewriteClassicScript(source).code).not.toContain("$buninu$g.k");
+  // Shorthand properties keep their key; the page's text is restored exactly.
+  const shorthand = "function s() { return { Q, n, m: Q }; }";
+  expect(run(`(${shorthand})`)()).toEqual({ Q: global.Q, n: 2, m: global.Q });
+  const code = rewriteClassicScript(shorthand).code;
+  const own = code.slice(code.indexOf("function s"));
+  expect(restoreSourceText(own.slice(0, own.lastIndexOf("}") + 1))).toBe(shorthand);
+  expect(restoreSourceText("(function () { return typeof $buninu$g.Q; })")).toBe("(function () { return typeof Q; })");
+  // A block-level function outside functions (Annex B) leaves the script's identifiers as written.
+  expect(rewriteClassicScript("{ function b() {} } b(Q);").code).not.toContain("$buninu$g");
+});

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/setup.js

@@ -0,0 +1,5 @@
+import { setDefaultTimeout } from "bun:test";
+
+// Many tests start sandboxed renderer processes, which takes much longer while
+// test files run in parallel (bun test --parallel): 5s is too tight then.
+setDefaultTimeout(30_000);

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