Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-09 07:25:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Take into account the intrinsic block size when computing the main size of a column flex container (#33135)

Browse source 
In particular, `main_content_sizes()` now works with columns.

`layout_for_block_content_size()` is now used for both intrinsic sizes
and intrinsic contributions, a IntrinsicSizingMode parameter is added
to choose the behavior.

Also, we consider the main size of a flex item as indefinite if its flex
basis is indefinite and the flex container has an indefinite main size.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Oriol Brufau 2024-08-20 13:30:27 +02:00 • committed by GitHub
parent cf98d8d7ec
commit c00cd1326a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
36 changed files with 290 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/meta/MANIFEST.json vendored
View file

@ -545450,7 +545450,7 @@
]
],
"flex-one-sets-flex-basis-to-zero-px.html": [
"8fca136352ff7d9a838616d73f809da7cff44ba0",
"d7116868d7512efc8112bf5052c30a4dd5eea35d",
[
null,
{}

2
tests/wpt/meta/css/css-flexbox/align-content-wrap-004.html.ini vendored
View file

@ -1,2 +0,0 @@
[align-content-wrap-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/auto-height-column-with-border-and-padding.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/auto-height-with-flex.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/box-sizing-001.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/box-sizing-min-max-sizes-001.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/change-column-flex-width.html.ini vendored
View file

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

6
tests/wpt/meta/css/css-flexbox/column-flex-child-with-overflow-scroll.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/column-reverse-gap.html.ini vendored
View file

@ -1,3 +0,0 @@
[column-reverse-gap.html]
[.flexbox 1]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/flex-basis-012.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/flex-column-relayout-assert.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/flex-direction-column-overlap-001.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flex-direction-column-reverse.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flex-direction-column.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flex-direction-with-element-insert.html.ini vendored
View file

@ -1,2 +0,0 @@
[flex-direction-with-element-insert.html]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/flex-direction.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flex-height-min-content.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-013.html.ini vendored
View file

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

13
tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-025.html.ini vendored
View file

@ -1,13 +0,0 @@
[flex-minimum-height-flex-items-025.html]
[.outer-column-flexbox > div 3]
expected: FAIL
[.outer-column-flexbox > div 2]
expected: FAIL
[.outer-column-flexbox > div 1]
expected: FAIL
[.outer-column-flexbox > div 4]
expected: FAIL

23
tests/wpt/meta/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html.ini vendored
View file

@ -1,12 +1,27 @@
[flex-one-sets-flex-basis-to-zero-px.html]
[.flexbox 4]
[.flexbox 10]
expected: FAIL
[.flexbox 5]
[.flexbox 11]
expected: FAIL
[.flexbox 6]
[.flexbox 12]
expected: FAIL
[.flexbox 2]
[.flexbox 13]
expected: FAIL
[.flexbox 14]
expected: FAIL
[.flexbox 15]
expected: FAIL
[.flexbox 16]
expected: FAIL
[.flexbox 17]
expected: FAIL
[.flexbox 18]
expected: FAIL

3
tests/wpt/meta/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flexbox-definite-sizes-006.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flexbox_align-items-center-3.html.ini vendored
View file

@ -1,2 +0,0 @@
[flexbox_align-items-center-3.html]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/flexbox_direction-column-reverse.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flexbox_direction-column.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/gap-014.html.ini vendored
View file

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

4
tests/wpt/meta/css/css-flexbox/gap-017.html.ini vendored
View file

@ -1,4 +0,0 @@
[gap-017.html]
[.button 1]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/order/order-with-column-reverse.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-flexbox/overflow-auto-008.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/percentage-heights-005.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/percentage-heights-008.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/stretching-orthogonal-flows.html.ini vendored
View file

@ -1,2 +0,0 @@
[stretching-orthogonal-flows.html]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/table-as-item-change-cell.html.ini vendored
View file

@ -1,2 +0,0 @@
[table-as-item-change-cell.html]
expected: FAIL

97
tests/wpt/tests/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html vendored
View file

@ -2,6 +2,7 @@
<html>
<title>CSS Flexbox: flex-basis with zero pixel</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-main-sizes">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link href="support/flexbox.css" rel="stylesheet">
<meta name="assert" content="This test ensures that setting 'flex-basis' property to
@ -10,18 +11,40 @@ and 'writing-mode' value works properly.">
<style>
.flexbox > div {
font: 14px/1 Ahem;
min-width: 0;
min-height: 0;
}
.flex-zero {
flex: 0;
}
.flex-zero-one-zero-percent {
flex: 0 1 0%;
}
.flex-zero-one-zero-px {
flex: 0 1 0px;
}
.flex-half {
flex: 0.5;
}
.flex-half-one-zero-percent {
flex: 0.5 1 0%;
}
.flex-half-one-zero-px {
flex: 0.5 1 0px;
}
.flex-one-one-zero-percent {
flex: 1 1 0%;
min-width: 0;
min-height: 0;
}
.flex-one-one-zero-px {
flex: 1 1 0px;
min-width: 0;
min-height: 0;
}
.vertical {
@ -33,6 +56,35 @@ and 'writing-mode' value works properly.">
<script src="/resources/check-layout-th.js"></script>
<body onload="document.fonts.ready.then(() => { checkLayout('.flexbox'); })">
<div id=log></div>
<div class="flexbox column">
<div class="flex-zero" data-expected-height="14">Flex item with flex: 0</div>
</div>
<div class="flexbox column">
<div class="flex-zero-one-zero-percent" data-expected-height="14">Flex item with flex: 0 1 0%</div>
</div>
<div class="flexbox column">
<div class="flex-zero-one-zero-px" data-expected-height="0">Flex item with flex: 0 1 0px</div>
</div>
<div class="flexbox column">
<div class="flex-half" data-expected-height="14">Flex item with flex: 0.5</div>
</div>
<div class="flexbox column">
<div class="flex-half-one-zero-percent" data-expected-height="14">Flex item with flex: 0.5 1 0%</div>
</div>
<!-- A flex-grow of 0 would size the container to the flex base size of the item (0px),
and a flex-grow of 1 would size it to the max-content contribution of the item (14px).
Therefore, a flew-grow of 0.5 sizes the container to the average, 7px.
And then the item grows to fill half of that, 3.5px.
Note that Gecko, Blink and WebKit use the flex-basis instead. -->
<div class="flexbox column">
<div class="flex-half-one-zero-px" data-expected-height="4">Flex item with flex: 0.5 1 0px</div>
</div>
<div class="flexbox column">
<div class="flex-one" data-expected-height="14">Flex item with flex: 1</div>
</div>
@ -41,8 +93,39 @@ and 'writing-mode' value works properly.">
<div class="flex-one-one-zero-percent" data-expected-height="14">Flex item with flex: 1 1 0%</div>
</div>
<!-- flex-grow is >= 1, so the flex container is sized to the max-content contribution of the item.
Note that Gecko, Blink and WebKit use the flex-basis instead. -->
<div class="flexbox column">
<div class="flex-one-one-zero-px" data-expected-height="0">Flex item with flex: 1 1 0px</div>
<div class="flex-one-one-zero-px" data-expected-height="14">Flex item with flex: 1 1 0px</div>
</div>
<div class="flexbox column vertical">
<div class="flex-zero" data-expected-width="14">Flex item with flex: 0</div>
</div>
<div class="flexbox column vertical">
<div class="flex-zero-one-zero-percent" data-expected-width="14">Flex item with flex: 0 1 0%</div>
</div>
<div class="flexbox column vertical">
<div class="flex-zero-one-zero-px" data-expected-width="0">Flex item with flex: 0 1 0px</div>
</div>
<div class="flexbox column vertical">
<div class="flex-half" data-expected-width="14">Flex item with flex: 0.5</div>
</div>
<div class="flexbox column vertical">
<div class="flex-half-one-zero-percent" data-expected-width="14">Flex item with flex: 0.5 1 0%</div>
</div>
<!-- A flex-grow of 0 would size the container to the flex base size of the item (0px),
and a flex-grow of 1 would size it to the max-content contribution of the item (14px).
Therefore, a flew-grow of 0.5 sizes the container to the average, 7px.
And then the item grows to fill half of that, 3.5px.
Note that Gecko, Blink and WebKit use the flex-basis instead. -->
<div class="flexbox column vertical">
<div class="flex-half-one-zero-px" data-expected-width="4">Flex item with flex: 0.5 1 0px</div>
</div>
<div class="flexbox column vertical">
@ -53,8 +136,10 @@ and 'writing-mode' value works properly.">
<div class="flex-one-one-zero-percent" data-expected-width="14">Flex item with flex: 1 1 0%</div>
</div>
<!-- flex-grow is >= 1, so the flex container is sized to the max-content contribution of the item.
Note that Gecko, Blink and WebKit use the flex-basis instead. -->
<div class="flexbox column vertical">
<div class="flex-one-one-zero-px" data-expected-width="0">Flex item with flex: 1 1 0px</div>
<div class="flex-one-one-zero-px" data-expected-width="14">Flex item with flex: 1 1 0px</div>
</div>
</body>
</html>