From d56d139f37d8b652e8c820dcf40ff9cc582f5d93 Mon Sep 17 00:00:00 2001
From: Ian Kilpatrick <ikilpatrick@chromium.org>
Date: Fri, 2 Jul 2021 15:04:43 -0700
Subject: [PATCH] [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:
https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544
These tests *should* have an aspect-ratio, and when stretched in one
dimension, should reflect to the other dimension (if unconstrained). See:
https://github.com/w3c/csswg-drafts/issues/5713#issuecomment-755791551

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 <dgrogan@chromium.org>
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#898351}
---
 .../grid-item-aspect-ratio-stretch-1-ref.html | 51 ++++++++++++++++++
 ... => grid-item-aspect-ratio-stretch-1.html} |  8 +--
 .../grid-item-aspect-ratio-stretch-2-ref.html | 51 ++++++++++++++++++
 ... => grid-item-aspect-ratio-stretch-2.html} |  8 +--
 .../grid-item-aspect-ratio-stretch-3-ref.html | 52 +++++++++++++++++++
 ... => grid-item-aspect-ratio-stretch-3.html} |  9 ++--
 ...grid-item-aspect-ratio-stretch-4-ref.html} | 10 ++--
 ... => grid-item-aspect-ratio-stretch-4.html} |  6 ++-
 ...id-item-no-aspect-ratio-stretch-4-ref.html | 12 ++---
 .../grid-item-no-aspect-ratio-stretch-4.html  |  3 +-
 ...id-item-no-aspect-ratio-stretch-5-ref.html | 12 ++---
 .../grid-item-no-aspect-ratio-stretch-5.html  |  3 +-
 ...id-item-no-aspect-ratio-stretch-6-ref.html | 13 +++--
 .../grid-item-no-aspect-ratio-stretch-6.html  |  3 +-
 ...id-item-no-aspect-ratio-stretch-8-ref.html | 27 ----------
 15 files changed, 201 insertions(+), 67 deletions(-)
 create mode 100644 css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
 rename css/css-grid/alignment/{grid-item-no-aspect-ratio-stretch-8.html => grid-item-aspect-ratio-stretch-1.html} (71%)
 create mode 100644 css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
 rename css/css-grid/alignment/{grid-item-no-aspect-ratio-stretch-9.html => grid-item-aspect-ratio-stretch-2.html} (71%)
 create mode 100644 css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
 rename css/css-grid/alignment/{grid-item-no-aspect-ratio-stretch-10.html => grid-item-aspect-ratio-stretch-3.html} (71%)
 rename css/css-grid/alignment/{grid-item-no-aspect-ratio-stretch-7-ref.html => grid-item-aspect-ratio-stretch-4-ref.html} (79%)
 rename css/css-grid/alignment/{grid-item-no-aspect-ratio-stretch-7.html => grid-item-aspect-ratio-stretch-4.html} (78%)
 delete mode 100644 css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8-ref.html

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
new file mode 100644
index 00000000000000..1120e45f5ce96f
--- /dev/null
+++ 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:mats@mozilla.com">
+<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/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
similarity index 71%
rename from css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html
rename to css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
index 933ddd0504efe9..909406f5e9e75e 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html
+++ b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
@@ -1,11 +1,12 @@
 <!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:mats@mozilla.com">
 <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;
@@ -13,6 +14,7 @@
 
   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
new file mode 100644
index 00000000000000..84d7950b098af3
--- /dev/null
+++ 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:mats@mozilla.com">
+<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/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
similarity index 71%
rename from css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html
rename to css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
index 367adae9eb74d5..f5b733029c267a 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html
+++ b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
@@ -1,11 +1,12 @@
 <!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:mats@mozilla.com">
 <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;
@@ -13,6 +14,7 @@
 
   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
new file mode 100644
index 00000000000000..b85803ec8fa2f8
--- /dev/null
+++ 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:mats@mozilla.com">
+<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/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
similarity index 71%
rename from css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html
rename to css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
index 6d8d7e848c24d6..43202541b2eb14 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html
+++ b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
@@ -1,11 +1,12 @@
 <!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:mats@mozilla.com">
 <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;
@@ -13,12 +14,14 @@
 
   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/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7-ref.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
similarity index 79%
rename from css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7-ref.html
rename to css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
index 0d60375f560f3a..8d7fc870fae1ad 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7-ref.html
+++ b/css/css-grid/alignment/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:mats@mozilla.com">
 <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/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
similarity index 78%
rename from css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html
rename to css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
index 29dec490b79ac5..f689cce023bcb2 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html
+++ b/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
@@ -1,11 +1,12 @@
 <!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:mats@mozilla.com">
 <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;
@@ -13,6 +14,7 @@
 
   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
index 9edb8aa76f8fd4..4a543b4a3462ca 100644
--- 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
index 1cf2849dad3d06..a53c0fd87c541b 100644
--- 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];
diff --git a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
index 6a3446534a1a5e..98f88fed7bcfc5 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
+++ b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
@@ -19,8 +19,8 @@
 
   img {
     display: block;
-    width: 300px;
-    height: 150px;
+    width: 20px;
+    height: 0px;
   }
 
   .justify {
@@ -34,17 +34,17 @@
   <img class="align justify">
 </div>
 <div>
-  <img class="align" style="width:20px">
+  <img class="align">
 </div>
 <div>
-  <img class="justify" style="width:350px; height:40px">
+  <img class="justify">
 </div>
 <div>
-  <img style="width:20px; height:40px">
+  <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-5.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
index 3000e9d97a1002..c28022c6e748da 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
+++ b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.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" width="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="20px" height="0px"><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-6-ref.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
index 33f472e71b8536..8e989d10450982 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
+++ b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
@@ -19,9 +19,8 @@
 
   img {
     display: block;
-    width: 300px;
-    height: 150px;
-    background: blue;
+    width: 0px;
+    height: 0px;
   }
 
   .justify {
@@ -35,17 +34,17 @@
   <img class="align justify">
 </div>
 <div>
-  <img class="align" style="width:0px">
+  <img class="align">
 </div>
 <div>
-  <img class="justify" style="height:20px">
+  <img class="justify">
 </div>
 <div>
-  <img style="width:0px; height:20px">
+  <img>
 </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"><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-6.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
index 655040eb446497..b4f172c10da92b 100644
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
+++ b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
@@ -19,7 +19,6 @@
     margin: 10px;
     vertical-align: top;
   }
-  img { background: blue; }
 
   .justify {
     justify-self: stretch;
@@ -42,7 +41,7 @@
 </div>
 
 <script>
-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 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 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-8-ref.html b/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8-ref.html
deleted file mode 100644
index 09dd27321ab579..00000000000000
--- a/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>Reference: stretching works for replaced items with no aspect ratio</title>
-<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-<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;
-  }
-</style>
-<div>
-</div>
-<div>
-</div>
-<div>
-</div>
-<div>
-</div>