layout: Initial implementation of flex-direction: column and column-reverse (#33031)

This change removes restrictions on using the column layout mode of
flexbox and adds an initial implementation of sizing for that flex
direction. There's a lot of missing pieces still, but in some cases this
does render column flexbox.

In particular, there are now two code paths for preferred widths
(intrinsic size) calcuation: one in the main axis (row) and one in
the cross axis (column) corresponding to the flex direciton with
horizontal writing modes.

In addition, `FlexItemBox::inline_content_sizes` is removed in favor of
making `sizing::outer_inline` /
`IndependentFormattingContext::outer_inline_content_sizes` generic
enough to handle using a different value for auto minimum sizes, which
flexbox needs.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-08-14 16:25:09 +02:00 committed by GitHub
parent c059bab6f4
commit 7633bdccd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
124 changed files with 541 additions and 605 deletions

View file

@ -166126,6 +166126,19 @@
{}
]
],
"column-flex-child-with-max-width.html": [
"b1a6a84ded65341c37d7048c07de2fb5ee9036a9",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"content-height-with-scrollbars.html": [
"1872d5f81d7f9a9fc5ae004f71b63d94b71df19a",
[

View file

@ -0,0 +1,2 @@
[self-align-safe-unsafe-flex-003.html]
expected: FAIL

View file

@ -1,9 +0,0 @@
[align-content-wrap-002.html]
[.flex-horizontal, .flex-vertical 4]
expected: FAIL
[.flex-horizontal, .flex-vertical 5]
expected: FAIL
[.flex-horizontal, .flex-vertical 6]
expected: FAIL

View file

@ -1,2 +0,0 @@
[align-items-009.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[align-self-015.html]
expected: FAIL

View file

@ -13,6 +13,3 @@
[#target > div 6]
expected: FAIL
[#target > div 4]
expected: FAIL

View file

@ -1,3 +1,9 @@
[flex-align-baseline-006.html]
[#target > div 3]
expected: FAIL
[#target > div 1]
expected: FAIL
[#target > div 2]
expected: FAIL

View file

@ -1,3 +1,9 @@
[flex-align-baseline-007.html]
[#target > div 3]
expected: FAIL
[#target > div 1]
expected: FAIL
[#target > div 2]
expected: FAIL

View file

@ -49,3 +49,9 @@
[.target > * 25]
expected: FAIL
[.target > * 43]
expected: FAIL
[.target > * 47]
expected: FAIL

View file

@ -0,0 +1,2 @@
[auto-height-column-with-border-and-padding.html]
expected: FAIL

View file

@ -1,9 +1,3 @@
[box-sizing-001.html]
[.flexbox 10]
expected: FAIL
[.flexbox 8]
expected: FAIL
[.flexbox 9]
[.flexbox 7]
expected: FAIL

View file

@ -0,0 +1,3 @@
[box-sizing-min-max-sizes-001.html]
[.flexbox 2]
expected: FAIL

View file

@ -0,0 +1,3 @@
[change-column-flex-width.html]
[#container 1]
expected: FAIL

View file

@ -0,0 +1,6 @@
[column-flex-child-with-overflow-scroll.html]
[.flexbox 1]
expected: FAIL
[.flexbox 2]
expected: FAIL

View file

@ -1,7 +1,3 @@
[columns-height-set-via-top-bottom.html]
[.flexbox 1]
expected: FAIL
[.flexbox 2]
expected: FAIL

View file

@ -1,3 +0,0 @@
[fieldset-as-container-justify-center.tentative.html]
[.item 1]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-aspect-ratio-img-column-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-aspect-ratio-img-column-004.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-basis-010.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-basis-011.html]
expected: FAIL

View file

@ -25,3 +25,6 @@
[.flex-item 11]
expected: FAIL
[.flex-item 12]
expected: FAIL

View file

@ -0,0 +1,3 @@
[flex-column-relayout-assert.html]
[.flexbox 1]
expected: FAIL

View file

@ -0,0 +1,3 @@
[flex-direction-column-overlap-001.html]
[#container 1]
expected: FAIL

View file

@ -2,23 +2,23 @@
[.flexbox 5]
expected: FAIL
[.flexbox 7]
expected: FAIL
[.flexbox 3]
expected: FAIL
[.flexbox 8]
expected: FAIL
[.flexbox 16]
expected: FAIL
[.flexbox 17]
expected: FAIL
[.flexbox 14]
expected: FAIL
[.flexbox 12]
[.flexbox 4]
expected: FAIL
[.flexbox 9]
expected: FAIL
[.flexbox 13]
expected: FAIL
[.flexbox 18]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-flow-007.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-flow-008.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-flow-009.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-flow-010.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-flow-011.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-flow-012.html]
expected: FAIL

View file

@ -8,12 +8,6 @@
[.flexbox 4]
expected: FAIL
[.flexbox 5]
expected: FAIL
[.flexbox 6]
expected: FAIL
[.flexbox 7]
expected: FAIL
@ -28,3 +22,9 @@
[.flexbox 3]
expected: FAIL
[.flexbox 9]
expected: FAIL
[.flexbox 10]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-height-min-content.html]
expected: FAIL

View file

@ -23,18 +23,6 @@
[.flexbox 5]
expected: FAIL
[.flexbox 6]
expected: FAIL
[.flexbox 7]
expected: FAIL
[.flexbox 1]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 3]
expected: FAIL

View file

@ -1,12 +1,18 @@
[flex-item-contains-strict.html]
[.inline-flex 1]
expected: FAIL
[.inline-flex 2]
expected: FAIL
[.inline-flex 5]
expected: FAIL
[.inline-flex 6]
expected: FAIL
[.inline-flex 3]
expected: FAIL
[.inline-flex 7]
expected: FAIL
[.inline-flex 1]
expected: FAIL
[.inline-flex 5]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-margin-no-collapse.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-minimum-height-flex-items-002.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-004.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-007.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-008.xht]
expected: FAIL

View file

@ -1,4 +0,0 @@
[flex-minimum-height-flex-items-012.html]
[.flexbox 1]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-014.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-minimum-height-flex-items-019.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-022.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-minimum-height-flex-items-024.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-026.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-height-flex-items-028.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-minimum-height-flex-items-030.html]
expected: FAIL

View file

@ -1,3 +1,6 @@
[flex-minimum-size-001.html]
[.flexbox, .inline-flexbox 2]
expected: FAIL
[.flexbox, .inline-flexbox 3]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-minimum-width-flex-items-015.html]
expected: FAIL

View file

@ -1,7 +1,4 @@
[flex-one-sets-flex-basis-to-zero-px.html]
[.flexbox 3]
expected: FAIL
[.flexbox 4]
expected: FAIL
@ -10,3 +7,9 @@
[.flexbox 6]
expected: FAIL
[.flexbox 1]
expected: FAIL
[.flexbox 2]
expected: FAIL

View file

@ -0,0 +1,3 @@
[flex-outer-flexbox-column-recalculate-height-on-resize-001.html]
[.OuterFlexbox 1]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-wrap-002.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-align-self-stretch-vert-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-break-request-vert-002a.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-break-request-vert-002b.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-definite-sizes-005.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flexbox-definite-sizes-006.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flexbox-flex-basis-content-004a.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flexbox-flex-basis-content-004b.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flexbox-flex-direction-column-percentage-ignored.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-flex-direction-column-reverse.htm]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-flex-direction-column.htm]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-flex-flow-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-flex-flow-002.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-overflow-vert-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-overflow-vert-002.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-overflow-vert-003.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-overflow-vert-004.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox-writing-mode-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox_flow-column-reverse-wrap-reverse.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox_flow-column-reverse-wrap.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flexbox_order.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-002-lr.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-002-ltr.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-002-rl.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-002-rtl.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-003-lr.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-003-rl.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-005-lr.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-005-ltr.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-005-rl.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[gap-005-rtl.html]
expected: FAIL

View file

@ -8,11 +8,26 @@
[.flexbox > img 10]
expected: FAIL
[.flexbox > img 7]
[.flexbox > img 1]
expected: FAIL
[.flexbox > img 6]
[.flexbox > img 2]
expected: FAIL
[.flexbox > img 3]
[.flexbox > img 5]
expected: FAIL
[.flexbox > img 8]
expected: FAIL
[.flexbox > img 9]
expected: FAIL
[.flexbox > img 12]
expected: FAIL
[.flexbox > img 13]
expected: FAIL
[.flexbox > img 16]
expected: FAIL

View file

@ -8,11 +8,26 @@
[.flexbox > img 10]
expected: FAIL
[.flexbox > img 7]
[.flexbox > img 1]
expected: FAIL
[.flexbox > img 6]
[.flexbox > img 2]
expected: FAIL
[.flexbox > img 3]
[.flexbox > img 5]
expected: FAIL
[.flexbox > img 8]
expected: FAIL
[.flexbox > img 9]
expected: FAIL
[.flexbox > img 12]
expected: FAIL
[.flexbox > img 13]
expected: FAIL
[.flexbox > img 16]
expected: FAIL

View file

@ -1,7 +1,4 @@
[image-as-flexitem-size-004.html]
[.flexbox > img 15]
expected: FAIL
[.flexbox > img 10]
expected: FAIL
@ -14,9 +11,6 @@
[.flexbox > img 5]
expected: FAIL
[.flexbox > img 4]
expected: FAIL
[.flexbox > img 7]
expected: FAIL
@ -26,20 +20,17 @@
[.flexbox > img 1]
expected: FAIL
[.flexbox > img 3]
expected: FAIL
[.flexbox > img 14]
expected: FAIL
[.flexbox > img 12]
expected: FAIL
[.flexbox > img 18]
expected: FAIL
[.flexbox > img 9]
expected: FAIL
[.flexbox > img 2]
expected: FAIL
[.flexbox > img 11]
expected: FAIL
[.flexbox > img 16]
expected: FAIL

View file

@ -1,7 +1,4 @@
[image-as-flexitem-size-004v.html]
[.flexbox > img 15]
expected: FAIL
[.flexbox > img 10]
expected: FAIL
@ -14,9 +11,6 @@
[.flexbox > img 5]
expected: FAIL
[.flexbox > img 4]
expected: FAIL
[.flexbox > img 7]
expected: FAIL
@ -26,20 +20,17 @@
[.flexbox > img 1]
expected: FAIL
[.flexbox > img 3]
expected: FAIL
[.flexbox > img 14]
expected: FAIL
[.flexbox > img 12]
expected: FAIL
[.flexbox > img 18]
expected: FAIL
[.flexbox > img 9]
expected: FAIL
[.flexbox > img 2]
expected: FAIL
[.flexbox > img 11]
expected: FAIL
[.flexbox > img 16]
expected: FAIL

View file

@ -2,21 +2,6 @@
[.flexbox > img 15]
expected: FAIL
[.flexbox > img 14]
expected: FAIL
[.flexbox > img 17]
expected: FAIL
[.flexbox > img 12]
expected: FAIL
[.flexbox > img 18]
expected: FAIL
[.flexbox > img 9]
expected: FAIL
[.flexbox > img 8]
expected: FAIL
@ -37,18 +22,3 @@
[.flexbox > img 3]
expected: FAIL
[.flexbox > img 2]
expected: FAIL
[.flexbox > img 16]
expected: FAIL
[.flexbox > img 11]
expected: FAIL
[.flexbox > img 10]
expected: FAIL
[.flexbox > img 13]
expected: FAIL

View file

@ -1,34 +1,7 @@
[image-as-flexitem-size-006v.html]
[.flexbox > img 10]
expected: FAIL
[.flexbox > img 11]
expected: FAIL
[.flexbox > img 13]
expected: FAIL
[.flexbox > img 10]
expected: FAIL
[.flexbox > img 15]
expected: FAIL
[.flexbox > img 14]
expected: FAIL
[.flexbox > img 17]
expected: FAIL
[.flexbox > img 12]
expected: FAIL
[.flexbox > img 18]
expected: FAIL
[.flexbox > img 9]
expected: FAIL
[.flexbox > img 8]
expected: FAIL
@ -49,9 +22,3 @@
[.flexbox > img 3]
expected: FAIL
[.flexbox > img 2]
expected: FAIL
[.flexbox > img 16]
expected: FAIL

View file

@ -0,0 +1,2 @@
[col-wrap-009.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[item-with-max-height-and-scrollbar.html]
expected: FAIL

View file

@ -1,4 +0,0 @@
[justify-content-006.html]
[.middle > div 1]
expected: FAIL

View file

@ -1,2 +0,0 @@
[layout-algorithm_algo-cross-line-002.html]
expected: FAIL

View file

@ -0,0 +1,3 @@
[orthogonal-writing-modes-and-intrinsic-sizing.html]
[.flexbox 2]
expected: FAIL

View file

@ -0,0 +1,12 @@
[overflow-auto-006.html]
[.flexbox, .inline-flexbox 7]
expected: FAIL
[.flexbox, .inline-flexbox 8]
expected: FAIL
[.flexbox, .inline-flexbox 9]
expected: FAIL
[.flexbox, .inline-flexbox 10]
expected: FAIL

View file

@ -0,0 +1,3 @@
[overflow-auto-008.html]
[hbox dimensions]
expected: FAIL

View file

@ -7,12 +7,3 @@
[.flexbox 6]
expected: FAIL
[.flexbox 1]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 3]
expected: FAIL

View file

@ -1,2 +0,0 @@
[percentage-heights-002.html]
expected: FAIL

View file

@ -1,6 +1,3 @@
[percentage-heights-003.html]
[.flexbox 2]
expected: FAIL
[.flexbox 3]
[.flexbox 6]
expected: FAIL

View file

@ -0,0 +1,2 @@
[percentage-heights-004.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[percentage-heights-005.html]
expected: FAIL

Some files were not shown because too many files have changed in this diff Show more