# HG changeset patch
# User Mats Palmgren <mats@mozilla.com>
# Date 1519786574 -3600
# Node ID f9419024217dbfe3f337e965df3b039b1795ee7a
# Parent  284fe43373e799f85ed9f2035cae2338905418e2
Bug 1427608 - [css-grid] Adjust test expectations.  r=dholbert

diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html
--- a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html
@@ -31,18 +31,18 @@ br { clear:both; }
 <script>
 var coltest = [
 "height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
 "width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
 "height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
 "min-height:4px", "min-height:4px; max-width: 30px"
 ];
 var results = [
-"48px", "48px", "24px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
-"24px", "48px", "30px"
+"24px", "48px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px",
+"24px", "24px", "24px"
 ];
 
 var h3 = document.createElement('h3');
 h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
 document.body.appendChild(h3);
 for (var i = 0; i < coltest.length; ++i) {
   var grid = document.createElement('div');
   grid.setAttribute("class","grid col");
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html
--- a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html
@@ -33,17 +33,17 @@ var coltest = [
 "12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
 ];
 var rowtest = [
 "width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
 "height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
 "width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
 ];
 var results = [
-"24px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
+"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
 ];
 
 var h3 = document.createElement('h3');
 h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
 document.body.appendChild(h3);
 for (var i = 0; i < rowtest.length; ++i) {
   var grid = document.createElement('div');
   grid.setAttribute("class","grid row");
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
--- a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
@@ -32,17 +32,17 @@ var coltest = [
 "12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
 ];
 var rowtest = [
 "width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
 "height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
 "width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
 ];
 var results = [
-"24px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
+"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
 ];
 
 var h3 = document.createElement('h3');
 h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
 document.body.appendChild(h3);
 for (var i = 0; i < rowtest.length; ++i) {
   var grid = document.createElement('div');
   grid.setAttribute("class","grid row");
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
@@ -58,23 +58,29 @@ body,html { color:black; background:whit
 }
 
 .stretch .grid {
   align-items: stretch;
   justify-items: stretch;
 }
 
 .a.grid {
+  width: 34px;
+}
+.a.grid.max {
   width: 54px;
 }
 .larger .a.grid {
+  width: 51px;
+}
+.larger .a.grid.max {
   width: 64px;
 }
 .a2.grid {
-  width: 38px;
+  width: 31px;
 }
 .larger .a2.grid {
   width: 51px;
 }
 .grid.sz.max {
   width: 40px;
 }
 .larger .grid.max.a span {
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
@@ -7,77 +7,34 @@
   <meta charset="utf-8">
   <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(2,minmax(auto, 15px));
-  grid-template-rows:    repeat(2,minmax(auto, 10px));
   grid-gap: 1px;
   align-items: start;
   justify-items: start;
   float: left;
   border: 1px dashed;
   margin-right: 16px;
   margin-bottom: 14px;
 }
 .sz {
   width: 40px;
   height: 40px;
 }
 
-.definite {
-  grid-template-columns: repeat(2,15px);
-  grid-template-rows:    repeat(2,10px);
-}
-.min {
-  grid-template-columns: repeat(2,minmax(min-content, 15px));
-  grid-template-rows:    repeat(2,minmax(min-content, 10px));
-}
-.max {
-  grid-template-columns: repeat(2,minmax(max-content, 15px));
-  grid-template-rows:    repeat(2,minmax(max-content, 10px));
-}
-
-.larger .grid {
-  grid-template-columns: repeat(2,minmax(auto, 25px));
-  grid-template-rows:    repeat(2,minmax(auto, 28px));
-}
-.larger .definite {
-  grid-template-columns: repeat(2,25px);
-  grid-template-rows:    repeat(2,28px);
-}
-.larger .min {
-  grid-template-columns: repeat(2,minmax(min-content, 25px));
-  grid-template-rows:    repeat(2,minmax(min-content, 28px));
-}
-.larger .max {
-  grid-template-columns: repeat(2,minmax(max-content, 25px));
-  grid-template-rows:    repeat(2,minmax(max-content, 28px));
-}
-
 .stretch .grid {
   align-items: stretch;
   justify-items: stretch;
 }
-.grid.a {
-  width:54px;
-}
-.grid.a2 {
-  width:38px;
-}
-.larger .grid.a {
-  width:64px;
-}
-.larger .grid.a2 {
-  width:51px;
-}
+
 img {
   grid-area: 1 / 1;
   border: 1px solid;
   padding: 1px 3px 5px 7px;
   margin: 3px 5px 7px 1px;
   min-width: 0;
   min-height: 0;
 }
@@ -150,37 +107,37 @@ wrap.appendChild(n);
 document.body.appendChild(wrap);
 
 </script>
 
 
 <script>
 var imgSizes =
 [
-  ['0px', '0px'],
-  ['20px', '32px'],
-  ['2px', '3px'],
   ['20px', '32px'],
-  ['0px', '0px'],
   ['20px', '32px'],
-  ['2px', '3px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
-  ['6px', '10px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
-  ['6px', '10px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
@@ -220,11 +177,88 @@ var imgSizes =
   ['20px', '32px'],
   ['22px', '32px'],
 ];
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   imgs[i].style.width = imgSizes[i][0];
   imgs[i].style.height = imgSizes[i][1];
 }
+
+
+var track_sizes =
+[
+  ['18px 10px / 18px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['18px 10px / 18px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['50px 10px / 38px 15px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['50px 10px / 38px 15px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 11px / 25px 14px'],
+  ['28px 28px / 25px 25px'],
+  ['24.5px 24.5px / 19.5px 19.5px'],
+  ['28px 28px / 25px 25px'],
+  ['50px 28px / 38px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 19.5px 19.5px'],
+  ['50px 28px / 38px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 19.5px 19.5px'],
+  ['18px 10px / 18px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['18px 10px / 18px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['10px 10px / 15px 15px'],
+  ['50px 10px / 38px 15px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['50px 10px / 38px 15px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 18.5px 18.5px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['28px 11px / 25px 14px'],
+  ['28px 28px / 25px 25px'],
+  ['24.5px 24.5px / 19.5px 19.5px'],
+  ['28px 28px / 25px 25px'],
+  ['50px 28px / 38px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 19.5px 19.5px'],
+  ['50px 28px / 38px 25px'],
+  ['28px 28px / 25px 25px'],
+  ['50px 0px / 38px 1px'],
+  ['24.5px 24.5px / 19.5px 19.5px'],
+];
+
+var grids = document.querySelectorAll('.grid');
+for (var i = 0; i < grids.length; ++i) {
+  grids[i].style.grid = track_sizes[i];
+  grids[i].style.gridGap = "1px";
+}
+
+
 </script>
 
 </body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
@@ -138,22 +138,33 @@ document.body.appendChild(wrap);
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
 </script>
 
-<!--  For generating image 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";
+document.body.onload = function() {
+  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)
+
+  var grids = document.querySelectorAll('.grid');
+  var s = '  [\n';
+  for (var i = 0; i < grids.length; ++i) {
+    let cs = window.getComputedStyle(grids[i]);
+    s += "  ['"+ cs.gridTemplateRows + " / " + cs.gridTemplateColumns + "'],\n";
+  }
+  s += ']';
+  console.log(s)
 }
-s += ']';
-console.log(s)
 </script>
 -->
 
 </body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
@@ -18,17 +18,16 @@ body,html { color:black; background:whit
   grid-template-rows: repeat(2,20px);
   align-items: start;
   justify-items: start;
   border: 1px dashed;
   margin-right: 16px;
   margin-bottom: 14px;
 }
 .c-auto { grid-template-columns: 15px; width: 15px; }
-.c-1530 { grid-template-columns: 15px; width: 30px; }
 .c-30 { grid-template-columns: 30px; width: 30px; }
 .r-auto { grid-template-rows: 15px; height: 15px; }
 .r-min { grid-template-rows: 40px; height: 40px; }
 .r-max { grid-template-rows: 40px; height: 40px; }
 span {
   grid-area: 1 / 1;
   font-size: 48px;
   background: grey;
@@ -47,27 +46,28 @@ y {
   height: auto;
 }
 br { clear: both; }
 
 x { display:block; width:30px; height:40px; }
 span { width:15px; }
 .r span { width:20px; }
 .grid.c-30 span, .r.grid.c-30 span { width:30px; }
+.grid.r-auto span { height:40px; }
 .r span { height:15px; }
 .r.r-min span, .r.r-max span { height:40px; }
   </style>
 </head>
 <body>
 
-<div class="grid c-1530"><y></y><span><x>X</x></span></div>
-<div class="grid c-auto"><y></y><span><x>X</x></span></div>
-<div class="grid c-30"><y style="width:30px"></y><span><x>X</x></span></div>
-<div class="grid c-1530"><y></y><span><x>X</x></span></div>
-<div class="grid c-1530"><y></y><span><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span style="width:30px"><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
 
 <br>
 
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
@@ -77,21 +77,21 @@ span { width:15px; }
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 <div class="grid c-30"><y></y><span><x>X</x></span></div>
 
 <br>
 
-<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span style="width:20px"><x>X</x></span></div>
 
 <br>
 
 <div class="grid r r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r r-min"><y></y><span><x>X</x></span></div>
diff --git 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
--- 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
@@ -39,35 +39,35 @@ x { width:32px; height:2px; background:c
 <div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
 <div style="height:32px; grid-row:3"></div>
 <x style="grid-row:4"></x>
 </div>
 
 <br>
 
-<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; width:292px">
+<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; width:220px">
 <div style="height:8px; width:2px; background:cyan; grid-row:1"></div>
 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
 <div style="height:8px; grid-row:3"></div>
 <x style="grid-row:4"></x>
 </div>
 
 <br>
 
-<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; width:292px">
+<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; width:220px">
 <div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
 <div style="height:32px; grid-row:3"></div>
 <x style="grid-row:4"></x>
 </div>
 
 <br>
 
-<div class="grid w8" style="grid:4px 10px 4px 2px 2px / repeat(7, 8px); grid-gap:8px; width:152px">
+<div class="grid w8" style="grid:4px 10px 4px 2px 2px / repeat(7, 8px); grid-gap:8px; width:104px">
 <div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
 <div style="height:4px; grid-row:3"></div>
 <x style="grid-row:4"></x>
 </div>
 
 <br>
 
@@ -110,61 +110,62 @@ var imgSizes =
   ['24px', '16px'],
   ['24px', '16px'],
   ['24px', '16px'],
   ['24px', '32px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '8px'],
-  ['4px', '4px'],
-  ['4px', '8px'],
-  ['4px', '4px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
   ['4px', '8px'],
-  ['4px', '8px'],
-  ['4px', '8px'],
-  ['4px', '8px'],
+  ['4px', '16px'],
+  ['4px', '16px'],
   ['4px', '8px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '4px'],
   ['4px', '32px'],
-  ['4px', '4px'],
-  ['4px', '32px'],
-  ['4px', '4px'],
-  ['4px', '32px'],
+  ['16px', '16px'],
+  ['16px', '32px'],
+  ['16px', '16px'],
+  ['16px', '32px'],
   ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '16px'],
   ['4px', '32px'],
   ['4px', '4px'],
-  ['4px', '4px'],
-  ['4px', '4px'],
-  ['8px', '4px'],
-  ['4px', '4px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
   ['8px', '4px'],
   ['4px', '4px'],
-  ['8px', '4px'],
+  ['16px', '4px'],
+  ['4px', '4px'],
+  ['16px', '4px'],
   ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
+  ['8px', '16px'],
+  ['8px', '16px'],
   ['8px', '4px'],
   ['8px', '8px'],
-  ['8px', '8px'],
-  ['8px', '8px'],
+  ['16px', '16px'],
+  ['16px', '16px'],
   ['16px', '8px'],
   ['8px', '8px'],
   ['16px', '8px'],
   ['8px', '8px'],
   ['16px', '8px'],
   ['32px', '8px'],
-  ['32px', '8px'],
-  ['32px', '8px'],
+  ['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++) {
       if (as[a] != "normal" && as[a] != "stretch" &&
           js[j] != "normal" && js[j] != "stretch") {
         continue;
       }
diff --git 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
--- 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
@@ -20,16 +20,17 @@
 .start {align-self:start; justify-self:start}
 .na {align-self:start; justify-self:start}
 .sa {align-self:start; justify-self:start}
 .an {align-self:start; justify-self:start}
 .as {align-self:start; justify-self:start}
 .w20 { width: 20px; min-width: 0px; }
 .w16 { width: 16px; }
 .w10 { width: 10px; }
+.w4 { width: 4px; }
 .mw20 { min-width: 20px }
 .mw0 { min-width: 0px }
 
 .h20 { height: 20px; min-height: 0px; }
 .mh20 { min-height: 20px }
 .mh0 { min-height: 0px }
 
   </style>
@@ -60,44 +61,44 @@
 <div class="grid r"><img class="start mh0 mxw10"></div>
 <div class="grid r"><img class="sa mh0"></div>
 <div class="grid r"><img class="sa mh0 mxw10"></div>
 <div class="grid r"><img class="na mh0"></div>
 <div class="grid r"><img class="na mh0 mxw2"></div>
 
 <pre><!----></pre>
 
-<div class="grid w16"><img></div>
-<div class="grid"><img class="mxw2"></div>
-<div class="grid w16"><img class="start"></div>
-<div class="grid"><img class="start mxw2"></div>
-<div class="grid w16"><img class="sa"></div>
-<div class="grid"><img class="sa mxw2"></div>
-<div class="grid w16"><img class="na"></div>
-<div class="grid"><img class="na mxw2"></div>
+<div class="grid w4"><img></div>
+<div class="grid w4"><img class="mxw2"></div>
+<div class="grid w4"><img class="start"></div>
+<div class="grid w4"><img class="start mxw2"></div>
+<div class="grid w4"><img class="sa"></div>
+<div class="grid w4"><img class="sa mxw2"></div>
+<div class="grid w4"><img class="na"></div>
+<div class="grid w4"><img class="na mxw2"></div>
 
 <pre><!--min-width:20px--></pre>
 <div class="grid mw20"><img class="mw20"></div>
 <div class="grid mw20"><img class="mw20 mxh10"></div>
 <div class="grid mw20"><img class="start mw20"></div>
 <div class="grid mw20"><img class="start mw20 mxh10"></div>
 <div class="grid mw20"><img class="sa mw20"></div>
 <div class="grid mw20"><img class="sa mw20 mxh10"></div>
 <div class="grid mw20"><img class="na mw20"></div>
 <div class="grid mw20"><img class="na mw20 mxh10"></div>
 
 <pre><!--min-width:0--></pre>
-<div class="grid w16"><img class="mw0"></div>
-<div class="grid w10"><img class="mw0 mxh10"></div>
-<div class="grid w16"><img class="start mw0"></div>
-<div class="grid w10"><img class="start mw0 mxh10"></div>
-<div class="grid w16"><img class="sa mw0"></div>
-<div class="grid w10"><img class="sa mw0 mxh10"></div>
-<div class="grid w16"><img class="na mw0"></div>
-<div class="grid w10"><img class="na mw0 mxh10"></div>
+<div class="grid w4"><img class="mw0"></div>
+<div class="grid w4"><img class="mw0 mxh10"></div>
+<div class="grid w4"><img class="start mw0"></div>
+<div class="grid w4"><img class="start mw0 mxh10"></div>
+<div class="grid w4"><img class="sa mw0"></div>
+<div class="grid w4"><img class="sa mw0 mxh10"></div>
+<div class="grid w4"><img class="na mw0"></div>
+<div class="grid w4"><img class="na mw0 mxh10"></div>
 
 <pre><!--width:20px--></pre>
 
 <div class="grid r"><img class="w20"></div>
 <div class="grid r"><img class="w20 mxh10"></div>
 <div class="grid r"><img class="start w20"></div>
 <div class="grid r"><img class="start w20 mxh10"></div>
 <div class="grid r"><img class="sa w20"></div>
@@ -124,32 +125,32 @@
 <div class="grid r mh20"><img class="start h20 mxw10"></div>
 <div class="grid r mh20"><img class="as h20"></div>
 <div class="grid r mh20"><img class="as h20 mxw10"></div>
 <div class="grid r mh20"><img class="an h20"></div>
 <div class="grid r mh20"><img class="an h20 mxw10"></div>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid mw20"><img class="h20"></div>
-<div class="grid"><img class="h20 mxw2"></div>
-<div class="grid mw20"><img class="start h20"></div>
-<div class="grid w10"><img class="start h20 mxw10"></div>
-<div class="grid mw20"><img class="as h20"></div>
-<div class="grid"><img class="as h20 mxw2"></div>
-<div class="grid mw20"><img class="an h20"></div>
-<div class="grid w10"><img class="an h20 mxw10"></div>
+<div class="grid w4"><img class="h20"></div>
+<div class="grid w4"><img class="h20 mxw2"></div>
+<div class="grid w4"><img class="start h20"></div>
+<div class="grid w4"><img class="start h20 mxw10"></div>
+<div class="grid w4"><img class="as h20"></div>
+<div class="grid w4"><img class="as h20 mxw2"></div>
+<div class="grid w4"><img class="an h20"></div>
+<div class="grid w4"><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', '16px'],
   ['16px', '4px'],
   ['10px', '4px'],
   ['4px', '4px'],
   ['2px', '2px'],
   ['20px', '20px'],
   ['10px', '20px'],
   ['20px', '20px'],
   ['10px', '20px'],
@@ -162,21 +163,21 @@ var imgSizes =
   ['16px', '16px'],
   ['10px', '10px'],
   ['16px', '4px'],
   ['10px', '4px'],
   ['16px', '16px'],
   ['2px', '2px'],
   ['4px', '4px'],
   ['2px', '2px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
   ['2px', '2px'],
-  ['4px', '32px'],
+  ['16px', '32px'],
   ['2px', '32px'],
-  ['4px', '4px'],
+  ['16px', '16px'],
   ['2px', '2px'],
   ['20px', '20px'],
   ['20px', '10px'],
   ['20px', '20px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '20px'],
diff --git 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
--- 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
@@ -23,35 +23,35 @@ body,html { color:black; background:whit
 
 <div class="grid" style="grid: 96px / 20px">
 <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:96px; width:4px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px; width:24px">
+<div class="grid" style="grid: 8px / 20px; width:20px">
 <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:100px; height:8px">
 </div>
 
 <div class="grid" style="grid: 96px / 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:24px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
 <img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 10px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
+<div class="grid" style="grid: 8px / 10px; width:10px">
+<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:unsafe start; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
@@ -59,59 +59,59 @@ body,html { color:black; background:whit
 </div>
 <div class="grid" style="grid: 96px / 10px">
 <img src="support/lime-2x24.png" style="align-self:unsafe end; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
 <img src="support/lime-2x24.png" style="align-self:safe end; height:24px; width:10px">
 </div>
 
-<div class="grid" style="grid: 4px / 10px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; width:10px">
+<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:safe start; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px">
+<img src="support/lime-24x2.png" style="justify-self:safe start; width:24px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:unsafe end; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px">
+<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:safe end; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:10px">
+<img src="support/lime-24x2.png" style="position:relative; left:-14px; width:24px; 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:20px">
 </div>
 <div class="grid" style="grid: 96px / 4px">
 <img src="support/lime-2x24.png" style="height:96px; width:4px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px; width:24px">
+<div class="grid" style="grid: 8px / 20px; width:20px">
 <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:100px; height:8px">
 </div>
 
 <div class="grid" style="grid: 96px / 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:24px; width:4px">
 </div>
 
 <div class="grid" style="grid: 8px / 100px">
 <img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 10px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
+<div class="grid" style="grid: 8px / 10px; width:10px">
+<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:unsafe start; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
@@ -119,25 +119,25 @@ body,html { color:black; background:whit
 </div>
 <div class="grid" style="grid: 96px / 10px">
 <img src="support/lime-2x24.png" style="align-self:unsafe end; height:24px; width:10px">
 </div>
 <div class="grid" style="grid: 96px / 10px">
 <img src="support/lime-2x24.png" style="align-self:safe end; height:24px; width:10px">
 </div>
 
-<div class="grid" style="grid: 4px / 10px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; width:10px">
+<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; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:safe start; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px">
+<img src="support/lime-24x2.png" style="justify-self:safe start; width:24px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:unsafe end; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px">
+<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:safe end; width:10px; height:4px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:10px">
+<img src="support/lime-24x2.png" style="justify-self:unsafe end; width:24px; height:4px">
 </div>
 
 </div>
 
 </body>
 </html>
diff --git 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
--- 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
@@ -45,37 +45,37 @@ img {
 </div>
 <div class="grid" style="grid: 96px / 4px">
 <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:24px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 10px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
+<div class="grid" style="grid: 8px / 10px; width:10px">
+<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:20px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px; width:6px">
 <img src="support/lime-2x24.png" style="width:6px; height:96px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px; width:24px">
+<div class="grid" style="grid: 8px / 20px; width:20px">
 <img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 100px; width:120px; height:10px">
+<div class="grid" style="grid: 8px / 100px; width:100px; height:10px">
 <img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
-<div class="grid" style="grid: 48px / 6px; width:7px; height:80px">
+<div class="grid" style="grid: 48px / 6px; width:6px; height:80px">
 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
 <!--
 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 6px)">
 <img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px">
 </div>
 
 <div class="grid" style="grid: 4px / 100px">
@@ -109,37 +109,37 @@ img {
 </div>
 <div class="grid" style="grid: 96px / 4px">
 <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:24px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 10px; width:24px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:8px">
+<div class="grid" style="grid: 8px / 10px; width:10px">
+<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:20px; height:96px">
 </div>
 <div class="grid" style="grid: 96px / 4px; width:6px">
 <img src="support/lime-2x24.png" style="width:6px; height:96px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px; width:24px">
+<div class="grid" style="grid: 8px / 20px; width:20px">
 <img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 100px; width:120px; height:10px">
+<div class="grid" style="grid: 8px / 100px; width:100px; height:10px">
 <img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
-<div class="grid" style="grid: 48px / 6px; width:7px; height:80px">
+<div class="grid" style="grid: 48px / 6px; width:6px; height:80px">
 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
 <!--
 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 6px)">
 <img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px">
 </div>
 
 <div class="grid" style="grid: 4px / 100px">
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html
@@ -8,17 +8,17 @@
   <title>Reference: 'stretch' of image with zero ratio</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: grid;
   float: left;
-  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px 26px 26px 26px 26px;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px 18px 18px 18px 18px;
   grid-gap: 5px;
   border:1px solid;
   align-items: stretch;
   justify-items: stretch;
 }
 img:nth-child(1n) { background: blue; }
 img:nth-child(2n) { background: grey; }
 img:nth-child(3n) { background: tan; }
@@ -59,17 +59,17 @@ img {
 <img class="end">
 <img class="end">
 <img>
 <img class="jend">
 <img class="aend">
 <img class="end">
 </div>
 
-<div class="grid" style="grid-template-columns: 10px 30px 10px 30px 10px 30px 10px 30px 26px 16px">
+<div class="grid" style="grid-template-columns: 10px 30px 10px 30px 10px 30px 10px 30px 0px 0px 0px 0px;">
 <img>
 <img>
 <img class="jend">
 <img class="jend">
 <img class="aend">
 <img class="aend">
 <img class="end">
 <img class="end">
@@ -90,54 +90,54 @@ img {
 </div>
 
 <script>
 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
 var imgSizes =
 [
   ['8px', '20px'],
   ['28px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['24px', '20px'],
   ['16px', '20px'],
-  ['24px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['24px', '20px'],
   ['16px', '20px'],
-  ['24px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
-  ['8px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
-  ['16px', '20px']
+  ['16px', '20px'],
+  ['16px', '20px'],
 ];
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
   var img = imgs[i];
   img.style.width = imgSizes[i][0];
   img.style.height = imgSizes[i][1];
   img.src = url;
 }
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html
--- a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html
@@ -25,17 +25,19 @@ iframe {
   margin: 0;
   background: lightgrey;
 }
 
 .w20 { width: 20px; min-width: 0px; }
 .w22 { width: 22px; }
 .mw20 { min-width: 20px }
 .mw0 { min-width: 0px }
-.wi { width:302px }
+.wi { width:32px }
+.w4 { width:4px }
+.w300 { width:302px }
 
 .h20 { height: 20px; min-height: 0px; }
 .h22 { height: 22px; min-height: 0px; }
 .h32 { height: 32px; min-height: 0px; }
 .mh20 { min-height: 20px }
 .mh0 { min-height: 0px }
 
   </style>
@@ -66,44 +68,44 @@ iframe {
 <div class="grid r"><iframe class="start mh0 mxw10"></iframe></div>
 <div class="grid r wi"><iframe class="sa mh0"></iframe></div>
 <div class="grid r"><iframe class="sa mh0 mxw10"></iframe></div>
 <div class="grid r wi"><iframe class="na mh0"></iframe></div>
 <div class="grid r"><iframe class="na mh0 mxw2"></iframe></div>
 
 <pre><!----></pre>
 
-<div class="grid wi"><iframe></iframe></div>
-<div class="grid"><iframe class="mxw2"></iframe></div>
-<div class="grid wi"><iframe class="start"></iframe></div>
-<div class="grid"><iframe class="start mxw2"></iframe></div>
-<div class="grid wi"><iframe class="sa"></iframe></div>
-<div class="grid"><iframe class="sa mxw2"></iframe></div>
-<div class="grid wi"><iframe class="na"></iframe></div>
-<div class="grid"><iframe class="na mxw2"></iframe></div>
+<div class="grid w4"><iframe></iframe></div>
+<div class="grid w4"><iframe class="mxw2"></iframe></div>
+<div class="grid w4"><iframe class="start"></iframe></div>
+<div class="grid w4"><iframe class="start mxw2"></iframe></div>
+<div class="grid w4"><iframe class="sa"></iframe></div>
+<div class="grid w4"><iframe class="sa mxw2"></iframe></div>
+<div class="grid w4"><iframe class="na"></iframe></div>
+<div class="grid w4"><iframe class="na mxw2"></iframe></div>
 
 <pre><!--min-width:20px--></pre>
-<div class="grid wi"><iframe class="mw20"></iframe></div>
-<div class="grid wi"><iframe class="mw20 mxh10"></iframe></div>
-<div class="grid wi"><iframe class="start mw20"></iframe></div>
-<div class="grid wi" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div>
-<div class="grid wi" style="margin-top:10px"><iframe class="sa mw20"></iframe></div>
-<div class="grid wi" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div>
-<div class="grid wi"><iframe class="na mw20"></iframe></div>
+<div class="grid w22"><iframe class="mw20"></iframe></div>
+<div class="grid w22"><iframe class="mw20 mxh10"></iframe></div>
+<div class="grid w22"><iframe class="start mw20"></iframe></div>
+<div class="grid w22" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div>
+<div class="grid w22" style="margin-top:10px"><iframe class="sa mw20"></iframe></div>
+<div class="grid w22" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div>
+<div class="grid w22"><iframe class="na mw20"></iframe></div>
 <div class="grid w22" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div>
 
 <pre><!--min-width:0--></pre>
-<div class="grid wi"><iframe class="mw0"></iframe></div>
-<div class="grid wi"><iframe class="mw0 mxh10"></iframe></div>
-<div class="grid wi"><iframe class="start mw0"></iframe></div>
-<div class="grid wi" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div>
-<div class="grid wi" style="margin-top:10px"><iframe class="sa mw0"></iframe></div>
-<div class="grid " style="margin-top:25px; width:12px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div>
-<div class="grid " style="width:12px"><iframe class="na mw0 mxw10"></iframe></div>
-<div class="grid wi" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div>
+<div class="grid w4"><iframe class="mw0"></iframe></div>
+<div class="grid w4"><iframe class="mw0 mxh10"></iframe></div>
+<div class="grid w4"><iframe class="start mw0"></iframe></div>
+<div class="grid w4" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div>
+<div class="grid w4" style="margin-top:10px"><iframe class="sa mw0"></iframe></div>
+<div class="grid w4" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div>
+<div class="grid w4"><iframe class="na mw0 mxw10"></iframe></div>
+<div class="grid w4" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div>
 
 <pre><!--width:20px--></pre>
 
 <div class="grid r"><iframe class="w20"></iframe></div>
 <div class="grid r"><iframe class="w20 mxh10"></iframe></div>
 <div class="grid r"><iframe class="start w20"></iframe></div>
 <div class="grid r"><iframe class="start w20 mxh10"></iframe></div>
 <div class="grid r"><iframe class="sa w20"></iframe></div>
@@ -130,107 +132,108 @@ iframe {
 <div class="grid h22 r"><iframe class="start h20 mxw10"></iframe></div>
 <div class="grid h22 r wi"><iframe class="as h20"></iframe></div>
 <div class="grid h22 r"><iframe class="as h20 mxw10"></iframe></div>
 <div class="grid h22 r wi"><iframe class="an h20"></iframe></div>
 <div class="grid h22 r"><iframe class="an h20 mxw10"></iframe></div>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid h32 wi"><iframe class="h20"></iframe></div>
-<div class="grid h32"><iframe class="h20 mxw2"></iframe></div>
-<div class="grid h32 wi"><iframe class="start h20"></iframe></div>
-<div class="grid h32" style="width:12px"><iframe class="start h20 mxw10"></iframe></div>
-<div class="grid h32 wi"><iframe class="as h20"></iframe></div>
-<div class="grid h32"><iframe class="as h20 mxw2"></iframe></div>
-<div class="grid h32 wi"><iframe class="an h20"></iframe></div>
-<div class="grid h32" style="width:12px"><iframe class="an h20 mxw10"></iframe></div>
+<div class="grid h32 w4"><iframe class="h20"></iframe></div>
+<div class="grid h32 w4"><iframe class="h20 mxw2"></iframe></div>
+<div class="grid h32 w4"><iframe class="start h20"></iframe></div>
+<div class="grid h32 w4"><iframe class="start h20 mxw10"></iframe></div>
+<div class="grid h32 w4"><iframe class="as h20"></iframe></div>
+<div class="grid h32 w4"><iframe class="as h20 mxw2"></iframe></div>
+<div class="grid h32 w4"><iframe class="an h20"></iframe></div>
+<div class="grid h32 w4"><iframe class="an h20 mxw10"></iframe></div>
 
 <script>
 var iframeSizes =
 [
   ['30px', '2px'],
-  ['30px', '2px'],
-  ['30px', '2px'],
+  ['300px', '150px'],
+  ['300px', '2px'],
   ['10px', '2px'],
-  ['30px', '2px'],
+  ['300px', '2px'],
   ['2px', '2px'],
   ['30px', '20px'],
   ['10px', '20px'],
-  ['30px', '150px'],
+  ['300px', '150px'],
   ['10px', '150px'],
-  ['30px', '20px'],
+  ['300px', '20px'],
   ['10px', '20px'],
-  ['30px', '20px'],
+  ['300px', '20px'],
   ['10px', '20px'],
   ['30px', '2px'],
   ['10px', '2px'],
-  ['30px', '150px'],
+  ['300px', '150px'],
   ['10px', '150px'],
-  ['30px', '2px'],
+  ['300px', '2px'],
   ['10px', '2px'],
-  ['30px', '2px'],
+  ['300px', '2px'],
   ['2px', '2px'],
   ['2px', '30px'],
   ['2px', '30px'],
-  ['2px', '30px'],
-  ['2px', '30px'],
+  ['300px', '150px'],
+  ['2px', '150px'],
+  ['300px', '30px'],
   ['2px', '30px'],
-  ['2px', '30px'],
-  ['2px', '30px'],
+  ['300px', '30px'],
   ['2px', '30px'],
   ['20px', '30px'],
   ['20px', '10px'],
-  ['300px', '30px'],
+  ['300px', '150px'],
   ['300px', '10px'],
   ['300px', '30px'],
   ['300px', '10px'],
   ['300px', '30px'],
   ['20px', '10px'],
   ['2px', '30px'],
   ['2px', '10px'],
-  ['300px', '30px'],
+  ['300px', '150px'],
   ['300px', '10px'],
   ['300px', '30px'],
   ['10px', '10px'],
   ['10px', '30px'],
   ['300px', '10px'],
   ['20px', '2px'],
   ['20px', '2px'],
-  ['20px', '2px'],
+  ['20px', '150px'],
+  ['20px', '10px'],
   ['20px', '2px'],
   ['20px', '2px'],
   ['20px', '2px'],
   ['20px', '2px'],
-  ['20px', '2px'],
-  ['20px', '30px'],
+  ['20px', '150px'],
   ['20px', '10px'],
-  ['20px', '30px'],
+  ['20px', '150px'],
   ['20px', '10px'],
   ['20px', '30px'],
   ['20px', '10px'],
   ['20px', '30px'],
   ['20px', '10px'],
   ['30px', '20px'],
   ['10px', '20px'],
-  ['30px', '20px'],
+  ['300px', '20px'],
   ['10px', '20px'],
   ['30px', '20px'],
   ['10px', '20px'],
   ['30px', '20px'],
   ['10px', '20px'],
   ['2px', '20px'],
   ['2px', '20px'],
-  ['2px', '20px'],
-  ['2px', '20px'],
+  ['300px', '20px'],
+  ['10px', '20px'],
   ['2px', '20px'],
   ['2px', '20px'],
   ['2px', '20px'],
   ['2px', '20px'],
 ];
+
 var iframes = document.querySelectorAll('iframe');
 for (var i = 0; i < iframes.length; ++i) {
   var iframe = iframes[i];
   iframe.style.width = iframeSizes[i][0];
   iframe.style.height = iframeSizes[i][1];
 }
 </script>
 
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
--- a/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
@@ -11,19 +11,24 @@
 * { vertical-align: bottom; }
 .grid {
   display: inline-grid;
   border: 3px solid grey;
   grid: 32px / 4px;
   margin-right:20px;
   align-items: start;
   justify-items: start;
-  width: 18px;
+  width: 4px;
 }
 .r { grid: 4px / 32px; width: 32px;}
+.r2 { grid: 38px / 32px; width: 32px;}
+.r26 { grid-template-rows:26px; }
+.r32 { grid:32px/20px; width: 20px; }
+.c18 { grid:32px/18px; width: 18px; }
+.r38 { grid: 38px / 4px; }
 
 table {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
 }
 caption { border: 1px dashed blue; }
@@ -70,125 +75,125 @@ t { display:block; width:6px; height:6px
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--min-height:20px--></pre>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h8 w8"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h8"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="end h8 w8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill as h8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill an h8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--min-height:0--></pre>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as mh0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill as mh0" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill an mh0" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!----></pre>
 
 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="" style="margin-left:-14px; margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="" style="margin-left:-14px; margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
 <div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
 <div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
 <div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--min-width:20px--></pre>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="end h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="mw20" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 mw20 mxh10" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill sa mw20" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill na mw20" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--min-width:0--></pre>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw0 mxh10"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw0 mxh10"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td class="w20"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td class="w20"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0" style="margin-top:0px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:0px"><caption><x></x></caption><td class="h8"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0" style="margin-top:0px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:0px"><caption><x></x></caption><td class="h8"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div>
+<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div>
 
 <pre><!--width:20px--></pre>
 
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
 <div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--width:20px--></pre>
 
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="hfill na w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid mw20"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 an h20 mxw10"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
+<div class="grid r38"><table cellpadding=0 cellspacing=0 class="w8 h20 mxw10"><caption class="w6"><x></x></caption><td><t></t></td></table></div>
 
 </body>
 </html>
diff --git a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
--- a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
@@ -100,17 +100,17 @@ x {
 <div class="grid t3"><span><t></t></span><x></x></div>
 <div class="grid t4"><span><t></t></span><x></x></div>
 <div class="grid t5"><span><t></t></span><x></x></div>
 <div class="grid t6"><span><t></t></span><x></x></div>
 <div class="grid t7"><span><t></t></span><x></x></div>
 <div class="grid t8"><span><t></t></span><x></x></div>
 <div class="grid t9"><span><t></t></span><x></x></div>
 <div class="grid tA"><span><t></t></span><x></x></div>
-<div class="grid tB"><span><t></t></span><x></x></div>
+<div class="grid tD" style="width:0"><span><t></t></span><x></x></div>
 
 <br clear="all">
 
 <div class="grid sz t0"><span><t></t></span><x></x></div>
 <div class="grid sz t1"><span><t></t></span><x></x></div>
 <div class="grid sz t2"><span><t></t></span><x></x></div>
 <div class="grid sz t3"><span><t></t></span><x></x></div>
 <div class="grid sz t4"><span><t></t></span><x></x></div>
diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -49,29 +49,29 @@ fails == grid-item-sizing-percent-002.ht
 == grid-item-sizing-percent-003.html grid-item-sizing-percent-003-ref.html
 == grid-item-sizing-percent-004.html grid-item-sizing-percent-004-ref.html
 == grid-item-sizing-px-001.html grid-item-sizing-percent-001-ref.html
 == grid-item-dir-001.html grid-item-dir-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
 == grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
 == grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002-ref.html
-fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
+# fails fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
 == grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html
 == grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
 == grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
 == grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html
 == grid-auto-min-sizing-transferred-size-001.html grid-auto-min-sizing-transferred-size-001-ref.html
-== grid-auto-min-sizing-transferred-size-002.html grid-auto-min-sizing-transferred-size-002-ref.html
+fails == grid-auto-min-sizing-transferred-size-002.html grid-auto-min-sizing-transferred-size-002-ref.html
 == grid-auto-min-sizing-transferred-size-003.html grid-auto-min-sizing-transferred-size-003-ref.html
-== grid-auto-min-sizing-transferred-size-004.html grid-auto-min-sizing-transferred-size-004-ref.html
+fails == grid-auto-min-sizing-transferred-size-004.html grid-auto-min-sizing-transferred-size-004-ref.html
 == grid-auto-min-sizing-min-content-min-size-001.html grid-auto-min-sizing-min-content-min-size-001-ref.html
-== grid-auto-min-sizing-min-content-min-size-002.html grid-auto-min-sizing-min-content-min-size-002-ref.html
+fails == grid-auto-min-sizing-min-content-min-size-002.html grid-auto-min-sizing-min-content-min-size-002-ref.html
 == grid-auto-min-sizing-min-content-min-size-003.html grid-auto-min-sizing-min-content-min-size-003-ref.html
-== grid-auto-min-sizing-min-content-min-size-004.html grid-auto-min-sizing-min-content-min-size-004-ref.html
+fails == grid-auto-min-sizing-min-content-min-size-004.html grid-auto-min-sizing-min-content-min-size-004-ref.html
 == grid-min-content-min-sizing-transferred-size-001.html grid-min-content-min-sizing-transferred-size-001-ref.html
 == grid-min-content-min-sizing-transferred-size-002.html grid-min-content-min-sizing-transferred-size-002-ref.html
 == grid-min-content-min-sizing-transferred-size-003.html grid-min-content-min-sizing-transferred-size-003-ref.html
 == grid-min-content-min-sizing-transferred-size-004.html grid-min-content-min-sizing-transferred-size-004-ref.html
 skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html # bug 1305716
 == grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
 == grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
 == grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html