buninu-browser 0.2.1 → 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;
@@ -51,6 +52,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 +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));
 
@@ -317,9 +322,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, 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;
@@ -343,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));
@@ -357,14 +365,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 +397,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 +446,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 +474,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 },
@@ -576,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], [{
@@ -608,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);
@@ -639,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;
@@ -685,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));
@@ -817,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);
@@ -1730,6 +1762,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;
 }
@@ -1763,10 +1796,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]) };
@@ -1831,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;
@@ -2042,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],
+  };
 }
 
 /**
@@ -2092,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);
@@ -2172,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) ;
@@ -2192,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;
@@ -2205,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);
@@ -2223,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) : "",
@@ -2231,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,
@@ -2245,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,
       });
@@ -2301,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,
@@ -2327,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);
@@ -2353,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) {
@@ -2420,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;
@@ -2430,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;

package/lib/log.js

@@ -34,9 +34,11 @@ export function installLog(path) {
   logPath = path;
   for (const level of ["log", "info", "warn", "error", "debug", "trace"]) {
     const original = console[level].bind(console);
+    // The file first: whoever sees a line on the console (and then stops
+    // this process) finds it in the log too.
     console[level] = (...args) => {
-      original(...args);
       writeLog(level, formatWithOptions({ colors: false }, ...args));
+      original(...args);
     };
   }
   writeLog("log", `started pid ${process.pid}, bun ${Bun.version}, cwd ${process.cwd()}, args ${JSON.stringify(Bun.argv.slice(2))}`);
@@ -69,13 +71,14 @@ export async function pipeToLog(stream, source, echo) {
   let pending = "";
   try {
     for await (const chunk of stream) {
-      echo(chunk);
       pending += decoder.decode(chunk, { stream: true });
       const end = pending.lastIndexOf("\n");
       if (end >= 0) {
         writeLog(source, pending.slice(0, end));
         pending = pending.slice(end + 1);
       }
+      // Echoed after the complete lines are in the log (see installLog).
+      echo(chunk);
     }
   } catch {
     // The child went away mid-read.

package/lib/media/byte-pipe.js

@@ -0,0 +1,82 @@
+/**
+ * A growing media buffer shared by a progressive download and by MSE appends.
+ *
+ * wasmpeg can only open a decoder on a complete snapshot, so playback keeps
+ * this concatenation, reopens when the decoder runs off the end of what it
+ * was opened on, and seeks back. `generation` changes on every append and
+ * on finish/fail, which is how a decoder knows its snapshot is stale.
+ * `waitFor` resolves when `size` reaches the mark or the pipe is finished.
+ */
+export function createBytePipe() {
+  const chunks = [];
+  let size = 0;
+  let generation = 0;
+  let done = false;
+  let error = null;
+  /** @type {Array<() => void>} */
+  const waiters = [];
+
+  const wake = () => {
+    for (const waiter of waiters.splice(0)) waiter();
+  };
+
+  return {
+    append(bytes) {
+      if (done || bytes == null) return;
+      const chunk = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
+      if (!chunk.byteLength) return;
+      chunks.push(chunk);
+      size += chunk.byteLength;
+      generation += 1;
+      wake();
+    },
+    finish() {
+      if (done) return;
+      done = true;
+      generation += 1;
+      wake();
+    },
+    fail(reason) {
+      if (done) return;
+      error = reason instanceof Error ? reason : new Error(String(reason ?? "media fetch failed"));
+      done = true;
+      generation += 1;
+      wake();
+    },
+    /** One contiguous snapshot. Collapses chunks so the next call is cheap. */
+    bytes() {
+      if (chunks.length === 1) return chunks[0];
+      const out = new Uint8Array(size);
+      let offset = 0;
+      for (const chunk of chunks) {
+        out.set(chunk, offset);
+        offset += chunk.byteLength;
+      }
+      chunks.length = 0;
+      if (out.byteLength) chunks.push(out);
+      return out;
+    },
+    get size() {
+      return size;
+    },
+    get generation() {
+      return generation;
+    },
+    get done() {
+      return done;
+    },
+    get error() {
+      return error;
+    },
+    waitFor(mark) {
+      if (size >= mark || done) return Promise.resolve();
+      return new Promise((resolve) => {
+        const check = () => {
+          if (size >= mark || done) resolve();
+          else waiters.push(check);
+        };
+        waiters.push(check);
+      });
+    },
+  };
+}

package/lib/media/position-audio.js

@@ -0,0 +1,42 @@
+/** Advance a PCM decoder to an exact sample cursor, never playing discarded PCM.
+ * Reopened snapshots start at sample zero, including their pending first chunk.
+ * The caller holds output requests until this transaction has completed.
+ */
+export async function advanceAudio(getSound, seconds, { reopen, needsMore, active = () => true }) {
+  while (active()) {
+    const sound = getSound();
+    const { sampleRate, channels } = sound.decoder;
+    const target = Math.max(0, Math.round(seconds * sampleRate));
+    if (sound.position === target) return true;
+    if (sound.position > target) {
+      if (!await reopen()) return false;
+      continue;
+    }
+    // This is also the first chunk of EVERY replacement decoder. Skipping it
+    // used to leave the opening sound queued at exact chunk boundaries.
+    let samples = sound.pending;
+    sound.pending = null;
+    if (!samples) {
+      try { samples = sound.decoder.nextSamples(); }
+      catch (error) {
+        if (!needsMore(sound)) throw error;
+      }
+    }
+    if (samples?.length) {
+      const take = Math.min(target - sound.position, samples.length / channels);
+      sound.position += take;
+      if (take * channels < samples.length) sound.pending = samples.subarray(take * channels);
+      continue;
+    }
+    if (!needsMore(sound)) return false;
+    const pipe = sound.pipe;
+    if (pipe.error) throw pipe.error;
+    // Data may already have arrived while this snapshot was being decoded.
+    if (pipe.generation === sound.openedGeneration) await pipe.waitFor(pipe.size + 1);
+    if (!active()) return false;
+    if (pipe.error) throw pipe.error;
+    if (pipe.generation === sound.openedGeneration) return false;
+    if (!await reopen()) return false;
+  }
+  return false;
+}