Skip to content

Commit a1cec16

Browse files
davidsgroganchromium-wpt-export-bot
davidsgrogan
authored and
chromium-wpt-export-bot
committed
[LayoutNG] Lay out flex items with ShrinkToFit in more cases
A row flex box's cross size of {fit,min,max}-content isn't definite, which affects the inline size of orthogonal children. Bug: 845235 Change-Id: Id08a1cf6d23e9e295e87c52d426079bc7e886b74 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1758992 Reviewed-by: Christian Biesinger <[email protected]> Commit-Queue: David Grogan <[email protected]> Cr-Commit-Position: refs/heads/master@{#689232}
1 parent 8f92922 commit a1cec16

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

‎css/css-flexbox/fit-content-item-002.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="David Grogan" href="mailto:[email protected]">
3+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
4+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
5+
<meta name="flags" content="" />
6+
<meta name="assert" content="A flex container's block cross size of min-content is treated as indefinite when setting fit-content on an item for flex base sizing">
7+
8+
<style>
9+
x-flexbox {
10+
display: flex;
11+
height: min-content;
12+
}
13+
14+
.fit-content-item {
15+
background: green;
16+
width: 100px;
17+
writing-mode: vertical-lr;
18+
}
19+
20+
.height-setting-item {
21+
height: 100px;
22+
}
23+
24+
</style>
25+
26+
<!-- This has to be a row flexbox whose item stretches and has vertical writing
27+
mode to trigger:
28+
* a cross size is needed to determine the main size (row flexbox's cross size
29+
is vertical, which is the item's inline size because it has a vertical
30+
writing mode)
31+
* the flex item’s cross size is [...] not definite (if the item didn't
32+
stretch, the definiteness of the container's cross size wouldn't matter
33+
because the cross size would never be definite and the item would always get
34+
fit-content)
35+
-->
36+
37+
<p>Test passes if there is a filled green square.</p>
38+
39+
<x-flexbox>
40+
<div class="fit-content-item"></div>
41+
<div class="height-setting-item"></div>
42+
</x-flexbox>

‎css/css-flexbox/fit-content-item-003.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="David Grogan" href="mailto:[email protected]">
3+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
4+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
5+
<meta name="flags" content="" />
6+
<meta name="assert" content="A flex container's block cross size of max-content is treated as indefinite when setting fit-content on an item for flex base sizing">
7+
8+
<style>
9+
x-flexbox {
10+
display: flex;
11+
height: max-content;
12+
}
13+
14+
.fit-content-item {
15+
background: green;
16+
width: 100px;
17+
writing-mode: vertical-lr;
18+
}
19+
20+
.height-setting-item {
21+
height: 100px;
22+
}
23+
24+
</style>
25+
26+
<!-- This has to be a row flexbox whose item stretches and has vertical writing
27+
mode to trigger:
28+
* a cross size is needed to determine the main size (row flexbox's cross size
29+
is vertical, which is the item's inline size because it has a vertical
30+
writing mode)
31+
* the flex item’s cross size is [...] not definite (if the item didn't
32+
stretch, the definiteness of the container's cross size wouldn't matter
33+
because the cross size would never be definite and the item would always get
34+
fit-content)
35+
-->
36+
37+
<p>Test passes if there is a filled green square.</p>
38+
39+
<x-flexbox>
40+
<div class="fit-content-item"></div>
41+
<div class="height-setting-item"></div>
42+
</x-flexbox>

‎css/css-flexbox/fit-content-item-004.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="David Grogan" href="mailto:[email protected]">
3+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
4+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
5+
<meta name="flags" content="" />
6+
<meta name="assert" content="A flex container's block cross size of fit-content is treated as indefinite when setting fit-content on an item for flex base sizing">
7+
8+
<style>
9+
x-flexbox {
10+
display: flex;
11+
height: fit-content;
12+
}
13+
14+
.fit-content-item {
15+
background: green;
16+
width: 100px;
17+
writing-mode: vertical-lr;
18+
}
19+
20+
.height-setting-item {
21+
height: 100px;
22+
}
23+
24+
</style>
25+
26+
<!-- This has to be a row flexbox whose item stretches and has vertical writing
27+
mode to trigger:
28+
* a cross size is needed to determine the main size (row flexbox's cross size
29+
is vertical, which is the item's inline size because it has a vertical
30+
writing mode)
31+
* the flex item’s cross size is [...] not definite (if the item didn't
32+
stretch, the definiteness of the container's cross size wouldn't matter
33+
because the cross size would never be definite and the item would always get
34+
fit-content)
35+
-->
36+
37+
<p>Test passes if there is a filled green square.</p>
38+
39+
<x-flexbox>
40+
<div class="fit-content-item"></div>
41+
<div class="height-setting-item"></div>
42+
</x-flexbox>

0 commit comments

Comments
 (0)