pagyra-js 0.0.20 → 0.0.21

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

@@ -1,6 +1,6 @@
 import { LayoutNode } from "../../dom/node.js";
 import { AlignItems, Display, JustifyContent } from "../../css/enums.js";
-import { containingBlock, resolveBoxMetrics } from "../utils/node-math.js";
+import { adjustForBoxSizing, containingBlock, resolveBoxMetrics, resolveWidthBlock } from "../utils/node-math.js";
 import { resolveLength, isAutoLength } from "../../css/length.js";
 import { GapCalculator, calculateTotalGap } from "../utils/gap-calculator.js";
 function blockifyFlexItemDisplay(display) {
@@ -33,6 +33,153 @@ function allowsPreferredShrink(originalDisplay, effectiveDisplay) {
     }
     return originalDisplay === Display.Inline;
 }
+function buildFlexLines(items, containerMainSize, mainAxisGap) {
+    if (items.length === 0) {
+        return [];
+    }
+    const lines = [];
+    let current = { items: [], mainSizeWithGaps: 0, crossSize: 0 };
+    for (const item of items) {
+        const addition = current.items.length === 0 ? item.mainContribution : mainAxisGap + item.mainContribution;
+        const shouldWrap = current.items.length > 0 &&
+            containerMainSize > 0 &&
+            current.mainSizeWithGaps + addition > containerMainSize + 0.01;
+        if (shouldWrap) {
+            lines.push(current);
+            current = { items: [], mainSizeWithGaps: 0, crossSize: 0 };
+        }
+        if (current.items.length > 0) {
+            current.mainSizeWithGaps += mainAxisGap;
+        }
+        current.items.push(item);
+        current.mainSizeWithGaps += item.mainContribution;
+        current.crossSize = Math.max(current.crossSize, item.crossContribution);
+    }
+    if (current.items.length > 0) {
+        lines.push(current);
+    }
+    return lines;
+}
+function calculateLinesCrossSize(lines, crossAxisGap) {
+    if (lines.length === 0) {
+        return 0;
+    }
+    const totalLines = lines.reduce((sum, line) => sum + line.crossSize, 0);
+    return totalLines + calculateTotalGap(crossAxisGap, lines.length);
+}
+function refreshFlexItemSizes(item, isRow) {
+    item.mainSize = isRow ? item.node.box.borderBoxWidth : item.node.box.borderBoxHeight;
+    item.crossSize = isRow ? item.node.box.borderBoxHeight : item.node.box.borderBoxWidth;
+    item.mainContribution = item.mainSize + item.mainMarginStart + item.mainMarginEnd;
+    item.crossContribution = item.crossSize + item.crossMarginStart + item.crossMarginEnd;
+}
+function recomputeLineMetrics(line, mainAxisGap) {
+    let mainSizeWithGaps = 0;
+    let crossSize = 0;
+    for (let i = 0; i < line.items.length; i++) {
+        const item = line.items[i];
+        if (i > 0) {
+            mainSizeWithGaps += mainAxisGap;
+        }
+        mainSizeWithGaps += item.mainContribution;
+        crossSize = Math.max(crossSize, item.crossContribution);
+    }
+    line.mainSizeWithGaps = mainSizeWithGaps;
+    line.crossSize = crossSize;
+}
+function relayoutFlexItemForMainSize(container, item, context, targetMainSize, isRow) {
+    if (!Number.isFinite(targetMainSize) || targetMainSize < 0) {
+        return;
+    }
+    const prevContainerWidth = container.box.contentWidth;
+    const prevContainerHeight = container.box.contentHeight;
+    const targetContribution = targetMainSize + item.mainMarginStart + item.mainMarginEnd;
+    let displayMutated = false;
+    if (item.node.style.display !== item.effectiveDisplay) {
+        item.node.style.display = item.effectiveDisplay;
+        displayMutated = true;
+    }
+    try {
+        if (isRow) {
+            container.box.contentWidth = Math.max(0, targetContribution);
+        }
+        else {
+            container.box.contentHeight = Math.max(0, targetContribution);
+        }
+        context.layoutChild(item.node);
+    }
+    finally {
+        container.box.contentWidth = prevContainerWidth;
+        container.box.contentHeight = prevContainerHeight;
+        if (displayMutated) {
+            item.node.style.display = item.originalDisplay;
+        }
+    }
+}
+function distributeFlexGrowAcrossLines(lines, container, context, containerMainSize, mainAxisGap, isRow) {
+    if (lines.length === 0 || !(containerMainSize > 0)) {
+        return;
+    }
+    for (const line of lines) {
+        const freeSpace = containerMainSize - line.mainSizeWithGaps;
+        if (!(freeSpace > 0)) {
+            continue;
+        }
+        const growItems = line.items.filter((item) => item.flexGrow > 0);
+        const totalGrow = growItems.reduce((sum, item) => sum + item.flexGrow, 0);
+        if (!(totalGrow > 0)) {
+            continue;
+        }
+        for (const item of growItems) {
+            const delta = (freeSpace * item.flexGrow) / totalGrow;
+            const targetMainSize = Math.max(0, item.mainSize + delta);
+            if (Math.abs(targetMainSize - item.mainSize) < 0.01) {
+                continue;
+            }
+            relayoutFlexItemForMainSize(container, item, context, targetMainSize, isRow);
+            refreshFlexItemSizes(item, isRow);
+        }
+        recomputeLineMetrics(line, mainAxisGap);
+    }
+}
+function resolveAlignContentLayout(lines, alignContent, containerCrossSize, crossAxisGap) {
+    const lineCrossSizes = lines.map((line) => line.crossSize);
+    if (lines.length === 0) {
+        return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+    }
+    const naturalCross = calculateLinesCrossSize(lines, crossAxisGap);
+    const freeSpace = Math.max(0, containerCrossSize - naturalCross);
+    switch (alignContent) {
+        case "stretch":
+            if (freeSpace > 0) {
+                const extraPerLine = freeSpace / lines.length;
+                for (let i = 0; i < lineCrossSizes.length; i++) {
+                    lineCrossSizes[i] += extraPerLine;
+                }
+            }
+            return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+        case "flex-end":
+            return { lineCrossSizes, initialOffset: freeSpace, additionalGap: 0 };
+        case "center":
+            return { lineCrossSizes, initialOffset: freeSpace / 2, additionalGap: 0 };
+        case "space-between":
+            if (lines.length <= 1) {
+                return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+            }
+            return { lineCrossSizes, initialOffset: 0, additionalGap: freeSpace / (lines.length - 1) };
+        case "space-around": {
+            const gap = freeSpace / lines.length;
+            return { lineCrossSizes, initialOffset: gap / 2, additionalGap: gap };
+        }
+        case "space-evenly": {
+            const gap = freeSpace / (lines.length + 1);
+            return { lineCrossSizes, initialOffset: gap, additionalGap: gap };
+        }
+        case "flex-start":
+        default:
+            return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+    }
+}
 export class FlexLayoutStrategy {
     constructor() {
         this.supportedDisplays = new Set([Display.Flex, Display.InlineFlex]);
@@ -42,24 +189,34 @@ export class FlexLayoutStrategy {
     }
     layout(node, context) {
         const cb = containingBlock(node, context.env.viewport);
+        const containerRefs = { containerWidth: cb.width, containerHeight: cb.height };
         const isRow = isRowDirection(node.style.flexDirection);
         const cbMain = isRow ? cb.width : cb.height;
         const cbCross = isRow ? cb.height : cb.width;
-        const specifiedMain = resolveFlexSize(isRow ? node.style.width : node.style.height, cbMain);
-        const specifiedCross = resolveFlexSize(isRow ? node.style.height : node.style.width, cbCross);
+        // Resolve box metrics (padding/border)
+        const boxMetrics = resolveBoxMetrics(node, cb.width, cb.height);
+        const hExtras = boxMetrics.paddingLeft + boxMetrics.paddingRight + boxMetrics.borderLeft + boxMetrics.borderRight;
+        const vExtras = boxMetrics.paddingTop + boxMetrics.paddingBottom + boxMetrics.borderTop + boxMetrics.borderBottom;
+        let specifiedMain = resolveFlexSize(isRow ? node.style.width : node.style.height, cbMain, cb.width, cb.height);
+        let specifiedCross = resolveFlexSize(isRow ? node.style.height : node.style.width, cbCross, cb.width, cb.height);
+        if (specifiedMain !== undefined) {
+            specifiedMain = adjustForBoxSizing(specifiedMain, node.style.boxSizing, isRow ? hExtras : vExtras);
+        }
+        if (specifiedCross !== undefined) {
+            specifiedCross = adjustForBoxSizing(specifiedCross, node.style.boxSizing, isRow ? vExtras : hExtras);
+        }
         // Read gap properties for flex layout
         const rowGap = node.style.rowGap ?? 0;
         const columnGap = node.style.columnGap ?? 0;
         const gapCalculator = new GapCalculator({ rowGap, columnGap });
         const mainAxisGap = gapCalculator.getMainAxisGap(isRow);
-        // Resolve box metrics (padding/border)
-        const boxMetrics = resolveBoxMetrics(node, cb.width, cb.height);
+        const defaultContentWidth = resolveWidthBlock(node, cb.width, cb.height);
         if (isRow) {
-            node.box.contentWidth = resolveInitialDimension(specifiedMain, cbMain);
+            node.box.contentWidth = resolveInitialDimension(specifiedMain, defaultContentWidth);
             node.box.contentHeight = resolveInitialDimension(specifiedCross, cbCross);
         }
         else {
-            node.box.contentWidth = resolveInitialDimension(specifiedCross, cbCross);
+            node.box.contentWidth = resolveInitialDimension(specifiedCross, defaultContentWidth);
             node.box.contentHeight = resolveInitialDimension(specifiedMain, cbMain);
         }
         node.box.borderBoxWidth =
@@ -90,27 +247,42 @@ export class FlexLayoutStrategy {
             if (displayMutated) {
                 child.style.display = blockifiedDisplay;
             }
+            const parentContentWidth = node.box.contentWidth;
+            const parentContentHeight = node.box.contentHeight;
             try {
+                const basisReference = isRow ? cb.width : cb.height;
+                const basis = resolveFlexSize(child.style.flexBasis, basisReference, cb.width, cb.height);
+                if (basis !== undefined) {
+                    if (isRow) {
+                        node.box.contentWidth = Math.max(0, basis);
+                    }
+                    else {
+                        node.box.contentHeight = Math.max(0, basis);
+                    }
+                }
                 context.layoutChild(child);
-                const marginLeft = resolveLength(child.style.marginLeft, cb.width, { auto: "zero" });
-                const marginRight = resolveLength(child.style.marginRight, cb.width, { auto: "zero" });
-                const marginTop = resolveLength(child.style.marginTop, cb.height, { auto: "zero" });
-                const marginBottom = resolveLength(child.style.marginBottom, cb.height, { auto: "zero" });
+                node.box.contentWidth = parentContentWidth;
+                node.box.contentHeight = parentContentHeight;
+                const marginLeft = resolveLength(child.style.marginLeft, cb.width, { auto: "zero", ...containerRefs });
+                const marginRight = resolveLength(child.style.marginRight, cb.width, { auto: "zero", ...containerRefs });
+                const marginTop = resolveLength(child.style.marginTop, cb.height, { auto: "zero", ...containerRefs });
+                const marginBottom = resolveLength(child.style.marginBottom, cb.height, { auto: "zero", ...containerRefs });
                 const mainMarginStart = isRow ? marginLeft : marginTop;
                 const mainMarginEnd = isRow ? marginRight : marginBottom;
                 const crossMarginStart = isRow ? marginTop : marginLeft;
                 const crossMarginEnd = isRow ? marginBottom : marginRight;
                 let mainSize = isRow ? child.box.borderBoxWidth : child.box.borderBoxHeight;
+                const hasExplicitFlexBasis = resolveFlexSize(child.style.flexBasis, isRow ? cb.width : cb.height, cb.width, cb.height) !== undefined;
                 const childDisplay = blockifiedDisplay;
                 const allowPreferredShrink = allowsPreferredShrink(originalDisplay, childDisplay);
-                if (isRow && allowPreferredShrink && isAutoMainSize(child.style.width)) {
+                if (isRow && allowPreferredShrink && isAutoMainSize(child.style.width) && !hasExplicitFlexBasis) {
                     const preferredContent = computePreferredInlineWidth(child);
                     if (preferredContent !== undefined && preferredContent >= 0) {
                         const minWidth = child.style.minWidth !== undefined
-                            ? resolveLength(child.style.minWidth, cb.width, { auto: "zero" })
+                            ? resolveLength(child.style.minWidth, cb.width, { auto: "zero", ...containerRefs })
                             : undefined;
                         const maxWidth = child.style.maxWidth !== undefined
-                            ? resolveLength(child.style.maxWidth, cb.width, { auto: "reference" })
+                            ? resolveLength(child.style.maxWidth, cb.width, { auto: "reference", ...containerRefs })
                             : undefined;
                         let targetContentWidth = preferredContent;
                         if (minWidth !== undefined) {
@@ -120,15 +292,20 @@ export class FlexLayoutStrategy {
                             targetContentWidth = Math.min(targetContentWidth, maxWidth);
                         }
                         if (targetContentWidth < child.box.contentWidth) {
-                            const paddingLeft = resolveLength(child.style.paddingLeft, cb.width, { auto: "zero" });
-                            const paddingRight = resolveLength(child.style.paddingRight, cb.width, { auto: "zero" });
-                            const borderLeft = resolveLength(child.style.borderLeft, cb.width, { auto: "zero" });
-                            const borderRight = resolveLength(child.style.borderRight, cb.width, { auto: "zero" });
+                            const paddingLeft = resolveLength(child.style.paddingLeft, cb.width, { auto: "zero", ...containerRefs });
+                            const paddingRight = resolveLength(child.style.paddingRight, cb.width, { auto: "zero", ...containerRefs });
+                            const borderLeft = resolveLength(child.style.borderLeft, cb.width, { auto: "zero", ...containerRefs });
+                            const borderRight = resolveLength(child.style.borderRight, cb.width, { auto: "zero", ...containerRefs });
                             child.box.contentWidth = targetContentWidth;
                             child.box.borderBoxWidth = targetContentWidth + paddingLeft + paddingRight + borderLeft + borderRight;
                             child.box.marginBoxWidth = child.box.borderBoxWidth + marginLeft + marginRight;
                             child.box.scrollWidth = Math.max(child.box.scrollWidth, child.box.contentWidth);
                             mainSize = child.box.borderBoxWidth;
+                            // Re-layout with corrected width so inline text positions are correct
+                            const prevW = node.box.contentWidth;
+                            node.box.contentWidth = child.box.borderBoxWidth + marginLeft + marginRight;
+                            context.layoutChild(child);
+                            node.box.contentWidth = prevW;
                         }
                     }
                 }
@@ -140,15 +317,15 @@ export class FlexLayoutStrategy {
                         const preferredContent = computePreferredInlineWidth(child);
                         if (preferredContent !== undefined && preferredContent > 0) {
                             const widthRef = cb.width;
-                            const paddingLeft = resolveLength(child.style.paddingLeft, widthRef, { auto: "zero" });
-                            const paddingRight = resolveLength(child.style.paddingRight, widthRef, { auto: "zero" });
-                            const borderLeft = resolveLength(child.style.borderLeft, widthRef, { auto: "zero" });
-                            const borderRight = resolveLength(child.style.borderRight, widthRef, { auto: "zero" });
+                            const paddingLeft = resolveLength(child.style.paddingLeft, widthRef, { auto: "zero", ...containerRefs });
+                            const paddingRight = resolveLength(child.style.paddingRight, widthRef, { auto: "zero", ...containerRefs });
+                            const borderLeft = resolveLength(child.style.borderLeft, widthRef, { auto: "zero", ...containerRefs });
+                            const borderRight = resolveLength(child.style.borderRight, widthRef, { auto: "zero", ...containerRefs });
                             const minWidth = child.style.minWidth !== undefined
-                                ? resolveLength(child.style.minWidth, widthRef, { auto: "zero" })
+                                ? resolveLength(child.style.minWidth, widthRef, { auto: "zero", ...containerRefs })
                                 : undefined;
                             const maxWidth = child.style.maxWidth !== undefined
-                                ? resolveLength(child.style.maxWidth, widthRef, { auto: "reference" })
+                                ? resolveLength(child.style.maxWidth, widthRef, { auto: "reference", ...containerRefs })
                                 : undefined;
                             let targetContentWidth = Math.min(preferredContent, child.box.contentWidth);
                             if (minWidth !== undefined) {
@@ -174,6 +351,8 @@ export class FlexLayoutStrategy {
                 const crossContribution = crossSize + crossMarginStart + crossMarginEnd;
                 items.push({
                     node: child,
+                    originalDisplay,
+                    effectiveDisplay: blockifiedDisplay,
                     mainMarginStart,
                     mainMarginEnd,
                     crossMarginStart,
@@ -182,11 +361,15 @@ export class FlexLayoutStrategy {
                     crossSize,
                     mainContribution,
                     crossContribution,
+                    flexGrow: Math.max(0, child.style.flexGrow ?? 0),
+                    flexShrink: Math.max(0, child.style.flexShrink ?? 0),
                 });
                 totalMain += mainContribution;
                 maxCrossContribution = Math.max(maxCrossContribution, crossContribution);
             }
             finally {
+                node.box.contentWidth = parentContentWidth;
+                node.box.contentHeight = parentContentHeight;
                 if (displayMutated) {
                     child.style.display = originalDisplay;
                 }
@@ -194,30 +377,60 @@ export class FlexLayoutStrategy {
         }
         // Account for gaps in total main size
         const gapSpace = calculateTotalGap(mainAxisGap, items.length);
-        const totalMainWithGaps = totalMain + gapSpace;
+        let totalMainWithGaps = totalMain + gapSpace;
+        const wrapEnabled = isRow && node.style.flexWrap;
+        const crossAxisGap = gapCalculator.getCrossAxisGap(isRow);
         let containerMainSize;
         if (specifiedMain !== undefined) {
             containerMainSize = specifiedMain;
         }
+        else if (isRow) {
+            const reference = Number.isFinite(defaultContentWidth) && defaultContentWidth > 0 ? defaultContentWidth : totalMainWithGaps;
+            containerMainSize = wrapEnabled ? reference : Math.max(reference, totalMainWithGaps);
+        }
         else {
-            const reference = Number.isFinite(cbMain) && cbMain > 0 ? cbMain : totalMainWithGaps;
-            containerMainSize = Math.max(reference, totalMainWithGaps);
+            // For column flex containers with auto height, use content-based sizing.
+            // Falling back to containing block height incorrectly stretches the box
+            // to the page/viewport height in HTML->PDF flow layouts.
+            containerMainSize = totalMainWithGaps;
         }
+        const lines = wrapEnabled ? buildFlexLines(items, containerMainSize, mainAxisGap) : [];
+        if (wrapEnabled) {
+            distributeFlexGrowAcrossLines(lines, node, context, containerMainSize, mainAxisGap, isRow);
+        }
+        else if (items.length > 0) {
+            const singleLine = {
+                items,
+                mainSizeWithGaps: totalMainWithGaps,
+                crossSize: maxCrossContribution,
+            };
+            distributeFlexGrowAcrossLines([singleLine], node, context, containerMainSize, mainAxisGap, isRow);
+            totalMain = items.reduce((sum, item) => sum + item.mainContribution, 0);
+            maxCrossContribution = items.reduce((max, item) => Math.max(max, item.crossContribution), 0);
+            totalMainWithGaps = totalMain + gapSpace;
+        }
+        const wrappedCrossContribution = wrapEnabled ? calculateLinesCrossSize(lines, crossAxisGap) : 0;
         let containerCrossSize;
         if (specifiedCross !== undefined) {
-            containerCrossSize = Math.max(specifiedCross, maxCrossContribution);
+            const measuredCross = wrapEnabled ? wrappedCrossContribution : maxCrossContribution;
+            containerCrossSize = Math.max(specifiedCross, measuredCross);
         }
         else if (!isRow) {
-            const referenceCross = Number.isFinite(cbCross) && cbCross > 0 ? cbCross : maxCrossContribution;
+            const referenceCross = Number.isFinite(defaultContentWidth) && defaultContentWidth > 0 ? defaultContentWidth : maxCrossContribution;
             containerCrossSize = Math.max(referenceCross, maxCrossContribution);
         }
         else {
-            containerCrossSize = maxCrossContribution;
+            containerCrossSize = wrapEnabled ? wrappedCrossContribution : maxCrossContribution;
         }
         const minCrossValue = isRow ? node.style.minHeight : node.style.minWidth;
         const maxCrossValue = isRow ? node.style.maxHeight : node.style.maxWidth;
-        const minCross = minCrossValue !== undefined ? resolveLength(minCrossValue, cbCross, { auto: "zero" }) : undefined;
-        const maxCross = maxCrossValue !== undefined ? resolveLength(maxCrossValue, cbCross, { auto: "reference" }) : undefined;
+        const crossExtras = isRow ? vExtras : hExtras;
+        const minCross = minCrossValue !== undefined
+            ? adjustForBoxSizing(resolveLength(minCrossValue, cbCross, { auto: "zero", ...containerRefs }), node.style.boxSizing, crossExtras)
+            : undefined;
+        const maxCross = maxCrossValue !== undefined
+            ? adjustForBoxSizing(resolveLength(maxCrossValue, cbCross, { auto: "reference", ...containerRefs }), node.style.boxSizing, crossExtras)
+            : undefined;
         if (minCross !== undefined) {
             containerCrossSize = Math.max(containerCrossSize, minCross);
         }
@@ -226,30 +439,62 @@ export class FlexLayoutStrategy {
         }
         const justify = node.style.justifyContent ?? JustifyContent.FlexStart;
         const align = alignContainer;
-        // Calculate justify spacing based on free space AFTER accounting for gaps
-        // This makes gap additive with justify-content spacing (per CSS Flexbox spec)
-        const freeSpaceAfterGaps = containerMainSize - totalMainWithGaps;
-        const { offset: initialOffset, gap: justifyGap } = resolveJustifySpacing(justify, freeSpaceAfterGaps, items.length);
-        let cursor = initialOffset;
-        for (let index = 0; index < items.length; index++) {
-            const item = items[index];
-            const alignSelf = resolveItemAlignment(item.node.style.alignSelf, align);
-            const crossOffset = computeCrossOffset(alignSelf, containerCrossSize, item.crossSize, item.crossMarginStart, item.crossMarginEnd);
-            const previousX = item.node.box.x;
-            const previousY = item.node.box.y;
-            if (isRow) {
-                item.node.box.x = boxMetrics.contentBoxX + cursor + item.mainMarginStart;
-                item.node.box.y = boxMetrics.contentBoxY + crossOffset + item.crossMarginStart;
-            }
-            else {
-                item.node.box.x = boxMetrics.contentBoxX + crossOffset + item.crossMarginStart;
-                item.node.box.y = boxMetrics.contentBoxY + cursor + item.mainMarginStart;
+        if (wrapEnabled) {
+            const alignContent = node.style.alignContent;
+            const crossLayout = resolveAlignContentLayout(lines, alignContent, containerCrossSize, crossAxisGap);
+            let crossCursor = crossLayout.initialOffset;
+            for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+                const line = lines[lineIndex];
+                const lineCrossSize = crossLayout.lineCrossSizes[lineIndex] ?? line.crossSize;
+                const freeSpaceAfterGaps = containerMainSize - line.mainSizeWithGaps;
+                const { offset: initialOffset, gap: justifyGap } = resolveJustifySpacing(justify, freeSpaceAfterGaps, line.items.length);
+                let mainCursor = initialOffset;
+                for (let index = 0; index < line.items.length; index++) {
+                    const item = line.items[index];
+                    const alignSelf = resolveItemAlignment(item.node.style.alignSelf, align);
+                    const crossOffset = computeCrossOffset(alignSelf, lineCrossSize, item.crossSize, item.crossMarginStart, item.crossMarginEnd);
+                    const previousX = item.node.box.x;
+                    const previousY = item.node.box.y;
+                    item.node.box.x = boxMetrics.contentBoxX + mainCursor + item.mainMarginStart;
+                    item.node.box.y = boxMetrics.contentBoxY + crossCursor + crossOffset + item.crossMarginStart;
+                    offsetLayoutSubtree(item.node, item.node.box.x - previousX, item.node.box.y - previousY);
+                    mainCursor += item.mainContribution;
+                    if (index < line.items.length - 1) {
+                        mainCursor += mainAxisGap + justifyGap;
+                    }
+                }
+                crossCursor += lineCrossSize;
+                if (lineIndex < lines.length - 1) {
+                    crossCursor += crossAxisGap + crossLayout.additionalGap;
+                }
             }
-            offsetLayoutSubtree(item.node, item.node.box.x - previousX, item.node.box.y - previousY);
-            cursor += item.mainContribution;
-            if (index < items.length - 1) {
-                // Apply explicit gap PLUS justify spacing (additive per spec)
-                cursor += mainAxisGap + justifyGap;
+        }
+        else {
+            // Calculate justify spacing based on free space AFTER accounting for gaps.
+            // This makes gap additive with justify-content spacing (per CSS Flexbox spec).
+            const freeSpaceAfterGaps = containerMainSize - totalMainWithGaps;
+            const { offset: initialOffset, gap: justifyGap } = resolveJustifySpacing(justify, freeSpaceAfterGaps, items.length);
+            let cursor = initialOffset;
+            for (let index = 0; index < items.length; index++) {
+                const item = items[index];
+                const alignSelf = resolveItemAlignment(item.node.style.alignSelf, align);
+                const crossOffset = computeCrossOffset(alignSelf, containerCrossSize, item.crossSize, item.crossMarginStart, item.crossMarginEnd);
+                const previousX = item.node.box.x;
+                const previousY = item.node.box.y;
+                if (isRow) {
+                    item.node.box.x = boxMetrics.contentBoxX + cursor + item.mainMarginStart;
+                    item.node.box.y = boxMetrics.contentBoxY + crossOffset + item.crossMarginStart;
+                }
+                else {
+                    item.node.box.x = boxMetrics.contentBoxX + crossOffset + item.crossMarginStart;
+                    item.node.box.y = boxMetrics.contentBoxY + cursor + item.mainMarginStart;
+                }
+                offsetLayoutSubtree(item.node, item.node.box.x - previousX, item.node.box.y - previousY);
+                cursor += item.mainContribution;
+                if (index < items.length - 1) {
+                    // Apply explicit gap PLUS justify spacing (additive per spec).
+                    cursor += mainAxisGap + justifyGap;
+                }
             }
         }
         if (isRow) {
@@ -285,7 +530,7 @@ function resolveInitialDimension(specified, fallback) {
     }
     return 0;
 }
-function resolveFlexSize(value, reference) {
+function resolveFlexSize(value, reference, containerWidth = reference, containerHeight = reference) {
     if (value === undefined) {
         return undefined;
     }
@@ -295,7 +540,7 @@ function resolveFlexSize(value, reference) {
     if (value === "auto" || isAutoLength(value)) {
         return undefined;
     }
-    return resolveLength(value, reference, { auto: "reference" });
+    return resolveLength(value, reference, { auto: "reference", containerWidth, containerHeight });
 }
 function resolveItemAlignment(alignSelf, containerAlign) {
     if (alignSelf && alignSelf !== "auto") {
@@ -393,11 +638,10 @@ function offsetLayoutSubtree(node, deltaX, deltaY) {
         return;
     }
     node.walk((desc) => {
-        if (desc === node) {
-            return;
+        if (desc !== node) {
+            desc.box.x += deltaX;
+            desc.box.y += deltaY;
         }
-        desc.box.x += deltaX;
-        desc.box.y += deltaY;
         desc.box.baseline += deltaY;
         // Update inline runs if they exist
         if (desc.inlineRuns && desc.inlineRuns.length > 0) {

package/dist/src/layout/strategies/form.d.ts

@@ -2,6 +2,8 @@ import { LayoutNode } from "../../dom/node.js";
 import type { LayoutContext, LayoutStrategy } from "../pipeline/strategy.js";
 export declare class FormLayoutStrategy implements LayoutStrategy {
     private readonly formTags;
+    private resolveExplicitOrAutoWidth;
+    private resolveExplicitOrAutoHeight;
     canLayout(node: LayoutNode): boolean;
     layout(node: LayoutNode, context: LayoutContext): void;
 }

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

@@ -1,5 +1,5 @@
 import { LayoutNode } from "../../dom/node.js";
-import { containingBlock } from "../utils/node-math.js";
+import { adjustForBoxSizing, containingBlock } from "../utils/node-math.js";
 import { resolveLength } from "../../css/length.js";
 import { verticalNonContent, horizontalNonContent } from "../utils/node-math.js";
 import { finalizeOverflow } from "../utils/overflow.js";
@@ -14,6 +14,30 @@ export class FormLayoutStrategy {
     constructor() {
         this.formTags = new Set(['input', 'select', 'textarea', 'button']);
     }
+    resolveExplicitOrAutoWidth(node, cbWidth, autoValue, extras, containerHeight) {
+        const hasExplicitWidth = node.style.width !== "auto" && node.style.width !== undefined;
+        if (!hasExplicitWidth) {
+            return autoValue;
+        }
+        const specified = resolveLength(node.style.width, cbWidth, {
+            auto: autoValue,
+            containerWidth: cbWidth,
+            containerHeight,
+        });
+        return adjustForBoxSizing(specified, node.style.boxSizing, extras);
+    }
+    resolveExplicitOrAutoHeight(node, cbHeight, autoValue, extras, containerWidth) {
+        const hasExplicitHeight = node.style.height !== "auto" && node.style.height !== undefined;
+        if (!hasExplicitHeight) {
+            return autoValue;
+        }
+        const specified = resolveLength(node.style.height, cbHeight, {
+            auto: autoValue,
+            containerWidth,
+            containerHeight: cbHeight,
+        });
+        return adjustForBoxSizing(specified, node.style.boxSizing, extras);
+    }
     canLayout(node) {
         if (!node.tagName)
             return false;
@@ -21,10 +45,13 @@ export class FormLayoutStrategy {
     }
     layout(node, context) {
         const cb = containingBlock(node, context.env.viewport);
+        const containerRefs = { containerWidth: cb.width, containerHeight: cb.height };
         const tagName = node.tagName?.toLowerCase() ?? '';
         const formControl = node.customData?.formControl;
         let contentWidth;
         let contentHeight;
+        const horizontalExtras = horizontalNonContent(node, cb.width, cb.height);
+        const verticalExtras = verticalNonContent(node, cb.height, cb.width);
         switch (tagName) {
             case 'input': {
                 const inputType = formControl?.inputType ?? 'text';
@@ -37,24 +64,24 @@ export class FormLayoutStrategy {
                     contentHeight = 0;
                 }
                 else {
-                    contentWidth = resolveLength(node.style.width, cb.width, { auto: DEFAULT_INPUT_WIDTH });
-                    contentHeight = resolveLength(node.style.height, cb.height, { auto: DEFAULT_INPUT_HEIGHT });
+                    contentWidth = this.resolveExplicitOrAutoWidth(node, cb.width, DEFAULT_INPUT_WIDTH, horizontalExtras, cb.height);
+                    contentHeight = this.resolveExplicitOrAutoHeight(node, cb.height, DEFAULT_INPUT_HEIGHT, verticalExtras, cb.width);
                 }
                 break;
             }
             case 'select':
-                contentWidth = resolveLength(node.style.width, cb.width, { auto: DEFAULT_INPUT_WIDTH });
-                contentHeight = resolveLength(node.style.height, cb.height, { auto: DEFAULT_SELECT_HEIGHT });
+                contentWidth = this.resolveExplicitOrAutoWidth(node, cb.width, DEFAULT_INPUT_WIDTH, horizontalExtras, cb.height);
+                contentHeight = this.resolveExplicitOrAutoHeight(node, cb.height, DEFAULT_SELECT_HEIGHT, verticalExtras, cb.width);
                 break;
             case 'textarea': {
-                contentWidth = resolveLength(node.style.width, cb.width, { auto: DEFAULT_TEXTAREA_WIDTH });
+                contentWidth = this.resolveExplicitOrAutoWidth(node, cb.width, DEFAULT_TEXTAREA_WIDTH, horizontalExtras, cb.height);
                 const rows = formControl?.rows ?? 3;
-                contentHeight = resolveLength(node.style.height, cb.height, { auto: rows * 24 });
+                contentHeight = this.resolveExplicitOrAutoHeight(node, cb.height, rows * 24, verticalExtras, cb.width);
                 break;
             }
             case 'button':
-                contentWidth = resolveLength(node.style.width, cb.width, { auto: DEFAULT_BUTTON_MIN_WIDTH });
-                contentHeight = resolveLength(node.style.height, cb.height, { auto: DEFAULT_BUTTON_HEIGHT });
+                contentWidth = this.resolveExplicitOrAutoWidth(node, cb.width, DEFAULT_BUTTON_MIN_WIDTH, horizontalExtras, cb.height);
+                contentHeight = this.resolveExplicitOrAutoHeight(node, cb.height, DEFAULT_BUTTON_HEIGHT, verticalExtras, cb.width);
                 break;
             default:
                 contentWidth = DEFAULT_INPUT_WIDTH;
@@ -62,14 +89,12 @@ export class FormLayoutStrategy {
         }
         node.box.contentWidth = Math.max(0, contentWidth);
         node.box.contentHeight = Math.max(0, contentHeight);
-        const horizontalExtras = horizontalNonContent(node, contentWidth);
         node.box.borderBoxWidth = node.box.contentWidth + horizontalExtras;
-        const verticalExtras = verticalNonContent(node, contentWidth);
         node.box.borderBoxHeight = node.box.contentHeight + verticalExtras;
         node.box.x = cb.x;
         node.box.y = cb.y;
-        const marginLeft = resolveLength(node.style.marginLeft, cb.width, { auto: "zero" });
-        const marginRight = resolveLength(node.style.marginRight, cb.width, { auto: "zero" });
+        const marginLeft = resolveLength(node.style.marginLeft, cb.width, { auto: "zero", ...containerRefs });
+        const marginRight = resolveLength(node.style.marginRight, cb.width, { auto: "zero", ...containerRefs });
         node.box.usedMarginLeft = marginLeft;
         node.box.usedMarginRight = marginRight;
         node.box.marginBoxWidth = node.box.borderBoxWidth + marginLeft + marginRight;