buninu-browser 0.2.3 → 0.3.0

package/lib/input/hit-test.js

@@ -80,39 +80,82 @@ export function hitTest(tree, layout, x, y, scroll, viewport) {
  * pointer events. Null when the point hits nothing.
  */
 export function elementAtPoint(tree, displayList, x, y, scroll) {
+  const domNode = renderNodeAtPoint(tree, displayList, x, y, scroll)?.domNode;
+  return domNode?.nodeType === 1 ? domNode : domNode?.parentElement ?? null;
+}
+
+/** Also preserves generated controls, whose owning DOM element differs from their render node. */
+export function renderNodeAtPoint(tree, displayList, x, y, scroll) {
   const hittable = hitTestable(tree);
   const nodeId = hitTarget(displayList, x, y, scroll, (id) => !hittable(tree.nodesById.get(id)));
-  const domNode = nodeId == null ? null : tree.nodesById.get(nodeId)?.domNode;
-  return domNode?.nodeType === 1 ? domNode : domNode?.parentElement ?? null;
+  return nodeId == null ? null : tree.nodesById.get(nodeId) ?? null;
 }
 
-/** Returns the content-coordinate bounds contributed by an element's text descendants. */
-export function elementBounds(tree, layout, element) {
-  const rects = [];
+// Layout objects are immutable after the layout pass. Keeping their lookup
+// tables under a weak key releases old document nodes when a layout is dropped.
+const geometryIndexes = new WeakMap();
+
+function geometryIndex(tree, layout) {
+  let index = geometryIndexes.get(layout);
+  if (index?.tree === tree) return index;
+  const byNode = new Map(), boxes = new WeakMap();
+  for (const box of layout.boxes) if (!box.inline && !byNode.has(box.nodeId)) byNode.set(box.nodeId, box);
+  for (const node of tree.nodesById.values()) {
+    if (node.pseudo || node.domNode?.nodeType !== 1 || boxes.has(node.domNode)) continue;
+    // The first actual render node is authoritative, even if it is inline.
+    const box = byNode.get(node.id);
+    boxes.set(node.domNode, box ? { node, box } : null);
+  }
+  index = { tree, boxes, textBounds: null };
+  geometryIndexes.set(layout, index);
+  return index;
+}
+
+/** The first real render node and block box belonging to an element. */
+export function elementBox(tree, layout, element) {
+  return tree && layout ? geometryIndex(tree, layout).boxes.get(element) ?? null : null;
+}
+
+function textBoundsIndex(tree, layout) {
+  const bounds = new WeakMap();
   for (const fragment of layout.fragments) {
     for (const run of fragment.runs) {
       const renderNode = tree.nodesById.get(run.nodeId);
       const owner = renderNode?.domNode?.nodeType === 1
         ? renderNode.domNode
         : renderNode?.domNode?.parentElement;
-      if (!owner || (owner !== element && !element.contains(owner))) continue;
+      if (!owner) continue;
       // A replaced element (an image) spans its own box, not its line's height.
       const replaced = run.type === "image" && run.y != null;
       const top = replaced ? run.y : fragment.y;
-      rects.push({
-        left: run.x,
-        top,
-        right: run.x + run.width,
-        bottom: top + (replaced ? run.height : fragment.height),
-      });
+      const right = run.x + run.width;
+      const bottom = top + (replaced ? run.height : fragment.height);
+      for (let ancestor = owner; ancestor; ancestor = ancestor.parentElement) {
+        const rect = bounds.get(ancestor);
+        if (rect) {
+          rect.left = Math.min(rect.left, run.x);
+          rect.top = Math.min(rect.top, top);
+          rect.right = Math.max(rect.right, right);
+          rect.bottom = Math.max(rect.bottom, bottom);
+        } else bounds.set(ancestor, { left: run.x, top, right, bottom });
+      }
     }
   }
-  if (!rects.length) return null;
-  const left = Math.min(...rects.map((rect) => rect.left));
-  const top = Math.min(...rects.map((rect) => rect.top));
-  const right = Math.max(...rects.map((rect) => rect.right));
-  const bottom = Math.max(...rects.map((rect) => rect.bottom));
-  return Object.freeze({ left, top, right, bottom, width: right - left, height: bottom - top });
+  return bounds;
+}
+
+/** Returns the content-coordinate bounds contributed by an element's text descendants. */
+export function elementBounds(tree, layout, element) {
+  const index = geometryIndex(tree, layout);
+  index.textBounds ??= textBoundsIndex(tree, layout);
+  const rect = index.textBounds.get(element);
+  if (!rect) return null;
+  if (rect.width === undefined) {
+    rect.width = rect.right - rect.left;
+    rect.height = rect.bottom - rect.top;
+    Object.freeze(rect);
+  }
+  return rect;
 }
 
 /**
@@ -120,19 +163,24 @@ export function elementBounds(tree, layout, element) {
  * visibility: hidden or pointer-events: none (both inherited, so a visible
  * or pointer-events: auto descendant still does). Text uses its element's style.
  */
+const hitTestableIndexes = new WeakMap();
 function hitTestable(tree) {
+  const cached = hitTestableIndexes.get(tree);
+  if (cached) return cached;
   const styles = new Map();
   for (const node of tree.nodesById.values()) {
     if (node.domNode?.nodeType === 1 && node.style && !node.pseudo && !styles.has(node.domNode)) {
       styles.set(node.domNode, node.style);
     }
   }
-  return (renderNode) => {
+  const accepts = (renderNode) => {
     const domNode = renderNode?.domNode;
     const element = domNode?.nodeType === 1 ? domNode : domNode?.parentElement;
     const style = (renderNode?.pseudo ? renderNode.style : null) ?? styles.get(element);
     return !style || (style.visibility !== "hidden" && style.pointerEvents !== "none");
   };
+  hitTestableIndexes.set(tree, accepts);
+  return accepts;
 }
 
 function closestInteractive(node) {

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
@@ -150,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);
@@ -217,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.
@@ -271,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)) {
@@ -288,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 };
 }
@@ -364,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;
@@ -560,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;
     }
   };
@@ -653,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,
@@ -674,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;
@@ -747,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 };
 }
 
@@ -802,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":
@@ -837,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;
@@ -1143,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: [] });
@@ -1156,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 };
@@ -1357,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 };
+}
+
+function transposeGridItem(item) {
+  [item.row, item.column] = [item.column, item.row];
+  [item.rowSpan, item.columnSpan] = [item.columnSpan, item.rowSpan];
+}
 
-  let columnCount = Math.max(1, explicitColumns.tracks.length);
+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);
@@ -1395,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) {
@@ -1425,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) {
@@ -1441,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];
@@ -1464,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 = [];
@@ -2542,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;
@@ -2567,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) };
@@ -2604,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];
@@ -2631,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) {
@@ -2658,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]));

package/lib/media/byte-pipe.js

@@ -7,7 +7,7 @@
  * 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() {
+export function createBytePipe({ retainBytes = true } = {}) {
   const chunks = [];
   let size = 0;
   let generation = 0;
@@ -25,7 +25,7 @@ export function createBytePipe() {
       if (done || bytes == null) return;
       const chunk = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
       if (!chunk.byteLength) return;
-      chunks.push(chunk);
+      if (retainBytes) chunks.push(chunk);
       size += chunk.byteLength;
       generation += 1;
       wake();