buninu-browser 0.5.1 → 0.7.0

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

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