buninu-browser 0.5.1 → 0.7.0

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

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

@@ -0,0 +1,232 @@
+import assert from "node:assert/strict";
+const root = new URL("../../", import.meta.url).pathname.replace(/\/$/, "");
+if (process.argv.includes("--ses")) {
+  await import(root + "/vendor/ses/dist/ses.mjs");
+  lockdown({
+    errorTaming: "safe",
+    overrideTaming: "severe",
+    consoleTaming: "unsafe",
+    localeTaming: "unsafe",
+    stackFiltering: "concise",
+    reporting: "none",
+  });
+}
+const { parseHTMLDocument } = await import(root + "/lib/happy-dom/parser.js");
+const { StyleEngine, computeElementStyle } = await import(
+  root + "/lib/style/computed-style.js"
+);
+let assertions = 0;
+function snapshot(engine, node) {
+  return {
+    width: engine.get(node).width,
+    fontSize: engine.get(node).fontSize,
+    custom: engine.customPropertiesOf(node).get("--x") ?? null,
+    pseudo: engine.getPseudo(node, "before")?.width ?? null,
+  };
+}
+function scenario(deferHidden, kind, warm = false) {
+  const f = parseHTMLDocument(
+    '<div id="hide" style="display:' +
+      (warm ? "block" : "none") +
+      '"><section id="parent" style="' +
+      (kind === "descendant" || kind === "parentpseudo"
+        ? "width:1ch;font-size:24px"
+        : "") +
+      '"><span id="target" style="font-size:30px;--x:value;width:1ch"></span></section></div>',
+  );
+  const target = f.document.getElementById("target"),
+    parent = f.document.getElementById("parent");
+  let calls = 0,
+    inner = [];
+  const sheets =
+    kind === "pseudo"
+      ? ['#target::before{content:"b";width:1ch}']
+      : kind === "parentpseudo"
+        ? ['#parent::before{content:"b";width:1ch}']
+        : [];
+  const engine = new StyleEngine({
+    deferHidden,
+    measureText() {
+      if (++calls > 5) throw Error("reentry was not bounded");
+      inner.push({
+        target: snapshot(engine, target),
+        parent: snapshot(engine, parent),
+      });
+      return kind === "pseudo" ? engine.get(target).fontSize : 7;
+    },
+  });
+  try {
+    engine.compute(f.document, sheets);
+    if (warm) {
+      f.document.getElementById("hide").style.display = "none";
+      target.style.fontSize = "40px";
+      calls = 0;
+      inner = [];
+      engine.compute(
+        f.document,
+        sheets,
+        {},
+        new Set([f.document.getElementById("hide")]),
+      );
+    }
+    const result = {
+      target: snapshot(engine, target),
+      parent: snapshot(engine, parent),
+      calls,
+      inner,
+    };
+    return result;
+  } finally {
+    f.window.happyDOM.abort();
+  }
+}
+for (const kind of ["same", "descendant", "pseudo", "parentpseudo"])
+  for (const warm of [false, true]) {
+    const eager = scenario(false, kind, warm),
+      lazy = scenario(true, kind, warm);
+    assert.deepEqual(
+      lazy,
+      eager,
+      kind + " reentrant values match eager snapshots",
+    );
+    assert.equal(
+      lazy.calls,
+      kind === "same" ? 1 : kind === "parentpseudo" ? 3 : 2,
+    );
+    assertions += 2;
+  }
+// Ownership begins before ancestor/key extraction as well as measurements.
+for (const ancestor of [false, true]) {
+  const f = parseHTMLDocument(
+    '<div id="hide" style="display:none"><span id="target" style="width:17px"></span></div>',
+  );
+  const target = f.document.getElementById("target"),
+    hooked = ancestor ? f.document.getElementById("hide") : target;
+  const engine = new StyleEngine({ deferHidden: true });
+  engine.compute(f.document);
+  let calls = 0,
+    inner = [];
+  const getAttribute = hooked.getAttribute;
+  Object.defineProperty(hooked, "getAttribute", {
+    configurable: true,
+    value(name) {
+      if (name === "id") {
+        if (++calls > 3) throw Error("key reentry was not bounded");
+        inner.push(engine.get(target).width);
+      }
+      return getAttribute.call(this, name);
+    },
+  });
+  try {
+    assert.equal(engine.get(target).width, 17);
+    assert.equal(calls, 1);
+    assert.deepEqual(inner, ["auto"]);
+    assertions += 3;
+  } finally {
+    delete hooked.getAttribute;
+    f.window.happyDOM.abort();
+  }
+}
+// A failure in a pseudo occurs after the principal values were stored. They
+// must not make the next query mistake that failed node for a complete result.
+{
+  const f = parseHTMLDocument(
+    '<html style="font-size:21px"><body><div id="hide" style="display:none"><span id="target" style="width:1ch"></span></div></body></html>',
+  );
+  const target = f.document.getElementById("target");
+  let calls = 0,
+    fail = true;
+  const engine = new StyleEngine({
+    deferHidden: true,
+    measureText() {
+      calls++;
+      if (fail && calls === 2)
+        Object.defineProperty(target, "matches", {
+          configurable: true,
+          get() {
+            throw Error("pseudo failure");
+          },
+        });
+      return 7;
+    },
+  });
+  try {
+    engine.compute(f.document, [
+      '#target::before{content:"b";width:1ch} #hide #target::after{content:"a"}',
+    ]);
+    let thrown = false;
+    try {
+      engine.get(target);
+    } catch (error) {
+      thrown = error.message === "pseudo failure";
+    }
+    assert.equal(thrown, true);
+    assert.equal(calls, 2);
+    delete target.matches;
+    fail = false;
+    const initial = f.document.createElement("i");
+    initial.style.width = "2rem";
+    assert.equal(computeElementStyle(initial).width, 32);
+    assert.equal(engine.get(target).width, 7);
+    assert.equal(engine.getPseudo(target, "before").width, 7);
+    assert.equal(engine.getPseudo(target, "after").content, "a");
+    assert.equal(calls, 4);
+    assertions += 7;
+  } finally {
+    f.window.happyDOM.abort();
+  }
+}
+// The guard belongs to an ensured generation, not the engine globally. A
+// callback may start another document or another compute of the same document.
+for (const sameDocument of [false, true]) {
+  const first = parseHTMLDocument(
+    '<div style="display:none;color:red"><span id="target" style="width:1ch;height:10vw"></span></div>',
+  );
+  const second = sameDocument
+    ? first
+    : parseHTMLDocument(
+        '<div style="display:none;color:blue"><span id="target" style="width:1ch;height:10vw"></span></div>',
+      );
+  const oldTarget = first.document.getElementById("target"),
+    newTarget = second.document.getElementById("target");
+  let calls = 0,
+    nested = null;
+  const engine = new StyleEngine({
+    deferHidden: true,
+    measureText() {
+      calls++;
+      if (calls === 1) {
+        engine.compute(second.document, [], { width: 400 });
+        nested = engine.get(newTarget);
+      }
+      return 7;
+    },
+  });
+  try {
+    engine.compute(first.document, [], { width: 800 });
+    engine.get(oldTarget);
+    assert.equal(calls, 2);
+    assert.equal(nested.width, 7);
+    assert.equal(nested.height, 40);
+    assert.equal(engine.get(newTarget), nested);
+    assert.equal(
+      engine.get(newTarget).color,
+      sameDocument ? "rgba(255, 0, 0, 1)" : "rgba(0, 0, 255, 1)",
+    );
+    assertions += 5;
+    if (!sameDocument) {
+      assert.equal(engine.get(oldTarget).width, "auto");
+      assertions++;
+    }
+  } finally {
+    first.window.happyDOM.abort();
+    if (!sameDocument) second.window.happyDOM.abort();
+  }
+}
+console.log(
+  JSON.stringify({
+    pass: true,
+    assertions,
+    mode: process.argv.includes("--ses") ? "ses" : "plain",
+  }),
+);

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

@@ -0,0 +1,203 @@
+import assert from "node:assert/strict";
+const root = new URL("../../", import.meta.url).pathname.replace(/\/$/, ""),
+  mode = "ses";
+const { createPageRenderer } = await import(
+  root + "/lib/renderer/page-renderer.js"
+);
+const errors = [],
+  requests = [];
+const png = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+a6XQAAAAASUVORK5CYII=",
+  "base64",
+);
+const mono = await Bun.file(
+  root + "/usr/share/fonts/DejaVuSansMono.ttf",
+).bytes();
+const sans = await Bun.file(
+  root + "/usr/share/fonts/Roboto-Regular.ttf",
+).bytes();
+const options = {
+  reportError: (e) => errors.push(String(e)),
+  pageFetch: async ({ url }) => {
+    requests.push(url);
+    return {
+      status: 200,
+      body: url.endsWith("mono.ttf")
+        ? mono
+        : url.endsWith("sans.ttf")
+          ? sans
+          : png,
+    };
+  },
+  fetchResource: async (url) => {
+    requests.push(url);
+    return { ok: true, status: 200, url, body: png };
+  },
+};
+const renderer = await createPageRenderer(options);
+if (mode === "ses") {
+  await import(root + "/vendor/ses/dist/ses.mjs");
+  lockdown({
+    errorTaming: "safe",
+    overrideTaming: "severe",
+    consoleTaming: "unsafe",
+    localeTaming: "unsafe",
+    stackFiltering: "concise",
+    reporting: "none",
+  });
+}
+const phases = [];
+async function state(label, mutation = "") {
+  if (mutation) await renderer.evaluate(mutation);
+  const values = await renderer.evaluate(
+    `(() => {const ids=['outer','nested','leaf','grand','new','canvas'];return ids.map(id=>{const e=document.getElementById(id);if(!e)return null;const s=getComputedStyle(e);const b=e.getBoundingClientRect();return {id,color:s.color,width:s.width,height:s.height,padding:s.padding,fontSize:s.fontSize,display:s.display,custom:s.getPropertyValue('--tone'),rect:[b.x,b.y,b.width,b.height]};});})()`,
+  );
+  const saved = await renderer.evaluate(
+    `window.saved ? [saved.color,saved.width,saved.getPropertyValue('--tone'),saved.length,keys===Object.keys(saved).join('|')] : null`,
+  );
+  const image = await renderer.screenshot({ format: "rgba" });
+  phases.push({
+    label,
+    values,
+    saved,
+    pixelHash: new Bun.CryptoHasher("sha256")
+      .update(image.pixels)
+      .digest("hex"),
+  });
+  const source = await renderer.evaluate("document.documentElement.outerHTML");
+  const fresh = await createPageRenderer({
+    ...options,
+    pageFetch: async ({ url }) => ({
+      status: 200,
+      body: url.endsWith("mono.ttf")
+        ? mono
+        : url.endsWith("sans.ttf")
+          ? sans
+          : png,
+    }),
+    fetchResource: async (url) => ({ ok: true, status: 200, url, body: png }),
+  });
+  try {
+    fresh.setScripting(mode);
+    fresh.resize(
+      label === "viewport" ||
+        [
+          "remove-font",
+          "replace-font",
+          "replacement-ready",
+          "final-reveal",
+        ].includes(label)
+        ? 220
+        : 320,
+      180,
+      1,
+    );
+    await fresh.loadDocument({
+      url: "https://hidden.test/",
+      contentType: "text/html",
+      source,
+    });
+    await fresh.whenLoaded();
+    const expected = await fresh.screenshot({ format: "rgba" });
+    if (!Buffer.from(image.pixels).equals(Buffer.from(expected.pixels)))
+      throw new Error(
+        label +
+          " pixel mismatch " +
+          Bun.hash(image.pixels) +
+          "/" +
+          Bun.hash(expected.pixels),
+      );
+    const expectedGeometry = fresh.inspect(
+      "#outer,#nested,#leaf,#grand,#new,#canvas",
+      ["color", "width", "height", "fontSize", "display"],
+    );
+    const actualGeometry = renderer.inspect(
+      "#outer,#nested,#leaf,#grand,#new,#canvas",
+      ["color", "width", "height", "fontSize", "display"],
+    );
+    if (!Bun.deepEquals(actualGeometry, expectedGeometry, true))
+      throw new Error(
+        label +
+          " geometry mismatch " +
+          JSON.stringify({ actualGeometry, expectedGeometry }),
+      );
+  } finally {
+    fresh.dispose();
+  }
+}
+try {
+  renderer.setScripting(mode);
+  renderer.resize(320, 180, 1);
+  await renderer.loadDocument({
+    url: "https://hidden.test/",
+    contentType: "text/html",
+    source: `<!doctype html><style id="faces">@font-face{font-family:Probe;src:url(/mono.ttf)}</style><style id="rules">html{font-size:18px}body{margin:0}#visible{width:210px;background:yellow;color:purple;--tone:green}#outer{display:none;color:red;--tone:blue}#nested{display:none;font-size:20px}.child{display:inline-block;background:var(--tone);width:3ch;height:2em;padding:1rem;font-family:Probe,serif}.child::before{content:'x';color:orange}#outer:has(.active) .child{color:teal}@media(max-width:250px){.child{padding:3px}}</style><span style="font-family:Probe">0</span><div id="outer"><section id="nested"><i class="child" id="grand">grand</i></section><section id="chain"><span id="leaf" class="child">leaf</span><canvas id="canvas" width="30" height="20"></canvas><img src="/pixel.png" width="10" height="10"></section></div><div id="visible">visible</div>`,
+  });
+  await renderer.whenLoaded();
+  await renderer.evaluate(
+    `window.leaf=document.getElementById('leaf');window.saved=getComputedStyle(leaf);window.keys=Object.keys(saved).join('|')`,
+  );
+  await state("initial-hidden");
+  await state(
+    "hidden-values-mutate",
+    `document.getElementById('outer').style.cssText='display:none;color:green;--tone:pink';leaf.style.width='5ch';document.getElementById('nested').style.fontSize='31px'`,
+  );
+  await state("clean-repeat");
+  await state(
+    "insert",
+    `document.getElementById('chain').insertAdjacentHTML('beforeend','<em class="child" id="new" style="width:inherit">new</em>')`,
+  );
+  await state("selector-change", `leaf.classList.add('active')`);
+  await state(
+    "new-sheet",
+    `document.getElementById('rules').textContent+=' .child{border:2px solid currentColor}'`,
+  );
+  await state(
+    "nested-reveal-hidden",
+    `document.getElementById('nested').style.display='block'`,
+  );
+  await state(
+    "outer-reveal",
+    `document.getElementById('outer').style.display='block'`,
+  );
+  await state(
+    "hidden-again",
+    `document.getElementById('outer').style.display='none'`,
+  );
+  await state(
+    "move-leaf-visible",
+    `document.getElementById('visible').append(leaf)`,
+  );
+  await state("detached", `leaf.remove()`);
+  await state(
+    "detached-mutate",
+    `leaf.style.color='rgb(12,34,56)';leaf.style.width='77px'`,
+  );
+  await state(
+    "reattach-hidden",
+    `document.getElementById('chain').append(leaf)`,
+  );
+  await state("root-rem", `document.documentElement.style.fontSize='22px'`);
+  renderer.resize(220, 180, 1);
+  await state("viewport");
+  await state("remove-font", `document.getElementById('faces').textContent=''`);
+  await state(
+    "replace-font",
+    `document.getElementById('faces').textContent='@font-face{font-family:Probe;src:url(/sans.ttf)}'`,
+  );
+  await Bun.sleep(0);
+  await state("replacement-ready");
+  await state(
+    "final-reveal",
+    `document.getElementById('outer').style.display='block'`,
+  );
+  assert.deepEqual(errors, []);
+  assert.deepEqual(requests.map((x) => new URL(x).pathname).sort(), [
+    "/mono.ttf",
+    "/pixel.png",
+    "/sans.ttf",
+  ]);
+  console.log(JSON.stringify({ pass: true, states: phases.length }));
+} finally {
+  renderer.dispose();
+}