[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}
web-platform-tests · Jul 2, 2021 · d56d139 · d56d139
1 parent 396d582
commit d56d139
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 67 deletions.
diff --git a/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:10px; height:20px">
+</div>
+
+<script>
+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>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/.../grid-item-no-aspect-ratio-stretch-8.html → ...ent/grid-item-aspect-ratio-stretch-1.html b/.../grid-item-no-aspect-ratio-stretch-8.html → ...ent/grid-item-aspect-ratio-stretch-1.html
@@ -1,18 +1,20 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratio</title>
+<title>stretching works for replaced items with a fallback aspect ratio</title>
 <link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
 <link rel="author" title="Mozilla" href="https://mozilla.org">
 <link rel="help" href="https://drafts.csswg.org/css-grid">
 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
-<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html">
 <style>
   body {
     line-height: 0;
   }
 
   div {
     display: inline-grid;
+    grid-template: 100% / 100%;
     height: 250px;
     width: 350px;
     background: grey;
@@ -41,7 +43,7 @@
 </div>
 
 <script>
-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>'
+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>'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

diff --git a/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px; height:40px">
+</div>
+
+<script>
+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>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/.../grid-item-no-aspect-ratio-stretch-9.html → ...ent/grid-item-aspect-ratio-stretch-2.html b/.../grid-item-no-aspect-ratio-stretch-9.html → ...ent/grid-item-aspect-ratio-stretch-2.html
@@ -1,18 +1,20 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratio</title>
+<title>stretching works for replaced items with a fallback aspect ratio</title>
 <link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
 <link rel="author" title="Mozilla" href="https://mozilla.org">
 <link rel="help" href="https://drafts.csswg.org/css-grid">
 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
-<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
 <style>
   body {
     line-height: 0;
   }
 
   div {
     display: inline-grid;
+    grid-template: 100% / 100%;
     height: 250px;
     width: 350px;
     background: grey;
@@ -41,7 +43,7 @@
 </div>
 
 <script>
-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>'
+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>'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

diff --git a/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    background: blue;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:0px; height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/...grid-item-no-aspect-ratio-stretch-10.html → ...ent/grid-item-aspect-ratio-stretch-3.html b/...grid-item-no-aspect-ratio-stretch-10.html → ...ent/grid-item-aspect-ratio-stretch-3.html
@@ -1,24 +1,27 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratio</title>
+<title>stretching works for replaced items with a fallback aspect ratio</title>
 <link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
 <link rel="author" title="Mozilla" href="https://mozilla.org">
 <link rel="help" href="https://drafts.csswg.org/css-grid">
 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
-<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html">
 <style>
   body {
     line-height: 0;
   }
 
   div {
     display: inline-grid;
+    grid-template: 100% / 100%;
     height: 250px;
     width: 350px;
     background: grey;
     margin: 10px;
     vertical-align: top;
   }
+  img { background: blue; }
 
   .justify {
     justify-self: stretch;
@@ -41,7 +44,7 @@
 </div>
 
 <script>
-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>'
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

diff --git a/...d-item-no-aspect-ratio-stretch-7-ref.html → ...grid-item-aspect-ratio-stretch-4-ref.html b/...d-item-no-aspect-ratio-stretch-7-ref.html → ...grid-item-aspect-ratio-stretch-4-ref.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
 <link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
 <link rel="author" title="Mozilla" href="https://mozilla.org">
 <style>
@@ -19,8 +19,6 @@
 
   img {
     display: block;
-    width: 300px;
-    height: 150px;
     background: blue;
   }
 
@@ -35,17 +33,17 @@
   <img class="align justify">
 </div>
 <div>
-  <img class="align" style="width:20px">
+  <img class="align">
 </div>
 <div>
-  <img class="justify" style="height:0px">
+  <img class="justify">
 </div>
 <div>
   <img style="width:20px; height:0px">
 </div>
 
 <script>
-var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

diff --git a/.../grid-item-no-aspect-ratio-stretch-7.html → ...ent/grid-item-aspect-ratio-stretch-4.html b/.../grid-item-no-aspect-ratio-stretch-7.html → ...ent/grid-item-aspect-ratio-stretch-4.html
@@ -1,18 +1,20 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratio</title>
+<title>stretching works for replaced items with a fallback aspect ratio</title>
 <link rel="author" title="Mats Palmgren" href="mailto:[email protected]">
 <link rel="author" title="Mozilla" href="https://mozilla.org">
 <link rel="help" href="https://drafts.csswg.org/css-grid">
 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
-<link rel="match" href="grid-item-no-aspect-ratio-stretch-7-ref.html">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html">
 <style>
   body {
     line-height: 0;
   }
 
   div {
     display: inline-grid;
+    grid-template: 100% / 100%;
     height: 250px;
     width: 350px;
     background: grey;

diff --git a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html
@@ -19,8 +19,8 @@
 
   img {
     display: block;
-    width: 300px;
-    height: 150px;
+    width: 0px;
+    height: 20px;
   }
 
   .justify {
@@ -34,17 +34,17 @@
   <img class="align justify">
 </div>
 <div>
-  <img class="align" style="width:10px">
+  <img class="align">
 </div>
 <div>
-  <img class="justify" style="height:20px">
+  <img class="justify">
 </div>
 <div>
-  <img style="width:10px; height:20px">
+  <img>
 </div>
 
 <script>
-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>'
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

diff --git a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html
@@ -13,6 +13,7 @@
 
   div {
     display: inline-grid;
+    grid-template: 100% / 100%;
     height: 250px;
     width: 350px;
     background: grey;
@@ -41,7 +42,7 @@
 </div>
 
 <script>
-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>'
+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>'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];