pagyra-js 0.0.20 → 0.0.21

package/dist/src/layout/strategies/grid.js

@@ -1,6 +1,6 @@
-import { Display } from "../../css/enums.js";
-import { resolveLength } from "../../css/length.js";
-import { containingBlock, horizontalMargin, horizontalNonContent, resolveWidthBlock, verticalNonContent, } from "../utils/node-math.js";
+import { AlignItems, BoxSizing, Display } from "../../css/enums.js";
+import { isAutoLength, resolveLength } from "../../css/length.js";
+import { adjustForBoxSizing, applyMinHeight, containingBlock, horizontalMargin, horizontalNonContent, resolveWidthBlock, verticalNonContent, } from "../utils/node-math.js";
 import { calculateTrackOffsets, calculateTotalGap } from "../utils/gap-calculator.js";
 function isRepeatTrack(def) {
     return typeof def === "object" && def !== null && "kind" in def && def.kind === "repeat";
@@ -12,6 +12,8 @@ function trackMinSize(track) {
     switch (track.kind) {
         case "fixed":
             return Math.max(0, track.size);
+        case "clamp":
+            return Math.max(0, track.min);
         case "flex":
             return Math.max(0, track.min ?? 0);
         case "auto":
@@ -27,6 +29,14 @@ function cloneTrackSize(track) {
     if (track.kind === "fixed") {
         return { kind: "fixed", size: track.size };
     }
+    if (track.kind === "clamp") {
+        return {
+            kind: "clamp",
+            min: track.min,
+            preferred: track.preferred,
+            max: track.max,
+        };
+    }
     if (track.kind === "flex") {
         return {
             kind: "flex",
@@ -90,6 +100,12 @@ function resolveColumnWidths(tracks, contentWidth, columnGap) {
         switch (track.kind) {
             case "fixed":
                 return Math.max(0, track.size);
+            case "clamp": {
+                const min = Math.max(0, track.min);
+                const max = Math.max(min, track.max);
+                const preferred = track.preferred;
+                return Math.max(min, Math.min(preferred, max));
+            }
             case "flex": {
                 let size = minSizes[index];
                 if (totalFlex > 0 && flexFactors[index] > 0) {
@@ -121,15 +137,16 @@ export class GridLayoutStrategy {
     }
     layout(node, context) {
         const cb = containingBlock(node, context.env.viewport);
-        const baseContentWidth = resolveWidthBlock(node, cb.width);
+        const containerRefs = { containerWidth: cb.width, containerHeight: cb.height };
+        const baseContentWidth = resolveWidthBlock(node, cb.width, cb.height);
         node.box.contentWidth = baseContentWidth;
-        const horizontalExtras = horizontalNonContent(node, baseContentWidth);
+        const horizontalExtras = horizontalNonContent(node, baseContentWidth, cb.height);
         node.box.borderBoxWidth = baseContentWidth + horizontalExtras;
-        node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, baseContentWidth);
-        const paddingLeft = resolveLength(node.style.paddingLeft, baseContentWidth, { auto: "zero" });
-        const paddingTop = resolveLength(node.style.paddingTop, baseContentWidth, { auto: "zero" });
-        const borderLeft = resolveLength(node.style.borderLeft, baseContentWidth, { auto: "zero" });
-        const borderTop = resolveLength(node.style.borderTop, baseContentWidth, { auto: "zero" });
+        node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, baseContentWidth, cb.height);
+        const paddingLeft = resolveLength(node.style.paddingLeft, baseContentWidth, { auto: "zero", ...containerRefs });
+        const paddingTop = resolveLength(node.style.paddingTop, cb.height, { auto: "zero", ...containerRefs });
+        const borderLeft = resolveLength(node.style.borderLeft, baseContentWidth, { auto: "zero", ...containerRefs });
+        const borderTop = resolveLength(node.style.borderTop, cb.height, { auto: "zero", ...containerRefs });
         const contentOriginX = node.box.x + borderLeft + paddingLeft;
         const contentOriginY = node.box.y + borderTop + paddingTop;
         const columnGap = node.style.columnGap ?? 0;
@@ -141,55 +158,175 @@ export class GridLayoutStrategy {
         const resolvedContentWidth = columnWidths.length > 0 ? Math.max(baseContentWidth, totalColumnWidth) : baseContentWidth;
         node.box.contentWidth = resolvedContentWidth;
         node.box.borderBoxWidth = resolvedContentWidth + horizontalExtras;
-        node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, resolvedContentWidth);
+        node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, resolvedContentWidth, cb.height);
         const columnOffsets = calculateTrackOffsets(columnWidths, columnGap);
-        let contentHeight = 0;
+        const rows = [];
         let currentRowTop = contentOriginY;
         let currentRowHeight = 0;
         let columnIndex = 0;
-        let rowCount = 0;
+        let currentRowItems = [];
         for (const child of node.children) {
             if (child.style.display === Display.None) {
                 continue;
             }
-            const columnWidth = columnWidths[columnIndex] ?? columnWidths[columnWidths.length - 1] ?? baseContentWidth;
+            const span = Math.min(child.style.gridColumnSpan ?? 1, columnWidths.length);
+            // Wrap to next row if the span doesn't fit
+            if (columnIndex + span > columnWidths.length) {
+                if (currentRowItems.length > 0) {
+                    rows.push({ items: currentRowItems, height: currentRowHeight });
+                    currentRowTop += currentRowHeight + rowGap;
+                    currentRowHeight = 0;
+                    currentRowItems = [];
+                }
+                columnIndex = 0;
+            }
+            // Calculate the total width of spanned columns
+            let columnWidth = 0;
+            for (let s = 0; s < span; s++) {
+                columnWidth += columnWidths[columnIndex + s] ?? 0;
+            }
+            // Add gap between spanned columns
+            if (span > 1) {
+                columnWidth += columnGap * (span - 1);
+            }
             const columnX = contentOriginX + (columnOffsets[columnIndex] ?? 0);
-            child.box.x = columnX;
-            child.box.y = currentRowTop;
             const originalContentWidth = node.box.contentWidth;
             node.box.contentWidth = columnWidth;
             context.layoutChild(child);
             node.box.contentWidth = originalContentWidth;
-            child.box.x = columnX;
-            child.box.y = currentRowTop;
             currentRowHeight = Math.max(currentRowHeight, child.box.borderBoxHeight);
-            columnIndex += 1;
+            currentRowItems.push({
+                child,
+                columnWidth,
+                columnX,
+            });
+            columnIndex += span;
             if (columnIndex >= columnWidths.length) {
-                rowCount += 1;
-                contentHeight += currentRowHeight;
+                rows.push({ items: currentRowItems, height: currentRowHeight });
                 currentRowTop += currentRowHeight + rowGap;
                 currentRowHeight = 0;
                 columnIndex = 0;
+                currentRowItems = [];
             }
         }
-        if (columnIndex !== 0) {
-            rowCount += 1;
-            contentHeight += currentRowHeight;
+        if (currentRowItems.length > 0) {
+            rows.push({ items: currentRowItems, height: currentRowHeight });
         }
+        const rowCount = rows.length;
+        const contentHeight = rows.reduce((sum, row) => sum + row.height, 0);
         const totalRowGap = calculateTotalGap(rowGap, rowCount);
-        const verticalExtras = verticalNonContent(node, node.box.contentWidth);
-        node.box.contentHeight = Math.max(0, contentHeight + totalRowGap);
+        const verticalExtras = verticalNonContent(node, cb.height, cb.width);
+        let resolvedContentHeight = Math.max(0, contentHeight + totalRowGap);
+        if (node.style.height !== "auto" && node.style.height !== undefined) {
+            resolvedContentHeight = adjustForBoxSizing(resolveLength(node.style.height, cb.height, { auto: "zero", ...containerRefs }), node.style.boxSizing, verticalExtras);
+        }
+        resolvedContentHeight = applyMinHeight(resolvedContentHeight, node, cb.height, verticalExtras, containerRefs);
+        node.box.contentHeight = Math.max(0, resolvedContentHeight);
         node.box.borderBoxHeight = node.box.contentHeight + verticalExtras;
         node.box.marginBoxHeight =
             node.box.borderBoxHeight +
-                resolveLength(node.style.marginTop, node.box.contentWidth, { auto: "zero" }) +
-                resolveLength(node.style.marginBottom, node.box.contentWidth, { auto: "zero" });
+                resolveLength(node.style.marginTop, cb.height, { auto: "zero", ...containerRefs }) +
+                resolveLength(node.style.marginBottom, cb.height, { auto: "zero", ...containerRefs });
+        const stretchedRowHeights = resolveGridAlignContentRows(rows, rowGap, node.box.contentHeight, node.style.alignContent);
+        const containerAlignItems = node.style.alignItems ?? AlignItems.Stretch;
+        let finalRowTop = contentOriginY;
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+            const row = rows[rowIndex];
+            const rowHeight = stretchedRowHeights[rowIndex] ?? row.height;
+            for (const rowItem of row.items) {
+                const child = rowItem.child;
+                const finalX = rowItem.columnX;
+                const finalY = finalRowTop;
+                const prePlaceDx = finalX - child.box.x;
+                const prePlaceDy = finalY - child.box.y;
+                child.box.x = finalX;
+                child.box.y = finalY;
+                offsetLayoutSubtree(child, prePlaceDx, prePlaceDy);
+                const alignSelf = resolveGridItemAlignment(child, containerAlignItems);
+                const autoHeight = child.style.height === undefined || child.style.height === "auto" || isAutoLength(child.style.height);
+                if (alignSelf === AlignItems.Stretch && autoHeight) {
+                    const childContainerRefs = { containerWidth: rowItem.columnWidth, containerHeight: rowHeight };
+                    const marginTop = resolveLength(child.style.marginTop, rowHeight, { auto: "zero", ...childContainerRefs });
+                    const marginBottom = resolveLength(child.style.marginBottom, rowHeight, { auto: "zero", ...childContainerRefs });
+                    const targetBorderBoxHeight = Math.max(0, rowHeight - marginTop - marginBottom);
+                    const childVerticalExtras = verticalNonContent(child, rowHeight, rowItem.columnWidth);
+                    const stretchedSpecifiedHeight = child.style.boxSizing === BoxSizing.BorderBox
+                        ? targetBorderBoxHeight
+                        : Math.max(0, targetBorderBoxHeight - childVerticalExtras);
+                    const currentBorderHeight = child.box.borderBoxHeight;
+                    if (Math.abs(currentBorderHeight - targetBorderBoxHeight) > 0.01) {
+                        const originalHeight = child.style.height;
+                        const originalContentWidth = node.box.contentWidth;
+                        try {
+                            child.style.height = stretchedSpecifiedHeight;
+                            child.box.x = finalX;
+                            child.box.y = finalY;
+                            node.box.contentWidth = rowItem.columnWidth;
+                            context.layoutChild(child);
+                        }
+                        finally {
+                            node.box.contentWidth = originalContentWidth;
+                            child.style.height = originalHeight;
+                        }
+                        const relayoutDx = finalX - child.box.x;
+                        const relayoutDy = finalY - child.box.y;
+                        child.box.x = finalX;
+                        child.box.y = finalY;
+                        offsetLayoutSubtree(child, relayoutDx, relayoutDy);
+                    }
+                }
+            }
+            finalRowTop += rowHeight;
+            if (rowIndex < rows.length - 1) {
+                finalRowTop += rowGap;
+            }
+        }
         node.box.scrollWidth = Math.max(node.box.contentWidth, totalColumnWidth);
         node.box.scrollHeight = node.box.contentHeight;
         if (columnWidths.length === 0) {
             node.box.contentWidth = baseContentWidth;
             node.box.borderBoxWidth = node.box.contentWidth + horizontalExtras;
-            node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, node.box.contentWidth);
+            node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, node.box.contentWidth, cb.height);
+        }
+    }
+}
+function offsetLayoutSubtree(node, deltaX, deltaY) {
+    if (deltaX === 0 && deltaY === 0) {
+        return;
+    }
+    node.walk((desc) => {
+        if (desc !== node) {
+            desc.box.x += deltaX;
+            desc.box.y += deltaY;
+        }
+        desc.box.baseline += deltaY;
+        if (desc.inlineRuns && desc.inlineRuns.length > 0) {
+            for (const run of desc.inlineRuns) {
+                run.startX += deltaX;
+                run.baseline += deltaY;
+            }
+        }
+    });
+}
+function resolveGridItemAlignment(child, containerAlign) {
+    const alignSelf = child.style.alignSelf;
+    if (alignSelf && alignSelf !== "auto") {
+        return alignSelf;
+    }
+    return containerAlign;
+}
+function resolveGridAlignContentRows(rows, rowGap, containerContentHeight, alignContent) {
+    const rowHeights = rows.map((row) => row.height);
+    if (alignContent !== "stretch") {
+        return rowHeights;
+    }
+    const naturalHeight = rowHeights.reduce((sum, height) => sum + height, 0) + calculateTotalGap(rowGap, rowHeights.length);
+    const freeSpace = Math.max(0, containerContentHeight - naturalHeight);
+    if (freeSpace > 0 && rowHeights.length > 0) {
+        const extraPerRow = freeSpace / rowHeights.length;
+        for (let i = 0; i < rowHeights.length; i++) {
+            rowHeights[i] += extraPerRow;
         }
     }
+    return rowHeights;
 }

package/dist/src/layout/strategies/image.js

@@ -1,7 +1,7 @@
 import { LayoutNode } from "../../dom/node.js";
 import { Display } from "../../css/enums.js";
 import { resolveLength, isAutoLength } from "../../css/length.js";
-import { containingBlock, horizontalNonContent, horizontalMargin } from "../utils/node-math.js";
+import { adjustForBoxSizing, containingBlock, horizontalNonContent, horizontalMargin } from "../utils/node-math.js";
 /**
  * Image strategy following SOLID principles:
  * - Single Responsibility: Handles image layout and sizing
@@ -27,21 +27,34 @@ export class ImageStrategy {
      * Sets up image sizing based on CSS properties
      */
     static setupImageSizing(node, _imageInfo) {
+        const intrinsicContainerRefs = {
+            containerWidth: node.intrinsicInlineSize ?? 0,
+            containerHeight: node.intrinsicBlockSize ?? 0,
+        };
         // If width is explicitly set, calculate proportional height
         if (node.style.width !== undefined && typeof node.style.width === 'number' && node.style.width > 0) {
-            const specifiedWidth = resolveLength(node.style.width, node.intrinsicInlineSize, { auto: "zero" });
+            const specifiedWidth = resolveLength(node.style.width, node.intrinsicInlineSize, {
+                auto: "zero",
+                ...intrinsicContainerRefs,
+            });
             const scale = specifiedWidth / node.intrinsicInlineSize;
             node.intrinsicBlockSize = Math.round(node.intrinsicBlockSize * scale);
         }
         // If height is explicitly set, calculate proportional width
         else if (node.style.height !== undefined && typeof node.style.height === 'number' && node.style.height > 0) {
-            const specifiedHeight = resolveLength(node.style.height, node.intrinsicBlockSize, { auto: "zero" });
+            const specifiedHeight = resolveLength(node.style.height, node.intrinsicBlockSize, {
+                auto: "zero",
+                ...intrinsicContainerRefs,
+            });
             const scale = specifiedHeight / node.intrinsicBlockSize;
             node.intrinsicInlineSize = Math.round(node.intrinsicInlineSize * scale);
         }
         // Handle max-width constraints
         else if (node.style.maxWidth !== undefined && typeof node.style.maxWidth === 'number') {
-            const maxWidth = resolveLength(node.style.maxWidth, node.intrinsicInlineSize, { auto: "zero" });
+            const maxWidth = resolveLength(node.style.maxWidth, node.intrinsicInlineSize, {
+                auto: "zero",
+                ...intrinsicContainerRefs,
+            });
             if (maxWidth < node.intrinsicInlineSize) {
                 const scale = maxWidth / node.intrinsicInlineSize;
                 node.intrinsicInlineSize = maxWidth;
@@ -117,8 +130,20 @@ export function calculateImagePosition(node, containerWidth, containerHeight, im
         }
         case 'fill':
             // Use the specified dimensions if available
-            width = node.style.width ? resolveLength(node.style.width, containerWidth, { auto: "zero" }) : containerWidth;
-            height = node.style.height ? resolveLength(node.style.height, containerHeight, { auto: "zero" }) : containerHeight;
+            width = node.style.width
+                ? resolveLength(node.style.width, containerWidth, {
+                    auto: "zero",
+                    containerWidth,
+                    containerHeight,
+                })
+                : containerWidth;
+            height = node.style.height
+                ? resolveLength(node.style.height, containerHeight, {
+                    auto: "zero",
+                    containerWidth,
+                    containerHeight,
+                })
+                : containerHeight;
             break;
         case 'none':
             // Use original image size
@@ -153,38 +178,39 @@ export class ImageLayoutStrategy {
         const cb = containingBlock(node, context.env.viewport);
         const widthRef = Math.max(cb.width, 0);
         const heightRef = Math.max(cb.height, 0);
+        const containerRefs = { containerWidth: widthRef, containerHeight: heightRef };
         const intrinsicWidth = Math.max(0, node.intrinsicInlineSize ?? 0);
         const intrinsicHeight = Math.max(0, node.intrinsicBlockSize ?? 0);
         const hasIntrinsic = intrinsicWidth > 0 && intrinsicHeight > 0;
-        const paddingLeft = resolveLength(node.style.paddingLeft, widthRef, { auto: "zero" });
-        const paddingRight = resolveLength(node.style.paddingRight, widthRef, { auto: "zero" });
-        const paddingTop = resolveLength(node.style.paddingTop, heightRef, { auto: "zero" });
-        const paddingBottom = resolveLength(node.style.paddingBottom, heightRef, { auto: "zero" });
-        const borderLeft = resolveLength(node.style.borderLeft, widthRef, { auto: "zero" });
-        const borderRight = resolveLength(node.style.borderRight, widthRef, { auto: "zero" });
-        const borderTop = resolveLength(node.style.borderTop, heightRef, { auto: "zero" });
-        const borderBottom = resolveLength(node.style.borderBottom, heightRef, { auto: "zero" });
-        const marginLeft = resolveLength(node.style.marginLeft, widthRef, { auto: "zero" });
-        const marginRight = resolveLength(node.style.marginRight, widthRef, { auto: "zero" });
-        const marginTop = resolveLength(node.style.marginTop, heightRef, { auto: "zero" });
-        const marginBottom = resolveLength(node.style.marginBottom, heightRef, { auto: "zero" });
+        const paddingLeft = resolveLength(node.style.paddingLeft, widthRef, { auto: "zero", ...containerRefs });
+        const paddingRight = resolveLength(node.style.paddingRight, widthRef, { auto: "zero", ...containerRefs });
+        const paddingTop = resolveLength(node.style.paddingTop, heightRef, { auto: "zero", ...containerRefs });
+        const paddingBottom = resolveLength(node.style.paddingBottom, heightRef, { auto: "zero", ...containerRefs });
+        const borderLeft = resolveLength(node.style.borderLeft, widthRef, { auto: "zero", ...containerRefs });
+        const borderRight = resolveLength(node.style.borderRight, widthRef, { auto: "zero", ...containerRefs });
+        const borderTop = resolveLength(node.style.borderTop, heightRef, { auto: "zero", ...containerRefs });
+        const borderBottom = resolveLength(node.style.borderBottom, heightRef, { auto: "zero", ...containerRefs });
+        const marginLeft = resolveLength(node.style.marginLeft, widthRef, { auto: "zero", ...containerRefs });
+        const marginRight = resolveLength(node.style.marginRight, widthRef, { auto: "zero", ...containerRefs });
+        const marginTop = resolveLength(node.style.marginTop, heightRef, { auto: "zero", ...containerRefs });
+        const marginBottom = resolveLength(node.style.marginBottom, heightRef, { auto: "zero", ...containerRefs });
         const horizontalExtras = paddingLeft + paddingRight + borderLeft + borderRight;
         const verticalExtras = paddingTop + paddingBottom + borderTop + borderBottom;
-        const availableContentWidth = Math.max(0, widthRef - horizontalNonContent(node, widthRef) - horizontalMargin(node, widthRef));
+        const availableContentWidth = Math.max(0, widthRef - horizontalNonContent(node, widthRef, heightRef) - horizontalMargin(node, widthRef, heightRef));
         const hasExplicitWidth = node.style.width !== "auto" && node.style.width !== undefined;
         const hasExplicitHeight = node.style.height !== "auto" && node.style.height !== undefined;
         let contentWidth = hasIntrinsic ? intrinsicWidth : availableContentWidth;
         let contentHeight = hasIntrinsic ? intrinsicHeight : 0;
         if (hasExplicitWidth) {
-            const resolved = resolveLength(node.style.width, widthRef, { auto: "reference" });
+            const resolved = resolveLength(node.style.width, widthRef, { auto: "reference", ...containerRefs });
             if (Number.isFinite(resolved) && resolved > 0) {
-                contentWidth = resolved;
+                contentWidth = adjustForBoxSizing(resolved, node.style.boxSizing, horizontalExtras);
             }
         }
         if (hasExplicitHeight) {
-            const resolved = resolveLength(node.style.height, heightRef, { auto: "reference" });
+            const resolved = resolveLength(node.style.height, heightRef, { auto: "reference", ...containerRefs });
             if (Number.isFinite(resolved) && resolved > 0) {
-                contentHeight = resolved;
+                contentHeight = adjustForBoxSizing(resolved, node.style.boxSizing, verticalExtras);
             }
         }
         if (hasIntrinsic) {
@@ -215,7 +241,7 @@ export class ImageLayoutStrategy {
         const lockAspectToWidth = hasIntrinsic && !hasExplicitHeight;
         const lockAspectToHeight = hasIntrinsic && !hasExplicitWidth;
         if (node.style.maxWidth !== undefined && !isAutoLength(node.style.maxWidth)) {
-            const maxWidth = resolveLength(node.style.maxWidth, widthRef, { auto: "reference" });
+            const maxWidth = adjustForBoxSizing(resolveLength(node.style.maxWidth, widthRef, { auto: "reference", ...containerRefs }), node.style.boxSizing, horizontalExtras);
             if (Number.isFinite(maxWidth) && maxWidth > 0 && contentWidth > maxWidth) {
                 if (lockAspectToWidth && contentWidth > 0) {
                     const scale = maxWidth / contentWidth;
@@ -225,7 +251,7 @@ export class ImageLayoutStrategy {
             }
         }
         if (node.style.minWidth !== undefined && !isAutoLength(node.style.minWidth)) {
-            const minWidth = resolveLength(node.style.minWidth, widthRef, { auto: "zero" });
+            const minWidth = adjustForBoxSizing(resolveLength(node.style.minWidth, widthRef, { auto: "zero", ...containerRefs }), node.style.boxSizing, horizontalExtras);
             if (Number.isFinite(minWidth) && minWidth > 0 && contentWidth < minWidth) {
                 if (lockAspectToWidth && contentWidth > 0) {
                     const scale = minWidth / contentWidth;
@@ -235,7 +261,7 @@ export class ImageLayoutStrategy {
             }
         }
         if (node.style.maxHeight !== undefined && !isAutoLength(node.style.maxHeight)) {
-            const maxHeight = resolveLength(node.style.maxHeight, heightRef, { auto: "reference" });
+            const maxHeight = adjustForBoxSizing(resolveLength(node.style.maxHeight, heightRef, { auto: "reference", ...containerRefs }), node.style.boxSizing, verticalExtras);
             if (Number.isFinite(maxHeight) && maxHeight > 0 && contentHeight > maxHeight) {
                 if (lockAspectToHeight && contentHeight > 0) {
                     const scale = maxHeight / contentHeight;
@@ -245,7 +271,7 @@ export class ImageLayoutStrategy {
             }
         }
         if (node.style.minHeight !== undefined && !isAutoLength(node.style.minHeight)) {
-            const minHeight = resolveLength(node.style.minHeight, heightRef, { auto: "zero" });
+            const minHeight = adjustForBoxSizing(resolveLength(node.style.minHeight, heightRef, { auto: "zero", ...containerRefs }), node.style.boxSizing, verticalExtras);
             if (Number.isFinite(minHeight) && minHeight > 0 && contentHeight < minHeight) {
                 if (lockAspectToHeight && contentHeight > 0) {
                     const scale = minHeight / contentHeight;

package/dist/src/layout/strategies/inline.js

@@ -4,24 +4,28 @@ import { resolveLength } from "../../css/length.js";
 import { resolvedLineHeight } from "../../css/style.js";
 import { FloatContext } from "../context/float-context.js";
 import { defaultInlineFormatter } from "../utils/inline-formatter.js";
+import { containingBlock } from "../utils/node-math.js";
 export class InlineLayoutStrategy {
     canLayout(node) {
         return node.style.display === Display.Inline;
     }
     layout(node, context) {
-        const refWidth = Math.max(context.env.viewport.width, 0);
-        const paddingLeft = resolveLength(node.style.paddingLeft, refWidth, { auto: "zero" });
-        const paddingRight = resolveLength(node.style.paddingRight, refWidth, { auto: "zero" });
-        const paddingTop = resolveLength(node.style.paddingTop, refWidth, { auto: "zero" });
-        const paddingBottom = resolveLength(node.style.paddingBottom, refWidth, { auto: "zero" });
-        const borderLeft = resolveLength(node.style.borderLeft, refWidth, { auto: "zero" });
-        const borderRight = resolveLength(node.style.borderRight, refWidth, { auto: "zero" });
-        const borderTop = resolveLength(node.style.borderTop, refWidth, { auto: "zero" });
-        const borderBottom = resolveLength(node.style.borderBottom, refWidth, { auto: "zero" });
-        const marginLeft = resolveLength(node.style.marginLeft, refWidth, { auto: "zero" });
-        const marginRight = resolveLength(node.style.marginRight, refWidth, { auto: "zero" });
-        const marginTop = resolveLength(node.style.marginTop, refWidth, { auto: "zero" });
-        const marginBottom = resolveLength(node.style.marginBottom, refWidth, { auto: "zero" });
+        const cb = containingBlock(node, context.env.viewport);
+        const refWidth = Math.max(cb.width || context.env.viewport.width, 0);
+        const refHeight = Math.max(cb.height || context.env.viewport.height, 0);
+        const containerRefs = { containerWidth: refWidth, containerHeight: refHeight };
+        const paddingLeft = resolveLength(node.style.paddingLeft, refWidth, { auto: "zero", ...containerRefs });
+        const paddingRight = resolveLength(node.style.paddingRight, refWidth, { auto: "zero", ...containerRefs });
+        const paddingTop = resolveLength(node.style.paddingTop, refHeight, { auto: "zero", ...containerRefs });
+        const paddingBottom = resolveLength(node.style.paddingBottom, refHeight, { auto: "zero", ...containerRefs });
+        const borderLeft = resolveLength(node.style.borderLeft, refWidth, { auto: "zero", ...containerRefs });
+        const borderRight = resolveLength(node.style.borderRight, refWidth, { auto: "zero", ...containerRefs });
+        const borderTop = resolveLength(node.style.borderTop, refHeight, { auto: "zero", ...containerRefs });
+        const borderBottom = resolveLength(node.style.borderBottom, refHeight, { auto: "zero", ...containerRefs });
+        const marginLeft = resolveLength(node.style.marginLeft, refWidth, { auto: "zero", ...containerRefs });
+        const marginRight = resolveLength(node.style.marginRight, refWidth, { auto: "zero", ...containerRefs });
+        const marginTop = resolveLength(node.style.marginTop, refHeight, { auto: "zero", ...containerRefs });
+        const marginBottom = resolveLength(node.style.marginBottom, refHeight, { auto: "zero", ...containerRefs });
         const horizontalExtras = paddingLeft + paddingRight + borderLeft + borderRight;
         const verticalExtras = paddingTop + paddingBottom + borderTop + borderBottom;
         const inlineNodes = collectInlineParticipants(node);
@@ -37,7 +41,7 @@ export class InlineLayoutStrategy {
             contentWidth: availableWidth,
             startY,
         });
-        const extent = measureInlineExtent(inlineNodes, refWidth, node.box.x + borderLeft + paddingLeft);
+        const extent = measureInlineExtent(inlineNodes, refWidth, refHeight, node.box.x + borderLeft + paddingLeft);
         const floatBottom = Math.max(floatContext.bottom("left"), floatContext.bottom("right"));
         const measuredHeight = Math.max(result.newCursorY, floatBottom) - startY;
         node.box.contentWidth = Math.max(0, extent);
@@ -81,19 +85,20 @@ function isInlineDisplay(display) {
             return false;
     }
 }
-function measureInlineExtent(inlineNodes, referenceWidth, contentStartX) {
+function measureInlineExtent(inlineNodes, referenceWidth, containerHeight, contentStartX) {
     if (inlineNodes.length === 0) {
         return 0;
     }
+    const containerRefs = { containerWidth: referenceWidth, containerHeight };
     let minStart = Number.POSITIVE_INFINITY;
     let maxEnd = Number.NEGATIVE_INFINITY;
     for (const node of inlineNodes) {
-        const marginLeft = resolveLength(node.style.marginLeft, referenceWidth, { auto: "zero" });
-        const marginRight = resolveLength(node.style.marginRight, referenceWidth, { auto: "zero" });
-        const paddingLeft = resolveLength(node.style.paddingLeft, referenceWidth, { auto: "zero" });
-        const paddingRight = resolveLength(node.style.paddingRight, referenceWidth, { auto: "zero" });
-        const borderLeft = resolveLength(node.style.borderLeft, referenceWidth, { auto: "zero" });
-        const borderRight = resolveLength(node.style.borderRight, referenceWidth, { auto: "zero" });
+        const marginLeft = resolveLength(node.style.marginLeft, referenceWidth, { auto: "zero", ...containerRefs });
+        const marginRight = resolveLength(node.style.marginRight, referenceWidth, { auto: "zero", ...containerRefs });
+        const paddingLeft = resolveLength(node.style.paddingLeft, referenceWidth, { auto: "zero", ...containerRefs });
+        const paddingRight = resolveLength(node.style.paddingRight, referenceWidth, { auto: "zero", ...containerRefs });
+        const borderLeft = resolveLength(node.style.borderLeft, referenceWidth, { auto: "zero", ...containerRefs });
+        const borderRight = resolveLength(node.style.borderRight, referenceWidth, { auto: "zero", ...containerRefs });
         const marginStart = node.box.x - paddingLeft - borderLeft - marginLeft;
         const width = node.box.contentWidth +
             paddingLeft +

package/dist/src/layout/strategies/table.js

@@ -2,7 +2,7 @@ import { BorderModel, Display } from "../../css/enums.js";
 import { LayoutNode } from "../../dom/node.js";
 import { log } from "../../logging/debug.js";
 import { resolveLength } from "../../css/length.js";
-import { containingBlock, horizontalNonContent, resolveWidthBlock, verticalNonContent } from "../utils/node-math.js";
+import { adjustForBoxSizing, containingBlock, horizontalNonContent, resolveWidthBlock, verticalNonContent } from "../utils/node-math.js";
 import { layoutTableCell } from "../table/cell_layout.js";
 import { auditTableCell, debugTableCell } from "../table/diagnostics.js";
 export class TableLayoutStrategy {
@@ -19,7 +19,8 @@ export class TableLayoutStrategy {
             children: node.children.length
         });
         const cb = containingBlock(node, context.env.viewport);
-        node.box.contentWidth = resolveWidthBlock(node, cb.width);
+        const containerRefs = { containerWidth: cb.width, containerHeight: cb.height };
+        node.box.contentWidth = resolveWidthBlock(node, cb.width, cb.height);
         log("layout", "debug", "Table layout start", {
             table: node.tagName,
             availableWidth: cb.width,
@@ -109,7 +110,7 @@ export class TableLayoutStrategy {
             }
         }
         if (collapsedBorders) {
-            const numericBorder = (value) => resolveLength(value, node.box.contentWidth, { auto: "zero" });
+            const numericBorder = (value) => resolveLength(value, node.box.contentWidth, { auto: "zero", ...containerRefs });
             // For collapsed borders, we need to:
             // 1. Collapse borders between adjacent cells (winner takes the shared border)
             // 2. Collapse outer cell borders with table border
@@ -236,7 +237,7 @@ export class TableLayoutStrategy {
                 const colSpan = Math.min(this.cellColSpan(cell), numCols - c);
                 const rowSpan = Math.min(this.cellRowSpan(cell), numRows - r);
                 const spannedWidth = this.sumColumns(colWidths, c, colSpan);
-                const boxMetrics = this.resolveCellBoxMetrics(cell, spannedWidth);
+                const boxMetrics = this.resolveCellBoxMetrics(cell, spannedWidth, cb.height);
                 const cellAvailableWidth = spannedWidth - boxMetrics.borderLeft - boxMetrics.borderRight - boxMetrics.paddingLeft - boxMetrics.paddingRight;
                 cell.box.x = 0;
                 cell.box.y = 0;
@@ -294,7 +295,7 @@ export class TableLayoutStrategy {
                     const rowSpan = Math.min(this.cellRowSpan(cell), numRows - r);
                     const spanWidth = colOffsets[c + colSpan] - colOffsets[c];
                     const spanHeight = rowOffsets[r + rowSpan] - rowOffsets[r];
-                    const boxMetrics = this.resolveCellBoxMetrics(cell, spanWidth);
+                    const boxMetrics = this.resolveCellBoxMetrics(cell, spanWidth, cb.height);
                     const availableContentHeight = spanHeight - boxMetrics.borderTop - boxMetrics.borderBottom - boxMetrics.paddingTop - boxMetrics.paddingBottom;
                     const alignOffsetY = this.computeVerticalAlignOffset(cell.style.verticalAlign, availableContentHeight, cell.box.contentHeight);
                     // Position the cell's border box at the column/row offset
@@ -347,9 +348,14 @@ export class TableLayoutStrategy {
                 rowNode.box.borderBoxHeight = rowHeights[r];
             }
         }
-        node.box.contentHeight = rowOffsets[numRows];
-        node.box.borderBoxWidth = node.box.contentWidth + horizontalNonContent(node, cb.width);
-        node.box.borderBoxHeight = node.box.contentHeight + verticalNonContent(node, cb.width);
+        let resolvedContentHeight = rowOffsets[numRows];
+        const verticalExtras = verticalNonContent(node, cb.height, cb.width);
+        if (node.style.height !== "auto" && node.style.height !== undefined) {
+            resolvedContentHeight = adjustForBoxSizing(resolveLength(node.style.height, cb.height, { auto: "zero", ...containerRefs }), node.style.boxSizing, verticalExtras);
+        }
+        node.box.contentHeight = Math.max(0, resolvedContentHeight);
+        node.box.borderBoxWidth = node.box.contentWidth + horizontalNonContent(node, cb.width, cb.height);
+        node.box.borderBoxHeight = node.box.contentHeight + verticalExtras;
         node.box.scrollWidth = node.box.contentWidth;
         node.box.scrollHeight = node.box.contentHeight;
     }
@@ -514,17 +520,19 @@ export class TableLayoutStrategy {
         }
         return offsets;
     }
-    resolveCellBoxMetrics(cell, referenceWidth) {
-        const resolve = (value) => resolveLength(value, referenceWidth, { auto: "zero" });
+    resolveCellBoxMetrics(cell, referenceWidth, referenceHeight = referenceWidth) {
+        const containerRefs = { containerWidth: referenceWidth, containerHeight: referenceHeight };
+        const resolveHorizontal = (value) => resolveLength(value, referenceWidth, { auto: "zero", ...containerRefs });
+        const resolveVertical = (value) => resolveLength(value, referenceHeight, { auto: "zero", ...containerRefs });
         return {
-            borderLeft: resolve(cell.style.borderLeft),
-            borderRight: resolve(cell.style.borderRight),
-            borderTop: resolve(cell.style.borderTop),
-            borderBottom: resolve(cell.style.borderBottom),
-            paddingLeft: resolve(cell.style.paddingLeft),
-            paddingRight: resolve(cell.style.paddingRight),
-            paddingTop: resolve(cell.style.paddingTop),
-            paddingBottom: resolve(cell.style.paddingBottom),
+            borderLeft: resolveHorizontal(cell.style.borderLeft),
+            borderRight: resolveHorizontal(cell.style.borderRight),
+            borderTop: resolveVertical(cell.style.borderTop),
+            borderBottom: resolveVertical(cell.style.borderBottom),
+            paddingLeft: resolveHorizontal(cell.style.paddingLeft),
+            paddingRight: resolveHorizontal(cell.style.paddingRight),
+            paddingTop: resolveVertical(cell.style.paddingTop),
+            paddingBottom: resolveVertical(cell.style.paddingBottom),
         };
     }
     computeVerticalAlignOffset(verticalAlign, available, content) {

package/dist/src/layout/utils/content-measurer.d.ts

@@ -25,7 +25,7 @@ export declare class ContentMeasurer {
      * @param contentStartX - The X coordinate where content area begins
      * @returns Object containing the measured width and any left offset
      */
-    measureInFlowWidth(node: LayoutNode, referenceWidth: number, contentStartX: number): {
+    measureInFlowWidth(node: LayoutNode, referenceWidth: number, contentStartX: number, containerHeight?: number): {
         width: number;
         leftOffset: number;
     };