← All issues

Implement CSS Box Sizing `stretch` keyword

fdfcbee

LayoutTests/fast/css-intrinsic-dimensions/width-avoid-floats-expected.html

- /* fill-available can't avoid the float so it should be pushed down */
+ /* stretch avoids the float like auto with overflow: auto */
.fill-available {
- clear: left;
+ overflow: auto;
}

CSS intrinsic sizing keywords (min-content, max-content, fit-content, stretch) are handled deep in WebKit's layout tree during constraint resolution. The stretch keyword from CSS Box Sizing 4 sizes an element's margin box to fill its containing block, falling back to the initial value when the containing block size is indefinite. This commit implements stretch for width, height, min/max-width, min/max-height, and flex-basis, with -webkit-fill-available retained as an alias.

width: stretch resolution path:

Containing block size
   ├─ definite ──► margin box = CB size
   │               (block: zero margins if parent has no border/padding
   │                and is not an independent formatting context)
   │
   └─ indefinite ─► fallback to initial value
                    width/height → auto
                    min-*        → 0
                    max-*        → none

The implementation touches multiple layout modes: block flow, flexbox main/cross axes, grid, absolute positioning, and replaced elements with aspect-ratio constraints. The containing block's available size is resolved differently per context, and the fallback-to-initial behavior for indefinite containers adds conditional branching across all these paths. The height resolution path (computeSizingKeywordLogicalContentHeightUsing()) deliberately bypasses percentageOrCalculated() to avoid double border/padding subtraction. Over 20 WPT stretch tests were removed from the failure list — now passing.

This is a significant layout surface area expansion — a new, previously-unprefixed sizing keyword triggers distinct code paths across block, flex, grid, replaced, and positioned layout contexts.

🔒

New sizing paths across block, flex, replaced, and positioned contexts — edge cases in fallback and margin-zeroing logic are worth investigating.

Subscribe to read more