[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 
Reviewed-by: Kurt Catti-Schmidt 
Commit-Queue: Ian Kilpatrick 
Cr-Commit-Position: refs/heads/master@{#898351}

Author: bfgeek

third_party/blink/web_tests/FlagExpectations/disable-layout-ng

@@ -121,6 +121,10 @@ crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-siz
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-baseline-004.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html [ Failure ]

third_party/blink/web_tests/TestExpectations

@@ -3926,9 +3926,6 @@ crbug.com/1160916 external/wpt/css/css-backgrounds/box-shadow-radius-001.html [
 
 # [css-grid]
 crbug.com/1045599 external/wpt/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html [ Failure ]
-crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html [ Failure ]
-crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html [ Failure ]
-crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html [ Failure ]
 crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html [ Failure ]
 crbug.com/759665 external/wpt/css/css-grid/animation/grid-template-columns-001.html [ Failure ]
@@ -3959,6 +3956,10 @@ virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implie
 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html [ Failure ]
 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Failure ]
 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-baseline-004.html [ Failure ]
+virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html [ Failure ]
+virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html [ Failure ]
+virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html [ Failure ]
+virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html [ Failure ]
 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html [ Failure ]
 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html [ Failure ]
 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html [ Failure ]
@@ -4008,18 +4009,6 @@ virtual/layout-ng-grid/fast/css-grid-layout/grid-item-spanning-and-orthogonal-fl
 virtual/layout-ng-grid/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html [ Failure ]
 virtual/layout-ng-grid/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html [ Failure ]
 
-# Bad stretching of svgs without aspect-ratio.
-crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html [ Failure ]
-crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html [ Failure ]
-crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html [ Failure ]
-crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html [ Failure ]
-
-# Open discussion of SVG aspect ratios at https://github.com/w3c/csswg-drafts/issues/6286
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html [ Failure ]
-
 # The 'last baseline' keyword is not implemented yet
 crbug.com/885175 external/wpt/css/css-grid/alignment/grid-item-self-baseline-001.html [ Skip ]
 crbug.com/885175 external/wpt/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html [ Skip ]

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html

@@ -0,0 +1,51 @@
+>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratiotitle>
+<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,'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+script>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html renamed to third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html

@@ -1,18 +1,20 @@
 >
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratiotitle>
+<title>stretching works for replaced items with a fallback aspect ratiotitle>
 <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,width="0px" height="20px">'
+var url = 'data:image/svg+xml,height="20px" viewBox="0 0 50 100">'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html

@@ -0,0 +1,51 @@
+>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratiotitle>
+<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,'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+script>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html renamed to third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html

@@ -1,18 +1,20 @@
 >
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratiotitle>
+<title>stretching works for replaced items with a fallback aspect ratiotitle>
 <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,height="0px">'
+var url = 'data:image/svg+xml,viewBox="0 0 50 100">'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html

@@ -0,0 +1,52 @@
+>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratiotitle>
+<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,'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+script>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html renamed to third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html

@@ -1,24 +1,27 @@
 >
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratiotitle>
+<title>stretching works for replaced items with a fallback aspect ratiotitle>
 <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,0px">>'
+var url = 'data:image/svg+xml,20px" viewBox="0 0 50 100">'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7-ref.html renamed to third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html

@@ -1,6 +1,6 @@
 >
 <meta charset="utf-8">
-<title>Reference: stretching works for replaced items with no aspect ratiotitle>
+<title>Reference: stretching works for replaced items with a fallback aspect ratiotitle>
 <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,'
+var url = 'data:image/svg+xml, viewBox="0 0 50 100">'
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html renamed to third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html

@@ -1,18 +1,20 @@
 >
 <meta charset="utf-8">
-<title>stretching works for replaced items with no aspect ratiotitle>
+<title>stretching works for replaced items with a fallback aspect ratiotitle>
 <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;