buninu-browser 0.2.0 → 0.2.2

package/lib/layout/text-layout.js

@@ -18,6 +18,7 @@
  * and `fragments` as positioned line boxes sorted by y.
  */
 const ZERO_BOX = Object.freeze([0, 0, 0, 0]);
+const ZERO_OFFSET = Object.freeze({ x: 0, y: 0 });
 const ZERO_STRUT = Object.freeze({ positive: 0, negative: 0 });
 const DEFAULT_ASCENT = 0.93;
 const DEFAULT_CONTENT_HEIGHT = 1.17;
@@ -39,10 +40,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 +52,23 @@ export function layoutText(tree, options = {}) {
     stackingContext: ROOT_LAYER,
     layerCount: 1,
     initialContainingBlock: null,
+    // The content box of the block being laid out: the containing block of
+    // its in-flow children, for percentages in their relative offsets.
+    containing: 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)
@@ -72,6 +83,7 @@ export function layoutText(tree, options = {}) {
   // establishes the BFC, so body margins collapse with its children's.
   const horizontal = resolveHorizontal(ctx, root, x, containingWidth, false);
   const rootY = y + strutValue(topStrut(root));
+  ctx.containing = { width: containingWidth, height: ctx.initialContainingBlock.height || null };
   const result = layoutBlock(ctx, root, horizontal.x, horizontal.width, rootY, collapsesThroughTop(root));
   const height = rootY + result.height + strutValue(bottomStrut(root));
 
@@ -91,12 +103,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 +158,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;
 }
 
@@ -279,8 +323,15 @@ function hasInlineContent(items) {
  */
 function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
   const style = box.style;
+  // Its containing block, for percentages in relative offsets.
+  const containing = ctx.containing;
+  const key = blockCacheKey(width, absorbTop, forcedHeight, style?.position === "relative" ? containing : null);
+  const cached = cachedBlockResult(ctx, box, key, y, x);
+  if (cached) return cached;
   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.
@@ -300,10 +351,10 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
   if (box.absolutes?.length) layoutAbsolutes(ctx, box, record);
   let dx = 0;
   let dy = 0;
-  if (style?.position === "relative") {
-    const [top, right, bottom, left] = style.inset.map((value) => numberOrNull(value));
-    dx = left ?? (right != null ? -right : 0);
-    dy = top ?? (bottom != null ? -bottom : 0);
+  const offset = relativeOffset(style, containing ?? { width, height: null });
+  if (offset) {
+    dx = offset.x;
+    dy = offset.y;
   }
   if (style?.transform) {
     dx += numberOrZero(resolveLength(style.transform.x, record.width));
@@ -314,9 +365,137 @@ 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, key, x, y, result, {
+    boxStart, fragmentStart, layerStart, staticStart, layer: previousLayer, context: previousContext,
+  });
   return result;
 }
 
+function blockCacheKey(width, absorbTop, forcedHeight, containing) {
+  const key = `${width}\n${absorbTop ? 1 : 0}\n${forcedHeight ?? "auto"}`;
+  return containing ? `${key}\n${containing.width}\n${containing.height ?? "auto"}` : key;
+}
+
+/**
+ * The offset of a relatively positioned box (CSS 2 §9.4.3). Percentages are
+ * of its containing block; one of an indefinite height is auto.
+ */
+function relativeOffset(style, containing) {
+  if (style?.position !== "relative" || !style.inset) return null;
+  const [top, right, bottom, left] = style.inset.map((value, index) => value === "auto"
+    ? null
+    : numberOrNull(resolveLength(value, (index % 2 ? containing?.width : containing?.height) ?? NaN)));
+  const x = left ?? (right != null ? -right : 0);
+  const y = top ?? (bottom != null ? -bottom : 0);
+  return x || y ? { x, y } : null;
+}
+
+/** 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, key, y, x) {
+  if (!ctx.blockResults || box.anonymous) return null;
+  const cached = ctx.blockResults.get(box.node)?.get(key);
+  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, key, x, y, 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(key) && entries.size >= 4) {
+    entries.delete(entries.keys().next().value);
+  }
+  entries.set(key, {
+    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 +566,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 +578,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,
@@ -418,7 +599,7 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   const record = { nodeId: box.node.id, x, y, width, height: 0, style };
   ctx.boxes.push(record);
   if (box.replaced) {
-    const dimensions = imageDimensions(box.node, width);
+    const dimensions = imageDimensions(box.node, width, ctx.containing?.height);
     const imageX = x + border[3] + padding[3];
     const imageY = y + border[0] + padding[0];
     ctx.fragments.push(lineFragment(box.style, "", [box.node.id], [{
@@ -450,6 +631,21 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   let columnItems = null;
   let gridResult = null;
   let baseline = null;
+  const toContentHeight = (value) => style.boxSizing === "border-box"
+    ? Math.max(0, value - border[0] - border[2] - padding[0] - padding[2])
+    : value;
+  // A percentage height (and min/max) resolves against the containing block
+  // only when that height is definite (CSS 2 §10.5); otherwise it is auto.
+  const containingHeight = ctx.containing?.height;
+  const resolveHeight = (value) => numberOrNull(resolveLength(value, containingHeight ?? NaN));
+  const specifiedHeight = resolveHeight(style?.height);
+  const previousContaining = ctx.containing;
+  ctx.containing = {
+    width: contentWidth,
+    height: forcedHeight != null
+      ? Math.max(0, forcedHeight - border[0] - border[2] - padding[0] - padding[2])
+      : specifiedHeight != null ? toContentHeight(specifiedHeight) : null,
+  };
 
   if (box.table) {
     const result = layoutTable(ctx, box, contentX, contentWidth, contentTop);
@@ -481,7 +677,9 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
         : child.style.alignSelf;
       const shrink = !["normal", "stretch"].includes(alignment);
       const placed = resolveHorizontal(ctx, child, contentX, contentWidth, shrink);
-      const autoMargins = (child.style?.margin ?? ZERO_BOX).some((value) => value === "auto");
+      // Auto margins on the cross axis (left, right) align the item instead (Flexbox §8.1).
+      const crossMargins = child.style?.margin ?? ZERO_BOX;
+      const autoMargins = crossMargins[1] === "auto" || crossMargins[3] === "auto";
       let childX = placed.x;
       if (shrink && !autoMargins) {
         const free = contentWidth - placed.width - placed.marginLeft - placed.marginRight;
@@ -500,7 +698,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;
@@ -527,16 +725,12 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
     contentBottom = collapsesThroughBottom(box) ? cursor : cursor + strutValue(pending ?? ZERO_STRUT);
   }
 
+  ctx.containing = previousContaining;
   let contentHeight = Math.max(0, contentBottom - contentTop);
-  const toContentHeight = (value) => style.boxSizing === "border-box"
-    ? Math.max(0, value - border[0] - border[2] - padding[0] - padding[2])
-    : value;
-  const specifiedHeight = numberOrNull(style?.height);
   if (specifiedHeight != null) contentHeight = toContentHeight(specifiedHeight);
-  // min-height and max-height (percentages need a definite containing height; not modelled).
-  const maxHeight = numberOrNull(style?.maxHeight);
+  const maxHeight = style?.maxHeight === "none" ? null : resolveHeight(style?.maxHeight);
   if (maxHeight != null) contentHeight = Math.min(contentHeight, toContentHeight(maxHeight));
-  const minHeight = numberOrNull(style?.minHeight);
+  const minHeight = resolveHeight(style?.minHeight);
   if (minHeight != null) contentHeight = Math.max(contentHeight, toContentHeight(minHeight));
   if (columnItems?.length) justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
   if (gridResult) alignGridContent(ctx, gridResult, style?.alignContent, contentHeight - (contentBottom - contentTop));
@@ -659,13 +853,9 @@ function layoutFlexRow(ctx, box, x, width, y) {
     }
     let crossSize = Math.max(0, ...lineItems.map((item) => item.height + item.marginTop + item.marginBottom));
     // A single-line container with a definite height gives its line that cross size (§9.4.15).
-    const definiteHeight = numberOrNull(style?.height);
-    if (lines.length === 1 && definiteHeight != null) {
-      const padding = style.padding ?? ZERO_BOX;
-      crossSize = style.boxSizing === "border-box"
-        ? Math.max(0, definiteHeight - padding[0] - padding[2] - borderWidths(style)[0] - borderWidths(style)[2])
-        : definiteHeight;
-    }
+    // ctx.containing.height is that content-box height, percentages already resolved.
+    const definiteHeight = ctx.containing?.height;
+    if (lines.length === 1 && definiteHeight != null) crossSize = definiteHeight;
 
     // Main axis: auto margins absorb free space first, then justify-content.
     let free = width - gaps - lineItems.reduce((sum, item) => sum + item.target + item.marginLeft + item.marginRight, 0);
@@ -902,7 +1092,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 +1725,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 +1762,14 @@ 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);
+  width = atLeastMinWidth(style, width, extra);
+  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,10 +1796,17 @@ function minContentWidth(ctx, box) {
       ? inlineMinContentWidth(ctx, child)
       : outer(child))) + extra;
   }
-  ctx.minContent.set(box, width);
+  width = atLeastMinWidth(style, width, extra);
+  ctx.minContent.set(cacheKey, width);
   return width;
 }
 
+/** min-width wins over the intrinsic width (and max-width); a percentage is of an unknown width here. */
+function atLeastMinWidth(style, width, extra) {
+  const minWidth = numberOrNull(style?.minWidth);
+  return minWidth == null ? width : Math.max(width, style.boxSizing === "border-box" ? minWidth : minWidth + extra);
+}
+
 function verticalMargins(style) {
   const margin = style?.margin ?? ZERO_BOX;
   return { top: numberOrZero(margin[0]), bottom: numberOrZero(margin[2]) };
@@ -1668,6 +1871,8 @@ function layoutInline(ctx, ifc, x, width, y) {
     }
     return atom;
   };
+  // Percentage sizes of inline images.
+  atomFor.containing = ctx.containing;
   const lines = breakLines(ctx, paragraph, width, atomFor);
   let cursor = y;
   let baseline = null;
@@ -1879,9 +2084,26 @@ function truncateForEllipsis(ctx, style, paragraph, segments, line, width) {
   return { text, width: ellipsisWidth, run: lastText.run, metrics: textMetrics(ctx, lastText.run.style) };
 }
 
+/** Space beside an inline replaced element's content: its margins, borders and padding. */
 function inlineImageMargins(node) {
   const margin = node.style?.margin ?? ZERO_BOX;
-  return { left: numberOrZero(margin[3]), right: numberOrZero(margin[1]) };
+  const border = borderWidths(node.style);
+  const padding = node.style?.padding ?? ZERO_BOX;
+  return {
+    left: numberOrZero(margin[3]) + border[3] + padding[3],
+    right: numberOrZero(margin[1]) + border[1] + padding[1],
+  };
+}
+
+/** The same above and below its content (its margin box sits on the line). */
+function inlineImageVerticalInsets(node) {
+  const margin = node.style?.margin ?? ZERO_BOX;
+  const border = borderWidths(node.style);
+  const padding = node.style?.padding ?? ZERO_BOX;
+  return {
+    top: numberOrZero(margin[0]) + border[0] + padding[0],
+    bottom: numberOrZero(margin[2]) + border[2] + padding[2],
+  };
 }
 
 /**
@@ -1929,7 +2151,8 @@ function runSliceWidth(ctx, run, start, end, text, atomFor) {
   if (end <= start) return 0;
   if (run.kind === "image") {
     const margins = inlineImageMargins(run.node);
-    return imageDimensions(run.node, Infinity).width + margins.left + margins.right;
+    const containing = atomFor.containing;
+    return imageDimensions(run.node, containing?.width ?? Infinity, containing?.height).width + margins.left + margins.right;
   }
   if (run.kind === "atomic") {
     const atom = atomFor(run);
@@ -2009,13 +2232,20 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
   const strut = textMetrics(ctx, style);
   let ascent = strut.ascent;
   let descent = strut.descent;
+  // Floats (approximated as atomic inlines) sit at the top of the line instead of on its baseline.
+  let floatHeight = 0;
   for (const segment of segments) {
     const { run } = segment;
-    if (run.kind === "image") {
-      segment.dimensions = imageDimensions(run.node, width);
-      segment.imageTop = inlineImageTop(run.node.style, segment.dimensions.height, strut);
+    if (run.kind === "atomic" && isFloat(run.style)) {
+      const atom = atomFor(run);
+      floatHeight = Math.max(floatHeight, atom.marginTop + atom.height + atom.marginBottom);
+    } else if (run.kind === "image") {
+      segment.dimensions = imageDimensions(run.node, width, ctx.containing?.height);
+      segment.insets = inlineImageVerticalInsets(run.node);
+      const outerHeight = segment.dimensions.height + segment.insets.top + segment.insets.bottom;
+      segment.imageTop = inlineImageTop(run.node.style, outerHeight, strut);
       ascent = Math.max(ascent, -segment.imageTop);
-      descent = Math.max(descent, segment.imageTop + segment.dimensions.height);
+      descent = Math.max(descent, segment.imageTop + outerHeight);
     } else if (run.kind === "atomic") {
       const atom = atomFor(run);
       const atomAscent = atom.marginTop + (atom.baseline ?? atom.height) ;
@@ -2029,7 +2259,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
     }
   }
   const baselineY = y + ascent;
-  const lineHeight = ascent + descent;
+  const lineHeight = Math.max(ascent + descent, floatHeight);
 
   // Horizontal alignment.
   const alignment = style?.textAlign;
@@ -2042,6 +2272,22 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
   const edges = new Map();
   const runs = [];
   const atomsToPlace = [];
+  // Relatively positioned inline boxes move their contents (CSS 2 §9.4.3);
+  // an offset adds to those of the inline boxes around it.
+  const containing = ctx.containing;
+  const offsets = new Map();
+  const offsetOf = (node, style, outer) => {
+    if (!offsets.has(node)) {
+      const own = relativeOffset(style, containing);
+      offsets.set(node, own ? { x: outer.x + own.x, y: outer.y + own.y } : outer);
+    }
+    return offsets.get(node);
+  };
+  const runOffset = (run) => {
+    let offset = ZERO_OFFSET;
+    for (const node of run.inlines) offset = offsetOf(node, paragraph.inlineState.get(node).style, offset);
+    return run.kind === "image" ? offsetOf(run.node, run.node.style, offset) : offset;
+  };
   // Right floats (approximated as atomic inlines) go to the end of the line.
   const rightFloats = segments.filter((segment) => segment.run.kind === "atomic" && segment.run.style?.float === "right");
   const rightFloatWidth = rightFloats.reduce((sum, segment) => sum + segment.width, 0);
@@ -2060,6 +2306,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
       }
     }
     const segmentWidth = segment.width;
+    const shift = runOffset(run);
     const common = {
       nodeId: run.nodeId,
       text: run.kind === "text" ? paragraph.text.slice(segment.start, segment.end) : "",
@@ -2068,11 +2315,27 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
       style: run.style ?? style,
     };
     if (run.kind === "image") {
+      const imageX = cursor + inlineImageMargins(run.node).left + shift.x;
+      const imageY = baselineY + segment.imageTop + segment.insets.top + shift.y;
+      // Its background and borders, around the content box.
+      if (isDecorated(run.node.style)) {
+        const border = borderWidths(run.node.style);
+        const padding = run.node.style.padding ?? ZERO_BOX;
+        ctx.boxes.push({
+          nodeId: run.nodeId,
+          x: imageX - padding[3] - border[3],
+          y: imageY - padding[0] - border[0],
+          width: segment.dimensions.width + padding[1] + padding[3] + border[1] + border[3],
+          height: segment.dimensions.height + padding[0] + padding[2] + border[0] + border[2],
+          style: run.node.style,
+          inline: true,
+        });
+      }
       runs.push({
         ...common,
         type: "image",
-        x: cursor + inlineImageMargins(run.node).left,
-        y: baselineY + segment.imageTop,
+        x: imageX,
+        y: imageY,
         width: segment.dimensions.width,
         height: segment.dimensions.height,
         resource: run.node.resource,
@@ -2082,14 +2345,14 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
       });
     } else if (run.kind === "atomic") {
       const atom = atomFor(run);
-      const atomY = baselineY - segment.atomAscent + atom.marginTop;
-      runs.push({ ...common, type: "atomic", x: cursor, y: atomY, width: segmentWidth, height: atom.height });
-      atomsToPlace.push({ box: run.box, x: cursor + atom.marginLeft, y: atomY, width: atom.width });
+      const atomY = isFloat(run.style) ? y + atom.marginTop : baselineY - segment.atomAscent + atom.marginTop;
+      runs.push({ ...common, type: "atomic", x: cursor + shift.x, y: atomY + shift.y, width: segmentWidth, height: atom.height });
+      atomsToPlace.push({ box: run.box, x: cursor + atom.marginLeft + shift.x, y: atomY + shift.y, width: atom.width });
     } else {
       runs.push({
         ...common,
-        x: cursor,
-        y: baselineY - segment.metrics.contentAscent,
+        x: cursor + shift.x,
+        y: baselineY - segment.metrics.contentAscent + shift.y,
         width: Math.max(1, segmentWidth),
         height: null,
       });
@@ -2138,10 +2401,11 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
     const metrics = textMetrics(ctx, nodeStyle);
     const left = edge.left ?? edge.first;
     const right = edge.right ?? edge.last;
+    const shift = offsets.get(node) ?? ZERO_OFFSET;
     ctx.boxes.push({
       nodeId: node.id,
-      x: left,
-      y: baselineY - metrics.contentAscent - padding[0] - border[0],
+      x: left + shift.x,
+      y: baselineY - metrics.contentAscent - padding[0] - border[0] + shift.y,
       width: right - left,
       height: metrics.contentHeight + padding[0] + padding[2] + border[0] + border[2],
       style: nodeStyle,
@@ -2164,6 +2428,10 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
   return { height: lineHeight, baseline: baselineY };
 }
 
+function isFloat(style) {
+  return style?.float === "left" || style?.float === "right";
+}
+
 function measureAtomic(ctx, box, availableWidth) {
   const placed = resolveHorizontal(ctx, box, 0, availableWidth, true);
   const result = dryLayout(ctx, box, placed.width);
@@ -2190,7 +2458,7 @@ function textMetrics(ctx, style) {
 
 function isDecorated(style) {
   return Boolean(style && ((style.backgroundColor && style.backgroundColor !== "rgba(0, 0, 0, 0)")
-    || borderWidths(style).some((width) => width > 0)));
+    || style.backgroundImage || borderWidths(style).some((width) => width > 0)));
 }
 
 function borderWidths(style) {
@@ -2220,11 +2488,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;
@@ -2256,7 +2525,49 @@ function cachedMetrics(fontMetrics) {
   };
 }
 
-function imageDimensions(node, referenceWidth) {
+/**
+ * An iframe's content box: like other replaced elements, but with no
+ * intrinsic size or ratio of its own (its document's frame is drawn into
+ * whatever box it gets), so each dimension falls back to 300x150 alone.
+ */
+function frameDimensions(node, referenceWidth, referenceHeight) {
+  const resolve = (cssValue, attribute, fallback, reference) => {
+    const value = cssValue !== "auto" && cssValue != null ? resolveLength(cssValue, reference ?? NaN) : attribute;
+    return Number.isFinite(value) ? value : fallback;
+  };
+  let width = resolve(node.style?.width, node.widthAttribute, 300, referenceWidth);
+  const height = resolve(node.style?.height, node.heightAttribute, 150, referenceHeight);
+  const maximum = node.style?.maxWidth !== "none" && node.style?.maxWidth != null ? resolveLength(node.style.maxWidth, referenceWidth) : NaN;
+  if (Number.isFinite(maximum) && width > maximum) width = maximum;
+  return { width: Math.max(0, width), height: Math.max(0, height) };
+}
+
+/**
+ * An inline <svg>'s size (SVG 2 §8.2): its CSS size, else its width and
+ * height attributes, else 100% of its container's width; a missing height
+ * follows the viewBox's ratio, or is 150px without one. Where the container
+ * is still being measured (an indefinite width) it counts as 300px wide.
+ */
+function svgDimensions(node, referenceWidth, referenceHeight) {
+  const css = (value, reference) => value !== "auto" && value != null ? numberOrNull(resolveLength(value, reference ?? NaN)) : null;
+  const ratio = node.svgRatio ?? null;
+  let width = css(node.style?.width, referenceWidth) ?? node.widthAttribute;
+  let height = css(node.style?.height, referenceHeight) ?? node.heightAttribute;
+  if (width == null && height != null && ratio) width = height * ratio;
+  if (width == null) width = Number.isFinite(referenceWidth) ? referenceWidth : 300;
+  if (height == null) height = ratio ? width / ratio : 150;
+  const maximum = node.style?.maxWidth !== "none" && node.style?.maxWidth != null ? numberOrNull(resolveLength(node.style.maxWidth, referenceWidth)) : null;
+  if (maximum != null && width > maximum) {
+    height = ratio ? maximum / ratio : height;
+    width = maximum;
+  }
+  return { width: Math.max(0, width), height: Math.max(0, height) };
+}
+
+/** Percentages in width are of `referenceWidth`, in height of `referenceHeight` (auto if indefinite). */
+function imageDimensions(node, referenceWidth, referenceHeight = null) {
+  if (node.tagName === "IFRAME") return frameDimensions(node, referenceWidth, referenceHeight);
+  if (node.tagName === "SVG") return svgDimensions(node, referenceWidth, referenceHeight);
   const intrinsicWidth = node.resource?.width ?? node.widthAttribute ?? 300;
   const intrinsicHeight = node.resource?.height ?? node.heightAttribute ?? 150;
   const ratio = intrinsicWidth / intrinsicHeight;
@@ -2266,7 +2577,7 @@ function imageDimensions(node, referenceWidth) {
     ? resolveLength(cssWidth, referenceWidth)
     : node.widthAttribute;
   let height = cssHeight !== "auto" && cssHeight != null
-    ? resolveLength(cssHeight, referenceWidth)
+    ? resolveLength(cssHeight, referenceHeight ?? NaN)
     : node.heightAttribute;
   if (!Number.isFinite(width)) width = null;
   if (!Number.isFinite(height)) height = null;