buninu-browser 0.2.2 → 0.2.4

package/lib/layout/text-layout.js

@@ -1,10 +1,10 @@
 /**
  * Box-tree layout: block formatting contexts with margin collapsing, inline
  * formatting contexts with line boxes, atomic inlines, and flex layout
- * (CSS Flexbox §9: flexible length resolution, wrapping, alignment; column
- * containers currently stack items without main-axis flexing), and grid
- * layout (CSS Grid 2 §8 placement and §12 track sizing, without named lines,
- * areas, or column auto-flow). Relative, absolute and fixed positioning
+ * (CSS Flexbox §9: row/column flexible length resolution, row wrapping,
+ * alignment), and grid
+ * layout (CSS Grid 2 §8 placement and §12 track sizing, including named areas
+ * and row/column auto-flow). Relative, absolute and fixed positioning
  * place boxes after flow layout; positioned boxes get their own paint layer.
  *
  * The block/inline structure follows concepts from Dropflow
@@ -23,6 +23,14 @@ 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 = {}) {
@@ -142,7 +150,7 @@ 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"]);
+const UNPOSITIONABLE = new Set(["root", "text", "line-break", "contents"]);
 
 function isPositioned(node) {
   return !UNPOSITIONABLE.has(node.type) && ["relative", "absolute", "fixed", "sticky"].includes(node.style?.position);
@@ -209,7 +217,10 @@ function blockChildren(node, flags) {
   };
 
   function walk(child, childFlags) {
-    if (isOutOfFlow(child)) {
+    if (child.type === "contents") {
+      const flags = inheritedFlags(child, childFlags);
+      for (const grandchild of child.children) walk(grandchild, flags);
+    } else if (isOutOfFlow(child)) {
       const box = outOfFlowBox(child, childFlags);
       // Between blocks the placeholder records the static position; inline
       // placeholders fall back to the containing block's origin.
@@ -263,10 +274,10 @@ function flexItems(node, flags) {
     }
     text = [];
   };
-  for (const child of node.children) {
+  for (const child of boxChildren(node)) {
     if (child.type === "line-break") continue;
     if (child.type === "text") {
-      if (child.text.trim()) text.push(textItem(child, flags));
+      if (child.text.trim()) text.push(textItem(child, inheritedFlags(child, flags)));
       continue;
     }
     if (isOutOfFlow(child)) {
@@ -280,6 +291,14 @@ function flexItems(node, flags) {
   return items;
 }
 
+/** display:contents contributes its descendants directly to the box tree. */
+function* boxChildren(node) {
+  for (const child of node.children) {
+    if (child.type === "contents") yield* boxChildren(child);
+    else yield child;
+  }
+}
+
 function textItem(node, flags) {
   return { kind: "text", node, style: node.style ?? null, text: node.text, preserve: flags.preserve, wrap: flags.wrap };
 }
@@ -325,7 +344,7 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
   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 key = blockCacheKey(width, absorbTop, forcedHeight, containing);
   const cached = cachedBlockResult(ctx, box, key, y, x);
   if (cached) return cached;
   const boxStart = ctx.boxes.length;
@@ -356,9 +375,11 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
     dx = offset.x;
     dy = offset.y;
   }
-  if (style?.transform) {
-    dx += numberOrZero(resolveLength(style.transform.x, record.width));
-    dy += numberOrZero(resolveLength(style.transform.y, record.height));
+  // Individual translate precedes the transform list; its offset is in the
+  // parent's coordinates and is not multiplied by the list's own scale.
+  for (const translation of [style?.translate, style?.transform]) if (translation) {
+    dx += numberOrZero(resolveLength(translation.x, record.width));
+    dy += numberOrZero(resolveLength(translation.y, record.height));
   }
   for (let index = boxStart; index < ctx.boxes.length; index++) ctx.boxes[index].layer ??= ctx.layer;
   for (let index = fragmentStart; index < ctx.fragments.length; index++) ctx.fragments[index].layer ??= ctx.layer;
@@ -511,31 +532,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);
   }
 }
 
@@ -546,15 +573,23 @@ function layoutAbsolutes(ctx, box, record) {
  * item by item because shiftOutput moves everything after a start index.
  */
 function justifyColumn(ctx, items, justify = "normal", free) {
-  if (!(free > 0) || ["normal", "start", "flex-start", "stretch"].includes(justify)) return;
+  const autoMargins = items.reduce((sum, item) => sum + Number(item.autoTop) + Number(item.autoBottom), 0);
+  if (!free || !autoMargins && ["normal", "start", "flex-start", "stretch"].includes(justify)) return;
   const count = items.length;
+  let autoOffset = 0;
   const offset = (index) => {
+    if (autoMargins && free > 0) {
+      autoOffset += Number(items[index].autoTop) * free / autoMargins;
+      const result = autoOffset;
+      autoOffset += Number(items[index].autoBottom) * free / autoMargins;
+      return result;
+    }
     switch (justify) {
       case "center": return free / 2;
       case "end": case "flex-end": return free;
-      case "space-between": return count > 1 ? free * index / (count - 1) : 0;
-      case "space-around": return free / count * (index + 0.5);
-      case "space-evenly": return free / (count + 1) * (index + 1);
+      case "space-between": return free > 0 && count > 1 ? free * index / (count - 1) : 0;
+      case "space-around": return free > 0 ? free / count * (index + 0.5) : free / 2;
+      case "space-evenly": return free > 0 ? free / (count + 1) * (index + 1) : free / 2;
       default: return 0;
     }
   };
@@ -593,9 +628,9 @@ 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) {
@@ -639,6 +674,8 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   const containingHeight = ctx.containing?.height;
   const resolveHeight = (value) => numberOrNull(resolveLength(value, containingHeight ?? NaN));
   const specifiedHeight = resolveHeight(style?.height);
+  const minHeight = resolveHeight(style?.minHeight);
+  const maxHeight = style?.maxHeight === "none" ? null : resolveHeight(style?.maxHeight);
   const previousContaining = ctx.containing;
   ctx.containing = {
     width: contentWidth,
@@ -660,38 +697,11 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
     contentBottom = result.bottom;
     baseline = result.baseline;
   } else if (box.flex === "column") {
-    const gap = style?.rowGap ?? style?.gap ?? 0;
-    let cursor = contentTop;
-    columnItems = [];
-    box.children.forEach((child, index) => {
-      if (index > 0) cursor += gap;
-      columnItems.push({ boxStart: ctx.boxes.length, fragmentStart: ctx.fragments.length });
-      if (child.kind === "ifc") {
-        const result = layoutInline(ctx, child, contentX, contentWidth, cursor);
-        cursor = result.bottom;
-        baseline = result.baseline ?? baseline;
-        return;
-      }
-      const alignment = ["auto", "normal", undefined].includes(child.style?.alignSelf)
-        ? style?.alignItems ?? "normal"
-        : child.style.alignSelf;
-      const shrink = !["normal", "stretch"].includes(alignment);
-      const placed = resolveHorizontal(ctx, child, contentX, contentWidth, shrink);
-      // 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;
-        if (alignment === "center") childX = contentX + placed.marginLeft + free / 2;
-        else if (alignment === "end") childX = contentX + placed.marginLeft + free;
-      }
-      const margin = verticalMargins(child.style);
-      const result = layoutBlock(ctx, child, childX, placed.width, cursor + margin.top);
-      cursor += margin.top + result.height + margin.bottom;
-      baseline = result.baseline ?? baseline;
-    });
-    contentBottom = cursor;
+    const result = layoutFlexColumn(ctx, box, contentX, contentWidth, contentTop,
+      minHeight == null ? 0 : toContentHeight(minHeight), maxHeight == null ? Infinity : toContentHeight(maxHeight));
+    contentBottom = result.bottom;
+    baseline = result.baseline;
+    columnItems = result.items;
   } else {
     let cursor = contentTop;
     let pending = null;
@@ -718,8 +728,13 @@ 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);
@@ -728,14 +743,15 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   ctx.containing = previousContaining;
   let contentHeight = Math.max(0, contentBottom - contentTop);
   if (specifiedHeight != null) contentHeight = toContentHeight(specifiedHeight);
-  const maxHeight = style?.maxHeight === "none" ? null : resolveHeight(style?.maxHeight);
   if (maxHeight != null) contentHeight = Math.min(contentHeight, toContentHeight(maxHeight));
-  const minHeight = resolveHeight(style?.minHeight);
   if (minHeight != null) contentHeight = Math.max(contentHeight, toContentHeight(minHeight));
+  if (forcedHeight != null) contentHeight = Math.max(0, forcedHeight - padding[0] - padding[2] - border[0] - border[2]);
   if (columnItems?.length) justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
   if (gridResult) alignGridContent(ctx, gridResult, style?.alignContent, contentHeight - (contentBottom - contentTop));
   record.height = forcedHeight ?? contentHeight + padding[0] + padding[2] + border[0] + border[2];
-  if (style?.display === "list-item") placeListMarker(ctx, box, contentX, contentTop, firstFragment);
+  // Summary's disclosure marker participates in its inline content.
+  const summaryMarker = box.node.tagName === "SUMMARY" && ["disclosure-open", "disclosure-closed"].includes(style?.listStyleType);
+  if (style?.display === "list-item" && !summaryMarker) placeListMarker(ctx, box, contentX, contentTop, firstFragment);
   return { height: record.height, baseline };
 }
 
@@ -783,6 +799,8 @@ function markerText(type, ordinal) {
     case "disc": return "\u2022 ";
     case "circle": return "\u25E6 ";
     case "square": return "\u25AA ";
+    case "disclosure-closed": return "\u25B6 ";
+    case "disclosure-open": return "\u25BC ";
     case "decimal": return `${ordinal}. `;
     case "decimal-leading-zero": return `${String(ordinal).padStart(2, "0")}. `;
     case "lower-alpha":
@@ -818,7 +836,97 @@ function roman(value) {
 }
 
 // ---------------------------------------------------------------------------
-// Flex row layout (CSS Flexbox §9)
+// Flex layout (CSS Flexbox §9)
+
+function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
+  const style = box.style;
+  const gap = style?.rowGap ?? style?.gap ?? 0;
+  const definiteHeight = ctx.containing?.height;
+  // Most column containers have auto height. Without a main-axis constraint
+  // or definite basis there is no flexible free space to distribute, so a
+  // single layout pass suffices even for deeply nested application shells.
+  const unconstrained = definiteHeight == null && minHeight === 0 && maxHeight === Infinity
+    && box.children.every(child => numberOrNull(resolveLength(child.style?.flexBasis, NaN)) == null);
+  if (unconstrained) {
+    let cursor = y;
+    let baseline = null;
+    const items = [];
+    for (const [index, child] of box.children.entries()) {
+      if (index) cursor += gap;
+      const horizontal = columnHorizontal(ctx, child, style, x, width);
+      const margin = child.style?.margin ?? ZERO_BOX;
+      items.push({boxStart:ctx.boxes.length,fragmentStart:ctx.fragments.length,
+        autoTop:margin[0] === "auto",autoBottom:margin[2] === "auto"});
+      const result = layoutBlock(ctx, child, horizontal.x, horizontal.width, cursor + numberOrZero(margin[0]));
+      cursor += numberOrZero(margin[0]) + result.height + numberOrZero(margin[2]);
+      baseline ??= result.baseline;
+    }
+    return {bottom:cursor,baseline,items};
+  }
+  const items = box.children.map(child => {
+    const childStyle = child.style;
+    const horizontal = columnHorizontal(ctx, child, style, x, width);
+    const margin = childStyle?.margin ?? ZERO_BOX;
+    const padding = paddingBox(childStyle, width);
+    const border = borderWidths(childStyle);
+    const extra = padding[0] + padding[2] + border[0] + border[2];
+    const contentBox = value => Math.max(0, childStyle?.boxSizing === "border-box" ? value - extra : value);
+    const resolve = value => numberOrNull(resolveLength(value, definiteHeight ?? NaN));
+    const measured = dryLayout(ctx, child, horizontal.width);
+    const content = Math.max(0, measured.height - extra);
+    const specified = resolve(childStyle?.height);
+    const basis = childStyle?.flexBasis ?? "auto";
+    const definiteBasis = resolve(basis);
+    const base = definiteBasis != null ? contentBox(definiteBasis)
+      : basis === "auto" && specified != null ? contentBox(specified) : content;
+    const minSize = resolve(childStyle?.minHeight);
+    // The automatic minimum is content-based except for scrollable items.
+    const scrollable = ["auto", "scroll", "hidden"].includes(childStyle?.overflowScrollY);
+    let min = minSize != null ? contentBox(minSize) : scrollable ? 0
+      : Math.min(content, specified == null ? Infinity : contentBox(specified));
+    const maxSize = resolve(childStyle?.maxHeight);
+    const max = maxSize == null ? Infinity : contentBox(maxSize);
+    min = Math.min(min, max);
+    return { box:child, horizontal, extra, base, min, max, naturalHeight:measured.height,
+      definite:definiteHeight != null || definiteBasis != null,
+      hypothetical:Math.min(max, Math.max(min, base)), grow:childStyle?.flexGrow ?? 0, shrink:childStyle?.flexShrink ?? 1,
+      // The shared main-axis solver names these left/right; columns use top/bottom.
+      marginLeft:numberOrZero(margin[0]), marginRight:numberOrZero(margin[2]),
+      autoTop:margin[0] === "auto", autoBottom:margin[2] === "auto" };
+  });
+  const gaps = gap * Math.max(0, items.length - 1);
+  const natural = gaps + items.reduce((sum, item) => sum + item.hypothetical + item.extra + item.marginLeft + item.marginRight, 0);
+  const available = Math.max(minHeight, Math.min(maxHeight, definiteHeight ?? natural));
+  resolveFlexibleLengths(items, available - gaps);
+  let cursor = y;
+  let baseline = null;
+  for (const [index, item] of items.entries()) {
+    if (index) cursor += gap;
+    item.boxStart = ctx.boxes.length;
+    item.fragmentStart = ctx.fragments.length;
+    const targetHeight = item.target + item.extra;
+    const forcedHeight = item.definite || Math.abs(targetHeight - item.naturalHeight) > 1e-9 ? targetHeight : null;
+    const result = layoutBlock(ctx, item.box, item.horizontal.x, item.horizontal.width,
+      cursor + item.marginLeft, false, forcedHeight);
+    cursor += item.marginLeft + result.height + item.marginRight;
+    baseline ??= result.baseline;
+  }
+  return { bottom:cursor, baseline, items };
+}
+
+function columnHorizontal(ctx, child, style, x, width) {
+  const alignment = ["auto", "normal", undefined].includes(child.style?.alignSelf)
+    ? style?.alignItems ?? "normal" : child.style.alignSelf;
+  const shrink = !["normal", "stretch"].includes(alignment);
+  const horizontal = resolveHorizontal(ctx, child, x, width, shrink);
+  const margin = child.style?.margin ?? ZERO_BOX;
+  if (shrink && margin[1] !== "auto" && margin[3] !== "auto") {
+    const free = width - horizontal.width - horizontal.marginLeft - horizontal.marginRight;
+    if (alignment === "center") horizontal.x += free / 2;
+    else if (alignment === "end") horizontal.x += free;
+  }
+  return horizontal;
+}
 
 function layoutFlexRow(ctx, box, x, width, y) {
   const style = box.style;
@@ -912,7 +1020,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;
@@ -1124,7 +1232,7 @@ function tableStructure(node, flags) {
         target.push({
           node: child,
           style: child.style ?? null,
-          cells: child.children.filter((cell) => cell.type === "table-cell").map((cell) => tableCell(cell, rowFlags)),
+          cells: [...boxChildren(child)].filter((cell) => cell.type === "table-cell").map((cell) => tableCell(cell, rowFlags)),
         });
       } else if (child.type === "table-cell") {
         if (!anonymous) target.push(anonymous = { node: null, style: null, cells: [] });
@@ -1137,16 +1245,16 @@ function tableStructure(node, flags) {
     addRows(body, loose, flags);
     loose = [];
   };
-  for (const child of node.children) {
+  for (const child of boxChildren(node)) {
     if (child.type === "table-row" || child.type === "table-cell") {
       loose.push(child);
       continue;
     }
     flushLoose();
     if (child.type === "table-caption") captions.push(buildBox(child, inheritedFlags(child, flags), true));
-    else if (child.type === "table-header-group") addRows(header, child.children, inheritedFlags(child, flags));
-    else if (child.type === "table-footer-group") addRows(footer, child.children, inheritedFlags(child, flags));
-    else if (child.type === "table-row-group") addRows(body, child.children, inheritedFlags(child, flags));
+    else if (child.type === "table-header-group") addRows(header, boxChildren(child), inheritedFlags(child, flags));
+    else if (child.type === "table-footer-group") addRows(footer, boxChildren(child), inheritedFlags(child, flags));
+    else if (child.type === "table-row-group") addRows(body, boxChildren(child), inheritedFlags(child, flags));
   }
   flushLoose();
   return { rows: [...header, ...body, ...footer], captions, grid: null };
@@ -1338,15 +1446,44 @@ function gridHorizontal(ctx, containerStyle, item, areaX, areaWidth) {
   return placed;
 }
 
-/** Expands track lists and places items (§7.2, §8.5 row auto-flow). */
+/** Expands track lists and places items (§7.2, §8.5). */
 function gridStructure(ctx, box, availableWidth, columnGap, definite) {
   const style = box.style;
   const explicitColumns = expandTrackList(style?.gridTemplateColumns, definite ? availableWidth : null, columnGap);
   const explicitRows = expandTrackList(style?.gridTemplateRows, null, style?.rowGap ?? 0);
-  const items = box.children.map((child) => ({ box: child, ...gridLines(child.style, explicitColumns.tracks.length, "Column"),
-    ...rowLines(child.style, explicitRows.tracks.length) }));
+  const areas = style?.gridTemplateAreas;
+  const explicitColumnCount = Math.max(explicitColumns.tracks.length, areas?.columns ?? 0);
+  const explicitRowCount = Math.max(explicitRows.tracks.length, areas?.rows ?? 0);
+  const items = box.children.map((child) => ({ box: child,
+    ...gridLines(child.style, explicitColumnCount, "Column", areas),
+    ...gridLines(child.style, explicitRowCount, "Row", areas) }));
+  // The column-flow algorithm is the row-flow algorithm with its axes exchanged.
+  const columnFlow = style?.gridAutoFlow?.column === true;
+  if (columnFlow) for (const item of items) transposeGridItem(item);
+  let { columnCount, rowCount } = placeGridItems(items,
+    columnFlow ? explicitRowCount : explicitColumnCount,
+    columnFlow ? explicitColumnCount : explicitRowCount, style?.gridAutoFlow?.dense === true);
+  if (columnFlow) {
+    for (const item of items) transposeGridItem(item);
+    [columnCount, rowCount] = [rowCount, columnCount];
+  }
+  const columnTracks = Array.from({ length: columnCount }, (_, index) =>
+    explicitColumns.tracks[index] ?? cycle(style?.gridAutoColumns, index - explicitColumns.tracks.length));
+  const rowTracks = Array.from({ length: rowCount }, (_, index) =>
+    explicitRows.tracks[index] ?? cycle(style?.gridAutoRows, index - explicitRows.tracks.length));
+  // auto-fit: repeated tracks nobody occupies collapse (§7.2.3.2).
+  const columnCollapsed = columnTracks.map((_, index) => explicitColumns.autoFit.has(index)
+    && !items.some((item) => index >= item.column && index < item.column + item.columnSpan));
+  return { items, columnTracks, rowTracks, columnCollapsed };
+}
 
-  let columnCount = Math.max(1, explicitColumns.tracks.length);
+function transposeGridItem(item) {
+  [item.row, item.column] = [item.column, item.row];
+  [item.rowSpan, item.columnSpan] = [item.columnSpan, item.rowSpan];
+}
+
+function placeGridItems(items, explicitColumnCount, explicitRowCount, dense) {
+  let columnCount = Math.max(1, explicitColumnCount);
   for (const item of items) {
     if (item.column != null) columnCount = Math.max(columnCount, item.column + item.columnSpan);
     else columnCount = Math.max(columnCount, item.columnSpan);
@@ -1376,7 +1513,6 @@ function gridStructure(ctx, box, availableWidth, columnGap, definite) {
     occupy(item);
   }
   // 3. Auto-placed items walk a cursor forward (sparse) or restart (dense).
-  const dense = style?.gridAutoFlow?.dense === true;
   let cursorRow = 0;
   let cursorColumn = 0;
   for (const item of items) {
@@ -1406,15 +1542,8 @@ function gridStructure(ctx, box, availableWidth, columnGap, definite) {
     occupy(item);
   }
 
-  const rowCount = Math.max(explicitRows.tracks.length, ...items.map((item) => item.row + item.rowSpan), 0);
-  const columnTracks = Array.from({ length: columnCount }, (_, index) =>
-    explicitColumns.tracks[index] ?? cycle(style?.gridAutoColumns, index - explicitColumns.tracks.length));
-  const rowTracks = Array.from({ length: rowCount }, (_, index) =>
-    explicitRows.tracks[index] ?? cycle(style?.gridAutoRows, index - explicitRows.tracks.length));
-  // auto-fit: repeated tracks nobody occupies collapse (§7.2.3.2).
-  const columnCollapsed = columnTracks.map((_, index) => explicitColumns.autoFit.has(index)
-    && !items.some((item) => index >= item.column && index < item.column + item.columnSpan));
-  return { items, columnTracks, rowTracks, columnCollapsed };
+  const rowCount = Math.max(explicitRowCount, ...items.map((item) => item.row + item.rowSpan), 0);
+  return { columnCount, rowCount };
 }
 
 function cycle(tracks, index) {
@@ -1422,13 +1551,22 @@ function cycle(tracks, index) {
   return list[((index % list.length) + list.length) % list.length];
 }
 
-function gridLines(style, explicitCount, axis) {
+function gridLines(style, explicitCount, axis, templateAreas) {
   const start = style?.[`grid${axis}Start`] ?? "auto";
   const end = style?.[`grid${axis}End`] ?? "auto";
   // Line numbers are 1-based; negatives count back from the explicit end line.
   const index = (line) => line > 0 ? line - 1 : Math.max(0, explicitCount + 1 + line);
-  let from = start.line != null ? index(start.line) : null;
-  let to = end.line != null ? index(end.line) : null;
+  const areaLine = (name, end) => {
+    if (!name || !templateAreas) return null;
+    const key = axis.toLowerCase();
+    const direct = templateAreas.areas[name];
+    if (direct) return direct[end ? `${key}End` : key];
+    const suffix = /^(.*)-(start|end)$/.exec(name);
+    const area = suffix && templateAreas.areas[suffix[1]];
+    return area ? area[suffix[2] === "end" ? `${key}End` : key] : null;
+  };
+  let from = start.line != null ? index(start.line) : areaLine(start.name, false);
+  let to = end.line != null ? index(end.line) : areaLine(end.name, true);
   let span = 1;
   if (from != null && to != null) {
     if (to < from) [from, to] = [to, from];
@@ -1445,10 +1583,6 @@ function gridLines(style, explicitCount, axis) {
   return axis === "Column" ? { column: from, columnSpan: span } : { row: from, rowSpan: span };
 }
 
-function rowLines(style, explicitCount) {
-  return gridLines(style, explicitCount, "Row");
-}
-
 /** Expands repeat() and resolves auto-fill/auto-fit repetitions (§7.2.3.2). */
 function expandTrackList(list, available, gap) {
   const tracks = [];
@@ -1503,7 +1637,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;
   }
@@ -1693,7 +1827,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;
@@ -1729,7 +1863,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);
@@ -1772,7 +1906,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) => {
@@ -1821,6 +1955,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
@@ -1874,6 +2017,14 @@ function layoutInline(ctx, ifc, x, width, y) {
   // 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) {
@@ -2048,7 +2199,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";
@@ -2088,7 +2239,7 @@ function truncateForEllipsis(ctx, style, paragraph, segments, line, width) {
 function inlineImageMargins(node) {
   const margin = node.style?.margin ?? ZERO_BOX;
   const border = borderWidths(node.style);
-  const padding = node.style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(node.style);
   return {
     left: numberOrZero(margin[3]) + border[3] + padding[3],
     right: numberOrZero(margin[1]) + border[1] + padding[1],
@@ -2099,7 +2250,7 @@ function inlineImageMargins(node) {
 function inlineImageVerticalInsets(node) {
   const margin = node.style?.margin ?? ZERO_BOX;
   const border = borderWidths(node.style);
-  const padding = node.style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(node.style);
   return {
     top: numberOrZero(margin[0]) + border[0] + padding[0],
     bottom: numberOrZero(margin[2]) + border[2] + padding[2],
@@ -2128,7 +2279,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],
@@ -2320,7 +2471,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
       // 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;
+        const padding = paddingBox(run.node.style, ctx.containing?.width);
         ctx.boxes.push({
           nodeId: run.nodeId,
           x: imageX - padding[3] - border[3],
@@ -2396,7 +2547,7 @@ 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;
@@ -2506,7 +2657,7 @@ function cachedMetrics(fontMetrics) {
   const byStyle = new WeakMap();
   const metricsFor = (style) => {
     const fontSize = style?.fontSize ?? 16;
-    const key = `${fontSize}/${style?.fontWeight ?? 400}/${style?.fontFamily?.join(",")}`;
+    const key = `${fontSize}/${style?.fontWeight ?? 400}/${style?.fontStyle ?? "normal"}/${style?.fontStretch ?? 100}/${style?.fontFamily?.join(",")}`;
     let metrics = cache.get(key);
     if (!metrics) {
       metrics = typeof fontMetrics === "function" ? fontMetrics(style ?? null) : null;
@@ -2531,12 +2682,12 @@ function cachedMetrics(fontMetrics) {
  * 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;
+  const resolve = (cssValue, fallback, reference) => {
+    const value = cssValue !== "auto" && cssValue != null ? resolveLength(cssValue, reference ?? NaN) : null;
     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);
+  let width = resolve(node.style?.width, 300, referenceWidth);
+  const height = resolve(node.style?.height, 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) };
@@ -2568,25 +2719,29 @@ function svgDimensions(node, referenceWidth, referenceHeight) {
 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;
+  // A canvas's attributes are its intrinsic bitmap dimensions. Its cached
+  // paint snapshot can still describe the previous bitmap during layout.
+  const canvas = node.tagName === "CANVAS";
+  const intrinsicWidth = (canvas ? node.widthAttribute : node.resource?.width) ?? node.widthAttribute ?? 300;
+  const intrinsicHeight = (canvas ? node.heightAttribute : node.resource?.height) ?? node.heightAttribute ?? 150;
+  const emptyCanvas = node.tagName === "CANVAS" && !(intrinsicWidth > 0 && intrinsicHeight > 0);
+  const ratio = emptyCanvas ? null : intrinsicWidth / intrinsicHeight;
   const cssWidth = node.style?.width;
   const cssHeight = node.style?.height;
   let width = cssWidth !== "auto" && cssWidth != null
     ? resolveLength(cssWidth, referenceWidth)
-    : node.widthAttribute;
+    : null;
   let height = cssHeight !== "auto" && cssHeight != null
     ? resolveLength(cssHeight, referenceHeight ?? NaN)
-    : node.heightAttribute;
+    : null;
   if (!Number.isFinite(width)) width = null;
   if (!Number.isFinite(height)) height = null;
   if (width == null && height == null) [width, height] = [intrinsicWidth, intrinsicHeight];
-  else if (width == null) width = height * ratio;
-  else if (height == null) height = width / ratio;
+  else if (width == null) width = ratio == null ? intrinsicWidth : height * ratio;
+  else if (height == null) height = ratio == null ? intrinsicHeight : width / ratio;
   if (node.style?.maxWidth !== "none" && node.style?.maxWidth != null) {
     const maximum = resolveLength(node.style.maxWidth, referenceWidth);
-    if (Number.isFinite(maximum) && width > maximum) [width, height] = [maximum, maximum / ratio];
+    if (Number.isFinite(maximum) && width > maximum) [width, height] = [maximum, ratio == null ? height : maximum / ratio];
   }
   if (node.tagName === "VIDEO") {
     if (Number.isFinite(referenceWidth) && width > referenceWidth) [width, height] = [referenceWidth, referenceWidth / ratio];
@@ -2595,7 +2750,8 @@ function imageDimensions(node, referenceWidth, referenceHeight = null) {
     if (Number.isFinite(minHeight) && height < minHeight) height = minHeight;
     if (Number.isFinite(maxHeight) && height > maxHeight) [width, height] = [maxHeight * ratio, maxHeight];
   }
-  return { width: Math.max(1, width), height: Math.max(1, height) };
+  const minimum = node.tagName === "CANVAS" ? 0 : 1;
+  return { width: Math.max(minimum, width), height: Math.max(minimum, height) };
 }
 
 function positiveInteger(value, fallback) {
@@ -2622,8 +2778,10 @@ function resolveLength(value, reference) {
   if (!value || typeof value !== "object") return value;
   if (value.unit === "%") return reference * value.value / 100;
   if (value.unit === "math" && value.kind === "calc") return value.px + reference * value.percent / 100;
+  if (value.unit === "math" && value.kind === "scale") return value.factor * resolveLength(value.value, reference);
   if (value.unit === "math") {
     const values = value.values.map((part) => resolveLength(part, reference));
+    if (value.kind === "sum") return values.reduce((sum, part) => sum + part, 0);
     if (value.kind === "min") return Math.min(...values);
     if (value.kind === "max") return Math.max(...values);
     return Math.max(values[0], Math.min(values[1], values[2]));