pagyra-js 0.0.20 → 0.0.21

package/dist/src/image/png-wasm-loader.js

@@ -0,0 +1,59 @@
+let wasmModule = null;
+let initPromise = null;
+let loadFailed = false;
+async function loadWasmModule() {
+    if (wasmModule) {
+        return wasmModule;
+    }
+    if (loadFailed) {
+        throw new Error("WASM PNG decoder not available (build failed)");
+    }
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = (async () => {
+        try {
+            const wasmPath = new URL("./wasm/png_decoder_wasm.js", import.meta.url).pathname;
+            const wasm = await import(wasmPath);
+            if (wasm.decode_png_rgba.toString().includes("throw new Error")) {
+                loadFailed = true;
+                initPromise = null;
+                throw new Error("WASM stub detected");
+            }
+            await wasm.default();
+            wasmModule = wasm;
+            return wasm;
+        }
+        catch (error) {
+            loadFailed = true;
+            initPromise = null;
+            throw new Error(`WASM PNG decoder init failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    })();
+    return initPromise;
+}
+export class PngWasmLoader {
+    static async getOrInit() {
+        return loadWasmModule();
+    }
+    static async isAvailable() {
+        if (wasmModule) {
+            return true;
+        }
+        if (loadFailed) {
+            return false;
+        }
+        try {
+            await loadWasmModule();
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    static reset() {
+        wasmModule = null;
+        initPromise = null;
+        loadFailed = false;
+    }
+}

package/dist/src/image/wasm/png_decoder_wasm.d.ts

@@ -0,0 +1,8 @@
+// Stub TypeScript types for WASM module
+export default function init(): Promise<void>;
+export function init(): Promise<void>;
+export function decode_png_rgba(
+  buffer: Uint8Array,
+  targetWidth?: number,
+  targetHeight?: number,
+): { width: number; height: number; data: Uint8Array };

package/dist/src/image/wasm/png_decoder_wasm.js

@@ -0,0 +1,24 @@
+// Stub WASM module for development (fallback to JS decoder)
+// Replace with real WASM build when toolchain is available
+
+let initialized = false;
+
+async function init() {
+  if (initialized) return;
+  
+  try {
+    const wasmPath = new URL("./png_decoder_wasm.js", import.meta.url).pathname;
+    const wasm = await import(wasmPath);
+    await wasm.default();
+    initialized = true;
+  } catch {
+    initialized = false;
+  }
+}
+
+function decode_png_rgba(buffer, targetWidth, targetHeight) {
+  throw new Error("WASM PNG decoder not built. Run 'npm run build:wasm' or use pngBackend: 'js'");
+}
+
+export default init;
+export { init, decode_png_rgba };

package/dist/src/image/wasm/png_decoder_wasm_bg.js

@@ -0,0 +1,16 @@
+// Stub WASM module for development (fallback to JS decoder)
+// Replace with real WASM build when toolchain is available
+
+let initialized = false;
+
+async function init() {
+  if (initialized) return;
+  initialized = true;
+}
+
+function decode_png_rgba(buffer, targetWidth, targetHeight) {
+  throw new Error("WASM PNG decoder not built. Run 'npm run build:wasm' or use pngBackend: 'js'");
+}
+
+export default init;
+export { init, decode_png_rgba };

package/dist/src/image/wasm-png-backend.d.ts

@@ -0,0 +1,6 @@
+import type { ImageInfo } from "./types.js";
+import type { ImageDecodeOptions } from "./types.js";
+import type { PngBackend } from "./png-backend.js";
+export declare class WasmPngBackend implements PngBackend {
+    decode(buffer: ArrayBuffer, options?: ImageDecodeOptions): Promise<ImageInfo>;
+}

package/dist/src/image/wasm-png-backend.js

@@ -0,0 +1,17 @@
+import { PngWasmLoader } from "./png-wasm-loader.js";
+export class WasmPngBackend {
+    async decode(buffer, options) {
+        const wasm = await PngWasmLoader.getOrInit();
+        const targetWidth = options?.maxWidth;
+        const targetHeight = options?.maxHeight;
+        const result = wasm.decode_png_rgba(new Uint8Array(buffer), targetWidth, targetHeight);
+        return {
+            width: result.width,
+            height: result.height,
+            format: "png",
+            channels: 4,
+            bitsPerChannel: 8,
+            data: result.data.buffer,
+        };
+    }
+}

package/dist/src/layout/counter.d.ts

@@ -31,8 +31,7 @@ export interface CounterIncrement {
     readonly value: number;
 }
 export interface CounterContext {
-    getScopeId(): string;
-    getCounter(name: string): number;
+    getCounter(name: string, scopeId: string | null): number;
     registerScope(parentScopeId: string | null): string;
     resetCounter(name: string, value: number, scopeId: string): void;
     incrementCounter(name: string, value: number, scopeId: string): void;

package/dist/src/layout/counter.js

@@ -1,6 +1,5 @@
 // src/layout/counter.ts
 let scopeCounter = 0;
-let globalCounter = 0;
 /**
  * Create a new counter scope
  */
@@ -39,23 +38,23 @@ export function createCounterContext() {
         }
         return 0;
     }
-    return {
-        getScopeId() {
-            return `global-${++globalCounter}`;
-        },
-        getCounter(name) {
-            // Get from the innermost active scope
-            let currentScopeId = null;
-            for (const [sid, parentId] of scopeHierarchy) {
-                if (parentId === null) {
-                    currentScopeId = sid;
-                }
+    function findScopeWithCounter(scopeId, name) {
+        let currentScopeId = scopeId;
+        while (currentScopeId !== null) {
+            const scopeCounters = counters.get(currentScopeId);
+            if (scopeCounters && scopeCounters.has(name)) {
+                return currentScopeId;
             }
-            if (!currentScopeId) {
-                // No scopes active, use global counter
-                return getEffectiveValue("global", name);
+            currentScopeId = scopeHierarchy.get(currentScopeId) ?? null;
+        }
+        return null;
+    }
+    return {
+        getCounter(name, scopeId) {
+            if (!scopeId) {
+                return 0;
             }
-            return getEffectiveValue(currentScopeId, name);
+            return getEffectiveValue(scopeId, name);
         },
         registerScope(parentScopeId) {
             const scope = createScope(parentScopeId ? scopes.get(parentScopeId) ?? null : null);
@@ -69,8 +68,9 @@ export function createCounterContext() {
             scopeCounters.set(name, value);
         },
         incrementCounter(name, value, scopeId) {
-            ensureCounter(scopeId, name);
-            const scopeCounters = counters.get(scopeId);
+            const targetScopeId = findScopeWithCounter(scopeId, name) ?? scopeId;
+            ensureCounter(targetScopeId, name);
+            const scopeCounters = counters.get(targetScopeId);
             const current = scopeCounters.get(name) ?? 0;
             scopeCounters.set(name, current + value);
         },

package/dist/src/layout/inline/inline-utils.d.ts

@@ -22,7 +22,7 @@ export declare function collectInlineParticipants(node: LayoutNode): LayoutNode[
  * Calculates the inline extent (start and end positions) of a node within its container.
  * Includes margins, borders, and padding in the calculation.
  */
-export declare function inlineExtentWithinContainer(node: LayoutNode, referenceWidth: number): {
+export declare function inlineExtentWithinContainer(node: LayoutNode, referenceWidth: number, containerHeight?: number): {
     start: number;
     end: number;
 };

package/dist/src/layout/inline/inline-utils.js

@@ -70,13 +70,14 @@ export function collectInlineParticipants(node) {
  * Calculates the inline extent (start and end positions) of a node within its container.
  * Includes margins, borders, and padding in the calculation.
  */
-export function inlineExtentWithinContainer(node, referenceWidth) {
-    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" });
+export function inlineExtentWithinContainer(node, referenceWidth, containerHeight = referenceWidth) {
+    const containerRefs = { containerWidth: referenceWidth, containerHeight };
+    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 + paddingRight + borderLeft + borderRight + marginLeft + marginRight;
     return {

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

@@ -8,9 +8,13 @@ import { resolveInlineTextAlign, shouldLayoutInlineChildren, collectInlinePartic
 import { getAlignmentStrategy } from "./text-alignment.js";
 import { BoundingBoxCalculator } from "./bounding-box-calculator.js";
 import { RunPlacer } from "./run-placer.js";
+import { calculateBaseline } from "./font-baseline-calculator.js";
 import { createLayoutDebug } from "../debug.js";
+import { containingBlock } from "../utils/node-math.js";
 export function layoutInlineFormattingContext(options) {
     const { container, inlineNodes, context, floatContext, contentX, contentWidth } = options;
+    const cb = containingBlock(container, context.env.viewport);
+    const containerRefs = { containerWidth: cb.width, containerHeight: cb.height };
     container.establishesIFC = true;
     const textAlign = container.style.display === Display.Inline
         ? undefined
@@ -18,7 +22,7 @@ export function layoutInlineFormattingContext(options) {
     const alignmentStrategy = getAlignmentStrategy(textAlign);
     const shouldApplyTextIndent = container.style.display !== Display.Inline;
     const resolvedTextIndent = shouldApplyTextIndent
-        ? resolveLength(container.style.textIndent, contentWidth, { auto: "zero" })
+        ? resolveLength(container.style.textIndent, contentWidth, { auto: "zero", ...containerRefs })
         : 0;
     let firstLineTextIndentPending = shouldApplyTextIndent && resolvedTextIndent !== 0;
     const layoutCallback = (node, width, ctx) => layoutInlineChildrenIfNeeded(node, width, ctx);
@@ -34,6 +38,13 @@ export function layoutInlineFormattingContext(options) {
     const runPlacer = new RunPlacer(context.env.fontEmbedder);
     const placeRunsForLine = (parts, isLastLine) => {
         const offsetShift = alignmentStrategy.calculateOffset(parts.reduce((max, part) => Math.max(max, part.offset + part.item.width), 0), Math.max(availableWidth, 0));
+        // Compute a shared baseline from the container's font (CSS "strut")
+        const strutFontSize = container.style.fontSize ?? 16;
+        const strutFontFamily = container.style.fontFamily ?? "sans-serif";
+        const strutFontWeight = container.style.fontWeight ?? 400;
+        const strutFontStyle = container.style.fontStyle ?? "normal";
+        const strutMetrics = context.env.fontEmbedder?.getMetrics(strutFontFamily, strutFontWeight, strutFontStyle);
+        const lineBaseline = calculateBaseline(lineTop, strutFontSize, lineHeight, strutMetrics);
         runPlacer.placeRunsForLine(parts, {
             lineTop,
             lineHeight,
@@ -44,6 +55,7 @@ export function layoutInlineFormattingContext(options) {
             isLastLine,
             contentX,
             inlineOffsetStart: inlineOffset.start,
+            lineBaseline,
         });
     };
     const commitLine = (isLastLine) => {
@@ -118,7 +130,8 @@ export function layoutInlineFormattingContext(options) {
             // Text items
             if (workingItem.kind === "word" && workingItem.width > remaining) {
                 const mode = workingItem.style?.overflowWrap ?? "normal";
-                if (mode !== "normal" && remaining > 0) {
+                const wb = workingItem.style?.wordBreak ?? "normal";
+                if ((mode !== "normal" || wb === "break-all" || wb === "break-word") && remaining > 0) {
                     const [head, tail] = splitWordItemToken(workingItem, remaining);
                     if (head) {
                         lineParts.push({ item: head, offset: cursorX });
@@ -220,7 +233,7 @@ function layoutInlineChildrenIfNeeded(node, containerWidth, context) {
     const contentHeight = Math.max(result.newCursorY, floatBottom);
     let maxInlineEnd = 0;
     for (const child of inlineChildren) {
-        const extent = inlineExtentWithinContainer(child, containerWidth);
+        const extent = inlineExtentWithinContainer(child, containerWidth, containerWidth);
         maxInlineEnd = Math.max(maxInlineEnd, extent.end);
     }
     node.box.x = savedX;

package/dist/src/layout/inline/run-placer.d.ts

@@ -14,6 +14,7 @@ export interface LineContext {
     isLastLine: boolean;
     contentX: number;
     inlineOffsetStart: number;
+    lineBaseline: number;
 }
 /**
  * Responsible for placing text runs and box items on lines.

package/dist/src/layout/inline/run-placer.js

@@ -1,7 +1,6 @@
 import { LayoutNode } from "../../dom/node.js";
 import { isBoxItem } from "./types.js";
 import { placeInlineItem } from "./layout.js";
-import { calculateBaseline } from "./font-baseline-calculator.js";
 /**
  * Responsible for placing text runs and box items on lines.
  * Tracks runs per node and handles both text and inline-block layouts.
@@ -42,15 +41,8 @@ export class RunPlacer {
             if (!node || !part.item.text) {
                 continue;
             }
-            // Calculate baseline based on the item's fontSize and lineHeight
-            const fontSize = part.item.style?.fontSize ?? 16;
-            const itemLineHeight = part.item.lineHeight ?? lineHeight;
-            // Use calculateBaseline with font metrics when available
-            const fontFamily = part.item.style?.fontFamily ?? "sans-serif";
-            const fontWeight = part.item.style?.fontWeight ?? 400;
-            const fontStyle = part.item.style?.fontStyle ?? "normal";
-            const fontMetrics = this.fontEmbedder?.getMetrics(fontFamily, fontWeight, fontStyle);
-            const lineBaseline = calculateBaseline(lineTop, fontSize, itemLineHeight, fontMetrics);
+            // Use the shared line baseline computed from the container's strut
+            const lineBaseline = lineContext.lineBaseline;
             const startX = lineStartX + part.offset;
             const run = {
                 lineIndex,

package/dist/src/layout/pipeline/out-of-flow-manager.js

@@ -18,11 +18,12 @@ export class DefaultOutOfFlowManager {
         const cb = containingBlock(node, env.viewport);
         const widthRef = cb.width;
         const heightRef = cb.height;
+        const containerRefs = { containerWidth: widthRef, containerHeight: heightRef };
         const resolveInset = (value, reference) => {
             if (value === undefined || isAutoLength(value)) {
                 return undefined;
             }
-            return resolveLength(value, reference, { auto: "zero" });
+            return resolveLength(value, reference, { auto: "zero", ...containerRefs });
         };
         const left = resolveInset(node.style.left, widthRef);
         const right = resolveInset(node.style.right, widthRef);
@@ -46,7 +47,30 @@ export class DefaultOutOfFlowManager {
         else if (bottom !== undefined) {
             y = cb.y + cb.height - measuredHeight - bottom;
         }
+        const deltaX = x - node.box.x;
+        const deltaY = y - node.box.y;
         node.box.x = x;
         node.box.y = y;
+        // Offset all descendants so their coordinates stay consistent
+        // with the repositioned parent (children were laid out relative
+        // to the old position).
+        if (deltaX !== 0 || deltaY !== 0) {
+            offsetDescendants(node, deltaX, deltaY);
+        }
     }
 }
+function offsetDescendants(node, deltaX, deltaY) {
+    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;
+            }
+        }
+    });
+}

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

@@ -1,6 +1,6 @@
 import { LayoutNode } from "../../dom/node.js";
 import { Display, FloatMode } from "../../css/enums.js";
-import { containingBlock, establishesBFC, horizontalNonContent, horizontalMargin, inFlow, resolveBlockAutoMargins, resolveWidthBlock, verticalNonContent, } from "../utils/node-math.js";
+import { adjustForBoxSizing, applyMinHeight, containingBlock, establishesBFC, horizontalNonContent, horizontalMargin, inFlow, resolveBlockAutoMargins, resolveWidthBlock, verticalNonContent, } from "../utils/node-math.js";
 import { resolveLength } from "../../css/length.js";
 import { canCollapseMarginEnd, canCollapseMarginStart, collapsedGapBetween, effectiveMarginBottom, effectiveMarginTop, findFirstMarginCollapsibleChild, findLastMarginCollapsibleChild, } from "../utils/margin.js";
 import { finalizeOverflow } from "../utils/overflow.js";
@@ -21,29 +21,30 @@ export class BlockLayoutStrategy {
         const layoutDebug = createLayoutDebug(context);
         const contentMeasurer = new ContentMeasurer(layoutDebug);
         const cb = containingBlock(node, context.env.viewport);
+        const containerRefs = { containerWidth: cb.width, containerHeight: cb.height };
         node.establishesBFC = establishesBFC(node);
-        let contentWidth = resolveWidthBlock(node, cb.width);
+        let contentWidth = resolveWidthBlock(node, cb.width, cb.height);
         const debugTag = node.tagName ?? "(anonymous)";
         if (node.style.display === Display.InlineBlock) {
             layoutDebug(`[BlockLayout] start inline-block tag=${debugTag} style.width=${node.style.width} resolvedContentWidth=${contentWidth} cb.width=${cb.width}`);
         }
         const availableWidth = contentWidth;
         node.box.contentWidth = contentWidth;
-        const horizontalExtras = horizontalNonContent(node, contentWidth);
-        const horizontalMarginSize = horizontalMargin(node, contentWidth);
+        const horizontalExtras = horizontalNonContent(node, contentWidth, cb.height);
+        const horizontalMarginSize = horizontalMargin(node, contentWidth, cb.height);
         node.box.borderBoxWidth = contentWidth + horizontalExtras;
         node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMarginSize;
-        const paddingLeft = resolveLength(node.style.paddingLeft, contentWidth, { auto: "zero" });
-        const borderLeft = resolveLength(node.style.borderLeft, contentWidth, { auto: "zero" });
-        const paddingTop = resolveLength(node.style.paddingTop, contentWidth, { auto: "zero" });
-        const borderTop = resolveLength(node.style.borderTop, contentWidth, { auto: "zero" });
+        const paddingLeft = resolveLength(node.style.paddingLeft, contentWidth, { auto: "zero", ...containerRefs });
+        const borderLeft = resolveLength(node.style.borderLeft, contentWidth, { auto: "zero", ...containerRefs });
+        const paddingTop = resolveLength(node.style.paddingTop, contentWidth, { auto: "zero", ...containerRefs });
+        const borderTop = resolveLength(node.style.borderTop, contentWidth, { auto: "zero", ...containerRefs });
         const contentX = node.box.x + borderLeft + paddingLeft;
-        const collapseTopWithChildren = canCollapseMarginStart(node, contentWidth);
-        const collapseBottomWithChildren = canCollapseMarginEnd(node, contentWidth);
+        const collapseTopWithChildren = canCollapseMarginStart(node, contentWidth, cb.height);
+        const collapseBottomWithChildren = canCollapseMarginEnd(node, contentWidth, cb.height);
         const firstCollapsibleChild = collapseTopWithChildren ? findFirstMarginCollapsibleChild(node) : undefined;
         const lastCollapsibleChild = collapseBottomWithChildren ? findLastMarginCollapsibleChild(node) : undefined;
-        const topCollapseAmount = collapseTopWithChildren && firstCollapsibleChild ? effectiveMarginTop(firstCollapsibleChild, contentWidth) : 0;
-        const bottomCollapseAmount = collapseBottomWithChildren && lastCollapsibleChild ? effectiveMarginBottom(lastCollapsibleChild, contentWidth) : 0;
+        const topCollapseAmount = collapseTopWithChildren && firstCollapsibleChild ? effectiveMarginTop(firstCollapsibleChild, contentWidth, cb.height) : 0;
+        const bottomCollapseAmount = collapseBottomWithChildren && lastCollapsibleChild ? effectiveMarginBottom(lastCollapsibleChild, contentWidth, cb.height) : 0;
         let cursorY = node.box.y + paddingTop + borderTop;
         let previousBottomMargin = 0;
         const floatContext = new FloatContext();
@@ -61,6 +62,7 @@ export class BlockLayoutStrategy {
                     context,
                     contentX,
                     contentWidth,
+                    contentHeight: cb.height,
                     startY: cursorY,
                 });
                 previousBottomMargin = 0;
@@ -94,10 +96,10 @@ export class BlockLayoutStrategy {
                 index = lookahead - 1;
                 continue;
             }
-            const childMarginTopRaw = resolveLength(child.style.marginTop, contentWidth, { auto: "zero" });
-            const childMarginBottomRaw = resolveLength(child.style.marginBottom, contentWidth, { auto: "zero" });
-            const collapsedMarginTop = effectiveMarginTop(child, contentWidth);
-            const collapsedMarginBottom = effectiveMarginBottom(child, contentWidth);
+            const childMarginTopRaw = resolveLength(child.style.marginTop, contentWidth, { auto: "zero", ...containerRefs });
+            const childMarginBottomRaw = resolveLength(child.style.marginBottom, contentWidth, { auto: "zero", ...containerRefs });
+            const collapsedMarginTop = effectiveMarginTop(child, contentWidth, cb.height);
+            const collapsedMarginBottom = effectiveMarginBottom(child, contentWidth, cb.height);
             let gap = collapsedGapBetween(previousBottomMargin, collapsedMarginTop, node.establishesBFC);
             if (collapseTopWithChildren && child === firstCollapsibleChild) {
                 gap -= topCollapseAmount;
@@ -105,7 +107,7 @@ export class BlockLayoutStrategy {
             child.box.x = contentX;
             child.box.y = cursorY + gap;
             context.layoutChild(child);
-            const { marginLeft: usedMarginLeft, marginRight: usedMarginRight } = resolveBlockAutoMargins(contentWidth, child.box.borderBoxWidth, child.style.marginLeft, child.style.marginRight);
+            const { marginLeft: usedMarginLeft, marginRight: usedMarginRight } = resolveBlockAutoMargins(contentWidth, child.box.borderBoxWidth, child.style.marginLeft, child.style.marginRight, cb.height);
             child.box.usedMarginLeft = usedMarginLeft;
             child.box.usedMarginRight = usedMarginRight;
             const deltaX = usedMarginLeft;
@@ -122,14 +124,21 @@ export class BlockLayoutStrategy {
                 previousBottomMargin = 0;
             }
         }
-        const measurement = contentMeasurer.measureInFlowWidth(node, contentWidth, contentX);
+        // When the parent cannot collapse its bottom margin with children
+        // (e.g. it has border-bottom or padding-bottom), the last child's
+        // bottom margin is contained inside the parent and must be included
+        // in the content height.
+        if (!collapseBottomWithChildren && previousBottomMargin !== 0) {
+            cursorY += previousBottomMargin;
+        }
+        const measurement = contentMeasurer.measureInFlowWidth(node, contentWidth, contentX, cb.height);
         if (Number.isFinite(measurement.width)) {
             const intrinsicWidth = Math.max(0, measurement.width);
             node.box.scrollWidth = Math.max(node.box.scrollWidth, intrinsicWidth);
             if (node.style.display === Display.InlineBlock && node.style.width === "auto") {
-                const minWidth = node.style.minWidth !== undefined ? resolveLength(node.style.minWidth, cb.width, { auto: "zero" }) : undefined;
+                const minWidth = node.style.minWidth !== undefined ? resolveLength(node.style.minWidth, cb.width, { auto: "zero", ...containerRefs }) : undefined;
                 const maxWidth = node.style.maxWidth !== undefined
-                    ? resolveLength(node.style.maxWidth, cb.width, { auto: "reference" })
+                    ? resolveLength(node.style.maxWidth, cb.width, { auto: "reference", ...containerRefs })
                     : undefined;
                 let targetContentWidth = intrinsicWidth;
                 targetContentWidth = Math.min(targetContentWidth, availableWidth);
@@ -162,14 +171,16 @@ export class BlockLayoutStrategy {
         const effectiveCursor = Math.max(cursorY, floatBottom);
         node.box.contentHeight = Math.max(0, effectiveCursor - (node.box.y + borderTop) - paddingTop);
         if (node.style.height !== "auto") {
-            node.box.contentHeight = resolveLength(node.style.height, cb.height, { auto: "zero" });
+            const vertExtras = verticalNonContent(node, cb.height, cb.width);
+            node.box.contentHeight = adjustForBoxSizing(resolveLength(node.style.height, cb.height, { auto: "zero", ...containerRefs }), node.style.boxSizing, vertExtras);
         }
-        const verticalExtras = verticalNonContent(node, contentWidth);
+        const verticalExtras = verticalNonContent(node, cb.height, cb.width);
+        node.box.contentHeight = applyMinHeight(node.box.contentHeight, node, cb.height, verticalExtras, containerRefs);
         node.box.borderBoxHeight = node.box.contentHeight + verticalExtras;
         node.box.marginBoxHeight =
             node.box.borderBoxHeight +
-                resolveLength(node.style.marginTop, contentWidth, { auto: "zero" }) +
-                resolveLength(node.style.marginBottom, contentWidth, { auto: "zero" });
+                resolveLength(node.style.marginTop, cb.height, { auto: "zero", ...containerRefs }) +
+                resolveLength(node.style.marginBottom, cb.height, { auto: "zero", ...containerRefs });
         finalizeOverflow(node);
     }
 }