buninu-browser 0.5.1 → 0.6.0

package/test/document-base-cache.test.js

@@ -0,0 +1,103 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+
+const URL = "https://base.test/page/index.html";
+
+/** Runs `body` while counting base[href] lookups per document. */
+function countBaseQueries(body) {
+  const { window, document } = parseHTMLDocument("", URL);
+  // Each window has its own Document subclass; spy where querySelector is defined.
+  let prototype = Object.getPrototypeOf(document);
+  while (!Object.hasOwn(prototype, "querySelector")) prototype = Object.getPrototypeOf(prototype);
+  const original = prototype.querySelector;
+  const counts = new Map();
+  prototype.querySelector = function(selector) {
+    if (selector === "base[href]") counts.set(this, (counts.get(this) ?? 0) + 1);
+    return original.call(this, selector);
+  };
+  try {
+    body(document => counts.get(document) ?? 0);
+  } finally {
+    prototype.querySelector = original;
+    window.happyDOM.abort();
+  }
+}
+
+test("parsing many URL attributes does not scan for <base> once per attribute", () => {
+  const html = `<!doctype html><body>${'<a href="x">x</a><img src="y">'.repeat(2000)}</body>`;
+  countBaseQueries(queries => {
+    const parsed = parseHTMLDocument(html, URL);
+    expect(parsed.document.querySelectorAll("a[href], img[src]").length).toBe(4000);
+    expect(parsed.document.querySelector("a").href).toBe("https://base.test/page/x");
+    expect(queries(parsed.document)).toBeLessThan(10);
+    parsed.window.happyDOM.abort();
+  });
+});
+
+test("the cached base follows insertion, attribute changes and removal", () => {
+  const { window, document } = parseHTMLDocument(`<!doctype html><head></head><body><a id="link" href="next">x</a></body>`, URL);
+  const link = document.getElementById("link");
+  expect([document.baseURI, link.href]).toEqual([URL, "https://base.test/page/next"]);
+
+  const base = document.createElement("base");
+  base.setAttribute("href", "/assets/");
+  document.head.appendChild(base);
+  expect([document.baseURI, link.href]).toEqual(["https://base.test/assets/", "https://base.test/assets/next"]);
+
+  base.setAttribute("href", "/changed/");
+  expect(link.href).toBe("https://base.test/changed/next");
+
+  // An earlier base[href] takes over; a later removal of it falls back to the first one.
+  const earlier = document.createElement("base");
+  earlier.setAttribute("href", "/earlier/");
+  document.head.insertBefore(earlier, base);
+  expect(document.baseURI).toBe("https://base.test/earlier/");
+  earlier.remove();
+  expect(document.baseURI).toBe("https://base.test/changed/");
+
+  base.removeAttribute("href");
+  expect(document.baseURI).toBe(URL);
+  base.setAttribute("href", "/again/");
+  expect(document.baseURI).toBe("https://base.test/again/");
+
+  // Removing an ancestor disconnects the base too.
+  document.documentElement.removeChild(document.head);
+  expect([document.baseURI, link.href]).toEqual([URL, "https://base.test/page/next"]);
+  window.happyDOM.abort();
+});
+
+test("each document keeps its own base", () => {
+  const first = parseHTMLDocument(`<!doctype html><base href="/one/"><a href="x">x</a>`, URL);
+  const second = parseHTMLDocument(`<!doctype html><a href="x">x</a>`, URL);
+  expect(first.document.baseURI).toBe("https://base.test/one/");
+  expect(second.document.baseURI).toBe(URL);
+  expect(first.document.querySelector("a").href).toBe("https://base.test/one/x");
+  expect(second.document.querySelector("a").href).toBe("https://base.test/page/x");
+  first.window.happyDOM.abort();
+  second.window.happyDOM.abort();
+});
+
+test("a <base> change invalidates only its own document", () => {
+  countBaseQueries(queries => {
+    const first = parseHTMLDocument(`<!doctype html><base href="/one/"><a href="x">x</a>`, URL);
+    const second = parseHTMLDocument(`<!doctype html><a href="x">x</a>`, URL);
+    expect([first.document.baseURI, second.document.baseURI]).toEqual(["https://base.test/one/", URL]);
+    const before = queries(second.document);
+    first.document.querySelector("base").setAttribute("href", "/two/");
+    expect(first.document.baseURI).toBe("https://base.test/two/");
+    expect(second.document.baseURI).toBe(URL);
+    expect(queries(second.document)).toBe(before);
+    first.window.happyDOM.abort();
+    second.window.happyDOM.abort();
+  });
+});
+
+test("an adopted <base> leaves its old document and joins the new one", () => {
+  const first = parseHTMLDocument(`<!doctype html><head><base href="/one/"></head>`, URL);
+  const second = parseHTMLDocument(`<!doctype html><head></head>`, URL);
+  expect([first.document.baseURI, second.document.baseURI]).toEqual(["https://base.test/one/", URL]);
+  second.document.head.appendChild(second.document.adoptNode(first.document.querySelector("base")));
+  expect([first.document.baseURI, second.document.baseURI]).toEqual([URL, "https://base.test/one/"]);
+  first.window.happyDOM.abort();
+  second.window.happyDOM.abort();
+});

package/test/document-cookies.test.js

@@ -0,0 +1,117 @@
+import { expect, test } from "bun:test";
+import { CookieJar } from "../lib/network/cookie-jar.js";
+import { DocumentCookies } from "../lib/renderer/document-cookies.js";
+
+const url = "https://page.test/app/index.html";
+const pairs = value => value.split("; ").filter(Boolean).sort();
+function fixture() {
+  let now = 100000, revision = 0;
+  const sent = [], jar = new CookieJar({ now: () => now });
+  const mirror = new DocumentCookies((value, url, sequence) => sent.push({ value, url, sequence }), () => now);
+  const snapshot = (acknowledged = 0) => ({ revision: ++revision, acknowledged, cookies: jar.scriptSnapshot(url) });
+  return { jar, mirror, sent, snapshot, advance: ms => { now += ms; } };
+}
+
+test("a delayed snapshot retains newer setters and unrelated server cookies, then acknowledges them", () => {
+  const { jar, mirror, sent, snapshot } = fixture();
+  jar.store(url, ["key=before; Path=/"]);
+  mirror.accept(snapshot());
+  mirror.set(url, "key=after; Path=/");
+  jar.store(url, ["server=2; Path=/", "secret=hidden; Path=/; HttpOnly"]);
+  const delayed = snapshot();
+  expect(mirror.accept(delayed)).toBe(true);
+  expect(pairs(mirror.get(url))).toEqual(["key=after", "server=2"]);
+  expect(JSON.stringify(delayed)).not.toContain("secret");
+  jar.store(sent[0].url, [sent[0].value], { fromScript: true });
+  const acknowledged = snapshot(sent[0].sequence);
+  mirror.accept(acknowledged);
+  expect(pairs(mirror.get(url))).toEqual(pairs(jar.documentCookie(url)));
+  expect(mirror.accept(delayed)).toBe(false);
+  expect(mirror.accept({ ...delayed, revision: acknowledged.revision + 1 })).toBe(false);
+  expect(pairs(mirror.get(url))).toEqual(["key=after", "server=2"]);
+  // Once acknowledged, a later server overwrite is authoritative.
+  jar.store(url, ["key=server; Path=/"]);
+  mirror.accept(snapshot(sent[0].sequence));
+  expect(pairs(mirror.get(url))).toEqual(["key=server", "server=2"]);
+});
+
+test("pending setters and deletions retain cookie Path, Domain, and Secure rules", () => {
+  const { jar, mirror, snapshot } = fixture();
+  jar.store(url, ["key=root; Path=/", "key=app; Path=/app", "parent=1; Domain=page.test; Path=/"]);
+  mirror.accept(snapshot());
+  mirror.set(url, "key=new; Path=/app");
+  mirror.set(url, "rejected=1; Domain=other.test");
+  mirror.accept(snapshot());
+  expect(pairs(mirror.get(url))).toEqual(["key=new", "key=root", "parent=1"]);
+  expect(pairs(mirror.get("https://page.test/other"))).toEqual(["key=root", "parent=1"]);
+  expect(mirror.get("https://sub.page.test/app/")).toBe("parent=1");
+  mirror.set(url, "key=; Path=/app; Max-Age=0");
+  jar.store(url, ["unrelated=3; Path=/"]);
+  mirror.accept(snapshot());
+  expect(pairs(mirror.get(url))).toEqual(["key=root", "parent=1", "unrelated=3"]);
+  mirror.set("http://page.test/app/", "secure=1; Secure; Path=/");
+  expect(mirror.get(url)).not.toContain("secure=");
+});
+
+test("replaying an unacknowledged Max-Age cookie does not restart its lifetime", () => {
+  const { mirror, snapshot, advance } = fixture();
+  mirror.accept(snapshot());
+  mirror.set(url, "short=1; Max-Age=2; Path=/");
+  advance(1500);
+  mirror.accept(snapshot());
+  expect(mirror.get(url)).toBe("short=1");
+  advance(600);
+  mirror.accept(snapshot());
+  expect(mirror.get(url)).toBe("");
+});
+
+test("snapshot records exclude HttpOnly and unrelated hosts and cannot share mutable jar records", () => {
+  const { jar } = fixture();
+  jar.store(url, ["public=1; Path=/", "private=secret; Path=/; HttpOnly", "path=1; Path=/elsewhere"]);
+  jar.store("https://other.test/", ["other=secret; Path=/"]);
+  const records = jar.scriptSnapshot(url);
+  expect(records.map(cookie => cookie.name).sort()).toEqual(["path", "public"]);
+  records[0].value = "changed";
+  expect(jar.documentCookie(url)).toBe("public=1");
+  const mirror = new CookieJar();
+  mirror.replaceScriptSnapshot(records);
+  records[0].value = "changed again";
+  expect(mirror.documentCookie(url)).toBe("public=changed");
+});
+
+test("legacy string-only embedders retain replacement semantics", () => {
+  const mirror = new DocumentCookies();
+  mirror.seed(url, "first=1; second=2");
+  expect(pairs(mirror.get(url))).toEqual(["first=1", "second=2"]);
+  mirror.seed(url, "second=3", true);
+  expect(mirror.get(url)).toBe("second=3");
+  mirror.seed(url, "", true);
+  expect(mirror.get(url)).toBe("");
+  mirror.seed(url, "id=app; id=root; other=1", true);
+  expect(mirror.get(url)).toBe("id=app; id=root; other=1");
+  mirror.set(url, "other=2; Path=/");
+  expect(mirror.get(url)).toBe("id=app; id=root; other=2");
+  mirror.set(url, "id=; Max-Age=0");
+  expect(mirror.get(url)).toBe("other=2");
+});
+
+test("unacknowledged legacy setters do not replay after the snapshot protocol is established", () => {
+  const { mirror, snapshot } = fixture();
+  for (let i = 0; i < 1000; i++) mirror.set(url, `legacy=${i}; Path=/`);
+  expect(mirror.get(url)).toBe("legacy=999");
+  mirror.accept(snapshot());
+  expect(mirror.get(url)).toBe("");
+});
+
+test("an HttpOnly overwrite is rejected by the controller without exposing its value", () => {
+  const { jar, mirror, sent, snapshot } = fixture();
+  jar.store(url, ["private=hidden; HttpOnly; Path=/", "public=visible; Path=/"]);
+  mirror.accept(snapshot());
+  mirror.set(url, "private=attempted; Path=/");
+  jar.store(sent[0].url, [sent[0].value], { fromScript: true });
+  const state = snapshot(sent[0].sequence);
+  expect(JSON.stringify(state)).not.toContain("hidden");
+  mirror.accept(state);
+  expect(mirror.get(url)).toBe("public=visible");
+  expect(jar.header(url)).toBe("private=hidden; public=visible");
+});

package/test/duplicate-style-keys.test.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'bun:test';
+
+for (const mode of ['plain', 'ses']) {
+  test(`duplicate class keys preserve candidate matching and ancestor counts (${mode})`, async () => {
+    const child = Bun.spawn([process.execPath, new URL('./fixtures/duplicate-style-keys.js', import.meta.url).pathname, mode],
+      { stdout: 'pipe', stderr: 'pipe' });
+    const [exit, stdout, stderr] = await Promise.all([child.exited,
+      new Response(child.stdout).text(), new Response(child.stderr).text()]);
+    expect({ exit, stdout, stderr }).toEqual({ exit: 0, stdout: '', stderr: '' });
+  }, 10_000);
+}

package/test/fixtures/animation-frames.js

@@ -0,0 +1,56 @@
+import assert from "node:assert/strict";
+import { setTimeout as delay } from "node:timers/promises";
+import { createPageRenderer, loadGraphics } from "../../lib/renderer/page-renderer.js";
+import { supportsFrameCheckpoint } from "../../lib/renderer/animation-frames.js";
+await import("../../vendor/ses/dist/ses.mjs");
+await loadGraphics();
+lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe",
+  localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+const errors = [], renderer = await createPageRenderer({ reportError: error => errors.push(String(error)) });
+const load = async path => {
+  await renderer.loadDocument({ url: "https://frames.test/" + path, contentType: "text/html", source: "<p>Animation frames</p>" });
+  await renderer.whenLoaded();
+};
+try {
+  renderer.setScripting("ses"); renderer.resize(320, 220, 1); await load("first");
+  const result = await renderer.evaluate(`
+    new Promise(resolve => {
+      const events=[], times=[]; let cancelled, sameBatch;
+      const record=(name,time)=>{events.push(name);if(time!==undefined)times.push([name,time]);};
+      addEventListener('error',event=>{if(event.message.includes('RAF_PROBE_THROW'))event.preventDefault();});
+      requestAnimationFrame(function first(time){
+        record('first',time);record(this===window?'this-window':'this-other');
+        requestAnimationFrame(time=>record('nested',time));
+        Promise.resolve().then(()=>{
+          record('promise-one');requestAnimationFrame(time=>record('nested-microtask',time));
+        }).then(()=>{record('promise-two');cancelAnimationFrame(cancelled);});
+        queueMicrotask(()=>record('queue-microtask'));
+        setTimeout(()=>record('timer'),0);
+        const end=performance.now()+5;while(performance.now()<end){}
+      });
+      cancelled=requestAnimationFrame(time=>record('cancelled-from-microtask',time));
+      requestAnimationFrame(time=>{record('third',time);cancelAnimationFrame(sameBatch);});
+      sameBatch=requestAnimationFrame(time=>record('cancelled-from-callback',time));
+      const early=requestAnimationFrame(()=>record('cancelled-early'));cancelAnimationFrame(early);
+      requestAnimationFrame(time=>{record('throws',time);throw new Error('RAF_PROBE_THROW');});
+      requestAnimationFrame(time=>{record('after-throw',time);requestAnimationFrame(time=>{
+        record('finish',time);resolve({events,times,groups:new Set(times.map(entry=>entry[1])).size});
+      });});
+    })
+  `);
+  assert.deepEqual(result.events, ["first", "this-window", "promise-one", "queue-microtask", "promise-two", "third", "throws", "after-throw", "timer", "nested", "nested-microtask", "finish"]);
+  if (supportsFrameCheckpoint()) {
+    assert.equal(result.groups, 2);
+    assert.ok(result.times.slice(0, 4).every(entry => entry[1] === result.times[0][1]));
+    assert.ok(result.times.slice(4).every(entry => entry[1] === result.times[4][1]));
+    assert.ok(result.times[4][1] > result.times[0][1]);
+  }
+  assert.equal(errors.length, 1); assert.ok(errors[0].includes("RAF_PROBE_THROW")); errors.length = 0;
+  await renderer.evaluate(`requestAnimationFrame(() => { throw new Error("old frame"); })`);
+  await load("second");
+  assert.equal(await renderer.evaluate(`new Promise(resolve => requestAnimationFrame(time => resolve(typeof time)))`), "number");
+  await delay(25); assert.deepEqual(errors, []);
+  await renderer.evaluate(`requestAnimationFrame(() => { throw new Error("disposed frame"); })`);
+  renderer.dispose(); await delay(25); assert.deepEqual(errors, []);
+  console.log("animation frame ordering and lifecycle passed");
+} finally { renderer.dispose(); }

package/test/fixtures/canvas-style-snapshot.js

@@ -0,0 +1,81 @@
+import assert from "node:assert/strict";
+const root = new URL("../../", import.meta.url).pathname.replace(/\/$/, "");
+const { createPageRenderer } = await import(
+  root + "/lib/renderer/page-renderer.js"
+);
+const { LayoutEngine } = await import(root + "/lib/layout/text-layout.js");
+const { StyleEngine } = await import(root + "/lib/style/computed-style.js");
+let layouts = 0,
+  computes = 0;
+const layout = LayoutEngine.prototype.layout,
+  compute = StyleEngine.prototype.compute;
+LayoutEngine.prototype.layout = function (...args) {
+  layouts++;
+  return layout.apply(this, args);
+};
+StyleEngine.prototype.compute = function (...args) {
+  computes++;
+  return compute.apply(this, args);
+};
+const renderer = await createPageRenderer({});
+await import(root + "/vendor/ses/dist/ses.mjs");
+lockdown({
+  errorTaming: "safe",
+  overrideTaming: "severe",
+  consoleTaming: "unsafe",
+  localeTaming: "unsafe",
+  stackFiltering: "concise",
+  reporting: "none",
+});
+try {
+  renderer.setScripting("ses");
+  await renderer.loadDocument({
+    url: "https://canvas.test/",
+    contentType: "text/html",
+    source:
+      '<div id="hidden" style="display:none;font-size:20px"><canvas id="c" width="100" height="50" style="font-size:24px"></canvas></div><canvas id="v" width="100" height="50"></canvas>',
+  });
+  await renderer.whenLoaded();
+  await renderer.evaluate(
+    `window.c=document.getElementById('c');window.ctx=c.getContext('2d');window.v=document.getElementById('v');window.vctx=v.getContext('2d')`,
+  );
+  const measure = await renderer.evaluate(
+    `c.style.fontSize='40px';ctx.font='1em sans-serif';ctx.measureText('MMMM').width`,
+  );
+  const eagerCurrent = await renderer.evaluate(
+    `ctx.font='40px sans-serif';ctx.measureText('MMMM').width`,
+  );
+  assert.equal(measure, eagerCurrent);
+  const before = { layouts, computes };
+  // Count renderer style/layout work around a batch of canvas operations.
+  const result = await renderer.evaluate(
+    `(() => {c.style.fontSize='20px';ctx.font='2em sans-serif';const width=ctx.measureText('MMMM').width;v.style.direction='rtl';vctx.direction='inherit';vctx.font='12px sans-serif';vctx.fillText('abc',50,20);for(let i=0;i<30;i++){ctx.measureText('MMMM');vctx.fillText('abc',50,20)}return width;})()`,
+  );
+  assert.equal(result, eagerCurrent);
+  const after = { layouts, computes };
+  // evaluate's trailing refresh may produce one layout, never one per draw.
+  assert.ok(after.layouts - before.layouts <= 1);
+  assert.ok(after.computes - before.computes <= 3);
+  const clean = { layouts, computes };
+  await renderer.evaluate(
+    `for(let i=0;i<30;i++){ctx.measureText('MMMM');vctx.fillText('abc',50,20)}`,
+  );
+  assert.equal(layouts, clean.layouts);
+  assert.equal(computes, clean.computes);
+  console.log(
+    JSON.stringify({
+      pass: true,
+      firstPendingMutationMatchesExplicit40px: true,
+      before,
+      after,
+      cleanDraws: {
+        layouts: layouts - clean.layouts,
+        computes: computes - clean.computes,
+      },
+    }),
+  );
+} finally {
+  renderer.dispose();
+  LayoutEngine.prototype.layout = layout;
+  StyleEngine.prototype.compute = compute;
+}

package/test/fixtures/computed-style-connectivity.js

@@ -0,0 +1,101 @@
+import assert from "node:assert/strict";
+import { LayoutEngine } from "../../lib/layout/text-layout.js";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+
+const mode = process.argv[2] ?? "ses";
+let layouts = 0;
+const layout = LayoutEngine.prototype.layout;
+LayoutEngine.prototype.layout = function (...args) {
+  layouts++;
+  return layout.apply(this, args);
+};
+const errors = [];
+const renderer = await createPageRenderer({ reportError: error => errors.push(String(error)) });
+if (mode === "ses") {
+  await import("../../vendor/ses/dist/ses.mjs");
+  lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe",
+    localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+}
+try {
+  renderer.setScripting(mode);
+  await renderer.loadDocument({ url: "https://styles.test/", contentType: "text/html",
+    source: "<!doctype html><style>#accessor{-webkit-line-clamp:2}</style><body></body>" });
+  await renderer.whenLoaded();
+
+  // This must be the first CSSOM declaration in a fresh process: accessors
+  // cannot depend on a connected declaration having initialized their schema.
+  const detached = await renderer.evaluate(`(() => {
+    window.node=document.createElement('div');node.id='accessor';
+    node.style.cssText='width:77px;height:19px;color:rgb(12,34,56);--tone:first';
+    window.savedStyle=getComputedStyle(node);
+    window.readStyle=s=>[s.color,s.width,s.getPropertyValue('--tone'),s.length===0,s.item(0)===''];
+    window.savedKeys=Object.keys(savedStyle);
+    return {values:readStyle(savedStyle),accessors:['color','width','WebkitLineClamp','webkitLineClamp'].every(key=>key in savedStyle),
+      aliases:[savedStyle.WebkitLineClamp,savedStyle.webkitLineClamp],absent:savedStyle.getPropertyValue('unknown-property')};
+  })()`);
+  assert.deepEqual(detached, { values: ["", "", "", true, true], accessors: true,
+    aliases: ["", ""], absent: "" });
+
+  const connected = await renderer.evaluate(`(() => {
+    document.body.appendChild(node);
+    window.normalNames=Array.from({length:savedStyle.length},(_,i)=>savedStyle.item(i));
+    return {values:readStyle(savedStyle),names:normalNames.includes('color')&&normalNames.includes('width'),
+      aliases:[savedStyle.WebkitLineClamp,savedStyle.webkitLineClamp],keysStable:savedKeys.join('|')===Object.keys(savedStyle).join('|')};
+  })()`);
+  assert.deepEqual(connected, { values: ["rgba(12, 34, 56, 1)", "77px", "first", false, false],
+    names: true, aliases: ["2", "2"], keysStable: true });
+
+  const changes = await renderer.evaluate(`(() => {
+    node.style.setProperty('--tone','second');node.style.setProperty('--later','new');
+    const customChanged=readStyle(savedStyle);
+    const fixedNames=normalNames.join('|')===Array.from({length:savedStyle.length},(_,i)=>savedStyle.item(i)).join('|');
+    node.remove();const removed=readStyle(savedStyle),fresh=readStyle(getComputedStyle(node));
+    node.style.width='88px';node.style.color='rgb(78,90,12)';
+    const changedDetached=readStyle(savedStyle);
+    document.body.appendChild(node);const reattached=readStyle(savedStyle);
+    return {customChanged,fixedNames,removed,fresh,changedDetached,reattached,
+      keysStable:savedKeys.join('|')===Object.keys(savedStyle).join('|')};
+  })()`);
+  assert.deepEqual(changes, {
+    customChanged: ["rgba(12, 34, 56, 1)", "77px", "second", false, false], fixedNames: true,
+    removed: ["", "", "", true, true], fresh: ["", "", "", true, true],
+    changedDetached: ["", "", "", true, true],
+    reattached: ["rgba(78, 90, 12, 1)", "88px", "second", false, false], keysStable: true,
+  });
+
+  const hidden = await renderer.evaluate(`(() => {
+    const parent=document.createElement('div');parent.style.cssText='display:none;color:rgb(99,88,77);--tone:inherited';
+    const child=document.createElement('div');child.style.width='3em';parent.appendChild(child);document.body.appendChild(parent);
+    const style=getComputedStyle(child),connected=readStyle(style);
+    parent.remove();const detached=readStyle(style);document.body.appendChild(parent);
+    return {connected,detached,reattached:readStyle(style)};
+  })()`);
+  assert.deepEqual(hidden, {
+    connected: ["rgba(99, 88, 77, 1)", "48px", "inherited", false, false],
+    detached: ["", "", "", true, true],
+    reattached: ["rgba(99, 88, 77, 1)", "48px", "inherited", false, false],
+  });
+
+  // A descendant never queried while connected must also avoid stale style
+  // retained by an earlier normal style pass after its ancestor is removed.
+  await renderer.evaluate(`document.body.insertAdjacentHTML('beforeend',
+    '<style>#hidden{display:none;color:red;--tone:old}#hidden .child{width:3em;background:green}</style>'+
+    '<div id="hidden"><span class="child" id="child">Hidden</span></div><div id="visible"></div>')`);
+  await renderer.screenshot({ format: "rgba" });
+  assert.deepEqual(await renderer.evaluate(`(() => {
+    const child=document.getElementById('child');child.remove();
+    document.getElementById('visible').style.width='19px';const style=getComputedStyle(child);
+    return [style.color,style.width,style.backgroundColor,style.getPropertyValue('--tone'),style.length,style.item(0)];
+  })()`), ["", "", "", "", 0, ""]);
+
+  await renderer.evaluate(`window.detached=document.createElement('div');window.ds=getComputedStyle(detached);
+    document.body.style.padding='7px'`);
+  const before = layouts;
+  assert.deepEqual(await renderer.evaluate(`[ds.color,ds.width,ds.length,ds.item(0),ds.getPropertyValue('--tone')]`),
+    ["", "", 0, "", ""]);
+  assert.equal(layouts, before, "detached reads must not flush unrelated layout");
+  assert.deepEqual(errors, []);
+} finally {
+  renderer.dispose();
+  LayoutEngine.prototype.layout = layout;
+}

package/test/fixtures/computed-style-lazy.js

@@ -0,0 +1,135 @@
+import { strict as assert } from "node:assert";
+import { LayoutEngine } from "../../lib/layout/text-layout.js";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+// Observe expensive field serialization through the actual CSSOM path. The
+// immutable style and all returned values remain unchanged by this proxy.
+let observeSerialization = false, serializations = 0;
+const computed = StyleEngine.prototype.get, observedStyles = new WeakMap();
+StyleEngine.prototype.get = function (element) {
+  const style = computed.call(this, element);
+  if (!observeSerialization || element?.id !== "box") return style;
+  let observed = observedStyles.get(style);
+  if (!observed) observedStyles.set(style, observed = new Proxy(style, {
+    get(target, property, receiver) {
+      if (property === "fontFamily") serializations++;
+      return Reflect.get(target, property, receiver);
+    },
+  }));
+  return observed;
+};
+
+let layouts = 0;
+const layout = LayoutEngine.prototype.layout;
+LayoutEngine.prototype.layout = function (...args) { layouts++; return layout.apply(this, args); };
+let releaseImage;
+const imageReady = new Promise(resolve => { releaseImage = resolve; });
+const redImage = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAIAAAA2iEnWAAAAEElEQVR4nGP4z8AARAwoFABE0AX7pM/egAAAAABJRU5ErkJggg==", "base64");
+const renderer = await createPageRenderer({ fetchResource: async url => {
+  await imageReady;
+  return { ok:true,status:200,url,contentType:"image/png",body:redImage };
+} });
+try {
+  renderer.setScripting("host");
+  await renderer.resize(400, 300, 1);
+  await renderer.loadDocument({ url: "https://page.test/", contentType: "text/html", status: 200,
+    source: `<!doctype html><style>body{margin:0}#box{width:50%;height:40px;color:red;--tone:red}
+      #child{width:50%;height:20px;padding:5%}</style><div id="box"><div id="child">Text</div></div>` });
+  await renderer.whenLoaded();
+  globalThis.__layoutCalls = () => layouts;
+  globalThis.__serializationCalls = () => serializations;
+  observeSerialization = true;
+  const repeated = await renderer.evaluate(`(() => {
+    const element=document.getElementById('box'),styles=[];
+    for(let i=0;i<40;i++) styles.push(getComputedStyle(element));
+    const values=styles.map(style=>[style.color,style.getPropertyValue('--tone')]);
+    const first=__serializationCalls();
+    element.style.setProperty('--tone','changed');
+    const custom=styles[0].getPropertyValue('--tone'),second=__serializationCalls();
+    const keys=Object.keys(styles[0]);
+    styles[0].getPropertyValue=()=> 'local override';
+    const independent=styles[1].getPropertyValue('--tone');
+    return {first,second,custom,independent,distinct:styles[0]!==styles[1],
+      keys:keys.includes('fontFamily')&&keys.includes('color'),
+      values:values.every(value=>value[0]==='rgba(255, 0, 0, 1)'&&value[1]==='red')};
+  })()`);
+  assert.deepEqual(repeated,{first:1,second:2,custom:'changed',independent:'changed',distinct:true,keys:true,values:true});
+  observeSerialization = false;
+  const styles = await renderer.evaluate(`(() => {
+    const box=document.getElementById('box'),style=getComputedStyle(box),start=__layoutCalls();
+    window.savedStyle=style;
+    const values=[];
+    for(let i=0;i<20;i++) {
+      box.style.width=(100+i)+'px';box.style.color=i%2?'blue':'red';box.style.setProperty('--tone',String(i));
+      values.push([style.color,style.display,style.getPropertyValue('--tone')]);
+    }
+    box.style.display='none';values.push([style.display]);box.style.display='block';
+    return {layouts:__layoutCalls()-start,first:values[0],last:values[19],hidden:values[20]};
+  })()`);
+  assert.deepEqual(styles, { layouts:0,first:["rgba(255, 0, 0, 1)","block","0"],
+    last:["rgba(0, 0, 255, 1)","block","19"],hidden:["none"] });
+  const padding = await renderer.evaluate(`(() => {
+    const box=document.getElementById('box'),child=document.getElementById('child'),start=__layoutCalls();
+    box.style.width='310px';box.style.padding='2px 3px 4px 5px';
+    const fixed=[savedStyle.padding,savedStyle.paddingTop,savedStyle.getPropertyValue('padding-right'),savedStyle.paddingBottom,savedStyle.paddingLeft];
+    box.style.paddingLeft='7px';fixed.push(savedStyle.paddingLeft);
+    const before=__layoutCalls()-start;
+    const percent=getComputedStyle(child).paddingLeft;
+    box.style.padding='0px';
+    return {fixed,before,percent,after:__layoutCalls()-start};
+  })()`);
+  assert.deepEqual(padding, { fixed:["2px 3px 4px 5px","2px","3px","4px","5px","7px"],
+    before:0,percent:"15.5px",after:1 });
+  const geometry = await renderer.evaluate(`(() => {
+    const box=document.getElementById('box'),child=document.getElementById('child'),start=__layoutCalls();
+    box.style.width='240px';box.style.height='60px';savedStyle.color;
+    const before=__layoutCalls()-start;
+    const result=[savedStyle.width,savedStyle.height,savedStyle.getPropertyValue('WIDTH'),getComputedStyle(child).paddingLeft];
+    return {before,after:__layoutCalls()-start,result};
+  })()`);
+  assert.deepEqual(geometry, { before:0,after:1,result:["240px","60px","240px","12px"] });
+  // A style-only read cannot hide later structure, stylesheet or viewport changes.
+  await renderer.evaluate(`document.getElementById('box').style.width='50%'; savedStyle.color`);
+  await renderer.resize(600, 300, 1.75);
+  assert.equal(await renderer.evaluate("savedStyle.width"), "300px");
+  assert.equal(await renderer.evaluate(`(() => {
+    const sheet=document.createElement('style');sheet.textContent='#box{width:180px!important;color:green!important}';document.head.appendChild(sheet);
+    return [savedStyle.color,savedStyle.width].join('/');
+  })()`), "rgba(0, 128, 0, 1)/180px");
+  assert.equal(await renderer.evaluate(`(() => {
+    const box=document.getElementById('box');box.style.height='auto';box.replaceChildren();
+    const child=document.createElement('div');child.style.height='70px';box.appendChild(child);savedStyle.display;
+    return savedStyle.height;
+  })()`), "70px");
+  assert.deepEqual(await renderer.evaluate(`(() => {
+    const node=document.createElement('div'),style=getComputedStyle(node),keys=Object.keys(style);
+    node.style.cssText='width:77px;height:19px;color:red';document.body.appendChild(node);
+    const connected=[style.width,style.height,style.color];node.remove();node.style.width='88px';
+    document.body.appendChild(node);const reconnected=[style.width,style.height,style.color];
+    return [connected,reconnected,keys.length===Object.keys(style).length];
+  })()`), [["77px","19px","rgba(255, 0, 0, 1)"],["88px","19px","rgba(255, 0, 0, 1)"],true]);
+  await renderer.evaluate("document.body.style.backgroundColor='rgb(11,22,33)';savedStyle.color");
+  const painted = await renderer.screenshot({format:"rgba"});
+  assert.deepEqual([...painted.pixels.slice(-4)], [11,22,33,255]);
+  assert.deepEqual(await renderer.evaluate(`(() => {
+    const image=document.createElement('img');image.id='delayed';image.src='/delayed.png';document.body.appendChild(image);
+    const start=__layoutCalls();window.imageStyle=getComputedStyle(image);
+    return [imageStyle.display,__layoutCalls()-start];
+  })()`), ["inline",0]);
+  releaseImage();
+  const deadline = Date.now() + 3000;
+  while (!(await renderer.evaluate("document.getElementById('delayed').complete"))) {
+    assert.ok(Date.now() < deadline,"delayed image should finish loading");
+    await Bun.sleep(5);
+  }
+  assert.deepEqual(await renderer.evaluate("[imageStyle.width,imageStyle.height]"),["2px","3px"]);
+  await renderer.evaluate("document.getElementById('delayed').remove();savedStyle.color");
+  assert.deepEqual([...(await renderer.screenshot({format:"rgba"})).pixels.slice(-4)],[11,22,33,255]);
+} finally {
+  renderer.dispose();
+  delete globalThis.__layoutCalls;
+  delete globalThis.__serializationCalls;
+  StyleEngine.prototype.get = computed;
+  LayoutEngine.prototype.layout = layout;
+}