Skip to content

Commit 2850b07

Browse files
Loirooriolmoz-wptsync-bot
Loirooriol
authored and
moz-wptsync-bot
committed
Bug 1950067 [wpt PR 50899] - layout: Ignore indefinite stretch on min and max sizing properties, a=testonly
Automatic update from web-platform-tests layout: Ignore indefinite `stretch` on min and max sizing properties We were always treating an indefinite `stretch` as the automatic size. This instead treats it as `0px` on min sizing properties, and as `none` on max sizing properties, aligning with Blink and this recent CSSWG resolution: w3c/csswg-drafts#11006 Signed-off-by: Oriol Brufau <[email protected]> -- wpt-commits: 240b357348202856b077417a3ebf944301776a89 wpt-pr: 50899
1 parent dc2700d commit 2850b07

File tree

5 files changed

+152
-56
lines changed

5 files changed

+152
-56
lines changed

‎testing/web-platform/tests/css/css-sizing/keyword-sizes-on-flex-item-001.html‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -129,20 +129,34 @@
129129
<div class="test height min-height max-height stretch" data-expected-height="10"></div>
130130
</div>
131131

132-
133132
<!-- Indefinite stretch -->
134133
<div class="wrapper" style="width: 100px; max-height: 100px">
135-
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
136-
<div class="test height stretch indefinite" data-expected-height="30">XXX XXX</div>
137-
<div class="test height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div>
134+
<div class="test height stretch" data-expected-height="30">X X</div>
135+
<div class="test height stretch" data-expected-height="30">XXX XXX</div>
136+
<div class="test height stretch" data-expected-height="30">XXXXX XXXXX</div>
137+
138+
<div class="test min-height stretch" data-expected-height="10">X X</div>
139+
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
140+
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
138141

139-
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
140-
<div class="test min-height stretch indefinite" data-expected-height="30">XXX XXX</div>
141-
<div class="test min-height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div>
142+
<div class="test max-height stretch" data-expected-height="510">X X</div>
143+
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
144+
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
145+
</div>
142146

143-
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
144-
<div class="test max-height stretch indefinite" data-expected-height="30">XXX XXX</div>
145-
<div class="test max-height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div>
147+
<!-- Fit-content with indefinite stretch -->
148+
<div class="wrapper" style="width: 100px; max-height: 100px">
149+
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
150+
<div class="test height" style="height: fit-content" data-expected-height="30">XXX XXX</div>
151+
<div class="test height" style="height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
152+
153+
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
154+
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXX XXX</div>
155+
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
156+
157+
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
158+
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXX XXX</div>
159+
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
146160
</div>
147161

148162
<script src="/resources/testharness.js"></script>

‎testing/web-platform/tests/css/css-sizing/keyword-sizes-on-flex-item-002.html‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010

1111
<style>
1212
.wrapper {
13-
display: flex;
13+
display: inline-flex;
1414
flex-direction: column;
15+
vertical-align: top;
16+
margin-right: 150px;
1517
}
1618
.test {
1719
flex: none;
@@ -129,20 +131,34 @@
129131
<div class="test height min-height max-height stretch" data-expected-height="10"></div>
130132
</div>
131133

132-
133134
<!-- Indefinite stretch -->
134135
<div class="wrapper" style="width: 100px; max-height: 100px">
135-
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
136-
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div>
137-
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
136+
<div class="test height stretch" data-expected-height="30">X X</div>
137+
<div class="test height stretch" data-expected-height="50">XXX XXX</div>
138+
<div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
139+
140+
<div class="test min-height stretch" data-expected-height="10">X X</div>
141+
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
142+
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
138143

139-
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
140-
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div>
141-
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
144+
<div class="test max-height stretch" data-expected-height="510">X X</div>
145+
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
146+
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
147+
</div>
142148

143-
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
144-
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div>
145-
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
149+
<!-- Fit-content with indefinite stretch -->
150+
<div class="wrapper" style="width: 100px; max-height: 100px">
151+
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
152+
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
153+
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
154+
155+
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
156+
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
157+
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
158+
159+
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
160+
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
161+
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
146162
</div>
147163

148164
<script src="/resources/testharness.js"></script>

‎testing/web-platform/tests/css/css-sizing/keyword-sizes-on-floated-element.html‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@
99
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
1010

1111
<style>
12+
.wrapper {
13+
display: inline-block;
14+
vertical-align: top;
15+
margin-right: 150px;
16+
}
17+
1218
.test {
1319
float: left;
1420
margin: 5px;
@@ -36,7 +42,7 @@
3642
<div id="log"></div>
3743

3844
<!-- Intrinsic keywords -->
39-
<div style="width: 100px; height: 100px">
45+
<div class="wrapper" style="width: 100px; height: 100px">
4046
<div class="test width" style="width: min-content" data-expected-width="30">X X</div>
4147
<div class="test width" style="width: fit-content" data-expected-width="70">X X</div>
4248
<div class="test width" style="width: max-content" data-expected-width="70">X X</div>
@@ -93,7 +99,7 @@
9399
</div>
94100

95101
<!-- Definite stretch -->
96-
<div style="width: 100px; height: 100px">
102+
<div class="wrapper" style="width: 100px; height: 100px">
97103
<div class="test width stretch" data-expected-width="90">X X</div>
98104
<div class="test width stretch" data-expected-width="90">XXX XXX</div>
99105
<div class="test width stretch" data-expected-width="90">XXXXX XXXXX</div>
@@ -126,18 +132,33 @@
126132
</div>
127133

128134
<!-- Indefinite stretch -->
129-
<div style="width: 100px; max-height: 100px">
130-
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
131-
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div>
132-
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
133-
134-
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
135-
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div>
136-
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
137-
138-
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
139-
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div>
140-
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
135+
<div class="wrapper" style="width: 100px; max-height: 100px">
136+
<div class="test height stretch" data-expected-height="30">X X</div>
137+
<div class="test height stretch" data-expected-height="50">XXX XXX</div>
138+
<div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
139+
140+
<div class="test min-height stretch" data-expected-height="10">X X</div>
141+
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
142+
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
143+
144+
<div class="test max-height stretch" data-expected-height="510">X X</div>
145+
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
146+
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
147+
</div>
148+
149+
<!-- Fit-content with indefinite stretch -->
150+
<div class="wrapper" style="width: 100px; max-height: 100px">
151+
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
152+
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
153+
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
154+
155+
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
156+
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
157+
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
158+
159+
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
160+
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
161+
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
141162
</div>
142163

143164
<script src="/resources/testharness.js"></script>

‎testing/web-platform/tests/css/css-sizing/keyword-sizes-on-inline-block.html‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -133,17 +133,32 @@
133133

134134
<!-- Indefinite stretch -->
135135
<div class="wrapper" style="width: 100px; max-height: 100px">
136-
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
137-
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div>
138-
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
136+
<div class="test height stretch" data-expected-height="30">X X</div>
137+
<div class="test height stretch" data-expected-height="50">XXX XXX</div>
138+
<div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
139139

140-
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
141-
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div>
142-
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
140+
<div class="test min-height stretch" data-expected-height="10">X X</div>
141+
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
142+
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
143143

144-
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
145-
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div>
146-
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
144+
<div class="test max-height stretch" data-expected-height="510">X X</div>
145+
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
146+
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
147+
</div>
148+
149+
<!-- Fit-content with indefinite stretch -->
150+
<div class="wrapper" style="width: 100px; max-height: 100px">
151+
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
152+
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
153+
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
154+
155+
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
156+
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
157+
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
158+
159+
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
160+
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
161+
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
147162
</div>
148163

149164
<script src="/resources/testharness.js"></script>

‎testing/web-platform/tests/css/css-sizing/keyword-sizes-on-replaced-element.html‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
<meta assert="The various keyword sizes work as expected on replaced elements.">
99

1010
<style>
11+
.wrapper {
12+
display: inline-block;
13+
vertical-align: top;
14+
margin-right: 150px;
15+
}
16+
1117
.test {
1218
margin: 5px;
1319
border: 3px solid;
@@ -35,7 +41,7 @@
3541
<div id="log"></div>
3642

3743
<!-- Intrinsic keywords -->
38-
<div style="width: 200px; height: 100px">
44+
<div class="wrapper" style="width: 200px; height: 100px">
3945
<canvas width="100" height="100" class="test width height" style="width: 50px; height: 50px"
4046
data-expected-width="60" data-expected-height="60"></canvas>
4147
<canvas width="100" height="100" class="test width height" style="width: 50px; height: min-content"
@@ -141,7 +147,7 @@
141147
</div>
142148

143149
<!-- Definite stretch -->
144-
<div style="width: 200px; height: 100px">
150+
<div class="wrapper" style="width: 200px; height: 100px">
145151
<canvas width="100" height="100" class="test width stretch"
146152
data-expected-width="190" data-expected-height="190"></canvas>
147153
<canvas width="100" height="100" class="test min-width stretch"
@@ -167,26 +173,50 @@
167173
</div>
168174

169175
<!-- Indefinite stretch -->
170-
<div style="width: 200px; max-height: 100px">
171-
<canvas width="100" height="100" class="test height stretch indefinite"
176+
<div class="wrapper" style="width: 200px; max-height: 100px">
177+
<canvas width="100" height="100" class="test height stretch"
178+
data-expected-width="110" data-expected-height="110"></canvas>
179+
<canvas width="100" height="100" class="test min-height stretch"
180+
data-expected-width="10" data-expected-height="10"></canvas>
181+
<canvas width="100" height="100" class="test max-height stretch"
182+
data-expected-width="510" data-expected-height="510"></canvas>
183+
184+
<canvas width="100" height="100" class="test height stretch" style="max-width: 50px"
185+
data-expected-width="60" data-expected-height="60"></canvas>
186+
<canvas width="100" height="100" class="test min-height stretch" style="min-width: 50px"
187+
data-expected-width="60" data-expected-height="10"></canvas>
188+
<canvas width="100" height="100" class="test max-height stretch" style="max-width: 50px"
189+
data-expected-width="60" data-expected-height="510"></canvas>
190+
191+
<canvas width="100" height="100" class="test height stretch" style="min-width: 150px"
192+
data-expected-width="160" data-expected-height="160"></canvas>
193+
<canvas width="100" height="100" class="test min-height stretch" style="min-width: 150px"
194+
data-expected-width="160" data-expected-height="10"></canvas>
195+
<canvas width="100" height="100" class="test max-height stretch" style="max-width: 150px"
196+
data-expected-width="160" data-expected-height="510"></canvas>
197+
</div>
198+
199+
<!-- Fit-content with indefinite stretch -->
200+
<div class="wrapper" style="width: 200px; max-height: 100px">
201+
<canvas width="100" height="100" class="test height" style="height: fit-content"
172202
data-expected-width="110" data-expected-height="110"></canvas>
173-
<canvas width="100" height="100" class="test min-height stretch indefinite"
203+
<canvas width="100" height="100" class="test min-height" style="min-height: fit-content"
174204
data-expected-width="10" data-expected-height="110"></canvas>
175-
<canvas width="100" height="100" class="test max-height stretch indefinite"
205+
<canvas width="100" height="100" class="test max-height" style="max-height: fit-content"
176206
data-expected-width="510" data-expected-height="110"></canvas>
177207

178-
<canvas width="100" height="100" class="test height stretch indefinite" style="max-width: 50px"
208+
<canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content"
179209
data-expected-width="60" data-expected-height="60"></canvas>
180-
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 50px"
210+
<canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content"
181211
data-expected-width="60" data-expected-height="110"></canvas>
182-
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 50px"
212+
<canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content"
183213
data-expected-width="60" data-expected-height="60"></canvas>
184214

185-
<canvas width="100" height="100" class="test height stretch indefinite" style="min-width: 150px"
215+
<canvas width="100" height="100" class="test height" style="min-width: 150px; height: fit-content"
186216
data-expected-width="160" data-expected-height="160"></canvas>
187-
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 150px"
217+
<canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content"
188218
data-expected-width="160" data-expected-height="160"></canvas>
189-
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 150px"
219+
<canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content"
190220
data-expected-width="160" data-expected-height="110"></canvas>
191221
</div>
192222

0 commit comments

Comments
 (0)