Skip to content

Commit 70d0a8a

Browse files
davidsgroganmoz-wptsync-bot
davidsgrogan
authored and
moz-wptsync-bot
committed
Bug 1925382 [wpt PR 48680] - [layout] Accept 'stretch' keyword as a width/height, a=testonly
Automatic update from web-platform-tests [layout] Accept 'stretch' keyword as a width/height One of our goals is for `-webkit-fill-available` and `stretch` to have identical layout behavior. Feature is not yet ready to ship. Remaining work: * support stretch in flex-basis * add abspos tests with one inset specified * add aspect ratio test and fix if necessary * ditto with fixed table layout as mentioned in w3c/csswg-drafts#4028 (comment) * serialization? * Test that auto margins are treated as 0 * fix block-height-2.html behavior and/or decide to change the spec * Add margin tests and fix our behavior for the cases discussed in w3c/csswg-drafts#11044 Change-Id: I8c773eb3fe964e58877e0d7d8dbb6325580e0cda Bug: 41253915 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5884393 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1370209} -- wpt-commits: 9356370c840aabd208b5460fb11efaab8b4f94e6 wpt-pr: 48680
1 parent 19e39b0 commit 70d0a8a

10 files changed

+300
-2
lines changed

‎testing/web-platform/tests/css/css-sizing/stretch/abspos-1.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
3+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
4+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
5+
<style>
6+
#reference-overlapped-red {
7+
position: absolute;
8+
background-color: red;
9+
width: 100px;
10+
height: 100px;
11+
z-index: -1;
12+
}
13+
</style>
14+
15+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
16+
<div id="reference-overlapped-red"></div>
17+
18+
<div style="width: 100px; height: 100px; position: relative;">
19+
<div style="position: absolute; width: stretch; height: 100px; background: green;">
20+
</div>
21+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/abspos-2.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
3+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
4+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
5+
<style>
6+
#reference-overlapped-red {
7+
position: absolute;
8+
background-color: red;
9+
width: 100px;
10+
height: 100px;
11+
z-index: -1;
12+
}
13+
</style>
14+
15+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
16+
<div id="reference-overlapped-red"></div>
17+
18+
<div style="width: 100px; height: 200px; position: relative;">
19+
<div
20+
style="width: 100%; height: stretch; position: absolute; bottom: 100px; background: green;">
21+
</div>
22+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/bfc-next-to-float-1.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
3+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
4+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
5+
<style>
6+
#reference-overlapped-red {
7+
position: absolute;
8+
background-color: red;
9+
width: 100px;
10+
height: 100px;
11+
z-index: -1;
12+
}
13+
</style>
14+
15+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
16+
<div id="reference-overlapped-red"></div>
17+
18+
<div style="width:200px; margin-left: -100px;">
19+
<div style="float: left; width: 100px; height: 100px;"></div>
20+
<div
21+
style="display: flow-root; width: stretch; height: 100px; background: green;">
22+
</div>
23+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/block-height-1.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
3+
<script src='/resources/testharness.js'></script>
4+
<script src='/resources/testharnessreport.js'></script>
5+
<script src="/resources/check-layout-th.js"></script>
6+
<meta name="assert" content="Checks the behaviour of stretch in various configurations.">
7+
<style>
8+
.content {
9+
width: 20px;
10+
height: 20px;
11+
background: lime;
12+
}
13+
.tall-content {
14+
width: 20px;
15+
height: 120px;
16+
background: lime;
17+
}
18+
</style>
19+
<body onload="checkLayout('[data-expected-height]')">
20+
21+
<div style="height: 100px;">
22+
<div data-expected-height=100 style="display: block; height: stretch;">
23+
<div class=content></div>
24+
</div>
25+
</div>
26+
27+
<div style="height: 100px;">
28+
<div data-expected-height=100 style="display: flex; height: stretch;">
29+
<div class=content></div>
30+
</div>
31+
</div>
32+
33+
<div style="height: 100px;">
34+
<div data-expected-height=100 style="display: grid; height: stretch;">
35+
<div class=content></div>
36+
</div>
37+
</div>
38+
39+
<!-- As the height of the container is indefinite, stretch is treated as auto. -->
40+
<div style="height: 100%;">
41+
<div data-expected-height=20 style="display: block; height: stretch;">
42+
<div class=content></div>
43+
</div>
44+
</div>
45+
46+
<div style="height: 100%;">
47+
<div data-expected-height=20 style="display: flex; height: stretch;">
48+
<div class=content></div>
49+
</div>
50+
</div>
51+
52+
<div style="height: 100%;">
53+
<div data-expected-height=20 style="display: grid; height: stretch;">
54+
<div class=content></div>
55+
</div>
56+
</div>
57+
58+
<div style="height: 100px;">
59+
<div data-expected-height=100 style="display: block; min-height: stretch;">
60+
<div class=content></div>
61+
</div>
62+
</div>
63+
64+
<div style="height: 100px;">
65+
<div data-expected-height=100 style="display: flex; min-height: stretch;">
66+
<div class=content></div>
67+
</div>
68+
</div>
69+
70+
<div style="height: 100px;">
71+
<div data-expected-height=100 style="display: grid; min-height: stretch;">
72+
<div class=content></div>
73+
</div>
74+
</div>
75+
76+
<div style="height: 100%;">
77+
<div data-expected-height=20 style="display: block; min-height: stretch;">
78+
<div class=content></div>
79+
</div>
80+
</div>
81+
82+
<div style="height: 100%;">
83+
<div data-expected-height=20 style="display: flex; min-height: stretch;">
84+
<div class=content></div>
85+
</div>
86+
</div>
87+
88+
<div style="height: 100%;">
89+
<div data-expected-height=20 style="display: grid; min-height: stretch;">
90+
<div class=content></div>
91+
</div>
92+
</div>
93+
94+
<div style="height: 100px;">
95+
<div data-expected-height=100 style="display: block; max-height: stretch;">
96+
<div class=tall-content></div>
97+
</div>
98+
</div>
99+
100+
<div style="height: 100px;">
101+
<div data-expected-height=100 style="display: flex; max-height: stretch;">
102+
<div class=tall-content></div>
103+
</div>
104+
</div>
105+
106+
<div style="height: 100px;">
107+
<div data-expected-height=100 style="display: grid; max-height: stretch;">
108+
<div class=tall-content></div>
109+
</div>
110+
</div>
111+
112+
<div style="height: 100%;">
113+
<div data-expected-height=120 style="display: block; max-height: stretch;">
114+
<div class=tall-content></div>
115+
</div>
116+
</div>
117+
118+
<div style="height: 100%;">
119+
<div data-expected-height=120 style="display: flex; max-height: stretch;">
120+
<div class=tall-content></div>
121+
</div>
122+
</div>
123+
124+
<div style="height: 100%;">
125+
<div data-expected-height=120 style="display: grid; max-height: stretch;">
126+
<div class=tall-content></div>
127+
</div>
128+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/block-height-2.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
3+
<script src='/resources/testharness.js'></script>
4+
<script src='/resources/testharnessreport.js'></script>
5+
<script src="/resources/check-layout-th.js"></script>
6+
<meta name="assert" content="Checks the behaviour of stretch in various configurations.">
7+
8+
<body onload="checkLayout('[data-expected-height]')">
9+
10+
<div style="height: 200px; border: solid;">
11+
<div style="height: stretch; margin: 10px;" data-expected-height="180"></div>
12+
</div>
13+
14+
<!--
15+
16+
Chrome fails the following test, which is a variation of example 9 in the spec. Safari passes.
17+
18+
From https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing, height:stretch for blocks behaves as
19+
"""
20+
100% but applying the resulting size to its margin box instead of the box indicated by box-sizing. For this purpose, auto margins are treated as zero, and furthermore, for block-level boxes in particular, if its block-start/block-end margin would be adjoining to its parent’s block-start/block-end margin if its parent’s sizing properties all had their initial values, then ***its block-start/block-end margin is treated as zero.***
21+
"""
22+
23+
So the spec demands that the child has 0px margins and as a corollary, has 300px inner and outer height.
24+
25+
But Blink gives it an inner height of 200px and margins as specified (25px/75px).
26+
-->
27+
<div style="height: 300px; outline: 1px solid; margin: 10px 0px 10px 0px;">
28+
<div
29+
style="height: stretch; margin: 25px 0px 75px 0px; outline: 2px dashed blue;"
30+
data-expected-height="300"></div>
31+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/min-width-1.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
4+
<p>Test passes if there is a filled green square.</p>
5+
<div style="width: 100px;">
6+
<div style="width: 50px; min-width: stretch; height: 100px; background: green;"></div>
7+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/parsing.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing stretch value</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/css/support/parsing-testcommon.js"></script>
10+
</head>
11+
<body>
12+
<script>
13+
test_valid_value("width", "stretch");
14+
test_valid_value("height", "stretch");
15+
test_valid_value("max-width", "stretch");
16+
test_valid_value("min-width", "stretch");
17+
test_valid_value("max-height", "stretch");
18+
test_valid_value("min-height", "stretch");
19+
test_valid_value("inline-size", "stretch");
20+
test_valid_value("block-size", "stretch");
21+
test_valid_value("max-inline-size", "stretch");
22+
test_valid_value("min-inline-size", "stretch");
23+
test_valid_value("max-block-size", "stretch");
24+
test_valid_value("min-block-size", "stretch");
25+
test_valid_value("flex-basis", "stretch");
26+
</script>
27+
</body>
28+
</html>

‎testing/web-platform/tests/css/css-sizing/stretch/positioned-non-replaced-1.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
3+
<link rel="help" href="https://github.com/webcompat/web-bugs/issues/103641#issuecomment-1122414992">
4+
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1324259">
5+
<p>Test passes if there is a filled green square.</p>
6+
<style>
7+
#target {
8+
position: absolute;
9+
background: green;
10+
min-width: 50px;
11+
min-height: 25px;
12+
width: stretch;
13+
height: stretch;
14+
}
15+
</style>
16+
<div style="display: flow-root; position: relative; width: 150px; height: 150px; margin-top: -50px; margin-left: -50px;">
17+
<div style="margin-left: 50px; margin-top: 50px;">
18+
<div id="target"></div>
19+
</div>
20+
</div>

‎testing/web-platform/tests/css/css-sizing/stretch/positioned-replaced-1.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
3+
<link rel="help" href="https://github.com/webcompat/web-bugs/issues/103641#issuecomment-1122414992">
4+
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1324259">
5+
<p>Test passes if there is a filled green square.</p>
6+
<style>
7+
canvas {
8+
position: absolute;
9+
background: green;
10+
width: stretch;
11+
height: stretch;
12+
}
13+
</style>
14+
<div style="display: flow-root; position: relative; width: 150px; height: 150px; margin-top: -50px; margin-left: -50px;">
15+
<div style="margin-left: 50px; margin-top: 50px;">
16+
<canvas width="50" height="25"></canvas>
17+
</div>
18+
</div>

‎testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,15 @@
131131
{ at: 0, expect: `${expected}px` },
132132
{ at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` },
133133
{ at: 1, expect: `50px` },
134-
{ at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` },
134+
{ at: 1.1, expect: `${50 * 1.1 - expected * 0.1}px` },
135135
]);
136136

137137
test_interpolation({
138138
property: 'height',
139139
from: 'calc-size(any, 50px)',
140140
to: `calc-size(${keyword}, size * 2)`,
141141
}, [
142-
{ at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` },
142+
{ at: -0.05, expect: `${50 * 1.05 - expected * 0.1}px` },
143143
{ at: 0, expect: "50px" },
144144
{ at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` },
145145
{ at: 1, expect: `${expected * 2}px` },

0 commit comments

Comments
 (0)