Bug 1335806 part 4 - [css-grid] Tweak reftests where 'align/justify-self:normal' now means 'start' for grid items with an intrinsic size / aspect ratio. a=gchang
authorMats Palmgren <mats@mozilla.com>
Thu, 16 Mar 2017 15:24:57 +0100
changeset 379111 b962f6a14a7a087cdbb21a3575cc05336529ebbe
parent 379110 1aca71052d1f642c8f8f9042e745861f3b0cd944
child 379112 01a36582b13a18ebb461105286f08ec714dc5bb9
push id1419
push userjlund@mozilla.com
push dateMon, 10 Apr 2017 20:44:07 +0000
treeherdermozilla-release@5e6801b73ef6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgchang
bugs1335806
milestone53.0
Bug 1335806 part 4 - [css-grid] Tweak reftests where 'align/justify-self:normal' now means 'start' for grid items with an intrinsic size / aspect ratio. a=gchang MozReview-Commit-ID: AztJxC2cBMR
layout/reftests/css-grid/grid-item-button-001-ref.html
layout/reftests/css-grid/grid-item-button-001.html
layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
layout/reftests/css-grid/grid-item-input-stretch-001.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html
layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
layout/reftests/css-grid/grid-item-video-stretch-001-ref.html
layout/reftests/css-grid/grid-item-video-stretch-001.html
layout/reftests/css-grid/grid-item-video-stretch-002-ref.html
layout/reftests/css-grid/grid-item-video-stretch-002.html
layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/grid-item-button-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-button-001-ref.html
@@ -77,10 +77,13 @@ a30 {
 <button>AB</button><button>AB</button><button style="margin-left:15px">AB</button><button style="margin-left:20px">AB</button><button style="margin-left:5px">AB</button><button>AB</button><button style="margin-left:15px">AB</button><button style="margin-left:20px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
 
 <div class="grid mw40" style="width:215px">
 <button>AB</button><button style="margin-left:-25px">AB</button><button style="margin-left:-35px">AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:-25px">AB</button><button style="margin-left:-35px">AB</button><button style="margin-left:-5px">AB</button></div>
 
 <div class="grid rel" style="width:100px; height:100px; position:relative">
 <button style="top:0;width:40px;height:40px">AB</button><button style="top:0;right:0;height:40px">&nbsp;&nbsp;</button><button style="bottom:0;width:40px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
 
+<div class="grid rel" style="width:100px; height:100px; position:relative">
+<button style="top:0;width:40px;height:40px">AB</button><button style="top:0;right:0;height:40px">&nbsp;&nbsp;</button><button style="bottom:0;width:40px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-button-001.html
+++ b/layout/reftests/css-grid/grid-item-button-001.html
@@ -144,10 +144,17 @@ button:nth-child(4n) { background: silve
 
 <div class="grid max40" style="grid:50px 50px/50px 50px">
 <button>AB</button>
 <button class="jend">&nbsp;&nbsp;</button>
 <button class="aend">AB</button>
 <button class="end">&nbsp;&nbsp;</button>
 </div>
 
+<div class="grid max40" style="grid:50px 50px/50px 50px; place-items:stretch">
+<button>AB</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">AB</button>
+<button class="end">&nbsp;&nbsp;</button>
+</div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
@@ -42,16 +42,17 @@ input {
 .mxw { width: 32px; }
 .mxh { height: 16px; }
 
 .vr { writing-mode: vertical-rl; }
   </style>
 </head>
 <body>
 
+<div class="grid"><div><input></div></div>
 <div class="grid"><input class="m" style="width:190px; height:20px"></div>
 <div class="grid"><input class="hma10 je" style="height:20px"></div>
 <div class="grid"><input class="hmaa jc" style="height:20px"></div>
 <div class="grid"><input class="vr hma10 je" style="height:20px"></div>
 <div class="grid"><input class="vr hmaa jc" style="height:20px"></div>
 <div class="grid"><input class="vr je" style="width:198px; height:28px"></div>
 
 <div class="grid"><input class="vma10 ae" style="width:190px"></div>
--- a/layout/reftests/css-grid/grid-item-input-stretch-001.html
+++ b/layout/reftests/css-grid/grid-item-input-stretch-001.html
@@ -11,16 +11,17 @@
   <link rel="match" href="grid-item-input-stretch-001-ref.html">
   <style type="text/css">
 * { color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; }
 * { vertical-align: top; }
 .grid {
   display: inline-grid;
   border: 1px solid;
   grid: 2px 30px 3px / 6px 200px 4px;
+  place-items: stretch;
 }
 
 input {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
   grid-area: 2/2;
@@ -35,16 +36,17 @@ input {
 .mxw { max-width: 32px; }
 .mxh { max-height: 16px; }
 
 .vr { writing-mode: vertical-rl; }
   </style>
 </head>
 <body>
 
+<div class="grid" style="place-items:start"><input></div>
 <div class="grid"><input class="m"></div>
 <div class="grid"><input class="hma10"></div>
 <div class="grid"><input class="hmaa"></div>
 <div class="grid"><input class="vr hma10"></div>
 <div class="grid"><input class="vr hmaa"></div>
 <div class="grid"><input class="vr"></div>
 
 <div class="grid"><input class="vma10"></div>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html
@@ -86,85 +86,85 @@ x { width:32px; height:2px; background:c
 
 <script>
 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
 var grids = document.querySelectorAll('.grid');
 var js = [ "normal", "start", "center", "stretch" ];
 var as = [ "normal", "start", "center", "stretch" ];
 var imgSizes =
 [
-  ['24px', '24px'],
-  ['32px', '32px'],
-  ['32px', '32px'],
-  ['24px', '24px'],
-  ['24px', '24px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '24px'],
-  ['24px', '24px'],
+  ['16px', '16px'],
   ['16px', '24px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
+  ['16px', '24px'],
+  ['32px', '16px'],
   ['32px', '16px'],
   ['32px', '16px'],
   ['32px', '24px'],
-  ['24px', '24px'],
-  ['24px', '24px'],
-  ['24px', '24px'],
-  ['32px', '32px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '32px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
   ['16px', '32px'],
-  ['24px', '24px'],
+  ['16px', '16px'],
+  ['16px', '32px'],
+  ['24px', '16px'],
   ['24px', '16px'],
   ['24px', '16px'],
   ['24px', '32px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
-  ['8px', '8px'],
-  ['8px', '8px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '8px'],
-  ['8px', '8px'],
+  ['16px', '16px'],
   ['16px', '8px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
+  ['16px', '8px'],
+  ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '8px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
-  ['32px', '32px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '32px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
   ['16px', '32px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
+  ['16px', '32px'],
+  ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '32px'],
-  ['4px', '4px'],
-  ['8px', '8px'],
-  ['8px', '8px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '4px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
   ['16px', '4px'],
-  ['8px', '8px'],
+  ['16px', '16px'],
+  ['16px', '4px'],
+  ['8px', '16px'],
   ['8px', '16px'],
   ['8px', '16px'],
   ['8px', '4px'],
-  ['8px', '8px'],
-  ['32px', '32px'],
-  ['32px', '32px'],
-  ['8px', '8px'],
-  ['8px', '8px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '8px'],
-  ['8px', '8px'],
+  ['16px', '16px'],
   ['16px', '8px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
+  ['16px', '8px'],
+  ['32px', '16px'],
   ['32px', '16px'],
   ['32px', '16px'],
   ['32px', '8px'],
 ];
 var index = 0;  // imgSizes index
 for (var i = 0; i < grids.length; ++i) {
   for (var j = 0; j < js.length; j++) {
     for (var a = 0; a < as.length; a++) {
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html
@@ -82,37 +82,37 @@ x { width:32px; height:2px; background:c
 
 <script>
 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
 var grids = document.querySelectorAll('.grid');
 var js = [ "normal", "start", "center", "stretch" ];
 var as = [ "normal", "start", "center", "stretch" ];
 var imgSizes =
 [
-  ['24px', '24px'],
-  ['32px', '32px'],
-  ['32px', '32px'],
-  ['24px', '24px'],
-  ['24px', '24px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '24px'],
-  ['24px', '24px'],
+  ['16px', '16px'],
   ['16px', '24px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
+  ['16px', '24px'],
+  ['32px', '16px'],
   ['32px', '16px'],
   ['32px', '16px'],
   ['32px', '24px'],
-  ['24px', '24px'],
-  ['24px', '24px'],
-  ['24px', '24px'],
-  ['32px', '32px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '32px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
   ['16px', '32px'],
-  ['24px', '24px'],
+  ['16px', '16px'],
+  ['16px', '32px'],
+  ['24px', '16px'],
   ['24px', '16px'],
   ['24px', '16px'],
   ['24px', '32px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '8px'],
   ['4px', '4px'],
@@ -126,17 +126,17 @@ var imgSizes =
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '32px'],
   ['4px', '4px'],
   ['4px', '32px'],
   ['4px', '4px'],
   ['4px', '32px'],
-  ['4px', '4px'],
+  ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '32px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['8px', '4px'],
   ['4px', '4px'],
@@ -145,17 +145,17 @@ var imgSizes =
   ['8px', '4px'],
   ['8px', '4px'],
   ['8px', '4px'],
   ['8px', '4px'],
   ['8px', '4px'],
   ['8px', '8px'],
   ['8px', '8px'],
   ['8px', '8px'],
-  ['8px', '8px'],
+  ['16px', '8px'],
   ['8px', '8px'],
   ['16px', '8px'],
   ['8px', '8px'],
   ['16px', '8px'],
   ['32px', '8px'],
   ['32px', '8px'],
   ['32px', '8px'],
   ['32px', '8px'],
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html
@@ -135,62 +135,62 @@
 <div class="grid"><img class="as h20 mxw2"></div>
 <div class="grid"><img class="an h20"></div>
 <div class="grid"><img class="an h20 mxw10"></div>
 
 <script>
 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
 var imgs = document.querySelectorAll('img');
 var imgSizes =
-  [
+[
   ['4px', '4px'],
   ['4px', '4px'],
   ['16px', '4px'],
   ['10px', '4px'],
   ['4px', '4px'],
   ['2px', '2px'],
   ['20px', '20px'],
   ['10px', '20px'],
   ['20px', '20px'],
   ['10px', '20px'],
   ['16px', '20px'],
   ['10px', '20px'],
   ['20px', '20px'],
   ['10px', '20px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
+  ['10px', '10px'],
   ['16px', '16px'],
   ['10px', '10px'],
   ['16px', '4px'],
   ['10px', '4px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
   ['2px', '2px'],
   ['4px', '4px'],
   ['2px', '2px'],
   ['4px', '4px'],
   ['2px', '2px'],
   ['4px', '32px'],
   ['2px', '32px'],
   ['4px', '4px'],
   ['2px', '2px'],
   ['20px', '20px'],
   ['20px', '10px'],
   ['20px', '20px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
-  ['32px', '32px'],
+  ['20px', '20px'],
   ['20px', '10px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
+  ['10px', '10px'],
   ['16px', '16px'],
   ['10px', '10px'],
   ['16px', '32px'],
   ['16px', '10px'],
-  ['32px', '32px'],
+  ['16px', '16px'],
   ['10px', '10px'],
   ['20px', '20px'],
   ['20px', '10px'],
   ['20px', '20px'],
   ['20px', '10px'],
   ['20px', '4px'],
   ['20px', '2px'],
   ['20px', '20px'],
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
@@ -152,35 +152,23 @@ button {
 <script>
 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   imgs[i].src = url;
 }
 </script>
 
+<!--  For generating button size results in -ref file
 <script>
 document.body.clientHeight;
 var imgs = document.querySelectorAll('img');
 var s = '  [\n';
 for (var i = 0; i < imgs.length; ++i) {
   s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
 }
 s += ']';
 console.log(s)
 </script>
-
-<!--  For generating button size results in -ref file
-<script>
-document.body.clientHeight;
-var buttons = document.querySelectorAll('button');
-var s = '  [\n';
-for (var i = 0; i < buttons.length; ++i) {
-  var cs = window.getComputedStyle(buttons[i]);
-  s += "  ['"+ cs['width'] + "', '" + cs['height'] + "'],\n";
-}
-s += ']';
-console.log(s)
-</script>
 -->
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html
@@ -1,143 +1,143 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>Reference: stretching intrinsic ratio item with min/max-size:0</title>
+  <title>Reference: stretching intrinsic ratio item with min-size:0</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
   align-items: start;
   justify-items: start;
 }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="height:96px; width:8px">
+<img src="support/lime-2x24.png" style="height:96px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:48px; width:4px">
+<img src="support/lime-2x24.png" style="height:96px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:96px; height:8px">
+<img src="support/lime-24x2.png" style="width:100px; height:8px">
 </div>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:24px; width:10px">
 </div>
 
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:24px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:start safe; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:24px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:48px; height:4px; margin-right:-38px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:24px; height:4px; margin-right:-14px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 80px">
-<img src="support/lime-24x2.png" style="justify-self:end safe; width:48px; height:4px; margin-left:-38px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:24px; height:4px; margin-left:-38px">
 </div>
 
 <br>
 
 <div class="vertical-tests">
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="height:96px; width:8px">
+<img src="support/lime-2x24.png" style="height:96px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:48px; width:4px">
+<img src="support/lime-2x24.png" style="height:96px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:96px; height:8px">
+<img src="support/lime-24x2.png" style="width:100px; height:8px">
 </div>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:24px; width:10px">
 </div>
 
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:24px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:start safe; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:24px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:48px; height:4px; margin-right:-38px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:24px; height:4px; margin-right:-14px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 80px">
-<img src="support/lime-24x2.png" style="justify-self:end safe; width:48px; height:4px; margin-left:-38px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:24px; height:4px; margin-left:-38px">
 </div>
 
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
@@ -1,25 +1,26 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:0</title>
+  <title>CSS Grid Test: stretching intrinsic ratio item with min-size:0</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-001-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
+  place-items: stretch;
 }
 .grid > * {
   min-width: 0;
   min-height: 0;
 }
 .vertical-tests img { writing-mode: vertical-rl; }
 .vertical-tests div { vertical-align:bottom }
   </style>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
@@ -17,131 +17,131 @@ body,html { color:black; background:whit
   place-items: start start;
 }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:4px; height:48px">
+<img src="support/lime-2x24.png" style="width:4px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:12px; width:1px">
+<img src="support/lime-2x24.png" style="height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="height:1px; width:12px">
+<img src="support/lime-24x2.png" style="height:8px; width:12px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="height:6px; width:72px">
+<img src="support/lime-24x2.png" style="height:6px; width:100px">
 </div>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:10px; height:120px">
+<img src="support/lime-2x24.png" style="width:20px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="width:6px; height:72px">
+<img src="support/lime-2x24.png" style="width:6px; height:96px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:24px; height:2px">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:120px; height:10px">
+<img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
 <div class="grid" style="grid: 48px / 6px">
-<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
 <img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
 </div>
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px">
 </div>
 
 <br>
 
 <div class="vertical-tests">
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:4px; height:48px">
+<img src="support/lime-2x24.png" style="width:4px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:12px; width:1px">
+<img src="support/lime-2x24.png" style="height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="height:1px; width:12px">
+<img src="support/lime-24x2.png" style="height:8px; width:12px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="height:6px; width:72px">
+<img src="support/lime-24x2.png" style="height:6px; width:100px">
 </div>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:10px; height:120px">
+<img src="support/lime-2x24.png" style="width:20px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="width:6px; height:72px">
+<img src="support/lime-2x24.png" style="width:6px; height:96px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:24px; height:2px">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:120px; height:10px">
+<img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
 <div class="grid" style="grid: 48px / 6px">
-<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
 <img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
 </div>
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px">
 </div>
 
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
@@ -11,16 +11,17 @@
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-002-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
+  place-items: stretch;
 }
 .grid > * {
   min-width: 0;
   min-height: 0;
 }
 .vertical-tests img { writing-mode: vertical-rl; }
 .vertical-tests div { vertical-align:bottom }
   </style>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html
@@ -17,127 +17,127 @@ body,html { color:black; background:whit
   justify-items: start;
 }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="height:96px; width:8px">
+<img src="support/lime-2x24.png" style="height:96px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:48px; width:4px">
+<img src="support/lime-2x24.png" style="height:96px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:96px; height:8px">
+<img src="support/lime-24x2.png" style="width:100px; height:8px">
 </div>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:24px; width:10px">
 </div>
 
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 80px">
-<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:4px">
 </div>
 
 <br>
 
 <div class="vertical-tests">
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="height:96px; width:8px">
+<img src="support/lime-2x24.png" style="height:96px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:48px; width:4px">
+<img src="support/lime-2x24.png" style="height:96px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:96px; height:8px">
+<img src="support/lime-24x2.png" style="width:100px; height:8px">
 </div>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
-<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:24px; width:10px">
 </div>
 
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 40px">
-<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:4px">
 </div>
 <div class="grid" style="grid: 4px / 10px; margin-left: 80px">
-<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:4px">
 </div>
 
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html
@@ -10,16 +10,17 @@
   <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-004-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
+  place-items: stretch stretch;
 }
 .vertical-tests img { writing-mode: vertical-rl; }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html
@@ -18,131 +18,131 @@ body,html { color:black; background:whit
   justify-items: start;
 }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:4px; height:48px">
+<img src="support/lime-2x24.png" style="width:4px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:12px; width:1px">
+<img src="support/lime-2x24.png" style="height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="height:1px; width:12px">
+<img src="support/lime-24x2.png" style="height:8px; width:12px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="height:6px; width:72px">
+<img src="support/lime-24x2.png" style="height:6px; width:100px">
 </div>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:10px; height:120px">
+<img src="support/lime-2x24.png" style="width:20px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="width:6px; height:72px">
+<img src="support/lime-2x24.png" style="width:6px; height:96px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:24px; height:2px">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:120px; height:10px">
+<img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
 <div class="grid" style="grid: 48px / 6px">
-<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
 <img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
 </div>
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px">
 </div>
 
 <br>
 
 <div class="vertical-tests">
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:4px; height:48px">
+<img src="support/lime-2x24.png" style="width:4px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="height:12px; width:1px">
+<img src="support/lime-2x24.png" style="height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="height:1px; width:12px">
+<img src="support/lime-24x2.png" style="height:8px; width:12px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="height:6px; width:72px">
+<img src="support/lime-24x2.png" style="height:6px; width:100px">
 </div>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
 </div>
 
 <br>
 
 <div class="grid" style="grid: 96px / 20px">
-<img src="support/lime-2x24.png" style="width:10px; height:120px">
+<img src="support/lime-2x24.png" style="width:20px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="width:6px; height:72px">
+<img src="support/lime-2x24.png" style="width:6px; height:96px">
 </div>
 
 <div class="grid" style="grid: 8px / 20px">
-<img src="support/lime-24x2.png" style="width:24px; height:2px">
+<img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
 <div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="width:120px; height:10px">
+<img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
 <div class="grid" style="grid: 48px / 6px">
-<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
-<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
 <img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
 </div>
 <div class="grid" style="grid: 4px / 10px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px">
 </div>
 
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html
@@ -11,16 +11,17 @@
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-005-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
+  place-items: stretch;
 }
 .vertical-tests img { writing-mode: vertical-rl; }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
--- a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
@@ -142,89 +142,89 @@ button {
 <div class="grid"><button class="as h20 mxw2"></button></div>
 <div class="grid"><button class="an h20"></button></div>
 <div class="grid"><button class="an h20 mxw10"></button></div>
 
 <script>
 var buttonSizes =
 [
   ['32px', '4px'],
-  ['0px', '0px'],
-  ['0px', '4px'],
-  ['0px', '4px'],
-  ['0px', '4px'],
-  ['0px', '4px'],
+  ['2px', '2px'],
+  ['2px', '4px'],
+  ['2px', '4px'],
+  ['2px', '4px'],
+  ['2px', '4px'],
   ['32px', '20px'],
   ['10px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
   ['32px', '4px'],
   ['10px', '4px'],
-  ['0px', '0px'],
-  ['0px', '0px'],
-  ['0px', '4px'],
-  ['0px', '4px'],
-  ['0px', '4px'],
-  ['0px', '4px'],
+  ['2px', '2px'],
+  ['2px', '2px'],
+  ['2px', '4px'],
+  ['2px', '4px'],
+  ['2px', '4px'],
+  ['2px', '4px'],
   ['4px', '32px'],
   ['2px', '32px'],
-  ['0px', '0px'],
-  ['2px', '0px'],
-  ['0px', '32px'],
-  ['0px', '32px'],
-  ['0px', '32px'],
-  ['0px', '32px'],
+  ['2px', '2px'],
+  ['2px', '2px'],
+  ['2px', '32px'],
+  ['2px', '32px'],
+  ['2px', '32px'],
+  ['2px', '32px'],
   ['20px', '32px'],
   ['20px', '10px'],
-  ['20px', '0px'],
-  ['20px', '0px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['4px', '32px'],
   ['4px', '10px'],
-  ['0px', '0px'],
-  ['0px', '0px'],
-  ['0px', '32px'],
-  ['0px', '10px'],
-  ['0px', '32px'],
-  ['0px', '10px'],
+  ['2px', '2px'],
+  ['2px', '2px'],
+  ['2px', '32px'],
+  ['2px', '10px'],
+  ['2px', '32px'],
+  ['2px', '10px'],
   ['20px', '4px'],
   ['20px', '4px'],
-  ['20px', '0px'],
-  ['20px', '0px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
   ['20px', '4px'],
   ['20px', '2px'],
   ['20px', '4px'],
   ['20px', '2px'],
-  ['20px', '0px'],
-  ['20px', '0px'],
-  ['20px', '0px'],
-  ['20px', '0px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['32px', '20px'],
   ['10px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
   ['32px', '20px'],
   ['10px', '20px'],
   ['32px', '20px'],
   ['10px', '20px'],
   ['4px', '20px'],
   ['2px', '20px'],
-  ['0px', '20px'],
-  ['0px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
   ['4px', '20px'],
   ['2px', '20px'],
   ['4px', '20px'],
   ['4px', '20px'],
 ];
 var buttons = document.querySelectorAll('button');
 for (var i = 0; i < buttons.length; ++i) {
   var button = buttons[i];
--- a/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html
@@ -1,67 +1,67 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>Reference: stretching video items with auto-margins and/or orthogonal writing-mode</title>
+  <title>Reference: video items with auto-margins and/or orthogonal writing-mode</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
   <style type="text/css">
 * { vertical-align: top; }
 .grid {
   display: inline-grid;
   border: 3px solid grey;
   grid: 50px / 100px;
   padding: 10px 4px 3px 6px;
 }
 
 video {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
+  width: 16px;
+  height: 8px;
 }
 
 .m { margin: 7px 3px 1px 5px; }
 .p { padding: 3px 1px 5px 7px; }
 .hma10 { margin: 7px 3px 1px 0; }
 .hmaa  { margin: 7px 0 1px 0; }
 .vma10 { margin: 0 7px 3px 1px; }
 .vmaa  { margin: 0 7px 0 1px; }
 
 .js { justify-self: start; }
 .je { justify-self: end; }
 .jc { justify-self: center; }
 .as { align-self: start; }
 .ae { align-self: end; }
 .ac { align-self: center; }
 
-.mxw, .mxh { width: 32px; height: 16px; }
-
 .vr { writing-mode: vertical-rl; }
   </style>
 </head>
 <body>
 
-<div class="grid"><video class="m" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
-<div class="grid"><video class="hma10 je" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
-<div class="grid"><video class="hmaa jc" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
-<div class="grid"><video class="vr hma10 je" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
-<div class="grid"><video class="vr hmaa jc" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
-<div class="grid"><video class="vr" src="support/colors-16x8.webm" style="width:96px; height:48px"></div>
+<div class="grid"><video class="m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div>
 
-<div class="grid"><video class="vma10 ae" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
-<div class="grid"><video class="vmaa ac" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
-<div class="grid"><video class="vr vma10 ae" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
-<div class="grid"><video class="vr vmaa ac" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
-<div class="grid"><video class="vr p vma10 as" src="support/colors-16x8.webm" style="width:82px; height:41px"></div>
-<div class="grid"><video class="vr p vmaa ac" src="support/colors-16x8.webm" style="width:82px; height:41px"></div>
+<div class="grid"><video class="vma10 ae" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vmaa ac" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vma10 ae" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vmaa ac" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vma10 ae" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vmaa ac" src="support/colors-16x8.webm"></div>
 
 <div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div>
 <div class="grid"><video class="mxw hma10 je" src="support/colors-16x8.webm"></div>
 <div class="grid"><video class="mxw hmaa jc" src="support/colors-16x8.webm"></div>
 <div class="grid"><video class="mxw vr hma10 je" src="support/colors-16x8.webm"></div>
 <div class="grid"><video class="mxw vr hmaa jc" src="support/colors-16x8.webm"></div>
 <div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div>
 
--- a/layout/reftests/css-grid/grid-item-video-stretch-001.html
+++ b/layout/reftests/css-grid/grid-item-video-stretch-001.html
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: stretching video items with auto-margins and/or orthogonal writing-mode</title>
+  <title>CSS Grid Test: video items with auto-margins and/or orthogonal writing-mode</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
   <link rel="match" href="grid-item-video-stretch-001-ref.html">
   <style type="text/css">
 * { vertical-align: top; }
 .grid {
   display: inline-grid;
   border: 3px solid grey;
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-video-stretch-002-ref.html
@@ -0,0 +1,113 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching video items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 50px / 100px;
+  padding: 10px 4px 3px 6px;
+}
+
+video {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  width: 16px;
+  height: 8px;
+}
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px 0; }
+.hmaa  { margin: 7px 0 1px 0; }
+.vma10 { margin: 0 7px 3px 1px; }
+.vmaa  { margin: 0 7px 0 1px; }
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><video class="m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="vma10 ae" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vmaa ac" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vma10 ae" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vmaa ac" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vma10 ae" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vmaa ac" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div>
+
+<script>
+var sizes =
+[
+  ['90px', '40px'],
+  ['16px', '40px'],
+  ['16px', '40px'],
+  ['16px', '40px'],
+  ['16px', '40px'],
+  ['98px', '48px'],
+  ['90px', '8px'],
+  ['90px', '8px'],
+  ['90px', '8px'],
+  ['90px', '8px'],
+  ['82px', '8px'],
+  ['82px', '8px'],
+  ['32px', '40px'],
+  ['16px', '40px'],
+  ['16px', '40px'],
+  ['16px', '40px'],
+  ['16px', '40px'],
+  ['32px', '48px'],
+  ['90px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
+  ['98px', '16px'],
+];
+var items = document.querySelectorAll('video')
+for (var i = 0; i < items.length; ++i) {
+  let item = items[i];
+  item.style.width = sizes[i][0];
+  item.style.height = sizes[i][1];
+}
+
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-video-stretch-002.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching video items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-video-stretch-002-ref.html">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 10px 50px 3px / 6px 100px 4px;
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+video {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  grid-area: 2/2;
+}
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+.mxw { max-width: 32px; }
+.mxh { max-height: 16px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><video class="m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="vma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vmaa" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div>
+
+<!--
+<script>
+function test() {
+document.body.clientHeight;
+var videos = document.querySelectorAll('video');
+var s = '  [\n';
+for (var i = 0; i < videos.length; ++i) {
+  let cs = window.getComputedStyle(videos[i])
+  s += "  ['"+ cs.width + "', '" + cs.height + "'],\n";
+}
+s += ']';
+console.log(s)
+}
+
+setTimeout(test,2000)
+</script>
+-->
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -119,16 +119,17 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-item-canvas-001.html grid-item-canvas-001-ref.html
 skip-if(Android) == grid-item-button-001.html grid-item-button-001-ref.html
 == grid-item-table-stretch-001.html grid-item-table-stretch-001-ref.html
 == grid-item-table-stretch-002.html grid-item-table-stretch-002-ref.html
 == grid-item-table-stretch-003.html grid-item-table-stretch-003-ref.html
 == grid-item-table-stretch-004.html grid-item-table-stretch-004-ref.html
 == grid-item-fieldset-stretch-001.html grid-item-fieldset-stretch-001-ref.html
 skip-if(Android) == grid-item-video-stretch-001.html grid-item-video-stretch-001-ref.html # Huh, Android doesn't have webm support?
+skip-if(Android) == grid-item-video-stretch-002.html grid-item-video-stretch-002-ref.html # Huh, Android doesn't have webm support?
 == grid-item-input-stretch-001.html grid-item-input-stretch-001-ref.html
 == grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003-ref.html # ditto
 skip-if(!gtkWidget) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004-ref.html # ditto