Skip to content

Commit 21a7c47

Browse files
aethanycmoz-wptsync-bot
aethanyc
authored and
moz-wptsync-bot
committed
Compute transferred size suggestion only if a flex item is a replaced element.
If the flex item is a non-replaced element and its min-width/min-height is 'auto', the spec has changed so that it has no transferred size suggestion now. https://drafts.csswg.org/css-flexbox-1/#min-size-auto This patch also updates WPT tests to fix #27878 Differential Revision: https://phabricator.services.mozilla.com/D112830 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1703304 gecko-commit: fb14e6d29a44a79efc296cc727f92aa58ea4dacc gecko-reviewers: dholbert
1 parent f66c3a0 commit 21a7c47

File tree

4 files changed

+75
-43
lines changed

4 files changed

+75
-43
lines changed

‎css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22
<title>CSS aspect-ratio: Row flexbox min-width</title>
33
<link rel="author" title="Google LLC" href="https://www.google.com/">
44
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
5+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
56
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
67
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
78

89
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
910

1011
<div style="display: flex;">
11-
<!-- transferred size: 100px. content size suggestion: 200px.
12-
min-width: min(100, 200). -->
13-
<div style="background: green; height: 100px; aspect-ratio: 1/1; flex-basis: 0;">
14-
<div style="width: 200px;"></div>
12+
<!-- No transferred size suggestion since the flex item is non-replaced.
13+
Content size suggestion is 100px. -->
14+
<div style="background: green; height: 100px; aspect-ratio: 1/2; flex-basis: 0;">
15+
<div style="width: 100px;"></div>
1516
</div>
1617
</div>

‎css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22
<title>CSS aspect-ratio: Column flexbox min-height</title>
33
<link rel="author" title="Google LLC" href="https://www.google.com/">
44
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
5+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
56
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
67
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
78

89
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
910

1011
<div style="display: flex; flex-direction: column;">
11-
<!-- transferred size: 100px. content size suggestion: 200px.
12-
min-height: min(100, 200). -->
13-
<div style="background: green; width: 100px; aspect-ratio: 1/1; flex-basis: 0;">
14-
<div style="height: 200px;"></div>
12+
<!-- No transferred size suggestion since the flex item is non-replaced.
13+
Content size suggestion is 100px. -->
14+
<div style="background: green; width: 100px; aspect-ratio: 2/1; flex-basis: 0;">
15+
<div style="height: 100px;"></div>
1516
</div>
1617
</div>

‎css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<link rel="author" title="Ting-Yu Lin" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
66
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
7+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
8+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
79
<link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
810
<style>
911
.flexContainer {
@@ -21,54 +23,66 @@
2123

2224
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
2325

26+
<!-- In all of the subtests here, each flex item's automatic minimum width is
27+
resolved directly from its content size suggestion. Notably, these items
28+
*do not* get a "transferred size suggestion", because they are all
29+
*non-replaced* elements; and "transferred size suggestion" is only used
30+
for resolving automatic minimum sizes on *replaced* elements. However,
31+
note that we do "transfer" sizes through the aspect ratio, as part of
32+
computing the content size suggestion and/or flex base size. -->
33+
2434
<!-- In the following four flex containers, the aspect-ratio works with border-box. -->
2535
<div class="flexContainer" style="width: auto;">
2636
<!-- The border-box height 25px is transferred to the main axis,
27-
yielding a resolved flex base size of 200px. -->
37+
yielding a resolved flex base size (border-box) of 200px. -->
2838
<div class="item" style="min-width:0; height: 25px; aspect-ratio: 8/1;"></div>
2939
</div>
3040

3141
<div class="flexContainer">
32-
<!-- The border-box height 25px is transferred to the main axis,
33-
yielding a resolved min-width:auto of 200px. -->
42+
<!-- The content size suggestion (border-box) is 200px because the
43+
border-box height 25px is transferred to the main axis. -->
3444
<div class="item" style="height: 25px; aspect-ratio: 8/1;"></div>
3545
</div>
3646

3747
<div class="flexContainer">
38-
<!-- The border-box min-height 25px is transferred to the main axis,
39-
yielding a resolved min-width:auto of 200px. -->
48+
<!-- The content size suggestion (border-box) is 200px because the
49+
border-box height 25px (enforced by min-height) is transferred to the
50+
main axis. -->
4051
<div class="item" style="min-height: 25px; aspect-ratio: 8/1;"></div>
4152
</div>
4253

4354
<div class="flexContainer">
44-
<!-- The border-box height 25px (clamped by max-height) is transferred to the main axis,
45-
yielding a resolved min-width:auto of 200px. -->
55+
<!-- The content size suggestion (border-box) is 200px because the
56+
border-box height 25px (clamped by max-height) is transferred to the
57+
main axis. -->
4658
<div class="item" style="max-height: 25px; height: 100px; aspect-ratio: 8/1;"></div>
4759
</div>
4860

4961
<!-- In the following four flex containers, the aspect-ratio works with content-box
5062
because its value contains 'auto'. -->
5163
<div class="flexContainer" style="width: auto;">
5264
<!-- The content-box height 10px is transferred to the main axis,
53-
yielding a resolved flex base size of 190px. -->
65+
yielding a resolved flex base size (content-box) of 190px. -->
5466
<div class="item" style="min-width:0; height: 25px; aspect-ratio: auto 19/1;"></div>
5567
</div>
5668

5769
<div class="flexContainer">
58-
<!-- The content-box height 10px is transferred to the main axis,
59-
yielding a resolved min-width:auto of 190px. -->
70+
<!-- The content size suggestion (content-box) is 190px because the
71+
content-box height 10px is transferred to the main axis. -->
6072
<div class="item" style="height: 25px; aspect-ratio: auto 19/1;"></div>
6173
</div>
6274

6375
<div class="flexContainer">
64-
<!-- The content-box min-height 10px is transferred to the main axis,
65-
yielding a resolved min-width:auto of 190px. -->
76+
<!-- The content size suggestion (content-box) is 190px because the
77+
content-box height 10px (enforced by min-height) is transferred to the
78+
main axis. -->
6679
<div class="item" style="min-height: 25px; aspect-ratio: auto 19/1;"></div>
6780
</div>
6881

6982
<div class="flexContainer">
70-
<!-- The content-box height 10px (clamped by max-height) is transferred
71-
to the main axis, yielding a resolved min-width:auto of 190px. -->
83+
<!-- The content size suggestion (content-box) is 190px because the
84+
content-box height 10px (clamped by max-height) is transferred to the
85+
main axis. -->
7286
<div class="item" style="max-height: 25px; height: 100px; aspect-ratio: auto 19/1;"></div>
7387
</div>
7488
</html>

‎css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<link rel="author" title="Ting-Yu Lin" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
66
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
7+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
8+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
79
<link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
810
<style>
911
.flexContainer {
@@ -19,60 +21,74 @@
1921
box-sizing: border-box;
2022
}
2123
.item > div {
22-
height: 500px; /* Set a large content size suggestion for flex item. */
24+
height: 190px; /* Set the content size suggestion for flex item. */
2325
}
2426
</style>
2527

2628
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
2729

30+
<!-- In all of the subtests here, each flex item's automatic minimum height is
31+
resolved directly from its content size suggestion. Notably, these items
32+
*do not* get a "transferred size suggestion", because they are all
33+
*non-replaced* elements; and "transferred size suggestion" is only used
34+
for resolving automatic minimum sizes on *replaced* elements. However,
35+
note that we do "transfer" sizes through the aspect ratio, as part of
36+
computing the content size suggestion and/or flex base size. -->
37+
2838
<!-- In the following four flex containers, the aspect-ratio works with border-box. -->
2939
<div class="flexContainer" style="height: auto;">
3040
<!-- The border-box width 25px is transferred to the main axis,
31-
yielding a resolved flex base size of 200px. -->
41+
yielding a resolved flex base size (border-box) of 200px. -->
3242
<div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div>
3343
</div>
3444

3545
<div class="flexContainer">
36-
<!-- The border-box width 25px is transferred to the main axis,
37-
yielding a resolved min-height:auto of 200px. -->
38-
<div class="item" style="width: 25px; aspect-ratio: 1/8;"><div></div></div>
46+
<!-- The content size suggestion is 190px, i.e. the height of the item's
47+
child div. -->
48+
<div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div>
3949
</div>
4050

4151
<div class="flexContainer">
42-
<!-- The border-box min-width 25px is transferred to the main axis,
43-
yielding a resolved min-height:auto of 200px. -->
44-
<div class="item" style="min-width: 25px; aspect-ratio: 1/8;"><div></div></div>
52+
<!-- The content size suggestion is 190px, i.e. the height of the item's
53+
child div. -->
54+
<div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div>
4555
</div>
4656

4757
<div class="flexContainer">
48-
<!-- The border-box width 25px (clamped by max-width) is transferred to the main axis,
49-
yielding a resolved min-height:auto of 200px. -->
50-
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"><div></div></div>
58+
<!-- The content size suggestion is 200px because the border-box max-width
59+
25px is transferred to the main axis as the upper bound of its
60+
border-box height. -->
61+
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;">
62+
<div style="height: 500px"></div>
63+
</div>
5164
</div>
5265

5366
<!-- In the following four flex containers, the aspect-ratio works with content-box
5467
because its value contains 'auto'. -->
5568
<div class="flexContainer" style="height: auto;">
5669
<!-- The content-box width 10px is transferred to the main axis,
57-
yielding a resolved flex base size of 190px. -->
70+
yielding a resolved flex base size (content-box) of 190px. -->
5871
<div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
5972
</div>
6073

6174
<div class="flexContainer">
62-
<!-- The content-box width 10px is transferred to the main axis,
63-
yielding a resolved min-height:auto of 190px. -->
64-
<div class="item" style="width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
75+
<!-- The content size suggestion is 190px, i.e. the height of the item's
76+
child div. -->
77+
<div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div>
6578
</div>
6679

6780
<div class="flexContainer">
68-
<!-- The content-box min-width 10px is transferred to the main axis,
69-
yielding a resolved min-height:auto of 190px. -->
70-
<div class="item" style="min-width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
81+
<!-- The content size suggestion is 190px, i.e. the height of the item's
82+
child div. -->
83+
<div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div>
7184
</div>
7285

7386
<div class="flexContainer">
74-
<!-- The content-box width 10px (clamped by max-width) is transferred to the main axis,
75-
yielding a resolved min-height:auto of 190px. -->
76-
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"><div></div></div>
87+
<!-- The content size suggestion is 190px because the content-box max-width
88+
10px is transferred to the main axis as the upper bound of its
89+
content-box height.-->
90+
<div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;">
91+
<div style="height: 500px"></div>
92+
</div>
7793
</div>
7894
</html>

0 commit comments

Comments
 (0)