← 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 keyword(min-content, max-content, fit-content, stretch)는 constraint 해석 과정에서 WebKit layout tree 깊은 곳에서 처리됩니다. CSS Box Sizing 4의 stretch keyword는 요소의 margin box를 containing block에 맞게 채우는 방식으로 크기를 결정합니다. containing block의 크기가 indefinite한 경우에는 initial value로 fallback합니다. 이번 commit은 width, height, min/max-width, min/max-height, flex-basisstretch를 구현했으며, -webkit-fill-available은 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

이번 구현은 block flow, flexbox main/cross axis, grid, absolute positioning, aspect-ratio 제약이 있는 replaced element 등 여러 layout mode에 걸쳐 적용되었습니다. containing block의 available size는 context별로 다르게 계산되며, indefinite container에서의 initial value fallback 동작은 이 모든 경로에 걸쳐 조건 분기를 추가합니다. height resolution 경로(computeSizingKeywordLogicalContentHeightUsing())는 border/padding이 이중으로 차감되는 것을 방지하기 위해 의도적으로 percentageOrCalculated()를 우회합니다. 한편 20개 이상의 WPT stretch 테스트가 failure 목록에서 제거되어 현재 통과 상태입니다.

이번 변경은 layout surface area를 크게 확장한 사례입니다. prefix 없이 새로 도입된 sizing keyword가 block, flex, grid, replaced element, positioned layout 등 다양한 context에서 각각 별도의 code path를 유발합니다.

🔒

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

더 확인하려면 구독해 주세요