buninu-browser 0.5.1 → 0.6.0

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

@@ -0,0 +1,97 @@
+import '../../vendor/ses/dist/ses.mjs';
+import assert from 'node:assert/strict';
+import { parseHTMLDocument } from '../../lib/happy-dom/parser.js';
+import { matchSelectors, StyleEngine } from '../../lib/style/computed-style.js';
+
+const source = `<body class="scope scope"><section id="outer" class="shared shared shared">
+  <div id="branch" class="branch branch shared shared"><span id="deep" class="target target alternate alternate">deep</span></div>
+  <span id="after" class="target target">after nested duplicates</span>
+  </section><section id="other" class="shared shared"><span id="later" class="target target">later branch</span></section>
+  <span id="outside" class="target target alternate">outside</span></body>`;
+const sheets = [`
+  .target { color:black; width:1px }
+  .shared .target { color:red; width:11px; --tone:blue }
+  .branch .target { height:7px }
+  :is(.target, .alternate) { padding:2px }
+  .target.target { font-weight:700 }
+  .shared .target::before { content:"marker"; color:var(--tone) }
+  .scope .target { border:1px solid currentColor }
+  .missing .target { color:lime !important }
+`];
+const duplicate = parseHTMLDocument(source), canonical = parseHTMLDocument(source);
+const nodes = document => [...document.querySelectorAll('*')];
+const normalizeClasses = () => {
+  const left = nodes(duplicate.document), right = nodes(canonical.document);
+  for (let index = 0; index < left.length; index++) {
+    right[index].setAttribute('class', [...new Set((left[index].getAttribute('class') ?? '').split(/\s+/).filter(Boolean))].join(' '));
+    const style = left[index].getAttribute('style');
+    if (style === null) right[index].removeAttribute('style');
+    else right[index].setAttribute('style', style);
+  }
+};
+normalizeClasses();
+const engine = new StyleEngine().compute(duplicate.document, sheets);
+new StyleEngine().compute(canonical.document, sheets); // Warm DOM/style paths before lockdown.
+if (process.argv[2] === 'ses') lockdown({
+  errorTaming: 'safe', overrideTaming: 'severe', consoleTaming: 'unsafe',
+  localeTaming: 'unsafe', stackFiltering: 'concise', reporting: 'none',
+});
+
+const get = id => duplicate.document.getElementById(id);
+const ids = elements => [...elements].map(element => element.id);
+const selectors = ['.shared .target', '.branch .target', ':is(.target, .alternate)', '.target.target', '.missing .target'];
+function verify() {
+  normalizeClasses();
+  const reference = new StyleEngine().compute(canonical.document, sheets);
+  const left = nodes(duplicate.document), right = nodes(canonical.document);
+  for (let index = 0; index < left.length; index++) {
+    assert.deepEqual(engine.get(left[index]), reference.get(right[index]));
+    assert.deepEqual(engine.customPropertiesOf(left[index]), reference.customPropertiesOf(right[index]));
+    for (const pseudo of ['before', 'after']) assert.deepEqual(engine.getPseudo(left[index], pseudo), reference.getPseudo(right[index], pseudo));
+  }
+  const matched = matchSelectors(duplicate.document, selectors);
+  for (const selector of selectors) assert.deepEqual(ids(matched.get(selector)), ids(canonical.document.querySelectorAll(selector)), selector);
+  // Exiting the nested shared/branch keys must preserve the outer shared
+  // count for the next sibling, then restore it before the outside element.
+  for (const id of ['deep', 'after', 'later']) assert.equal(engine.get(get(id)).color, 'rgba(255, 0, 0, 1)');
+  assert.equal(engine.get(get('outside')).color, 'rgba(0, 0, 0, 1)');
+  assert.deepEqual(ids(matched.get('.shared .target')), ['deep', 'after', 'later']);
+  assert.deepEqual(ids(matched.get(':is(.target, .alternate)')), ['deep', 'after', 'later', 'outside']);
+}
+
+try {
+  // Traverse push/pop after lockdown as well as during the initial warmup.
+  engine.compute(duplicate.document, sheets);
+  verify();
+  assert.equal(engine.get(get('deep')).height, 7);
+  assert.equal(engine.get(get('after')).height, 'auto');
+  for (const classes of ['shared shared', 'branch branch shared shared shared']) {
+    get('branch').className = classes;
+    engine.compute(duplicate.document, sheets, {}, new Set([get('outer'), get('other')]));
+    assert.equal(engine.incremental, true);
+    verify();
+    assert.equal(engine.get(get('deep')).height, classes.includes('branch') ? 7 : 'auto');
+  }
+  // Long ancestor and subject lists use the guarded deduplication path. Keep
+  // a distinct matching token after the repeated keys so it cannot be lost.
+  get('outer').className = Array(1000).fill('shared').join(' ');
+  get('branch').className = `${Array(1000).fill('shared').join(' ')} branch`;
+  get('deep').className = `${Array(1000).fill('target').join(' ')} alternate`;
+  get('after').className = Array(17).fill('target').join(' ');
+  get('later').className = Array(16).fill('target').join(' ');
+  engine.compute(duplicate.document, sheets, {}, new Set([get('outer'), get('other')]));
+  verify();
+  assert.equal(engine.get(get('deep')).height, 7);
+  assert.equal(engine.get(get('after')).height, 'auto');
+  // Separate dirty roots build ancestor filters through repeated class keys.
+  get('deep').style.width = '23px';
+  get('later').style.width = '29px';
+  engine.compute(duplicate.document, sheets, {}, new Set([get('deep'), get('later')]));
+  assert.equal(engine.restyled, 2);
+  verify();
+  assert.equal(engine.get(get('deep')).width, 23);
+  assert.equal(engine.get(get('later')).width, 29);
+} finally {
+  duplicate.window.happyDOM.abort();
+  canonical.window.happyDOM.abort();
+}

package/test/fixtures/fake-renderer.js

@@ -7,6 +7,15 @@ process.on("message", async (message) => {
   if (message?.type !== "call") return;
   const [argument] = message.params;
   switch (message.method) {
+    case "slow":
+      await Bun.sleep(200);
+      return process.send({ type: "result", id: message.id, result: "completed" });
+    case "showFragment":
+      await Bun.sleep(200);
+      return process.send({ type: "result", id: message.id, result: "positioned" });
+    case "loadDocument":
+      await Bun.sleep(argument.delay);
+      return process.send({ type: "result", id: message.id, result: "loaded" });
     case "configuration": return process.send({ type: "result", id: message.id, result: { args: process.argv, secret: process.env.BUNINU_TEST_PRIVATE_ENV } });
     case "echo": return process.send({ type: "result", id: message.id, result: { pid: process.pid, argument } });
     case "hang": for (;;) {}
@@ -24,4 +33,7 @@ process.on("message", async (message) => {
   }
 });
 process.on("disconnect", () => process.exit(0));
+const delay = Number(process.argv.find(arg => arg.startsWith('--ready-delay='))?.split('=')[1] ?? 0);
+if (process.argv.includes('--exit-before-ready')) process.exit(2);
+if (delay) await Bun.sleep(delay);
 process.send({ type: "ready" });

package/test/fixtures/font-definition-invalidation.js

@@ -0,0 +1,97 @@
+// Compare edited font definitions against fresh documents and count CSS work.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const mono = await Bun.file(new URL("../../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+const sans = await Bun.file(new URL("../../usr/share/fonts/Roboto-Regular.ttf", import.meta.url)).bytes();
+const primary = '@font-face{font-family:DefinitionPrimary;src:url(/mono.ttf)}';
+const alias = '@font-face{font-family:DefinitionAlias;src:url(/sans.ttf)}';
+const phases = [
+  ["loaded", primary + alias],
+  ["remove primary", alias],
+  ["rename primary", primary.replace("DefinitionPrimary", "UnusedDefinition") + alias],
+  ["replace source", primary.replace("/mono.ttf", "/sans.ttf") + alias],
+  ["restore primary", primary + alias],
+  ["remove all", ""],
+  ["restore all", primary + alias],
+];
+const compute = StyleEngine.prototype.compute;
+let computations = null;
+let currentDocument = null;
+StyleEngine.prototype.compute = function (...args) {
+  currentDocument = args[0];
+  const result = compute.apply(this, args);
+  computations?.push({ count: this.restyled, full: !this.incremental });
+  return result;
+};
+
+async function open(definitions, usesMetrics) {
+  let requests = 0;
+  const renderer = await createPageRenderer({
+    fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+    pageFetch: async ({ url }) => {
+      requests++;
+      return { status: 200, body: url.endsWith("/mono.ttf") ? mono : sans };
+    },
+  });
+  renderer.resize(400, 250, 1);
+  await renderer.loadDocument({ url: "https://font-definition.test/", contentType: "text/html", source: `<!doctype html>
+    <style id=faces>${definitions}</style><style>
+      body{margin:0}#auto,#metric{display:inline-block;font:30px DefinitionPrimary,DefinitionAlias,sans-serif}
+      #metric{${usesMetrics ? "width:10ch" : "padding:2px"}}
+      #preload{font:20px DefinitionAlias,sans-serif}
+    </style><span id=auto>iiii</span><br><span id=metric>metric</span><div id=preload>preload alias</div>` });
+  await renderer.whenLoaded();
+  return { renderer, document: currentDocument, requests: () => requests };
+}
+
+async function capture(renderer) {
+  const geometry = renderer.inspect("#auto,#metric", ["width"]);
+  const image = await renderer.screenshot({ format: "rgba" });
+  return { geometry, pixels: Buffer.from(image.pixels) };
+}
+
+try {
+  for (const usesMetrics of [false, true]) {
+    const live = await open(phases[0][1], usesMetrics);
+    const snapshots = [];
+    try {
+      for (const [index, [name, definitions]] of phases.entries()) {
+        computations = [];
+        if (index) {
+          live.document.getElementById("faces").textContent = definitions;
+          // Repeated viewport metrics flush mutations without changing any
+          // layout input; font definition invalidation must reset the caches.
+          live.renderer.resize(400, 250, 1);
+          // Font bytes are already available; drain the cached-source promise
+          // chain that registers a new alias when a descriptor is replaced.
+          await Bun.sleep(0);
+        }
+        snapshots.push(await capture(live.renderer));
+        if (index) assert.equal(computations.some(entry => entry.full), usesMetrics,
+          `${name}: only font-relative computed lengths require a full cascade`);
+        assert.equal(live.requests(), 2, `${name}: cached sources and unused definitions must not refetch fonts`);
+        computations = null;
+      }
+    } finally { computations = null; live.renderer.dispose(); }
+
+    for (const [index, [name, definitions]] of phases.entries()) {
+      const fresh = await open(definitions, usesMetrics);
+      try {
+        const expected = await capture(fresh.renderer);
+        assert.deepEqual(snapshots[index].geometry, expected.geometry, `${name}: fresh layout geometry`);
+        assert.deepEqual(snapshots[index].pixels, expected.pixels, `${name}: fresh layout pixels`);
+      } finally { fresh.renderer.dispose(); }
+    }
+    assert.ok(snapshots[1].geometry[0].box.width < snapshots[0].geometry[0].box.width / 2,
+      "removing the primary face must select the narrower loaded fallback");
+    assert.deepEqual(snapshots.at(-1), snapshots[0], "restoring definitions must restore geometry and pixels");
+    if (usesMetrics) assert.notEqual(snapshots[1].geometry[1].style.width, snapshots[0].geometry[1].style.width,
+      "ch lengths must use the replacement font metrics");
+  }
+  process.stdout.write("font definition invalidation integration passed\n");
+} finally {
+  computations = null;
+  StyleEngine.prototype.compute = compute;
+}

package/test/fixtures/font-metrics-invalidation.js

@@ -0,0 +1,87 @@
+// Isolate prototype counters and the forced full-cascade reference.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const font = await Bun.file(new URL("../../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+const compute = StyleEngine.prototype.compute;
+const dependency = Object.getOwnPropertyDescriptor(StyleEngine.prototype, "usesFontMetrics");
+let computations, currentDocument;
+StyleEngine.prototype.compute = function (...args) {
+  currentDocument = args[0];
+  const result = compute.apply(this, args);
+  computations?.push({ count: this.restyled, full: !this.incremental });
+  return result;
+};
+
+async function snapshot(extra, forceFull, mutate = false) {
+  if (forceFull) Object.defineProperty(StyleEngine.prototype, "usesFontMetrics", { configurable: true, get: () => true });
+  else Object.defineProperty(StyleEngine.prototype, "usesFontMetrics", dependency);
+  let finish, requests = 0;
+  const response = new Promise(resolve => { finish = resolve; });
+  const renderer = await createPageRenderer({
+    fetchResource: async url => ({ ok: false, status: 404, url, body: new Uint8Array() }),
+    pageFetch: () => { requests++; return response; },
+  });
+  try {
+    renderer.resize(400, 300, 1);
+    await renderer.loadDocument({ url: "https://font.test/", contentType: "text/html", source: `<!doctype html>
+      <style>@font-face{font-family:Delayed;src:url(/font.ttf)}
+      @font-face{font-family:Unused;src:url(/never.ttf)}
+      body{margin:0;font:16px Delayed,sans-serif;line-height:normal}
+      #probe,.atom{display:inline-block;padding:2px}
+      .flex{display:flex;width:180px}.grid{display:grid;grid-template-columns:min-content 1fr;width:180px}
+      ${extra}</style>
+      <div id=probe>iiii</div><div id=changed>normal line height</div>
+      <div class=flex><span class=atom>iiii Hello</span><span class=atom>more words</span></div>
+      <div class=grid><span>iii iii</span><span>word word word</span></div>
+      <div style="width:150px">${'wrapping text '.repeat(12)}</div>` });
+    const before = renderer.inspect("#probe")[0].box.width;
+    if (mutate) {
+      // Pending DOM/style invalidation must not be replaced by font-only work.
+      const changed = currentDocument.getElementById("changed");
+      changed.style.width = "123px";
+      changed.style.color = "blue";
+      changed.insertAdjacentHTML("beforeend", '<span style="display:block;height:19px">inserted</span>');
+    }
+    computations = [];
+    finish({ status: 200, body: font });
+    await renderer.whenLoaded();
+    const after = renderer.inspect("#probe")[0].box.width;
+    const changed = renderer.inspect("#changed", ["width", "color"])[0];
+    const captured = await renderer.screenshot({ format: "rgba" });
+    assert.equal(requests, 1, "unused font definitions must not load or reset layout");
+    return { before, after, changed, pixels: Buffer.from(captured.pixels), computations: [...computations] };
+  } finally { computations = null; renderer.dispose(); }
+}
+
+try {
+  for (const [name, extra, usesMetrics] of [
+    ["ordinary text", "", false],
+    ["ch", "#probe{width:10ch}", true],
+    ["custom variable", "body{--size:4ch}#probe{width:calc(var(--size) + 5px)}", true],
+    ["pseudo", "#probe::before{content:'x';display:inline-block;width:2ch}", true],
+    ["root font size", "html{font-family:Delayed,sans-serif;font-size:2ch}#probe{width:10rem}", true],
+  ]) {
+    const candidate = await snapshot(extra, false);
+    const reference = await snapshot(extra, true);
+    assert.deepEqual(candidate.pixels, reference.pixels, name + " pixels must match a fresh full cascade");
+    assert.equal(candidate.after, reference.after, name + " geometry must match");
+    // Root font-size ch uses the initial/parent font while resolving size,
+    // so it is a conservative dependency even if this face cannot affect it.
+    if (name !== "root font size") assert.ok(candidate.after > candidate.before, name + " must use the newly loaded face");
+    assert.equal(candidate.computations.some(entry => entry.full), usesMetrics, name + " cascade dependency");
+    if (!usesMetrics) assert.equal(candidate.computations.reduce((sum, entry) => sum + entry.count, 0), 0,
+      "ordinary text changes font metrics without recomputing CSS");
+  }
+  const candidate = await snapshot("", false, true);
+  const reference = await snapshot("", true, true);
+  assert.deepEqual(candidate.pixels, reference.pixels, "simultaneous DOM changes must match full cascade");
+  assert.equal(candidate.changed.box.width, 123);
+  assert.equal(candidate.changed.style.color, "rgba(0, 0, 255, 1)");
+  assert.ok(candidate.computations.some(entry => entry.count > 0), "pending DOM changes still restyle");
+  process.stdout.write("font metrics invalidation integration passed\n");
+} finally {
+  StyleEngine.prototype.compute = compute;
+  Object.defineProperty(StyleEngine.prototype, "usesFontMetrics", dependency);
+}

package/test/fixtures/full-style-identity.js

@@ -0,0 +1,36 @@
+import '../../vendor/ses/dist/ses.mjs';
+import assert from 'node:assert/strict';
+import { parseHTMLDocument } from '../../lib/happy-dom/parser.js';
+import { StyleEngine } from '../../lib/style/computed-style.js';
+import { RenderTreeBuilder } from '../../lib/render-tree/index.js';
+import { LayoutEngine } from '../../lib/layout/text-layout.js';
+import { buildDisplayList } from '../../lib/paint/display-list.js';
+
+const { document, window } = parseHTMLDocument('<body>' + Array.from({ length:200 }, (_, i) =>
+  `<section class="card"><p>Text ${i}</p><span>More ${i}</span></section>`).join('') + '</body>');
+const sheets = ['body {margin:0} .card {width:500px;padding:3px} p {margin:0}'];
+const engine = new StyleEngine().compute(document, sheets), builder = new RenderTreeBuilder();
+let measures = 0;
+const measureText = (text, style) => { measures++; return text.length * style.fontSize / 2; };
+const layout = new LayoutEngine({ measureText }), options = { width:800, viewportHeight:600 };
+const tree = builder.build(document, engine);
+layout.layout(tree, options);
+const before = [...document.querySelectorAll('*')].map(element => [element, engine.get(element)]);
+lockdown({ errorTaming:'safe', overrideTaming:'severe', consoleTaming:'unsafe', localeTaming:'unsafe', stackFiltering:'concise', reporting:'none' });
+try {
+  sheets.push('.unmatched {width:200px}');
+  engine.compute(document, sheets);
+  assert.equal(engine.incremental, false);
+  assert.equal(engine.restyled, before.length);
+  for (const [element, style] of before) assert.equal(engine.get(element), style);
+  const next = builder.build(document, engine);
+  assert.equal(next.root, tree.root);
+  measures = 0;
+  const result = layout.layout(next, options);
+  assert.equal(measures, 0);
+  const freshStyle = new StyleEngine().compute(document, sheets);
+  const freshTree = new RenderTreeBuilder().build(document, freshStyle);
+  const fresh = new LayoutEngine({ measureText }).layout(freshTree, options);
+  const actual = buildDisplayList(result, next), expected = buildDisplayList(fresh, freshTree);
+  for (const key of ['items', 'hits', 'scrollers', 'extent']) assert.deepEqual(actual[key], expected[key]);
+} finally { window.happyDOM.abort(); }

package/test/fixtures/hidden-style-engine.js

@@ -0,0 +1,260 @@
+import assert from "node:assert/strict";
+import { pathToFileURL } from "node:url";
+const root = new URL("../../", import.meta.url).pathname.replace(/\/$/, "");
+if (process.argv.includes("--ses")) {
+  await import(pathToFileURL(root + "/vendor/ses/dist/ses.mjs"));
+  lockdown({
+    errorTaming: "safe",
+    overrideTaming: "severe",
+    consoleTaming: "unsafe",
+    localeTaming: "unsafe",
+    stackFiltering: "concise",
+    reporting: "none",
+  });
+}
+const { parseHTMLDocument } = await import(
+  pathToFileURL(root + "/lib/happy-dom/parser.js")
+);
+const { StyleEngine, computeElementStyle } = await import(
+  pathToFileURL(root + "/lib/style/computed-style.js")
+);
+let assertions = 0,
+  states = 0,
+  metric = 7,
+  measurements = 0;
+const measureText = (text, style) => {
+  measurements++;
+  return { width: text.length * metric, height: style.fontSize };
+};
+const f = parseHTMLDocument(
+  `<html style="font-size:18px"><body><section id="visible" style="color:purple;--tone:green"></section><div id="outer" style="color:red;--tone:blue"><div id="nested" style="display:none;font-size:20px"><i id="nestedchild" class="child"></i></div><div id="chain" style="font-size:1.2em;line-height:1.5"><span id="leaf" class="child" style="width:inherit"><b id="grand" class="child"></b></span></div><svg id="svg"><g id="g"><path id="path" style="fill:currentColor"/></g></svg></div></body></html>`,
+);
+let sheets = [
+  `.child{background:var(--tone);margin:2rem;padding:2ch;max-width:20vw}.child::before{content:"before";color:inherit;width:2ch} #outer:has(.active) .child {color:orange} #visible .child {font-weight:bold} @media(min-width:600px){.child{height:4em}}`,
+];
+let viewport = { width: 800, height: 600 },
+  lazy = new StyleEngine({ deferHidden: true, measureText }),
+  lastRestyled;
+const el = (id) => f.document.getElementById(id);
+function run(label, { dirty = null, self = null } = {}) {
+  lazy.compute(f.document, sheets, viewport, dirty, self);
+  lastRestyled = lazy.restyled;
+  const full = new StyleEngine({ measureText }).compute(
+    f.document,
+    sheets,
+    viewport,
+  );
+  // Query descendants before their ancestors to exercise path materialization.
+  const elements = [...f.document.querySelectorAll("*")].reverse();
+  for (const e of elements) {
+    assert.deepEqual(lazy.get(e), full.get(e), label + " style " + e.id);
+    assertions++;
+    assert.deepEqual(
+      lazy.customPropertiesOf(e),
+      full.customPropertiesOf(e),
+      label + " custom " + e.id,
+    );
+    assertions++;
+    for (const p of ["before", "after"]) {
+      assert.deepEqual(
+        lazy.getPseudo(e, p),
+        full.getPseudo(e, p),
+        label + " pseudo " + e.id,
+      );
+      assertions++;
+    }
+  }
+  assert.equal(
+    lazy.restyled,
+    lastRestyled,
+    label + " query does not affect traversal counter",
+  );
+  assertions++;
+  states++;
+}
+try {
+  run("visible with nested hidden");
+  el("outer").style.display = "none";
+  el("nested").style.fontSize = "31px";
+  run("outer hides stale nested boundary", { dirty: new Set([el("outer")]) });
+  el("outer").style.color = "green";
+  el("outer").style.setProperty("--tone", "pink");
+  run("hidden boundary inherit self", {
+    dirty: new Set(),
+    self: new Set([el("outer")]),
+  });
+  el("chain").style.fontSize = "33px";
+  el("leaf").style.width = "77px";
+  el("leaf").classList.add("active");
+  run("hidden inside roots", { dirty: new Set([el("chain"), el("leaf")]) });
+  el("nestedchild").style.cssText = "all:inherit;--tone:yellow";
+  run("hidden self inheritance", {
+    dirty: new Set(),
+    self: new Set([el("nestedchild")]),
+  });
+  sheets = [
+    ...sheets,
+    ".child{border:2px solid currentColor} #chain{width:91px}",
+  ];
+  run("added sheet hidden", { dirty: new Set() });
+  viewport = { width: 500, height: 700 };
+  run("viewport full");
+  f.document.documentElement.style.fontSize = "22px";
+  run("root rem self", {
+    dirty: new Set(),
+    self: new Set([f.document.documentElement]),
+  });
+  metric = 11;
+  run("font environment full");
+  assert.equal(lazy.usesFontMetrics, true);
+  assertions++;
+  el("nested").style.display = "block";
+  run("nested reveal under hidden ancestor", {
+    dirty: new Set([el("nested")]),
+  });
+  el("outer").style.display = "block";
+  run("outer reveal", { dirty: new Set(), self: new Set([el("outer")]) });
+  el("visible").append(el("chain"));
+  run("move to visible different inherit", { dirty: new Set([el("chain")]) });
+  el("outer").style.display = "none";
+  run("hide again", { dirty: new Set([el("outer")]) });
+  el("outer").append(el("chain"));
+  run("move into hidden", { dirty: new Set([el("chain")]) });
+  el("chain").insertAdjacentHTML(
+    "beforeend",
+    '<em id="new" class="child" style="width:inherit"><strong id="newchild" style="font:inherit">new</strong></em>',
+  );
+  run("insert new hidden subtree", {
+    dirty: new Set([el("new"), el("newchild")]),
+  });
+  el("visible").append(el("nested"));
+  run("move stale former boundary visible", { dirty: new Set([el("nested")]) });
+  el("outer").classList.add("active");
+  run("hidden has ancestor dirty", { dirty: new Set([el("outer")]) });
+  f.document.body.style.display = "none";
+  run("body none conservative");
+  f.document.documentElement.style.display = "none";
+  run("html none conservative");
+  // Deterministic mutation stress with legal full/subtree invalidation.
+  let seed = 13;
+  const rnd = (n) => {
+    seed = (seed * 1664525 + 1013904223) >>> 0;
+    return seed % n;
+  };
+  const ids = ["outer", "nested", "chain", "leaf", "grand", "new", "newchild"];
+  for (let i = 0; i < 120; i++) {
+    const e = el(ids[rnd(ids.length)]),
+      op = rnd(6);
+    if (op === 0) e.style.display = rnd(2) ? "none" : "block";
+    if (op === 1) e.style.color = ["red", "blue", "green", "inherit"][rnd(4)];
+    if (op === 2)
+      e.style.setProperty("--tone", ["pink", "orange", "teal"][rnd(3)]);
+    if (op === 3) e.style.fontSize = 12 + rnd(15) + "px";
+    if (op === 4) e.style.width = ["inherit", "3rem", "5ch", "42px"][rnd(4)];
+    if (op === 5) e.classList.toggle("active");
+    run("stress " + i, { dirty: new Set([op === 5 ? f.document.body : e]) });
+  }
+  // Query only one hidden chain; siblings must stay uncomputed until requested.
+  const select = parseHTMLDocument(
+    '<div id="hide" style="display:none">' +
+      Array.from(
+        { length: 500 },
+        (_, i) => `<span id="x${i}" style="width:1ch"></span>`,
+      ).join("") +
+      "</div>",
+  );
+  try {
+    const limited = new StyleEngine({ deferHidden: true, measureText });
+    measurements = 0;
+    limited.compute(select.document);
+    assert.equal(measurements, 0);
+    const count = limited.restyled;
+    limited.get(select.document.getElementById("x250"));
+    assert.equal(measurements, 1);
+    assert.equal(limited.restyled, count);
+    limited.get(select.document.getElementById("x250"));
+    assert.equal(measurements, 1);
+    assertions += 4;
+  } finally {
+    select.window.happyDOM.abort();
+  }
+  // A new document/adopted subtree must use only its new context and maps.
+  const a = parseHTMLDocument(
+    '<div style="display:none;color:red;--x:old"><span id="adopted" style="width:3em"></span></div>',
+  );
+  const b = parseHTMLDocument(
+    '<div id="newhost" style="display:none;color:blue;font-size:25px;--x:new"></div>',
+  );
+  try {
+    const engine = new StyleEngine({ deferHidden: true }).compute(a.document),
+      node = a.document.getElementById("adopted");
+    const old = engine.get(node);
+    b.document.getElementById("newhost").append(node);
+    engine.compute(b.document);
+    assert.equal(engine.get(node).width, 75);
+    assert.equal(engine.get(node).color, "rgba(0, 0, 255, 1)");
+    assert.equal(engine.customPropertiesOf(node).get("--x"), "new");
+    assert.notEqual(engine.get(node), old);
+    assert.equal(engine.get(a.document.documentElement).display, "inline");
+    assertions += 5;
+  } finally {
+    a.window.happyDOM.abort();
+    b.window.happyDOM.abort();
+  }
+  // Lazy metric callbacks may compute another engine; their saved environment
+  // must not replace this query's viewport/rem context or survive an exception.
+  const envDoc = parseHTMLDocument(
+    '<html style="font-size:21px"><body><div style="display:none"><section id="partial" style="font-size:1.2em;width:11vw"><span id="metric" style="width:2ch;height:10vw;margin:2rem"></span></section></div></body></html>',
+  );
+  const otherDoc = parseHTMLDocument('<div style="width:10vw"></div>');
+  try {
+    const envEngine = new StyleEngine({
+      deferHidden: true,
+      measureText() {
+        new StyleEngine().compute(otherDoc.document, [], { width: 200 });
+        return 9;
+      },
+    }).compute(envDoc.document, [], { width: 800 });
+    const metricNode = envDoc.document.getElementById("metric");
+    Object.defineProperty(metricNode, "getAttribute", {
+      configurable: true,
+      value() {
+        throw Error("query failure");
+      },
+    });
+    let thrown = false;
+    try {
+      envEngine.get(metricNode);
+    } catch (error) {
+      thrown = error.message === "query failure";
+    }
+    assert.equal(thrown, true);
+    delete metricNode.getAttribute;
+    const initial = envDoc.document.createElement("span");
+    initial.style.width = "2rem";
+    assert.equal(computeElementStyle(initial).width, 32);
+    assert.equal(
+      envEngine.get(envDoc.document.getElementById("partial")).width,
+      88,
+    );
+    assertions += 2;
+    const computed = envEngine.get(envDoc.document.getElementById("metric"));
+    assert.equal(computed.width, 18);
+    assert.equal(computed.height, 80);
+    assert.deepEqual(computed.margin, [42, 42, 42, 42]);
+    assertions += 4;
+  } finally {
+    envDoc.window.happyDOM.abort();
+    otherDoc.window.happyDOM.abort();
+  }
+  console.log(
+    JSON.stringify({
+      pass: true,
+      states,
+      assertions,
+      mode: process.argv.includes("--ses") ? "ses" : "plain",
+    }),
+  );
+} finally {
+  f.window.happyDOM.abort();
+}