buninu-browser 0.5.1 → 0.7.0

package/test/fixtures/video-controls-invalidation.js

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { LayoutEngine } from "../../lib/layout/text-layout.js";
+
+let layouts = 0;
+const originalLayout = LayoutEngine.prototype.layout;
+LayoutEngine.prototype.layout = function (...args) {
+  layouts++;
+  return Reflect.apply(originalLayout, this, args);
+};
+const errors = [];
+const renderer = await createPageRenderer({ reportError: error => errors.push(String(error)) });
+await import("../../vendor/ses/dist/ses.mjs");
+lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe",
+  localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+
+const source = controls => `<!doctype html>
+  <style id=sheet>body{margin:0;background:white}video{display:block;width:160px;height:90px}</style>
+  <video id=v ${controls ? "controls" : ""}></video>`;
+const load = async controls => {
+  await renderer.loadDocument({ url: "https://controls.test/", contentType: "text/html", source: source(controls) });
+  await renderer.whenLoaded();
+};
+const snapshot = async () => ({
+  pixels: new Bun.CryptoHasher("sha256").update(Buffer.from(await renderer.screenshot(), "base64")).digest("hex"),
+  geometry: await renderer.evaluate(`JSON.stringify((() => {
+    const rect = document.getElementById("v").getBoundingClientRect();
+    return [rect.x, rect.y, rect.width, rect.height];
+  })())`),
+});
+
+try {
+  renderer.setScripting("ses");
+  renderer.resize(240, 140, 1);
+  const references = [];
+  for (const controls of [false, true]) {
+    await load(controls);
+    references.push(await snapshot());
+  }
+  assert.notEqual(references[0].pixels, references[1].pixels, "native controls visibly change the video");
+  assert.equal(references[0].geometry, references[1].geometry, "native controls retain the video's box");
+
+  await load(false);
+  const transitions = [
+    ["add attribute", true, `document.getElementById("v").setAttribute("controls", "")`],
+    ["remove after style-only read", false, `
+      document.getElementById("v").removeAttribute("controls");
+      getComputedStyle(document.getElementById("v")).color;
+      document.getElementById("v").getBoundingClientRect()`],
+    ["add during full stylesheet pass", true, `
+      document.getElementById("sheet").textContent += " p { color:red }";
+      document.getElementById("v").setAttribute("controls", "")`, true],
+    ["remove after mutation delivery", false, `
+      document.getElementById("v").removeAttribute("controls");
+      new Promise(resolve => setTimeout(resolve, 0))`],
+    ["enable reflected property", true, `document.getElementById("v").controls = true`],
+    ["disable reflected property", false, `document.getElementById("v").controls = false`],
+  ];
+  for (const [name, controls, expression, changesSheet] of transitions) {
+    const before = layouts;
+    await renderer.evaluate(expression);
+    const actual = await snapshot();
+    assert.equal(actual.pixels, references[Number(controls)].pixels, name + " pixels match a fresh document");
+    assert.equal(actual.geometry, references[Number(controls)].geometry, name + " retains geometry");
+    if (!changesSheet) assert.equal(layouts - before, 0, name + " reuses layout");
+  }
+  assert.deepEqual(errors, []);
+  console.log("video controls paint invalidation passed");
+} finally {
+  renderer.dispose();
+}

package/test/fixtures/viewport-bounds.js

@@ -0,0 +1,148 @@
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+import { StyleEngine } from "../../lib/style/computed-style.js";
+
+const originalGet = StyleEngine.prototype.get;
+let counting = false, styleReads = 0, checks = 0;
+StyleEngine.prototype.get = function (element) {
+  if (counting) styleReads++;
+  return originalGet.call(this, element);
+};
+
+await import("../../vendor/ses/dist/ses.mjs");
+lockdown({ errorTaming: "safe", overrideTaming: "severe", consoleTaming: "unsafe",
+  localeTaming: "unsafe", stackFiltering: "concise", reporting: "none" });
+
+function check(condition, message) {
+  if (!condition) throw new Error(message);
+  checks++;
+}
+function equal(actual, expected, message) {
+  check(Bun.deepEquals(actual, expected, true), `${message}: ${JSON.stringify(actual)}`);
+}
+const errors = [];
+const renderer = await createPageRenderer({ embedded: true,
+  reportError: error => errors.push(String(error)) });
+const evaluate = source => renderer.evaluate(source);
+async function countsStyles(source) {
+  styleReads = 0;
+  counting = true;
+  try { return await evaluate(source); }
+  finally { counting = false; }
+}
+const settle = () => Bun.sleep(20);
+
+try {
+  renderer.setScripting("ses");
+  renderer.resize(260, 180, 1);
+  await renderer.loadDocument({ url: "https://bounds.test/", contentType: "text/html", source: `
+    <!doctype html><style>
+      body { margin:0; min-height:1000px; min-width:500px; font:14px sans-serif }
+      #hidden { display:none; --tone:rgb(12,34,56); color:var(--tone) }
+      #leaf { display:inline-block; width:7ch; height:28px; font-family:monospace }
+      #ownNone { display:none }
+      #contents, #emptyContents { display:contents }
+      #fixed { position:fixed; left:140px; top:8px; width:90px; height:55px; background:rgb(0,128,0) }
+      #scroller { width:120px; height:55px; overflow:auto; border:3px solid blue; padding:2px }
+      #inner { width:300px; height:220px }
+      #button { width:80px; height:30px }
+    </style>
+    <div id="hidden"><section id="chain"><span id="leaf">hidden</span></section></div>
+    <div id="ownNone">none</div><div id="emptyContents"></div><span id="emptyInline"></span>
+    <div id="contents"><span id="inline">inline text</span></div>
+    <svg id="svg" width="28" height="24"><path id="path" d="M1 1h20v16H1z" fill="red"/></svg>
+    <div id="fixed"></div><div id="scroller"><div id="inner"></div></div>
+    <button id="button">hit</button>` });
+  await renderer.whenLoaded();
+  await evaluate(`
+    window.leaf=document.getElementById('leaf');
+    window.detached=document.createElement('div');
+    window.rect=e=>{const r=e.getBoundingClientRect();return[r.x,r.y,r.width,r.height]};
+    window.sizes=e=>[...rect(e),e.offsetWidth,e.offsetHeight,e.clientWidth,e.clientHeight,
+      e.scrollWidth,e.scrollHeight,e.scrollLeft,e.scrollTop];
+    window.clicks=0;document.getElementById('button').onclick=()=>clicks++;
+    window.scrolls=0;document.getElementById('scroller').onscroll=()=>scrolls++;
+  `);
+
+  const empty = await countsStyles(`(() => {
+    const elements=['leaf','ownNone','emptyContents','emptyInline','path'].map(id=>document.getElementById(id));
+    elements.push(detached);
+    const range=document.createRange();range.selectNodeContents(leaf);
+    return [...elements.map(sizes),rect({getBoundingClientRect:()=>range.getBoundingClientRect()})];
+  })()`);
+  check(empty.every(values => values.every(value => value === 0)), "boxless geometry is zero");
+  equal(styleReads, 0, "boxless bounds and sizes do not materialize hidden styles");
+  equal(await countsStyles(`(() => {
+    leaf.scrollTo(20,30);leaf.scrollTop=12;leaf.scrollLeft=3;
+    return [leaf.scrollLeft,leaf.scrollTop];
+  })()`), [0, 0], "hidden scroll setters remain ineffective");
+  equal(styleReads, 0, "hidden scroll setters do not read styles");
+
+  const css = await countsStyles(`(() => {
+    const s=getComputedStyle(leaf);return[s.color,s.width,s.getPropertyValue('--tone')];
+  })()`);
+  equal([css[0], css[2]], ["rgba(12, 34, 56, 1)", "rgb(12,34,56)"], "explicit hidden CSS still resolves");
+  check(css[1].endsWith("px") && Number.parseFloat(css[1]) > 0, "hidden ch width resolves to positive pixels");
+  check(styleReads > 0, "explicit CSS materializes the deferred style");
+  await evaluate(`leaf.style.width='81px';leaf.style.height='29px';leaf.style.color='rgb(9,8,7)';
+    document.getElementById('hidden').style.setProperty('--tone','purple')`);
+  equal(await evaluate(`(() => {const s=getComputedStyle(leaf);
+    return[s.width,s.height,s.color,s.getPropertyValue('--tone')];})()`),
+    ["81px", "29px", "rgba(9, 8, 7, 1)", "purple"], "hidden CSS updates remain live");
+
+  const rendered = await evaluate(`['inline','contents','svg'].map(id=>rect(document.getElementById(id)))`);
+  check(rendered[0][2] > 0 && rendered[1][2] > 0, "inline and display-contents text retain bounds");
+  equal(rendered[2].slice(2), [28, 24], "SVG retains its rendered dimensions");
+
+  await evaluate(`window.resizeWidths=[];window.intersections=[];
+    window.ro=new ResizeObserver(es=>resizeWidths.push(es[0].contentRect.width));ro.observe(leaf);
+    window.io=new IntersectionObserver(es=>intersections.push(es[0].isIntersecting));io.observe(leaf)`);
+  await settle();
+  equal(await evaluate(`[resizeWidths.length,intersections.at(-1)]`), [0, false], "initial zero size does not notify ResizeObserver");
+  await evaluate(`document.getElementById('hidden').style.display='block'`);
+  await settle();
+  equal(await evaluate(`[resizeWidths.at(-1),intersections.at(-1)]`), [81, true], "reveal updates observer geometry");
+  await evaluate(`document.getElementById('hidden').style.display='none'`);
+  await settle();
+  equal(await evaluate(`[resizeWidths.at(-1),intersections.at(-1)]`), [0, false], "hiding updates observer geometry");
+
+  await evaluate(`document.getElementById('fixed').append(leaf)`);
+  const fixed = await evaluate(`rect(leaf)`);
+  renderer.scrollTo(60, 130);
+  equal(await evaluate(`rect(leaf)`), fixed, "a fixed ancestor cancels viewport scrolling");
+  renderer.scrollTo(0, 0);
+  await evaluate(`document.getElementById('inner').append(leaf)`);
+  const beforeScroll = await evaluate(`rect(leaf)`);
+  await evaluate(`document.getElementById('scroller').scrollTo(60,70)`);
+  await settle();
+  const afterScroll = await evaluate(`rect(leaf)`);
+  equal(afterScroll, [beforeScroll[0] - 60, beforeScroll[1] - 70, beforeScroll[2], beforeScroll[3]],
+    "scroll-container offsets remain part of viewport bounds");
+  check(await evaluate("scrolls > 0"), "scroll event still fires");
+  await evaluate(`leaf.style.visibility='hidden'`);
+  equal(await evaluate(`rect(leaf)`), afterScroll, "visibility hidden retains geometry");
+  await evaluate(`leaf.style.visibility='visible';leaf.style.transform='translate(8px,5px)'`);
+  const translated = await evaluate(`rect(leaf)`);
+  equal(translated, [afterScroll[0] + 8, afterScroll[1] + 5, afterScroll[2], afterScroll[3]],
+    "translated coordinates remain intact");
+
+  await evaluate(`leaf.remove()`);
+  equal(await countsStyles("sizes(leaf)"), Array(12).fill(0), "detached geometry is zero");
+  equal(styleReads, 0, "detached geometry does not read stale styles");
+  await evaluate(`document.getElementById('chain').append(leaf);window.destroyed=document.getElementById('chain');
+    document.getElementById('hidden').innerHTML=''`);
+  equal(await countsStyles("[...sizes(leaf),...sizes(destroyed)]"), Array(24).fill(0), "removed subtree has no geometry");
+  equal(styleReads, 0, "removed subtree does not materialize styles");
+
+  renderer.resize(220, 160, 2);
+  const image = await renderer.screenshot({ format: "rgba" });
+  equal([image.width, image.height], [440, 320], "DPR scales the raster");
+  const pixel = (100 * image.width + 400) * 4;
+  equal([...image.pixels.slice(pixel, pixel + 4)], [0, 128, 0, 255], "fixed box still paints at the expected viewport position");
+  const button = await evaluate("rect(document.getElementById('button'))");
+  renderer.click(button[0] + 10, button[1] + 10);
+  equal(await evaluate("clicks"), 1, "visible geometry still targets pointer activation");
+  equal(errors, [], "renderer reports no errors");
+  console.log(JSON.stringify({ passed: true, checks }));
+} finally {
+  renderer.dispose();
+}

package/test/font-loading.test.js

@@ -72,6 +72,83 @@ test("font sources try local/fetch alternatives and pending requests abort on do
   expect(aborted).toBe(1);
 });
 
+test("font indexes preserve subset order, case-insensitive families, and changed face lists", async () => {
+  const { CanvasKit, builtinTypefaces, fontCollection } = await loadGraphics();
+  const local = { sources: [{ local: builtinTypefaces[0].family }] };
+  const fonts = new DocumentFonts({ CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection,
+    fetch: () => { throw new Error("local faces must not fetch"); } });
+  try {
+    const latin = face("Indexed", 400, [[0, 127]], local);
+    const capitals = face("iNDEXED", 400, [[65, 90]], local);
+    const cjk = face("Indexed", 400, [[0x4e00, 0x9fff]], local);
+    fonts.update([latin, capitals, cjk], [run("Aa中", ["INDEXED"])]);
+    await fonts.ready();
+    const latinAlias = fonts.resolve("indexed", 400, "normal", 97)[0];
+    const capitalsAlias = fonts.resolve("INDEXED", 400, "normal", 65)[0];
+    const cjkAlias = fonts.resolve("Indexed", 400, "normal", 0x4e2d)[0];
+    expect(new Set([latinAlias, capitalsAlias, cjkAlias]).size).toBe(3);
+    expect(fonts.resolve("iNdExEd", 400, "normal", 65)).toEqual([capitalsAlias, latinAlias]);
+    expect(fonts.resolve("indexed")).toEqual([cjkAlias, capitalsAlias, latinAlias]);
+
+    fonts.setFaces([cjk, capitals, latin]);
+    expect(fonts.resolve("Indexed", 400, "normal", 65)).toEqual([latinAlias, capitalsAlias]);
+    fonts.setFaces([cjk]);
+    expect(fonts.resolve("Indexed", 400, "normal", 65)).toEqual([]);
+    expect(fonts.resolve("Indexed", 400, "normal", 0x4e2d)).toEqual([cjkAlias]);
+    fonts.setFaces([]);
+    expect(fonts.hasUnicodeRanges).toBe(false);
+    expect(fonts.resolve("Indexed")).toEqual([]);
+    // Equivalent new descriptor objects still refer to the existing record.
+    fonts.setFaces([structuredClone(latin)]);
+    expect(fonts.resolve("Indexed", 400, "normal", 65)).toEqual([latinAlias]);
+    const returned = fonts.resolve("Indexed"); returned.length = 0;
+    expect(fonts.resolve("Indexed")).toEqual([latinAlias]);
+
+    // setFaces must also notice edits to an existing descriptor/array.
+    const mutable = [latin];
+    fonts.setFaces(mutable);
+    latin.family = "Renamed";
+    latin.unicodeRanges = [[0x400, 0x4ff]];
+    fonts.update(mutable, [run("Ж", ["renamed"])]);
+    await fonts.ready();
+    expect(fonts.resolve("Indexed")).toEqual([]);
+    expect(fonts.resolve("Renamed", 400, "normal", 65)).toEqual([]);
+    expect(fonts.resolve("Renamed", 400, "normal", 0x416)).toHaveLength(1);
+  } finally { fonts.dispose(); }
+});
+
+test("ranked faces observe aliases loaded later and changed font weights/styles", async () => {
+  const { CanvasKit, builtinTypefaces, fontCollection } = await loadGraphics();
+  const bytes = await Bun.file(new URL("../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
+  let finish;
+  const response = new Promise(resolve => { finish = resolve; });
+  const fonts = new DocumentFonts({ CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection,
+    fetch: () => response });
+  try {
+    const regular = face("Delayed", 400, [[0, 127]]);
+    const medium = face("Delayed", 500, [[0, 127]]);
+    const italic = face("Delayed", 400, [[0, 127]], { style: "italic" });
+    fonts.update([regular, medium, italic], [run("a", ["Delayed"]), run("a", ["Delayed"], 500), run("a", ["Delayed"], 400, "italic")]);
+    expect(fonts.resolve("Delayed", 400, "normal", 65)).toEqual([]);
+    expect(fonts.resolve("Delayed", 450, "normal", 65)).toEqual([]);
+    expect(fonts.resolve("Delayed", 400, "italic", 65)).toEqual([]);
+    finish({ status: 200, body: bytes });
+    await fonts.ready();
+    const regularAlias = fonts.resolve("Delayed", 400, "normal", 65)[0];
+    const mediumAlias = fonts.resolve("Delayed", 500, "normal", 65)[0];
+    const italicAlias = fonts.resolve("Delayed", 400, "italic", 65)[0];
+    expect(new Set([regularAlias, mediumAlias, italicAlias]).size).toBe(3);
+    expect(fonts.resolve("Delayed", 450, "normal", 65)).toEqual([mediumAlias, regularAlias, italicAlias]);
+    expect(fonts.resolve("Delayed", 400, "italic", 65)).toEqual([italicAlias, regularAlias, mediumAlias]);
+    fonts.setFaces([medium]);
+    expect(fonts.resolve("Delayed", 400, "normal", 65)).toEqual([mediumAlias]);
+    // More style combinations than the bounded rank cache can hold must not
+    // change either a new lookup or one evicted earlier.
+    for (let weight = 1; weight <= 160; weight++) expect(fonts.resolve("Delayed", weight, "normal", 65)).toEqual([mediumAlias]);
+    expect(fonts.resolve("Delayed", 450, "normal", 65)).toEqual([mediumAlias]);
+  } finally { fonts.dispose(); }
+});
+
 test("loaded web font updates geometry, respects Unicode ranges, and resets on navigation", async () => {
   const bytes = await Bun.file(new URL("../usr/share/fonts/DejaVuSansMono.ttf", import.meta.url)).bytes();
   let finish;

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

@@ -0,0 +1,60 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+import { StyleEngine } from "../lib/style/computed-style.js";
+
+test("computed font-metric dependencies include resolved variables, pseudos and root lengths", () => {
+  const cases = [
+    ["#box{font-size:20px;line-height:normal;width:10em;height:2rem}", false],
+    ["#box{--unused:10ch;width:20px}", false],
+    ["#box{width:10ch}", true],
+    ["body{--size:4ch}#box{width:calc(var(--size) + 2px)}", true],
+    ["#box{width:var(--missing,3ch)}", true],
+    ["#box::before{content:'x';width:2ch}", true],
+    ["html{font-size:2ch}#box{width:10rem}", true],
+  ];
+  for (const [sheet, dependent] of cases) {
+    const { document, window } = parseHTMLDocument('<div id="box">text</div>');
+    try {
+      const engine = new StyleEngine({ measureText: () => 7 }).compute(document, [sheet]);
+      expect(engine.usesFontMetrics).toBe(dependent);
+      engine.compute(document, [sheet], {}, new Set(), new Set([document.getElementById("box")]));
+      expect(engine.usesFontMetrics).toBe(dependent);
+    } finally { window.happyDOM.abort(); }
+  }
+});
+
+test("font-metric dependencies survive incremental changes but reset for a new document", () => {
+  const first = parseHTMLDocument('<div id="box" style="width:2ch">first</div>');
+  const second = parseHTMLDocument('<div>second</div>');
+  try {
+    const engine = new StyleEngine({ measureText: () => 8 }).compute(first.document);
+    expect(engine.usesFontMetrics).toBe(true);
+    first.document.getElementById("box").style.width = "20px";
+    engine.compute(first.document, [], {}, new Set(), new Set([first.document.getElementById("box")]));
+    expect(engine.usesFontMetrics).toBe(true);
+    engine.compute(second.document);
+    expect(engine.usesFontMetrics).toBe(false);
+  } finally { first.window.happyDOM.abort(); second.window.happyDOM.abort(); }
+});
+
+test("font completion refreshes geometry with pixel parity while avoiding unnecessary cascades", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/font-metrics-invalidation.js", import.meta.url).pathname], {
+    stdout: "pipe", stderr: "pipe",
+  });
+  const [out, error, code] = await Promise.all([
+    new Response(child.stdout).text(), new Response(child.stderr).text(), child.exited,
+  ]);
+  expect({ code, error }).toEqual({ code: 0, error: "" });
+  expect(out).toContain("font metrics invalidation integration passed");
+}, 30_000);
+
+test("font definition edits refresh geometry and pixels without unnecessary full cascades", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/font-definition-invalidation.js", import.meta.url).pathname], {
+    stdout: "pipe", stderr: "pipe",
+  });
+  const [out, error, code] = await Promise.all([
+    new Response(child.stdout).text(), new Response(child.stderr).text(), child.exited,
+  ]);
+  expect({ code, error }).toEqual({ code: 0, error: "" });
+  expect(out).toContain("font definition invalidation integration passed");
+}, 30_000);

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

@@ -0,0 +1,191 @@
+import { expect, test } from 'bun:test';
+import { parseHTMLDocument } from '../lib/happy-dom/parser.js';
+import { StyleEngine } from '../lib/style/computed-style.js';
+
+function fixture(source, sheets = [], options = {}) {
+  const parsed = parseHTMLDocument(source);
+  const viewport = { width:800, height:600 };
+  const engine = new StyleEngine(options).compute(parsed.document, sheets, viewport);
+  return { ...parsed, sheets, options, viewport, engine, get:id => parsed.document.getElementById(id) };
+}
+
+function full(f) {
+  f.engine.compute(f.document, f.sheets, f.viewport);
+  expect(f.engine.incremental).toBe(false);
+  expect(f.engine.restyled).toBe(f.document.querySelectorAll('*').length);
+  const reference = new StyleEngine(f.options).compute(f.document, f.sheets, f.viewport);
+  for (const element of f.document.querySelectorAll('*')) {
+    expect(f.engine.get(element)).toEqual(reference.get(element));
+    expect(f.engine.customPropertiesOf(element)).toEqual(reference.customPropertiesOf(element));
+    for (const pseudo of ['before', 'after']) expect(f.engine.getPseudo(element, pseudo)).toEqual(reference.getPseudo(element, pseudo));
+  }
+}
+
+test('full cascades retain equal style, custom property and pseudo identities', () => {
+  const f = fixture('<div id="parent" style="--tone:red"><span id="child">text</span></div>', [
+    '#child {color:var(--tone)} #child::before {content:"before";color:var(--tone)}',
+  ]);
+  try {
+    const child = f.get('child'), style = f.engine.get(child);
+    const custom = f.engine.customPropertiesOf(child), pseudo = f.engine.getPseudo(child, 'before');
+    f.sheets.push('.unmatched { width:20px }');
+    full(f);
+    expect(f.engine.get(child)).toBe(style);
+    expect(f.engine.customPropertiesOf(child)).toBe(custom);
+    expect(f.engine.getPseudo(child, 'before')).toBe(pseudo);
+    f.get('parent').style.setProperty('--tone', 'blue');
+    full(f);
+    expect(f.engine.get(child)).not.toBe(style);
+    expect(f.engine.customPropertiesOf(child)).not.toBe(custom);
+    expect(f.engine.getPseudo(child, 'before')).not.toBe(pseudo);
+    expect(style.color).toBe('rgba(255, 0, 0, 1)');
+    expect(custom.get('--tone')).toBe('red');
+    expect(pseudo.color).toBe('rgba(255, 0, 0, 1)');
+    f.sheets.push('#child::before {content:none} #child::after {content:"after";width:inherit}');
+    full(f);
+    expect(f.engine.getPseudo(child, 'before')).toBeNull();
+    expect(f.engine.getPseudo(child, 'after').content).toBe('after');
+  } finally { f.window.happyDOM.abort(); }
+});
+
+for (const incremental of [false, true]) {
+  test(`style identity comparison preserves signed-zero and NaN decisions (${incremental ? 'incremental' : 'full'})`, () => {
+    const f = fixture('<div id="zero" style="margin:0px">zero</div><div id="nan" style="width:calc(1e309 * 0px)">non-finite</div>');
+    try {
+      const zero = f.get('zero'), nan = f.get('nan');
+      const zeroStyle = f.engine.get(zero), nanStyle = f.engine.get(nan);
+      expect(Number.isNaN(nanStyle.width.px)).toBe(true);
+      expect(Number.isNaN(nanStyle.width.percent)).toBe(true);
+      zero.setAttribute('style', 'margin:-0px');
+      const fresh = new StyleEngine().compute(f.document, f.sheets);
+      expect(Object.is(fresh.get(zero).margin[0], -0)).toBe(true);
+      f.engine.compute(f.document, f.sheets, f.viewport, incremental ? new Set([zero, nan]) : null);
+      expect(f.engine.get(zero)).toBe(zeroStyle);
+      expect(f.engine.get(nan)).not.toBe(nanStyle);
+      expect(Number.isNaN(f.engine.get(nan).width.px)).toBe(true);
+    } finally { f.window.happyDOM.abort(); }
+  });
+}
+
+test('full cascades recompute media, viewport, root rem and font metric inputs', () => {
+  let advance = 7;
+  const f = fixture('<html style="font-size:2rem"><body><div id="parent" style="width:10vw;direction:rtl"><span id="child" style="font-size:50%;width:2rem;margin-inline-start:3px">text</span><i id="metric" style="width:10ch">metric</i></div></body></html>', [
+    '@media(min-width:1000px) { #child {padding:7px} }',
+  ], { measureText:() => advance });
+  try {
+    const oldMetric = f.engine.get(f.get('metric'));
+    full(f);
+    expect(f.engine.get(f.get('metric'))).toBe(oldMetric);
+    advance = 11;
+    f.viewport = { width:1200, height:700 };
+    f.document.documentElement.style.fontSize = '1.5rem';
+    full(f);
+    expect(f.engine.get(f.get('parent')).width).toBe(120);
+    expect(f.engine.get(f.get('child'))).toMatchObject({ width:48, fontSize:12, padding:[7,7,7,7], margin:[0,3,0,0] });
+    expect(f.engine.get(f.get('metric')).width).toBe(110);
+    expect(f.engine.get(f.get('metric'))).not.toBe(oldMetric);
+    expect(f.engine.usesFontMetrics).toBe(true);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('retaining a full-pass style still refreshes explicit inheritance dependencies', () => {
+  const f = fixture('<div id="parent" style="width:100px"><span id="child" style="width:100px">text</span></div>');
+  try {
+    const original = f.engine.get(f.get('child'));
+    f.get('child').style.width = 'inherit';
+    full(f);
+    expect(f.engine.get(f.get('child'))).toBe(original);
+    f.get('parent').style.width = '200px';
+    f.engine.compute(f.document, f.sheets, f.viewport, new Set(), new Set([f.get('parent')]));
+    expect(f.engine.get(f.get('child')).width).toBe(200);
+    const inherited = f.engine.get(f.get('child'));
+    f.get('child').style.width = '200px';
+    full(f);
+    expect(f.engine.get(f.get('child'))).toBe(inherited);
+    f.get('parent').style.width = '300px';
+    f.engine.compute(f.document, f.sheets, f.viewport, new Set(), new Set([f.get('parent')]));
+    expect(f.engine.restyled).toBe(1);
+    expect(f.engine.get(f.get('child')).width).toBe(200);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('full-pass maps drop detached nodes and do not restore them on later insertion', () => {
+  const f = fixture('<div id="parent"><span id="child" style="width:41px;--private:red">text</span></div>', ['#child::before {content:"x"}']);
+  try {
+    const child = f.get('child'), old = f.engine.get(child);
+    child.remove();
+    full(f);
+    expect(f.engine.get(child).width).toBe('auto');
+    expect(f.engine.customPropertiesOf(child).size).toBe(0);
+    expect(f.engine.getPseudo(child, 'before')).toBeNull();
+    f.get('parent').appendChild(child);
+    f.engine.compute(f.document, f.sheets, f.viewport, new Set([child]));
+    expect(f.engine.get(child).width).toBe(41);
+    expect(f.engine.get(child)).not.toBe(old);
+    f.document.documentElement.remove();
+    full(f);
+    expect(f.engine.get(child).width).toBe('auto');
+    expect(f.engine.getPseudo(child, 'before')).toBeNull();
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('a new document cannot reuse adopted nodes from the previous document', () => {
+  const f = fixture('<p id="child" style="width:41px;--private:red">text</p>', ['#child::before {content:"x"}']);
+  const other = parseHTMLDocument('<body></body>');
+  try {
+    const child = f.get('child'), oldRoot = f.document.documentElement;
+    const old = [f.engine.get(child), f.engine.customPropertiesOf(child), f.engine.getPseudo(child, 'before')];
+    other.document.body.appendChild(child);
+    f.engine.compute(other.document, f.sheets);
+    const current = [f.engine.get(child), f.engine.customPropertiesOf(child), f.engine.getPseudo(child, 'before')];
+    for (let i = 0; i < old.length; i++) {
+      expect(current[i]).toEqual(old[i]);
+      expect(current[i]).not.toBe(old[i]);
+    }
+    expect(f.engine.get(oldRoot).display).toBe('inline');
+  } finally { f.window.happyDOM.abort(); other.window.happyDOM.abort(); }
+});
+
+test('a callback starting another document compute cannot access the outer fallback', () => {
+  const first = parseHTMLDocument('<html style="width:1ch"><body><p style="color:red">moved</p></body></html>');
+  const second = parseHTMLDocument('<body></body>');
+  try {
+    let trigger = false, nestedStyle;
+    const child = first.document.querySelector('p');
+    const engine = new StyleEngine({ measureText() {
+      if (trigger) {
+        trigger = false;
+        second.document.body.appendChild(child);
+        engine.compute(second.document);
+        nestedStyle = engine.get(child);
+      }
+      return 8;
+    } });
+    engine.compute(first.document);
+    const old = engine.get(child);
+    trigger = true;
+    engine.compute(first.document);
+    expect(nestedStyle).toEqual(old);
+    expect(nestedStyle).not.toBe(old);
+  } finally { first.window.happyDOM.abort(); second.window.happyDOM.abort(); }
+});
+
+test('a failed full traversal cannot retain fallback maps for a later incremental pass', () => {
+  const f = fixture('<div id="parent"><span id="child" style="width:41px">text</span></div>');
+  try {
+    const child = f.get('child'), old = f.engine.get(child);
+    Object.defineProperty(f.get('parent'), 'getAttribute', { configurable:true, value() { throw Error('injected failure'); } });
+    expect(() => f.engine.compute(f.document, f.sheets)).toThrow('injected failure');
+    delete f.get('parent').getAttribute;
+    f.engine.compute(f.document, f.sheets, f.viewport, new Set([f.get('parent')]));
+    expect(f.engine.get(child).width).toBe(41);
+    expect(f.engine.get(child)).not.toBe(old);
+    full(f);
+  } finally { f.window.happyDOM.abort(); }
+});
+
+test('full identity reuse preserves render and layout caches under SES', async () => {
+  const child = Bun.spawn([process.execPath, new URL('./fixtures/full-style-identity.js', import.meta.url).pathname], { 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:'' });
+}, 15_000);

package/test/hidden-style-lazy.test.js

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test";
+
+async function fixture(name, args = []) {
+  const child = Bun.spawn(
+    [
+      process.execPath,
+      new URL(`./fixtures/${name}.js`, import.meta.url).pathname,
+      ...args,
+    ],
+    { stdout: "pipe", stderr: "pipe" },
+  );
+  const [exit, stdout, stderr] = await Promise.all([
+    child.exited,
+    new Response(child.stdout).text(),
+    new Response(child.stderr).text(),
+  ]);
+  expect(stderr).toBe("");
+  expect(exit).toBe(0);
+  expect(JSON.parse(stdout).pass).toBe(true);
+}
+for (const args of [[], ["--ses"]])
+  test(
+    `deferred hidden styles equal eager styles ${args.length ? "under SES" : "normally"}`,
+    () => fixture("hidden-style-engine", args),
+    20_000,
+  );
+test(
+  "hidden updates and reveals preserve pixels, geometry and resource discovery",
+  () => fixture("hidden-style-renderer"),
+  60_000,
+);

package/test/hidden-style-reentry.test.js

@@ -0,0 +1,20 @@
+import { expect, test } from "bun:test";
+for (const args of [[], ["--ses"]])
+  test(`hidden style measurement callbacks cannot restart unfinished chains ${args.length ? "under SES" : "normally"}`, async () => {
+    const child = Bun.spawn(
+      [
+        process.execPath,
+        new URL("./fixtures/hidden-style-reentry.js", import.meta.url).pathname,
+        ...args,
+      ],
+      { stdout: "pipe", stderr: "pipe" },
+    );
+    const [exit, stdout, stderr] = await Promise.all([
+      child.exited,
+      new Response(child.stdout).text(),
+      new Response(child.stderr).text(),
+    ]);
+    expect(stderr).toBe("");
+    expect(exit).toBe(0);
+    expect(JSON.parse(stdout).pass).toBe(true);
+  }, 20_000);