Skip to content

Commit 91bcaa8

Browse files
marco-cmarco-c
committed
Bug 1936399 [wpt PR 49623] - [layout] stretch tests: margin collapsing and content contributions, a=testonly
Automatic update from web-platform-tests [layout] stretch tests: margin collapsing and content contributions The margin collapsing tests assert behavior that is still being discussed in w3c/csswg-drafts#11044 so are marked tentative. Tests only. No behavior change. Bug: 41253915 Change-Id: Ic252d00247de3f3729da780088c94d635e8d6c9b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6082760 Reviewed-by: Ian Kilpatrick <ikilpatrickchromium.org> Commit-Queue: David Grogan <dgroganchromium.org> Cr-Commit-Position: refs/heads/main{#1394480} -- wpt-commits: bf4c6fa4c493fdeee3be4cfc3f593889e80b1288 wpt-pr: 49623 UltraBlame original commit: d3f9339a1b0eaf1203b8134356d5eb16bf7dd0a5
1 parent 09b80b5 commit 91bcaa8

9 files changed

+377
-31
lines changed

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

File renamed without changes.

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#example-174ae518">
3+
<script src='/resources/testharness.js'></script>
4+
<script src='/resources/testharnessreport.js'></script>
5+
<script src="/resources/check-layout-th.js"></script>
6+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
7+
<meta name="assert"
8+
content="the stretch examples in the spec are rendered correctly">
9+
10+
<style>
11+
main {
12+
font: 20px/1 Ahem;
13+
}
14+
</style>
15+
<p>This test asserts the behavior seemingly agreed upon through
16+
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486935794. This
17+
is unlikely to be the final specified behavior, hence the test is marked
18+
tentative.</p>
19+
20+
<main>
21+
<!-- Example 9
22+
[T]he outer height of the inner box will exactly match the height of the outer box (200px), but its inner height will be 20px less, to account for its margins.
23+
-->
24+
<div style="height: 200px; border: solid;">
25+
<div style="height: stretch; margin: 10px;" data-expected-height="180"></div>
26+
</div>
27+
28+
<!-- Example 9, second case
29+
In the following case, the height of the inner box will exactly match the height of the outer box (200px).
30+
-->
31+
<div style="height: 200px; margin: 0;">
32+
<div style="height: stretch; margin: 10px;" data-expected-height="200"></div>
33+
</div>
34+
35+
<!-- Example 10
36+
Similarly, width: stretch causes the box to fill its container, being 20px narrower than the width of "some more text" (due to the 10px margin)
37+
-->
38+
<div style="float: left; margin: 0; outline: solid;">
39+
<div style="width: stretch; margin: 10px; background: skyblue;"
40+
data-expected-width="260">
41+
text
42+
</div>
43+
<span>some more text</span>
44+
</div>
45+
46+
<div style="clear: both;"></div>
47+
48+
<!-- Example 11
49+
On the other hand, in this example the container’s height is indefinite, which would cause a percentage height on the child to behave as auto, so height: stretch behaves as auto as well.
50+
-->
51+
<div style="height: auto; margin: 0; background: orange;">
52+
lorem ipsum<br>
53+
cats
54+
<div style="height: stretch; margin: 10px; background: lime;"
55+
data-expected-height="20">dogs</div>
56+
</div>
57+
58+
</main>
59+
60+
<script>
61+
document.fonts.ready.then(() => checkLayout("main > div > div"));
62+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
3+
<style>
4+
.surrounding-block {
5+
width: 100px;
6+
height: 100px;
7+
border: solid;
8+
}
9+
</style>
10+
11+
<div class="surrounding-block"></div>
12+
<div style="height: 75px;"></div>
13+
<div
14+
style="width: 200px; height: 200px; outline: 1px solid; border: 2px dashed blue; box-sizing: border-box;">
15+
</div>
16+
<div class="surrounding-block"></div>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<link rel="help"
3+
href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
4+
<meta name="assert"
5+
content="Both margins are ignored for sizing, but top margin still collapses. Bottom margin doesn't collapse because parent has a definite height.">
6+
<link rel="match" href="block-height-003-ref.html">
7+
8+
<style>
9+
.surrounding-block {
10+
width: 100px;
11+
height: 100px;
12+
border: solid;
13+
}
14+
</style>
15+
16+
<!--
17+
<p>This test asserts the behavior seemingly agreed upon through
18+
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486935794. This
19+
is unlikely to be the final specified behavior, hence the test is marked
20+
tentative.</p>
21+
-->
22+
23+
<div class="surrounding-block"></div>
24+
<div style="width: 200px; height: 200px; outline: 1px solid;">
25+
<div
26+
style="height: stretch; margin: 75px 0px 25px 0px; border: 2px dashed blue;">
27+
</div>
28+
</div>
29+
<div class="surrounding-block"></div>

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<link rel="help"
3+
href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11044">
5+
<script src='/resources/testharness.js'></script>
6+
<script src='/resources/testharnessreport.js'></script>
7+
<script src="/resources/check-layout-th.js"></script>
8+
<meta name="assert"
9+
content="demonstrate the behavior described in https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2422165458">
10+
11+
<style>
12+
.outer {
13+
width: 100px;
14+
height: 100px;
15+
outline: solid;
16+
position: relative;
17+
}
18+
19+
.inner {
20+
height: stretch;
21+
margin: 10px;
22+
}
23+
24+
p {
25+
margin-top: 20px;
26+
margin-bottom: 0px;
27+
}
28+
</style>
29+
30+
<p>This test asserts the behavior seemingly agreed upon through
31+
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486935794. This
32+
is unlikely to be the final specified behavior, hence the test is marked
33+
tentative.</p>
34+
35+
<p>Basic case: treat margins as 0.</p>
36+
<div class="outer">
37+
<div class="inner" style="border: solid magenta;" data-expected-height="100"
38+
data-offset-y="0">
39+
</div>
40+
</div>
41+
42+
<p>
43+
When resolving stretch, don't treat margins as 0 if there is a sibling on that
44+
side. (Hand-wavy: we don't collapse margins through siblings for the purpose
45+
of resolving stretched heights.)</p>
46+
<p>
47+
Then when actually doing margin collapsing, .inner's margins DON'T collapse
48+
with .outer's because of the usual rule that margins don't collapse through
49+
new formatting contexts.
50+
</p>
51+
<div class="outer">
52+
<div style="overflow: hidden"></div>
53+
<div class="inner" style="border: solid cyan;" data-expected-height="80"
54+
data-offset-y="10">
55+
</div>
56+
<div style="overflow: hidden"></div>
57+
</div>
58+
59+
<p>When resolving stretch, don't treat margins as 0 if there is a sibling on
60+
that side. (Hand-wavy: we don't collapse margins through siblings for the
61+
purpose of resolving stretched heights.)</p>
62+
<p>
63+
Then when actually doing margin collapsing, .inner's margins DO collapse with
64+
.outer's because they collapse through the empty siblings.
65+
</p>
66+
<div class="outer">
67+
<div></div>
68+
<div class="inner" style="border: solid blue;" data-expected-height="80"
69+
data-offset-y="0">
70+
</div>
71+
<div></div>
72+
</div>
73+
74+
<p>Only treat the BOTTOM margin as 0. Margins do collapse, so top edges touch.
75+
</p>
76+
<div class="outer">
77+
<div></div>
78+
<div class="inner" style="border: solid purple;" data-expected-height="90"
79+
data-offset-y="0">
80+
</div>
81+
</div>
82+
83+
<p>Only treat the TOP margin as 0. Margins do collapse, so top edges touch.</p>
84+
<div class="outer">
85+
<div class="inner" style="border: solid lime;" data-expected-height="90"
86+
data-offset-y="0">
87+
</div>
88+
<div></div>
89+
</div>
90+
91+
<p>Account for the margins when parent establishes a BFC.</p>
92+
<div class="outer" style="display: flow-root;">
93+
<div class="inner" style="border: solid orange;" data-expected-height="80"
94+
data-offset-y="10">
95+
</div>
96+
<div></div>
97+
</div>
98+
99+
<script>checkLayout(".inner");</script>

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<link rel="help"
3+
href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11044">
5+
<script src='/resources/testharness.js'></script>
6+
<script src='/resources/testharnessreport.js'></script>
7+
<script src="/resources/check-layout-th.js"></script>
8+
<meta name="assert"
9+
content="preceding floats don't prevent margin adjoiningness for stretch sizing purposes">
10+
11+
<style>
12+
.outer {
13+
width: 100px;
14+
height: 100px;
15+
outline: solid;
16+
position: relative;
17+
}
18+
19+
.float {
20+
float: left;
21+
width: 30px;
22+
height: 30px;
23+
background: skyblue;
24+
}
25+
26+
p {
27+
margin-top: 20px;
28+
margin-bottom: 0px;
29+
}
30+
</style>
31+
32+
<p>This test asserts the behavior seemingly agreed upon through
33+
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486935794. This
34+
is unlikely to be the final specified behavior, hence the test is marked
35+
tentative.</p>
36+
37+
<p>New BFC fits next to float, so top margins will collapse, so we want the
38+
stretched height to match .outer's height.</p>
39+
<div class="outer">
40+
<div class="float"></div>
41+
<div
42+
style="height: stretch; width: 30px; margin-top: 50px; display: flow-root; border: solid magenta;"
43+
data-expected-height="100" data-offset-y="0">
44+
</div>
45+
</div>
46+
47+
<p>New BFC does not fit next to float, so margins DON'T collapse, but for
48+
simplicity we still ignore margins when stretch sizing</p>
49+
<div class="outer">
50+
<div class="float"></div>
51+
<div
52+
style="height: stretch; width: 90px; margin-top: 50px; display: flow-root; border: solid cyan;"
53+
data-expected-height="100" data-offset-y="30">
54+
</div>
55+
</div>
56+
57+
<p>In-flow child overlaps the float, so margins DO collapse, so we want the
58+
stretched height to match .outer's height.</p>
59+
<div class="outer">
60+
<div class="float"></div>
61+
<div
62+
style="height: stretch; width: 90px; margin-top: 50px; border: solid green;"
63+
data-expected-height="100" data-offset-y="0">
64+
</div>
65+
</div>
66+
67+
<p>In-flow child clears the float, so margins DON'T collapse, but for
68+
simplicity we still ignore margins when stretch sizing</p>
69+
<div class="outer">
70+
<div class="float"></div>
71+
<div
72+
style="height: stretch; width: 90px; clear: both; margin-top: 50px; border: solid orange;"
73+
data-expected-height="100" data-offset-y="30">
74+
</div>
75+
</div>
76+
77+
<script>checkLayout(".float + div")</script>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<link rel="help"
3+
href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11044">
5+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
6+
<meta name="assert"
7+
content="Bottom margin is treated as 0 for stretch sizing even if there is a proceeding float">
8+
9+
<style>
10+
#reference-overlapped-red {
11+
position: absolute;
12+
background-color: red;
13+
width: 100px;
14+
height: 100px;
15+
z-index: -1;
16+
}
17+
</style>
18+
19+
<!--
20+
<p>This test asserts the behavior seemingly agreed upon through
21+
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486935794. This
22+
is unlikely to be the final specified behavior, hence the test is marked
23+
tentative.</p>
24+
-->
25+
26+
<p>Test passes if there is a filled green square and <strong>no red</strong>.
27+
</p>
28+
<div id="reference-overlapped-red"></div>
29+
30+
<div style="height: 100px;">
31+
<div
32+
style="display: flow-root; width: 100px; height: stretch; margin-bottom: 50px; background: green;">
33+
</div>
34+
<div style="float: left; width: 50px; height: 50px;">
35+
</div>
36+
</div>

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

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)