[wpt] Fix css-grid/alignment/grid-alignment-implies-size-change-*.html

From: https://github.com/w3c/csswg-drafts/issues/5713

Basically these tests stretch an image in one axis, and previously
tested that the image should lose its aspect-ratio.
When stretching in one axis, and when there is no size constraint in the
other axis it should respect the aspect-ratio.

Change-Id: Ic1374f50b4d561b3c38b94a4f60724f950e6513e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2611567Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841117}

third_party/blink/web_tests/TestExpectations

@@ -3245,9 +3245,20 @@ crbug.com/1160916 external/wpt/css/css-backgrounds/box-shadow-radius-001.html [
 crbug.com/921722 external/wpt/css/css-grid/abspos/descendant-static-position-001.html [ Failure ]
 crbug.com/921722 external/wpt/css/css-grid/abspos/descendant-static-position-002.html [ Failure ]
 crbug.com/921722 external/wpt/css/css-grid/abspos/descendant-static-position-003.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-011.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-012.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-013.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-014.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-017.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-018.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-029.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-030.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-031.html [ Failure ]
+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/941987 external/wpt/css/css-grid/alignment/grid-baseline-align-cycles-001.html [ Failure ]
-crbug.com/1045599 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.tentative.html [ Failure ]
-crbug.com/1045599 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.tentative.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html [ Failure ]
+crbug.com/1045599 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html [ Failure ]
 crbug.com/759665 external/wpt/css/css-grid/animation/grid-template-columns-001.html [ Failure ]
 crbug.com/759665 external/wpt/css/css-grid/animation/grid-template-rows-001.html [ Failure ]
 crbug.com/935102 external/wpt/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html [ Failure ]
@@ -3287,7 +3298,22 @@ crbug.com/764235 external/wpt/css/css-grid/alignment/grid-baseline-justify-001.h
 # Subgrid is not implemented yet
 crbug.com/618969 external/wpt/css/css-grid/subgrid/* [ Skip ]
 
-# [layout-ng-grid]
+### Tests passing with LayoutNGGrid enabled:
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-011.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-012.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-013.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-014.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-017.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-018.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-029.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-030.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-031.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html [ Pass ]
+
+### Tests failing with LayoutNGGrid enabled:
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html [ Failure ]
@@ -3393,11 +3419,6 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/gri
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-align-content-vertical-rl.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-align-content.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-align-justify-overflow.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-029.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-030.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-031.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-style-changes-001.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-style-changes-002.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-style-changes-003.html [ Failure ]
@@ -3585,8 +3606,6 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/gri
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.tentative.html [ Pass ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.tentative.html [ Pass ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html [ Failure ]
@@ -3953,16 +3972,6 @@ crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/preferred-width-co
 crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/relayout-indefinite-heights.html [ Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/repeating-layout-must-produce-the-same-results.html [ Failure ]
 
-# All these failures are due to bad tests, but waiting on CSSWG to confirm. Essentially they involve
-# a replaced element, with stretching in one axis. The current implementation (and these tests)
-# assume that they should loose their aspect-ratio when they shouldn't.
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-011.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-012.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-013.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-014.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-017.html [ Failure ]
-crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-018.html [ Failure ]
-
 # These pass but hit DCHECKS
 crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html [ Crash Failure ]
 crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html [ Crash Failure ]

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-011.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-height", 200);
-  grid.style.alignItems = "start";
-  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-012.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-height", 100);
-  grid.style.alignItems = "stretch";
-  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-013.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-height", 200);
-  grid.style.alignItems = "normal";
-  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-014.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-height", 100);
-  grid.style.alignItems = "stretch";
-  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-017.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-height", 100);
-  grid.style.alignItems = "stretch";
-  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-018.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-height", 80);
-  grid.style.alignItems = "start";
-  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-029.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-width", 200);
-  grid.style.justifyItems = "start";
-  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-030.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-width", 100);
-  grid.style.justifyItems = "stretch";
-  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-031.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-width", 200);
-  grid.style.justifyItems = "normal";
-  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-width", 100);
-  grid.style.justifyItems = "stretch";
-  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>

third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html

@@ -31,14 +31,24 @@
 <script>
 setup({ explicit_done: true });
 function runTest() {
-  evaluateStyleChange(item, "before", "data-expected-width", 80);
-  grid.style.justifyItems = "start";
-  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
   done();
 }
 </script>
 <body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
-  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+  <img id="item" src="support/100x100-green.png"></img>
 </div>
 </body>