buninu-browser 0.2.1 → 0.2.3

package/lib/layout/text-layout.js

@@ -18,10 +18,19 @@
  * 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;
 
+// CSS 2 §8.4: all four percentage paddings use the containing block's width.
+// Cyclic percentages contribute zero during intrinsic sizing.
+function paddingBox(style, width = 0) {
+  const padding = style?.padding ?? ZERO_BOX;
+  return padding.every(Number.isFinite) ? padding
+    : padding.map(value => Math.max(0, numberOrZero(resolveLength(value, width))));
+}
+
 const ROOT_LAYER = Object.freeze({ z: 0, order: 0, context: true, parent: null });
 
 export function layoutText(tree, options = {}) {
@@ -51,6 +60,9 @@ 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: [],
@@ -79,6 +91,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));
 
@@ -317,9 +330,12 @@ 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;
+  // Its containing block, for percentages in relative offsets.
+  const containing = ctx.containing;
+  const key = blockCacheKey(width, absorbTop, forcedHeight, containing);
+  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;
@@ -343,10 +359,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));
@@ -357,14 +373,29 @@ 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, {
+  cacheBlockResult(ctx, box, key, x, y, 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"}`;
+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. */
@@ -374,9 +405,9 @@ function setStaticPosition(ctx, box, position) {
 }
 
 /** Replays a retained formatting-context result at its new flow position. */
-function cachedBlockResult(ctx, box, width, y, x, absorbTop, forcedHeight) {
+function cachedBlockResult(ctx, box, key, y, x) {
   if (!ctx.blockResults || box.anonymous) return null;
-  const cached = ctx.blockResults.get(box.node)?.get(blockCacheKey(width, absorbTop, forcedHeight));
+  const cached = ctx.blockResults.get(box.node)?.get(key);
   if (!cached) return null;
   const dx = x - cached.x;
   const dy = y - cached.y;
@@ -423,7 +454,7 @@ function cachedBlockResult(ctx, box, width, y, x, absorbTop, forcedHeight) {
  * 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) {
+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);
@@ -451,10 +482,10 @@ function cacheBlockResult(ctx, box, width, x, y, absorbTop, forcedHeight, result
   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) {
+  if (!entries.has(key) && entries.size >= 4) {
     entries.delete(entries.keys().next().value);
   }
-  entries.set(blockCacheKey(width, absorbTop, forcedHeight), {
+  entries.set(key, {
     x,
     y,
     result: { ...result },
@@ -488,31 +519,37 @@ function layoutAbsolutes(ctx, box, record) {
   for (const absolute of box.absolutes) {
     const style = absolute.style;
     const containing = style?.position === "fixed" ? { ...icb, height: icb.height || block.height } : block;
-    const [top, right, bottom, left] = (style?.inset ?? ["auto", "auto", "auto", "auto"])
-      .map((value, index) => value === "auto" ? null : resolveLength(value, index % 2 ? containing.width : containing.height));
-    const margin = style?.margin ?? ZERO_BOX;
-    const [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
-    const specifiedWidth = numberOrNull(resolveLength(style?.width, containing.width));
-    let width;
-    if (specifiedWidth == null && left != null && right != null) {
-      width = Math.max(0, containing.width - left - right - marginLeft - marginRight);
-    } else {
-      width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
+    const previousContaining = ctx.containing;
+    ctx.containing = containing;
+    try {
+      const [top, right, bottom, left] = (style?.inset ?? ["auto", "auto", "auto", "auto"])
+        .map((value, index) => value === "auto" ? null : resolveLength(value, index % 2 ? containing.width : containing.height));
+      const margin = style?.margin ?? ZERO_BOX;
+      const [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
+      const specifiedWidth = numberOrNull(resolveLength(style?.width, containing.width));
+      let width;
+      if (specifiedWidth == null && left != null && right != null) {
+        width = Math.max(0, containing.width - left - right - marginLeft - marginRight);
+      } else {
+        width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
+      }
+      const staticPosition = absolute.staticPosition ?? containing;
+      const x = left != null ? containing.x + left + marginLeft
+        : right != null ? containing.x + containing.width - right - marginRight - width
+          : staticPosition.x + marginLeft;
+      const specifiedHeight = numberOrNull(resolveLength(style?.height, containing.height));
+      const forcedHeight = specifiedHeight == null && top != null && bottom != null
+        ? Math.max(0, containing.height - top - bottom - marginTop - marginBottom)
+        : null;
+      let height = forcedHeight;
+      if (height == null && top == null && bottom != null) height = dryLayout(ctx, absolute, width).height;
+      const y = top != null ? containing.y + top + marginTop
+        : bottom != null ? containing.y + containing.height - bottom - marginBottom - height
+          : staticPosition.y + marginTop;
+      layoutBlock(ctx, absolute, x, width, y, false, forcedHeight);
+    } finally {
+      ctx.containing = previousContaining;
     }
-    const staticPosition = absolute.staticPosition ?? containing;
-    const x = left != null ? containing.x + left + marginLeft
-      : right != null ? containing.x + containing.width - right - marginRight - width
-        : staticPosition.x + marginLeft;
-    const specifiedHeight = numberOrNull(resolveLength(style?.height, containing.height));
-    const forcedHeight = specifiedHeight == null && top != null && bottom != null
-      ? Math.max(0, containing.height - top - bottom - marginTop - marginBottom)
-      : null;
-    let height = forcedHeight;
-    if (height == null && top == null && bottom != null) height = dryLayout(ctx, absolute, width).height;
-    const y = top != null ? containing.y + top + marginTop
-      : bottom != null ? containing.y + containing.height - bottom - marginBottom - height
-        : staticPosition.y + marginTop;
-    layoutBlock(ctx, absolute, x, width, y, false, forcedHeight);
   }
 }
 
@@ -570,13 +607,13 @@ function shiftedFragment(fragment, dx, dy) {
 }
 
 function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
-  const style = box.style;
+  const padding = paddingBox(box.style, ctx.containing?.width ?? width);
+  const style = box.style && padding !== box.style.padding ? { ...box.style, padding } : box.style;
   const border = borderWidths(style);
-  const padding = style?.padding ?? ZERO_BOX;
   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], [{
@@ -608,6 +645,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);
@@ -639,7 +691,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;
@@ -678,23 +732,24 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
       // Tables with width: auto are sized to their contents (CSS 2 §17.5.2).
       const placed = resolveHorizontal(ctx, child, contentX, contentWidth, Boolean(child.table));
       const result = layoutBlock(ctx, child, placed.x, placed.width, childY, collapsesThroughTop(child));
-      cursor = childY + result.height;
-      pending = bottomStrut(child);
+      if (result.height === 0 && selfCollapsing(child)) {
+        // Empty blocks do not separate adjoining margins (CSS 2 §8.3.1).
+        pending = combineStruts(combined, bottomStrut(child));
+      } else {
+        cursor = childY + result.height;
+        pending = bottomStrut(child);
+      }
       baseline = result.baseline ?? baseline;
     });
     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));
@@ -817,13 +872,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);
@@ -880,7 +931,7 @@ function flexItem(ctx, box, containerWidth) {
   // Sizes below are content-box sizes, as in Blink's FlexItem
   // (base_content_size, hypothetical_content_size); `extra` is padding+border.
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style, containerWidth);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   const contentBox = (value) => Math.max(0, style?.boxSizing === "border-box" ? value - extra : value);
   const margin = style?.margin ?? ZERO_BOX;
@@ -1471,7 +1522,7 @@ function minimumContribution(box, minContent, available) {
   const margins = numberOrZero(margin[1]) + numberOrZero(margin[3]);
   const specified = numberOrNull(resolveLength(style?.minWidth, available));
   if (specified != null) {
-    const padding = style?.padding ?? ZERO_BOX;
+    const padding = paddingBox(style, available);
     const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
     return (style.boxSizing === "border-box" ? Math.max(specified, extra) : specified + extra) + margins;
   }
@@ -1661,7 +1712,7 @@ function dryLayout(ctx, box, width) {
 /** Resolves the used border-box width and horizontal margins of a block-level box. */
 function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, percentageBasis = containingWidth) {
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style, percentageBasis);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   const borderBox = (value) => style?.boxSizing === "border-box" ? value : value + extra;
   const margin = style?.margin ?? ZERO_BOX;
@@ -1697,7 +1748,7 @@ function maxContentWidth(ctx, box) {
   const cached = ctx.maxContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   let width;
   const specified = numberOrNull(style?.width);
@@ -1730,6 +1781,7 @@ function maxContentWidth(ctx, box) {
   }
   const maxWidth = numberOrNull(style?.maxWidth);
   if (maxWidth != null) width = Math.min(width, style.boxSizing === "border-box" ? maxWidth : maxWidth + extra);
+  width = atLeastMinWidth(style, width, extra);
   ctx.maxContent.set(cacheKey, width);
   return width;
 }
@@ -1739,7 +1791,7 @@ function minContentWidth(ctx, box) {
   const cached = ctx.minContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   const specified = numberOrNull(style?.width);
   const outer = (child) => {
@@ -1763,10 +1815,17 @@ function minContentWidth(ctx, box) {
       ? inlineMinContentWidth(ctx, child)
       : outer(child))) + extra;
   }
+  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]) };
@@ -1781,6 +1840,15 @@ function collapsesThroughTop(box) {
     && inFlowChildren(box)[0]?.kind === "block";
 }
 
+function selfCollapsing(box) {
+  return !box.bfc && box.kind === "block" && !box.replaced
+    && borderWidths(box.style).every(value => value === 0)
+    && (box.style?.padding ?? ZERO_BOX).every(value => value === 0)
+    && (box.style?.height === "auto" || box.style?.height === 0)
+    && (numberOrNull(box.style?.minHeight) ?? 0) <= 0
+    && inFlowChildren(box).every(selfCollapsing);
+}
+
 function collapsesThroughBottom(box) {
   return !box.bfc && box.kind === "block" && !box.replaced
     && borderWidths(box.style)[2] === 0 && (box.style?.padding ?? ZERO_BOX)[2] === 0
@@ -1831,7 +1899,17 @@ 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);
+  // Legacy line clamping applies to a vertical -webkit-box, not ordinary blocks.
+  const clamp = ifc.style?.webkitBoxOrient === "vertical"
+    && ["-webkit-box", "-webkit-inline-box"].includes(ifc.style?.display)
+    ? ifc.style.webkitLineClamp : null;
+  if (clamp && lines.length > clamp) {
+    lines.length = clamp;
+    lines[clamp - 1] = { ...lines[clamp - 1], clamped: true };
+  }
   let cursor = y;
   let baseline = null;
   for (const line of lines) {
@@ -2006,7 +2084,7 @@ function mayBreakWithinWords(paragraph, piece) {
  * room for "…". Mutates `segments`; returns the ellipsis to append, or null.
  */
 function truncateForEllipsis(ctx, style, paragraph, segments, line, width) {
-  if (style?.textOverflow !== "ellipsis" || style.overflowX !== "clip" || line.width <= width + 0.5) return null;
+  if (!line.clamped && (style?.textOverflow !== "ellipsis" || style.overflowX !== "clip" || line.width <= width + 0.5)) return null;
   const lastText = [...segments].reverse().find((segment) => segment.run.kind === "text");
   if (!lastText) return null;
   const text = "\u2026";
@@ -2042,9 +2120,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 = paddingBox(node.style);
+  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 = paddingBox(node.style);
+  return {
+    top: numberOrZero(margin[0]) + border[0] + padding[0],
+    bottom: numberOrZero(margin[2]) + border[2] + padding[2],
+  };
 }
 
 /**
@@ -2069,7 +2164,7 @@ function inlineImageTop(style, height, metrics) {
 
 function inlineInsets(style) {
   const margin = style?.margin ?? ZERO_BOX;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style);
   const border = borderWidths(style);
   return {
     left: numberOrZero(margin[3]) + border[3] + padding[3],
@@ -2092,7 +2187,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);
@@ -2172,13 +2268,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) ;
@@ -2192,7 +2295,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;
@@ -2205,6 +2308,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);
@@ -2223,6 +2342,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) : "",
@@ -2231,11 +2351,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 = paddingBox(run.node.style, ctx.containing?.width);
+        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,
@@ -2245,14 +2381,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,
       });
@@ -2296,15 +2432,16 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
   for (const [node, edge] of edges) {
     const nodeStyle = paragraph.inlineState.get(node)?.style;
     if (!isDecorated(nodeStyle) || edge.first == null) continue;
-    const padding = nodeStyle.padding ?? ZERO_BOX;
+    const padding = paddingBox(nodeStyle, ctx.containing?.width);
     const border = borderWidths(nodeStyle);
     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,
@@ -2327,6 +2464,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);
@@ -2353,7 +2494,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) {
@@ -2420,7 +2561,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;
@@ -2430,7 +2613,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;