Skip to content

Commit 4f86157

Browse files
bfgeekmoz-wptsync-bot
bfgeek
authored and
moz-wptsync-bot
committed
Bug 1718986 [wpt PR 29567] - [wpt] Fix grid-item (no) aspect-ratio tests., a=testonly
Automatic update from web-platform-tests [wpt] Fix grid-item (no) aspect-ratio tests. Renaming scheme got lost, however basically: grid-item-no-aspect-ratio-stretch-4.html -> grid-item-aspect-ratio-stretch-1.html grid-item-no-aspect-ratio-stretch-5.html -> grid-item-aspect-ratio-stretch-2.html grid-item-no-aspect-ratio-stretch-6.html -> grid-item-aspect-ratio-stretch-3.html grid-item-no-aspect-ratio-stretch-7.html -> grid-item-aspect-ratio-stretch-4.html These tests all had a viewBox defining a valid aspect-ratio. Due to: w3c/csswg-drafts#6286 (comment) These tests *should* have an aspect-ratio, and when stretched in one dimension, should reflect to the other dimension (if unconstrained). See: w3c/csswg-drafts#5713 (comment) The below two tests basically just got renamed: grid-item-no-aspect-ratio-stretch-8.html -> grid-item-no-aspect-ratio-stretch-4.html grid-item-no-aspect-ratio-stretch-9.html -> grid-item-no-aspect-ratio-stretch-5.html grid-item-no-aspect-ratio-stretch-10.html -> grid-item-no-aspect-ratio-stretch-6.html But tests updated to correctly assert that the natural size would still be respected. To all these test-cases I also added "grid-template: 100% / 100%;" as there is further complexity when inside an auto row/column which is tested elsewhere. (Transferred minimum size for replaced elements with an aspect-ratio). Bug: 1114013 Change-Id: I062f67e291cc62fa63a53370595780dae16abf3b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3003564 Reviewed-by: David Grogan <[email protected]> Reviewed-by: Kurt Catti-Schmidt <[email protected]> Commit-Queue: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/master@{#898351} -- wpt-commits: ec4e2eecc6a5bd2f21c81dbe03862c2cdf17cf8c wpt-pr: 29567
1 parent 9f0dde2 commit 4f86157

15 files changed

+201
-67
lines changed

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
4+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
5+
<link rel="author" title="Mozilla" href="https://mozilla.org">
6+
<style>
7+
body {
8+
line-height: 0;
9+
}
10+
11+
div {
12+
display: inline-block;
13+
height: 250px;
14+
width: 350px;
15+
background: grey;
16+
margin: 10px;
17+
vertical-align: top;
18+
}
19+
20+
img {
21+
display: block;
22+
}
23+
24+
.justify {
25+
width: 350px;
26+
}
27+
.align {
28+
height: 250px;
29+
}
30+
</style>
31+
<div>
32+
<img class="align justify">
33+
</div>
34+
<div>
35+
<img class="align">
36+
</div>
37+
<div>
38+
<img class="justify">
39+
</div>
40+
<div>
41+
<img style="width:10px; height:20px">
42+
</div>
43+
44+
<script>
45+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
46+
var imgs = document.querySelectorAll('img');
47+
for (var i = 0; i < imgs.length; ++i) {
48+
var img = imgs[i];
49+
img.src = url;
50+
}
51+
</script>

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html renamed to ‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<!doctype html>
22
<meta charset="utf-8">
3-
<title>stretching works for replaced items with no aspect ratio</title>
3+
<title>stretching works for replaced items with a fallback aspect ratio</title>
44
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://mozilla.org">
66
<link rel="help" href="https://drafts.csswg.org/css-grid">
77
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
8-
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
8+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
9+
<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html">
910
<style>
1011
body {
1112
line-height: 0;
1213
}
1314

1415
div {
1516
display: inline-grid;
17+
grid-template: 100% / 100%;
1618
height: 250px;
1719
width: 350px;
1820
background: grey;
@@ -41,7 +43,7 @@
4143
</div>
4244

4345
<script>
44-
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
46+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
4547
var imgs = document.querySelectorAll('img');
4648
for (var i = 0; i < imgs.length; ++i) {
4749
var img = imgs[i];

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
4+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
5+
<link rel="author" title="Mozilla" href="https://mozilla.org">
6+
<style>
7+
body {
8+
line-height: 0;
9+
}
10+
11+
div {
12+
display: inline-block;
13+
height: 250px;
14+
width: 350px;
15+
background: grey;
16+
margin: 10px;
17+
vertical-align: top;
18+
}
19+
20+
img {
21+
display: block;
22+
}
23+
24+
.justify {
25+
width: 350px;
26+
}
27+
.align {
28+
height: 250px;
29+
}
30+
</style>
31+
<div>
32+
<img class="align justify">
33+
</div>
34+
<div>
35+
<img class="align">
36+
</div>
37+
<div>
38+
<img class="justify">
39+
</div>
40+
<div>
41+
<img style="width:20px; height:40px">
42+
</div>
43+
44+
<script>
45+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
46+
var imgs = document.querySelectorAll('img');
47+
for (var i = 0; i < imgs.length; ++i) {
48+
var img = imgs[i];
49+
img.src = url;
50+
}
51+
</script>

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html renamed to ‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<!doctype html>
22
<meta charset="utf-8">
3-
<title>stretching works for replaced items with no aspect ratio</title>
3+
<title>stretching works for replaced items with a fallback aspect ratio</title>
44
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://mozilla.org">
66
<link rel="help" href="https://drafts.csswg.org/css-grid">
77
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
8-
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
8+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
9+
<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
910
<style>
1011
body {
1112
line-height: 0;
1213
}
1314

1415
div {
1516
display: inline-grid;
17+
grid-template: 100% / 100%;
1618
height: 250px;
1719
width: 350px;
1820
background: grey;
@@ -41,7 +43,7 @@
4143
</div>
4244

4345
<script>
44-
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
46+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
4547
var imgs = document.querySelectorAll('img');
4648
for (var i = 0; i < imgs.length; ++i) {
4749
var img = imgs[i];

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
4+
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
5+
<link rel="author" title="Mozilla" href="https://mozilla.org">
6+
<style>
7+
body {
8+
line-height: 0;
9+
}
10+
11+
div {
12+
display: inline-block;
13+
height: 250px;
14+
width: 350px;
15+
background: grey;
16+
margin: 10px;
17+
vertical-align: top;
18+
}
19+
20+
img {
21+
display: block;
22+
background: blue;
23+
}
24+
25+
.justify {
26+
width: 350px;
27+
}
28+
.align {
29+
height: 250px;
30+
}
31+
</style>
32+
<div>
33+
<img class="align justify">
34+
</div>
35+
<div>
36+
<img class="align">
37+
</div>
38+
<div>
39+
<img class="justify">
40+
</div>
41+
<div>
42+
<img style="width:0px; height:20px">
43+
</div>
44+
45+
<script>
46+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
47+
var imgs = document.querySelectorAll('img');
48+
for (var i = 0; i < imgs.length; ++i) {
49+
var img = imgs[i];
50+
img.src = url;
51+
}
52+
</script>

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html renamed to ‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<!doctype html>
22
<meta charset="utf-8">
3-
<title>stretching works for replaced items with no aspect ratio</title>
3+
<title>stretching works for replaced items with a fallback aspect ratio</title>
44
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://mozilla.org">
66
<link rel="help" href="https://drafts.csswg.org/css-grid">
77
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
8-
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
8+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
9+
<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html">
910
<style>
1011
body {
1112
line-height: 0;
1213
}
1314

1415
div {
1516
display: inline-grid;
17+
grid-template: 100% / 100%;
1618
height: 250px;
1719
width: 350px;
1820
background: grey;
1921
margin: 10px;
2022
vertical-align: top;
2123
}
24+
img { background: blue; }
2225

2326
.justify {
2427
justify-self: stretch;
@@ -41,7 +44,7 @@
4144
</div>
4245

4346
<script>
44-
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
47+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
4548
var imgs = document.querySelectorAll('img');
4649
for (var i = 0; i < imgs.length; ++i) {
4750
var img = imgs[i];

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7-ref.html renamed to ‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!doctype html>
22
<meta charset="utf-8">
3-
<title>Reference: stretching works for replaced items with no aspect ratio</title>
3+
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
44
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://mozilla.org">
66
<style>
@@ -19,8 +19,6 @@
1919

2020
img {
2121
display: block;
22-
width: 300px;
23-
height: 150px;
2422
background: blue;
2523
}
2624

@@ -35,17 +33,17 @@
3533
<img class="align justify">
3634
</div>
3735
<div>
38-
<img class="align" style="width:20px">
36+
<img class="align">
3937
</div>
4038
<div>
41-
<img class="justify" style="height:0px">
39+
<img class="justify">
4240
</div>
4341
<div>
4442
<img style="width:20px; height:0px">
4543
</div>
4644

4745
<script>
48-
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
46+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
4947
var imgs = document.querySelectorAll('img');
5048
for (var i = 0; i < imgs.length; ++i) {
5149
var img = imgs[i];

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html renamed to ‎testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<!doctype html>
22
<meta charset="utf-8">
3-
<title>stretching works for replaced items with no aspect ratio</title>
3+
<title>stretching works for replaced items with a fallback aspect ratio</title>
44
<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
55
<link rel="author" title="Mozilla" href="https://mozilla.org">
66
<link rel="help" href="https://drafts.csswg.org/css-grid">
77
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
8-
<link rel="match" href="grid-item-no-aspect-ratio-stretch-7-ref.html">
8+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
9+
<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html">
910
<style>
1011
body {
1112
line-height: 0;
1213
}
1314

1415
div {
1516
display: inline-grid;
17+
grid-template: 100% / 100%;
1618
height: 250px;
1719
width: 350px;
1820
background: grey;

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919

2020
img {
2121
display: block;
22-
width: 300px;
23-
height: 150px;
22+
width: 0px;
23+
height: 20px;
2424
}
2525

2626
.justify {
@@ -34,17 +34,17 @@
3434
<img class="align justify">
3535
</div>
3636
<div>
37-
<img class="align" style="width:10px">
37+
<img class="align">
3838
</div>
3939
<div>
40-
<img class="justify" style="height:20px">
40+
<img class="justify">
4141
</div>
4242
<div>
43-
<img style="width:10px; height:20px">
43+
<img>
4444
</div>
4545

4646
<script>
47-
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
47+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
4848
var imgs = document.querySelectorAll('img');
4949
for (var i = 0; i < imgs.length; ++i) {
5050
var img = imgs[i];

‎testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
div {
1515
display: inline-grid;
16+
grid-template: 100% / 100%;
1617
height: 250px;
1718
width: 350px;
1819
background: grey;
@@ -41,7 +42,7 @@
4142
</div>
4243

4344
<script>
44-
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
45+
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
4546
var imgs = document.querySelectorAll('img');
4647
for (var i = 0; i < imgs.length; ++i) {
4748
var img = imgs[i];

0 commit comments

Comments
 (0)