buninu-browser 0.2.0 → 0.2.1

package/lib/cdp-server.js

@@ -509,7 +509,9 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       const target = getSessionTarget(state, sessionId);
       target.screencast = { ...params };
       target.screencastEmit = emit;
-      await emitScreencastFrame(ctx, state, target, emit);
+      // As in Chrome, the reply does not wait for the first frame (nor the
+      // renderer, which may still be starting); frames follow as events.
+      void pushScreencastFrame(ctx, state, target);
       return {};
     }
     case "Page.screencastFrameAck":

package/lib/happy-dom/selector-matcher.js

@@ -0,0 +1,83 @@
+import * as PropertySymbol from "../../vendor/happy-dom/packages/happy-dom/src/PropertySymbol.ts";
+import QuerySelector from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/QuerySelector.ts";
+import SelectorCombinatorEnum from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorCombinatorEnum.ts";
+import SelectorParser from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorParser.ts";
+
+/**
+ * Selector matching for the style engine, which matches tens of thousands of
+ * stylesheet selectors against every element. It gives the answers of Happy
+ * DOM's Element.matches() (same parser, same per-compound matching), without
+ * what that pays on every call: re-validating and looking up the selector
+ * string, and recording a cached result on the element and the elements it
+ * visited. The style engine keeps its own results.
+ */
+
+// Element.matches() rejects these before parsing (Happy DOM's QuerySelector).
+const INVALID_SELECTOR = /^[.#\[]?\d|[.#]$/;
+
+/**
+ * A selector compiled for matchesCompiled(), or null when it is invalid.
+ * `element` is any element of the document (it provides the window). The
+ * result does not depend on the document and may be kept with the selector.
+ * Returns undefined for objects that are not Happy DOM elements.
+ */
+export function compileSelector(element, selector) {
+  const window = element?.[PropertySymbol.window];
+  if (!window) return undefined;
+  selector = String(selector);
+  if (INVALID_SELECTOR.test(selector)) return null;
+  try {
+    const groups = new SelectorParser({ window, scope: element, globalMatchFunction: QuerySelector.globalMatchFunction })
+      .getSelectorGroups(selector);
+    // Matching walks from the subject (the last compound) leftwards.
+    return groups.map((items) => items.slice().reverse());
+  } catch {
+    return null;
+  }
+}
+
+/** Whether `element` matches a compiled selector, as element.matches(selector) would. */
+export function matchesCompiled(element, compiled) {
+  for (const items of compiled) {
+    if (matchItems(element, element, items, 0, null)) return true;
+  }
+  return false;
+}
+
+/** Happy DOM's QuerySelector.matchSelector, reduced to a yes or no. */
+function matchItems(scope, element, items, index, previous) {
+  const item = items[index];
+  if (!item) return false;
+  if (item.match(scope, element)) {
+    if (index === items.length - 1) return true;
+    switch (item.combinator) {
+      case SelectorCombinatorEnum.adjacentSibling: {
+        const sibling = element.previousElementSibling;
+        if (sibling && matchItems(scope, sibling, items, index + 1, item)) return true;
+        break;
+      }
+      case SelectorCombinatorEnum.none:
+      case SelectorCombinatorEnum.child:
+      case SelectorCombinatorEnum.descendant: {
+        const parent = element.parentNode;
+        if (parent && parent !== element[PropertySymbol.ownerDocument] && matchItems(scope, parent, items, index + 1, item)) return true;
+        break;
+      }
+      case SelectorCombinatorEnum.subsequentSibling: {
+        const parent = element.parentNode;
+        if (parent && parent !== element[PropertySymbol.ownerDocument]) {
+          const siblings = parent[PropertySymbol.elementArray];
+          for (let i = siblings.indexOf(element) - 1; i >= 0; i--) {
+            if (matchItems(scope, siblings[i], items, index + 1, item)) return true;
+          }
+        }
+        break;
+      }
+    }
+  }
+  if (previous?.combinator === SelectorCombinatorEnum.none || previous?.combinator === SelectorCombinatorEnum.descendant) {
+    const parent = element.parentNode;
+    if (parent && parent !== element[PropertySymbol.ownerDocument]) return matchItems(scope, parent, items, index, previous);
+  }
+  return false;
+}

package/lib/headless-shell.js

@@ -37,15 +37,23 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
   const mobile = args.includes(MOBILE);
   if (mobile) console.error(`buninu-browser: ${MOBILE}: mobile user agent and touch media features; user agent overrides are ignored`);
 
-  const browser = await createBrowser({ allowHostJs, mobile });
-  const layerStatus = (layer) => layer?.installed ? "on" : `off (${layer?.reason})`;
-  console.error(`buninu-browser: renderer sandbox: seccomp ${layerStatus(browser.sandbox?.seccomp)}, `
-    + `ses ${layerStatus(browser.sandbox?.ses)}`);
-
+  // The endpoint opens while the first renderer starts: a client's first
+  // navigation fetches its document meanwhile.
+  const browser = await createBrowser({ allowHostJs, mobile, waitForRenderer: false });
   const portArgument = args.find((argument) => argument.startsWith("--remote-debugging-port="));
   const requestedPort = Number(portArgument?.slice("--remote-debugging-port=".length) ?? 9222);
   const server = CdpServer.create(browser.context).listen(requestedPort, "127.0.0.1");
   console.error(`DevTools listening on ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+  try {
+    await browser.ready;
+  } catch (error) {
+    server.stop(true);
+    browser.close();
+    throw error;
+  }
+  const layerStatus = (layer) => layer?.installed ? "on" : `off (${layer?.reason})`;
+  console.error(`buninu-browser: renderer sandbox: seccomp ${layerStatus(browser.sandbox?.seccomp)}, `
+    + `ses ${layerStatus(browser.sandbox?.ses)}`);
 
   const shutdown = () => {
     server.stop(true);
@@ -67,10 +75,16 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
  * not wait for CanvasKit and fonts to load. Site isolation is by origin
  * because no Public Suffix List is bundled to compute sites.
  *
- * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number }} options
+ * With `waitForRenderer: false` it returns before the first renderer is up
+ * (`ready` settles then): navigations fetch their documents meanwhile, and
+ * anything that needs a renderer waits for it.
+ *
+ * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number,
+ *   waitForRenderer?: boolean }} options
  */
 export async function createBrowser({
   allowHostJs = false, spareRenderer = true, network = new NetworkService(), rendererTimeout = 30_000, mobile = false,
+  waitForRenderer = true,
 } = {}) {
   // --mobile fixes the user agent for page requests and navigator.userAgent.
   network.userAgent = mobile ? MOBILE_USER_AGENT : DESKTOP_USER_AGENT;
@@ -83,6 +97,8 @@ export async function createBrowser({
   let currentKey = null;
   let spare = null;
   let closed = false;
+  // Settles when the first renderer shows about:blank (assigned below).
+  let rendererReady = null;
   // Renderer-independent state replayed into every new renderer.
   const viewport = { width: 800, height: 600, deviceScaleFactor: 1 };
   let userAgent = null;
@@ -216,7 +232,21 @@ export async function createBrowser({
     return current;
   }
 
-  const call = (method, ...params) => current.call(method, ...params);
+  const call = async (method, ...params) => {
+    await rendererReady;
+    return current.call(method, ...params);
+  };
+
+  /**
+   * Applies viewport or user agent state the renderer is told about. Before
+   * the first renderer is up there is nothing to wait for: it starts with the
+   * state (replayState), and the latest state is applied again once it is.
+   */
+  function applyState(method, args) {
+    if (current) return current.call(method, ...args());
+    rendererReady.then(() => current?.call(method, ...args())).catch(() => {});
+    return undefined;
+  }
 
   /**
    * Fetches a top-level document, then commits it in the renderer for its
@@ -266,6 +296,7 @@ export async function createBrowser({
     const fetched = performance.now();
     writeLog("navigation", `${url}: ${document.error ?? `HTTP ${document.status ?? 200}`}`
       + `${document.url === url ? "" : ` -> ${document.url}`} in ${Math.round(fetched - started)}ms`);
+    if (!invoke) await rendererReady;
     const host = invoke ? current : await rendererFor(document.url);
     const generation = await (invoke ?? ((method, ...params) => host.call(method, ...params)))("loadDocument", document);
     committed = { host, generation };
@@ -275,9 +306,14 @@ export async function createBrowser({
 
   // Screenshots and scrolling go to the compositor thread, so they are
   // answered even while the renderer's main thread is busy.
-  const composite = (method, ...params) => current.composite(method, ...params);
+  const composite = async (method, ...params) => {
+    await rendererReady;
+    return current.composite(method, ...params);
+  };
 
   async function rememberScroll() {
+    // Before the first renderer is up nothing has been shown or scrolled.
+    if (!current) return;
     const offset = await composite("scrollOffset");
     Object.assign(history[historyIndex], { x: offset.x, y: offset.y });
   }
@@ -336,14 +372,14 @@ export async function createBrowser({
     goForward: () => traverseHistory(historyIndex + 1),
     resize(width, height, deviceScaleFactor = 1) {
       Object.assign(viewport, { width, height, deviceScaleFactor });
-      return call("resize", ...resizeArguments());
+      return applyState("resize", resizeArguments);
     },
     setUserAgent(value) {
       // With --mobile the phone user agent stays (casty, for one, overrides it with a desktop one).
       if (mobile) return undefined;
       userAgent = typeof value === "string" && value ? value : null;
       network.userAgent = userAgent;
-      return userAgent ? call("setUserAgent", userAgent) : undefined;
+      return userAgent ? applyState("setUserAgent", () => [userAgent]) : undefined;
     },
     screenshot: (options = {}) => composite("screenshot", {
       format: options.format === "jpeg" || options.format === "webp" ? options.format : "png",
@@ -401,12 +437,21 @@ export async function createBrowser({
     },
   };
 
-  await rendererFor("about:blank");
-  await current.call("loadDocument", { url: "about:blank" });
+  // The spare starts with the first renderer rather than after it, ready
+  // for the first navigation to an origin.
+  rendererReady = (async () => {
+    const first = rendererFor("about:blank");
+    prepareSpare();
+    await first;
+    await current.call("loadDocument", { url: "about:blank" });
+  })();
+  if (waitForRenderer) await rendererReady;
+  else rendererReady.catch(() => {}); // the caller awaits `ready`
 
   return {
     context,
     network,
+    ready: rendererReady,
     get sandbox() {
       return current?.sandbox ?? null;
     },

package/lib/layout/text-layout.js

@@ -39,10 +39,11 @@ export function layoutText(tree, options = {}) {
     boxes: [],
     lineHeight: options.lineHeight == null ? null : positiveNumber(options.lineHeight, 31),
     fallbackLineHeight: 31,
-    measure: cachedMeasure(measureText),
-    metrics: cachedMetrics(options.fontMetrics),
-    maxContent: new WeakMap(),
-    minContent: new WeakMap(),
+    measure: options.measureCache ?? cachedMeasure(measureText),
+    metrics: options.metricsCache ?? cachedMetrics(options.fontMetrics),
+    maxContent: options.maxContentCache ?? new WeakMap(),
+    minContent: options.minContentCache ?? new WeakMap(),
+    blockResults: options.blockResultCache ?? null,
     // Paint layers: the root layer holds in-flow content; positioned boxes add
     // more. A layer with an integer z-index is a stacking context; `parent` is
     // the stacking context a layer is painted in (CSS 2 Appendix E).
@@ -50,14 +51,20 @@ export function layoutText(tree, options = {}) {
     stackingContext: ROOT_LAYER,
     layerCount: 1,
     initialContainingBlock: null,
+    // Static positions recorded for out-of-flow boxes, in order (see
+    // cacheBlockResult), and those boxes by node for replays.
+    staticPositions: [],
+    outOfFlowBoxes: new Map(),
   };
 
   containingBlocks = [];
+  outOfFlowBoxes = ctx.outOfFlowBoxes;
   let root;
   try {
     root = buildBox(tree.root, inheritedFlags(tree.root, { preserve: false, wrap: true }));
   } finally {
     containingBlocks = null;
+    outOfFlowBoxes = null;
   }
   const containingWidth = options.measureText || viewportWidth
     ? Math.max(1, (viewportWidth || columns * columnWidth) - x * 2)
@@ -91,12 +98,43 @@ export function layoutText(tree, options = {}) {
   });
 }
 
+/**
+ * Long-lived layout entry point. Expensive shaping measurements are valid as
+ * long as their immutable computed-style identity is valid, so retain them
+ * across incremental updates instead of starting cold on every reflow.
+ * Formatting-context result caches are added to this same owner.
+ */
+export class LayoutEngine {
+  #measure;
+  #metrics;
+  #maxContent = new WeakMap();
+  #minContent = new WeakMap();
+  #blockResults = new WeakMap();
+
+  constructor({ measureText = (text) => Bun.stringWidth(text) * 13, fontMetrics = null } = {}) {
+    this.#measure = cachedMeasure(measureText);
+    this.#metrics = cachedMetrics(fontMetrics);
+  }
+
+  layout(tree, options = {}) {
+    return layoutText(tree, {
+      ...options,
+      measureCache: this.#measure,
+      metricsCache: this.#metrics,
+      maxContentCache: this.#maxContent,
+      minContentCache: this.#minContent,
+      blockResultCache: this.#blockResults,
+    });
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Box tree construction
 
 // Absolutely positioned boxes register with their containing block while the
 // box tree is built. Building is synchronous and scoped to layoutText.
 let containingBlocks = null;
+let outOfFlowBoxes = null;
 
 // Text nodes carry their parent's style, so only element boxes can be positioned.
 const UNPOSITIONABLE = new Set(["root", "text", "line-break"]);
@@ -115,6 +153,7 @@ function outOfFlowBox(node, flags) {
   const box = buildBox(node, inheritedFlags(node, flags), true);
   box.outOfFlow = true;
   holder.absolutes.push(box);
+  outOfFlowBoxes?.set(node, box);
   return box;
 }
 
@@ -278,9 +317,13 @@ function hasInlineContent(items) {
  * then applies relative offsets and translations to everything it produced.
  */
 function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
+  const cached = cachedBlockResult(ctx, box, width, y, x, absorbTop, forcedHeight);
+  if (cached) return cached;
   const style = box.style;
   const boxStart = ctx.boxes.length;
   const fragmentStart = ctx.fragments.length;
+  const layerStart = ctx.layerCount;
+  const staticStart = ctx.staticPositions.length;
   const previousLayer = ctx.layer;
   const previousContext = ctx.stackingContext;
   // Anonymous boxes reuse their container's node but are never positioned themselves.
@@ -314,9 +357,122 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
   if (dx || dy) shiftOutput(ctx, boxStart, fragmentStart, dx, dy);
   ctx.layer = previousLayer;
   ctx.stackingContext = previousContext;
+  cacheBlockResult(ctx, box, width, x, y, absorbTop, forcedHeight, result, {
+    boxStart, fragmentStart, layerStart, staticStart, layer: previousLayer, context: previousContext,
+  });
   return result;
 }
 
+function blockCacheKey(width, absorbTop, forcedHeight) {
+  return `${width}\n${absorbTop ? 1 : 0}\n${forcedHeight ?? "auto"}`;
+}
+
+/** Where an out-of-flow box would have been in flow; recorded so that a replayed block sets it again. */
+function setStaticPosition(ctx, box, position) {
+  box.staticPosition = position;
+  ctx.staticPositions.push({ node: box.node, position });
+}
+
+/** Replays a retained formatting-context result at its new flow position. */
+function cachedBlockResult(ctx, box, width, y, x, absorbTop, forcedHeight) {
+  if (!ctx.blockResults || box.anonymous) return null;
+  const cached = ctx.blockResults.get(box.node)?.get(blockCacheKey(width, absorbTop, forcedHeight));
+  if (!cached) return null;
+  const dx = x - cached.x;
+  const dy = y - cached.y;
+  // The block's own paint layers are made again, in their order, after the
+  // layers laid out before it; -1 is the layer and stacking context it is in.
+  const layers = [];
+  for (const layer of cached.layers) {
+    layers.push(Object.freeze({
+      z: layer.z,
+      order: ctx.layerCount++,
+      context: layer.context,
+      parent: layer.parent === -1 ? ctx.stackingContext : layers[layer.parent],
+    }));
+  }
+  const layerAt = (index) => index === -1 ? ctx.layer : layers[index];
+  // Retained output is frozen: where it neither moved nor changed layer, the
+  // same objects are output again.
+  const moved = dx !== 0 || dy !== 0;
+  cached.boxes.forEach((record, index) => {
+    const layer = layerAt(cached.boxLayers[index]);
+    ctx.boxes.push(!moved && record.layer === layer ? record : { ...record, x: record.x + dx, y: record.y + dy, layer });
+  });
+  cached.fragments.forEach((fragment, index) => {
+    const layer = layerAt(cached.fragmentLayers[index]);
+    ctx.fragments.push(!moved && fragment.layer === layer ? fragment : { ...shiftedFragment(fragment, dx, dy), layer });
+  });
+  // Out-of-flow boxes whose containing block is outside this one still need their static positions.
+  for (const { node, x: staticX, y: staticY } of cached.staticPositions) {
+    const outOfFlow = ctx.outOfFlowBoxes.get(node);
+    const position = { x: staticX + dx, y: staticY + dy };
+    if (outOfFlow) outOfFlow.staticPosition = position;
+    ctx.staticPositions.push({ node, position });
+  }
+  return {
+    height: cached.result.height,
+    baseline: cached.result.baseline == null ? null : cached.result.baseline + dy,
+  };
+}
+
+/**
+ * Retains a block's output for replay (cachedBlockResult). Positioned boxes
+ * inside it make paint layers of their own; those are kept by creation
+ * order relative to the layer and stacking context the block is in, and the
+ * static positions it recorded go along. Output in a layer made before the
+ * block (which should not occur) is not retained.
+ */
+function cacheBlockResult(ctx, box, width, x, y, absorbTop, forcedHeight, result, start) {
+  if (!ctx.blockResults || box.anonymous) return;
+  const boxes = ctx.boxes.slice(start.boxStart);
+  const fragments = ctx.fragments.slice(start.fragmentStart);
+  const local = new Set();
+  const collect = (layer) => {
+    if (layer === start.layer || layer === start.context || local.has(layer)) return true;
+    if (!layer || layer.order < start.layerStart) return false;
+    local.add(layer);
+    return collect(layer.parent);
+  };
+  if (!boxes.every((record) => collect(record.layer)) || !fragments.every((fragment) => collect(fragment.layer))) return;
+  const ordered = [...local].sort((left, right) => left.order - right.order);
+  const indices = new Map(ordered.map((layer, index) => [layer, index]));
+  const layers = [];
+  for (const layer of ordered) {
+    const parent = indices.get(layer.parent) ?? (layer.parent === start.context ? -1 : null);
+    if (parent === null) return;
+    layers.push({ z: layer.z, context: layer.context, parent });
+  }
+  const indexOf = (layer) => layer === start.layer ? -1 : indices.get(layer) ?? null;
+  const boxLayers = boxes.map((record) => indexOf(record.layer));
+  const fragmentLayers = fragments.map((fragment) => indexOf(fragment.layer));
+  if (boxLayers.includes(null) || fragmentLayers.includes(null)) return;
+  let entries = ctx.blockResults.get(box.node);
+  if (!entries) ctx.blockResults.set(box.node, entries = new Map());
+  // A node normally sees one containing width. Bound unusual cases such as a
+  // reused table cell so the retained cache cannot grow without limit.
+  if (!entries.has(blockCacheKey(width, absorbTop, forcedHeight)) && entries.size >= 4) {
+    entries.delete(entries.keys().next().value);
+  }
+  entries.set(blockCacheKey(width, absorbTop, forcedHeight), {
+    x,
+    y,
+    result: { ...result },
+    layers,
+    boxes: boxes.map(retained),
+    boxLayers,
+    fragments: fragments.map(retained),
+    fragmentLayers,
+    staticPositions: ctx.staticPositions.slice(start.staticStart)
+      .map(({ node, position }) => ({ node, x: position.x, y: position.y })),
+  });
+}
+
+/** An output record as retained: frozen (records replayed from a retained block already are). */
+function retained(record) {
+  return Object.isFrozen(record) ? record : Object.freeze({ ...record });
+}
+
 /** CSS 2 §10.3.7/§10.6.4 absolute placement against the padding box. */
 function layoutAbsolutes(ctx, box, record) {
   const border = borderWidths(box.style);
@@ -387,10 +543,11 @@ function justifyColumn(ctx, items, justify = "normal", free) {
   });
 }
 
+/** Moves output already produced; records are replaced, as retained ones are frozen and shared. */
 function shiftOutput(ctx, boxStart, fragmentStart, dx, dy) {
   for (let index = boxStart; index < ctx.boxes.length; index++) {
-    ctx.boxes[index].x += dx;
-    ctx.boxes[index].y += dy;
+    const record = ctx.boxes[index];
+    ctx.boxes[index] = { ...record, x: record.x + dx, y: record.y + dy };
   }
   for (let index = fragmentStart; index < ctx.fragments.length; index++) {
     ctx.fragments[index] = shiftedFragment(ctx.fragments[index], dx, dy);
@@ -398,6 +555,7 @@ function shiftOutput(ctx, boxStart, fragmentStart, dx, dy) {
 }
 
 function shiftedFragment(fragment, dx, dy) {
+  if (dx === 0 && dy === 0) return fragment;
   return {
     ...fragment,
     x: fragment.x + dx,
@@ -500,7 +658,7 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
     let firstInFlow = true;
     box.children.forEach((child) => {
       if (child.kind === "placeholder") {
-        child.box.staticPosition = { x: contentX, y: cursor + strutValue(pending ?? ZERO_STRUT) };
+        setStaticPosition(ctx, child.box, { x: contentX, y: cursor + strutValue(pending ?? ZERO_STRUT) });
         return;
       }
       const first = firstInFlow;
@@ -902,7 +1060,10 @@ function alignGridContent(ctx, grid, alignment = "normal", free) {
   for (const placement of grid.placements) {
     const dy = offset(placement.row);
     if (!dy) continue;
-    for (let index = placement.boxStart; index < placement.boxEnd; index++) ctx.boxes[index].y += dy;
+    for (let index = placement.boxStart; index < placement.boxEnd; index++) {
+      const record = ctx.boxes[index];
+      ctx.boxes[index] = { ...record, y: record.y + dy };
+    }
     for (let index = placement.fragmentStart; index < placement.fragmentEnd; index++) {
       ctx.fragments[index] = shiftedFragment(ctx.fragments[index], 0, dy);
     }
@@ -1532,7 +1693,8 @@ function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, perce
 }
 
 function maxContentWidth(ctx, box) {
-  const cached = ctx.maxContent.get(box);
+  const cacheKey = box.node ?? box;
+  const cached = ctx.maxContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
   const padding = style?.padding ?? ZERO_BOX;
@@ -1568,12 +1730,13 @@ function maxContentWidth(ctx, box) {
   }
   const maxWidth = numberOrNull(style?.maxWidth);
   if (maxWidth != null) width = Math.min(width, style.boxSizing === "border-box" ? maxWidth : maxWidth + extra);
-  ctx.maxContent.set(box, width);
+  ctx.maxContent.set(cacheKey, width);
   return width;
 }
 
 function minContentWidth(ctx, box) {
-  const cached = ctx.minContent.get(box);
+  const cacheKey = box.node ?? box;
+  const cached = ctx.minContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
   const padding = style?.padding ?? ZERO_BOX;
@@ -1600,7 +1763,7 @@ function minContentWidth(ctx, box) {
       ? inlineMinContentWidth(ctx, child)
       : outer(child))) + extra;
   }
-  ctx.minContent.set(box, width);
+  ctx.minContent.set(cacheKey, width);
   return width;
 }
 
@@ -2220,11 +2383,12 @@ function lineFragment(style, text, nodeIds, runs, x, y, width, height, baseline
 const GRAPHEME_SEGMENTER = new Intl.Segmenter(undefined, { granularity: "grapheme" });
 
 function cachedMeasure(measureText) {
-  const byStyle = new Map();
+  const byStyle = new WeakMap();
+  const defaultStyle = new Map();
   return (text, style) => {
     if (!text) return 0;
-    let cache = byStyle.get(style ?? null);
-    if (!cache) byStyle.set(style ?? null, cache = new Map());
+    let cache = style && typeof style === "object" ? byStyle.get(style) : defaultStyle;
+    if (!cache) byStyle.set(style, cache = new Map());
     let width = cache.get(text);
     if (width === undefined) cache.set(text, width = measureText(text, style ?? null));
     return width;