Bug 1418727 part 3 - [css-grid] Reftest updates.
☠☠ backed out by c8de338c0f72 ☠ ☠
authorMats Palmgren <mats@mozilla.com>
Thu, 07 Dec 2017 18:44:57 +0100
changeset 395633 1d41ae02660f3b361612520f2c5231b01b858cd1
parent 395632 440408ffbb8c77def7c86e2cfffad999315e5b49
child 395634 2dba9f7cb4fa093225a500d0c7325d2541f2e04c
push id33049
push usercsabou@mozilla.com
push dateFri, 08 Dec 2017 09:57:17 +0000
treeherdermozilla-central@437bfd403b76 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1418727
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1418727 part 3 - [css-grid] Reftest updates. MozReview-Commit-ID: GdypwZUhCgL
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
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-canvas-001-ref.html
layout/reftests/css-grid/grid-item-canvas-001.html
layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.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-normal-004-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.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-ratio-stretch-006-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html
layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html
layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html
layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html
layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
layout/reftests/css-grid/grid-item-table-stretch-002.html
layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html
layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
@@ -26,41 +26,41 @@ span {
   min-height:0;
 }
 </style>
 </head>
 <body>
 
 <div class="grid">
   <span>a</span>
-  <span style="width:28px">IAmReallyWideAndTheBorderShouldSurroundMe</span>
+  <span style="width:-moz-max-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
 </div>
 
 <pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
 <div class="grid">
   <span>a</span>
   <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span>
   <span>c</span>
   <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
   <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
   <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
 </div>
 
 <pre>Now the same tests for 'height':</pre>
 
 <div class="grid" style="margin-bottom:50px;">
   <span>a</span>
-  <span style="font-size:72px;width:28px;height:28px">IAmReallyTall</span>
+  <span style="font-size:72px;width:-moz-max-content;height:-moz-max-content">IAmReallyTall</span>
   <span>c</span>
   <span>d</span>
 </div>
 
-The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
+The border shouldn't shrink-wrap the text vertically below, due to definite "height" values:
 <div class="grid">
   <span>a</span>
-  <span style="font-size:72px; height:10%;width:28px">IAmReallyTall</span>
+  <span style="font-size:72px; height:10%;width:-moz-max-content">IAmReallyTall</span>
   <span>c</span>
-  <span style="font-size:72px; height:10px;width:28px">SameHere</span>
-  <span style="font-size:72px; height:40px;width:28px">SameHere</span>
+  <span style="font-size:72px; height:10px;width:-moz-max-content">SameHere</span>
+  <span style="font-size:72px; height:40px;width:-moz-max-content">SameHere</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
@@ -48,17 +48,17 @@ span {
 
 <div class="grid" style="margin-bottom:50px;">
   <span>a</span>
   <span style="font-size:72px">IAmReallyTall</span>
   <span>c</span>
   <span>d</span>
 </div>
 
-The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
+The border shouldn't shrink-wrap the text vertically below, due to definite "height" values:
 <div class="grid">
   <span>a</span>
   <span style="font-size:72px; height:10%">IAmReallyTall</span>
   <span>c</span>
   <span style="font-size:72px; height:10px">SameHere</span>
   <span style="font-size:72px; height:40px">SameHere</span>
 </div>
 
--- a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
@@ -35,41 +35,41 @@ pre {
   float: left;
 }
 </style>
 </head>
 <body>
 
 <div class="grid" style="margin-left:0">
   <span>a</span>
-  <span style="height:28px">IAmReallyWideAndTheBorderShouldSurroundMe</span>
+  <span style="height:-moz-max-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
 </div>
 
 <pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre>
 <div class="grid">
   <span>a</span>
   <span style="height: 130%;">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span>
   <span>c</span>
   <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
   <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
   <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
 </div>
 
 <pre>Now the same tests for 'width':</pre>
 
 <div class="grid" style="margin-bottom:50px;">
   <span>a</span>
-  <span style="font-size:72px;height:28px;width:28px">IAmReallyTall</span>
+  <span style="font-size:72px;height:-moz-max-content;width:-moz-max-content">IAmReallyTall</span>
   <span>c</span>
   <span>d</span>
 </div>
 
 <pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
 <div class="grid">
   <span>a</span>
-  <span style="font-size:72px; width:10%;height:28px">IAmReallyTall</span>
+  <span style="font-size:72px; width:10%;height:-moz-max-content">IAmReallyTall</span>
   <span>c</span>
-  <span style="font-size:72px; width:10px;height:28px">SameHere</span>
-  <span style="font-size:72px; width:40px;height:28px">SameHere</span>
+  <span style="font-size:72px; width:10px;height:-moz-max-content">SameHere</span>
+  <span style="font-size:72px; width:40px;height:-moz-max-content">SameHere</span>
 </div>
 
 </body>
 </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
@@ -27,23 +27,23 @@ body,html { color:black; background:whit
   height: 40px;
 }
 
 .definite {
   grid-template-columns: repeat(2,15px);
   grid-template-rows:    repeat(2,10px);
 }
 .min {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+.max {
   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);
@@ -87,31 +87,23 @@ body,html { color:black; background:whit
 span {
   grid-area: 1 / 1;
   font-size: 48px;
   background: grey;
   background-clip: content-box;
   border: 1px solid;
   padding: 1px 3px 5px 7px;
   margin: 3px 5px 7px 1px;
-  width: 0;
-  height: 0;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
-  width: 13px;
-  height: 3px;
 }
 .grid.max span {
   width:20px;
 }
-.larger .grid span {
-  width: 7px;
-  height: 10px;
-}
 .larger .grid .span2 {
   font-size: 32px;
   width: 20px;
   height: 32px;
 }
 .stretch.larger .grid .span2 {
   width: 33px;
   height: 39px;
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
@@ -27,40 +27,40 @@ body,html { color:black; background:whit
   height: 40px;
 }
 
 .definite {
   grid-template-columns: repeat(2,15px);
   grid-template-rows:    repeat(2,10px);
 }
 .min {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+.max {
   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(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+.larger .max {
   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.max {
   height:61px;
 }
@@ -72,27 +72,19 @@ span {
   writing-mode: vertical-rl;
   grid-area: 1 / 1;
   font-size: 48px;
   background: grey;
   background-clip: content-box;
   border: 1px solid;
   padding: 1px 3px 5px 7px;
   margin: 3px 5px 7px 1px;
-  width: 0;
-  height: 0;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
-  width: 13px;
-  height: 3px;
-}
-.larger .grid span {
-  width: 7px;
-  height: 10px;
 }
 .larger .grid .span2 {
   font-size: 32px;
   width: 20px;
   height: 32px;
 }
 .stretch.larger .grid .span2 {
   width: 33px;
--- 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
@@ -73,18 +73,18 @@ body,html { color:black; background:whit
 .larger .grid.a2 {
   width:51px;
 }
 img {
   grid-area: 1 / 1;
   border: 1px solid;
   padding: 1px 3px 5px 7px;
   margin: 3px 5px 7px 1px;
-  width: 0;
-  height: 0;
+  min-width: 0;
+  min-height: 0;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
 }
 
 x {
   grid-area: 1 / 1;
   min-width: 0;
@@ -151,74 +151,74 @@ document.body.appendChild(wrap);
 
 </script>
 
 
 <script>
 var imgSizes =
 [
   ['0px', '0px'],
-  ['0px', '0px'],
+  ['20px', '32px'],
   ['2px', '3px'],
-  ['2px', '3px'],
-  ['0px', '0px'],
+  ['20px', '32px'],
   ['0px', '0px'],
-  ['2px', '3px'],
-  ['2px', '3px'],
-  ['0px', '0px'],
-  ['2px', '3px'],
-  ['0px', '0px'],
+  ['20px', '32px'],
   ['2px', '3px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
-  ['6px', '10px'],
-  ['6px', '10px'],
   ['20px', '32px'],
   ['20px', '32px'],
-  ['6px', '10px'],
-  ['6px', '10px'],
+  ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['6px', '10px'],
   ['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'],
   ['0px', '0px'],
   ['0px', '0px'],
   ['13px', '3px'],
   ['13px', '3px'],
   ['0px', '0px'],
   ['0px', '0px'],
   ['13px', '3px'],
   ['13px', '3px'],
-  ['0px', '0px'],
-  ['13px', '3px'],
-  ['0px', '0px'],
-  ['13px', '3px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['20px', '32px'],
   ['7px', '10px'],
   ['7px', '10px'],
   ['33px', '39px'],
   ['33px', '39px'],
   ['7px', '10px'],
   ['7px', '10px'],
   ['22px', '32px'],
   ['33px', '39px'],
-  ['7px', '10px'],
+  ['20px', '32px'],
   ['33px', '39px'],
-  ['7px', '10px'],
+  ['20px', '32px'],
   ['22px', '32px'],
   ['20px', '32px'],
   ['33px', '39px'],
   ['20px', '32px'],
   ['22px', '32px'],
 ];
 var imgs = document.querySelectorAll('img');
 for (var i = 0; i < imgs.length; ++i) {
--- 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
@@ -29,40 +29,40 @@ body,html { color:black; background:whit
   height: 40px;
 }
 
 .definite {
   grid-template-columns: repeat(2,15px);
   grid-template-rows:    repeat(2,10px);
 }
 .min {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+.max {
   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(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+.larger .max {
   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;
 }
 
 img {
   grid-area: 1 / 1;
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html
@@ -69,41 +69,22 @@ span {
   background-clip: content-box;
   border: 1px solid;
   padding: 1px 3px 5px 7px;
   margin: 0;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
 }
+
 .larger .grid .span2 {
-  font-size: 32px;
-}
-
-.larger .grid span {
-  align-self:center;
-  justify-self:center;
-}
-.larger .grid .span2 {
-  font-size: 32px;
+  font-size: 16px;
   width: 20px;
   height: 32px;
 }
-.stretch.larger .grid .span2 {
-  align-self:center;
-  justify-self:center;
-}
-.stretch.larger .grid.sz .span2 {
-  align-self:center;
-  justify-self:center;
-}
-.stretch.larger .grid.definite .span2 {
-  align-self:center;
-  justify-self:center;
-}
 
 x {
   grid-area: 1 / 1;
   min-width: 0;
   min-height: 0;
   align-self: stretch;
   justify-self: stretch;
   background: cyan;
@@ -112,63 +93,73 @@ c {
   display: block;
   width: 20px;
   height: 32px;
 }
 
 br {
   clear: both;
 }
+
+.larger .center > span {
+  justify-self: center;
+  align-self: center;
+}
+.larger .ml4 > span {
+  margin-left: 4px;
+}
   </style>
 </head>
 <body>
 
 <div id="tests">
 <div class="grid"><x></x><span><c>X</c></span></div>
 <div class="grid definite"><x></x><span><c>X</c></span></div>
-<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
-<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid center"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid center definite"><x></x><span class="span2"><c>X</c></span></div>
 
 <div class="grid sz"><x></x><span><c>X</c></span></div>
 <div class="grid sz definite"><x></x><span><c>X</c></span></div>
-<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
-<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid ml4 sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid center sz definite"><x></x><span class="span2"><c>X</c></span></div>
 
 <br>
 
 <div class="grid min"><x></x><span><c>X</c></span></div>
-<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid center min"><x></x><span class="span2"><c>X</c></span></div>
 <div class="grid sz min"><x></x><span><c>X</c></span></div>
-<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid ml4 sz min"><x></x><span class="span2"><c>X</c></span></div>
 
 <div class="grid max"><x></x><span><c>X</c></span></div>
-<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid center max"><x></x><span class="span2"><c>X</c></span></div>
 <div class="grid sz max"><x></x><span><c>X</c></span></div>
-<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid ml4 sz max"><x></x><span class="span2"><c>X</c></span></div>
 
 <br>
 
 </div>
 
 <script>
 var tests = document.getElementById('tests');
 
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
+/* TODO: sort out https://bugs.chromium.org/p/chromium/issues/detail?id=789927 first
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch';
 wrap.appendChild(n);
 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>
 
 </body></html>
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
@@ -72,17 +72,17 @@ span {
   border: 1px solid;
   padding: 1px 3px 5px 7px;
   margin: auto;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
 }
 .larger .grid .span2 {
-  font-size: 32px;
+  font-size: 16px;
 }
 
 x {
   grid-area: 1 / 1;
   min-width: 0;
   min-height: 0;
   align-self: stretch;
   justify-self: stretch;
@@ -132,23 +132,25 @@ br {
 var tests = document.getElementById('tests');
 
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
+/* TODO: sort out https://bugs.chromium.org/p/chromium/issues/detail?id=789927 first
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch';
 wrap.appendChild(n);
 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>
 
 </body></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,23 +18,21 @@ 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-min { grid-template-columns: 15px; width: 15px; }
-.c-max { 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: 15px; height: 15px; }
-.r-max { 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;
 }
 y {
   position: absolute;
   grid-area: 2 / 1 / 3 / 2;
@@ -50,38 +48,39 @@ y {
 }
 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; }
 .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>
 
 <br>
 
-<div class="grid c-min"><y></y><span><x>X</x></span></div>
-<div class="grid c-min"><y></y><span><x>X</x></span></div>
-<div class="grid c-30" style="width:30px"><y style="width:30px"></y><span><x>X</x></span></div>
-<div class="grid c-min"><y></y><span><x>X</x></span></div>
-<div class="grid c-min"><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>
+<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-max"><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>
@@ -102,55 +101,55 @@ span { width:15px; }
 <div class="grid r r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r r-max"><y></y><span><x>X</x></span></div>
 
 <br>
 
-<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
-
-<br>
-
-<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
-<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
-
-<br>
-
-<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
-<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
-<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
-
-<br>
-
 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
-<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
 
 <br>
 
 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
-<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
 
 <br>
 
 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
-<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
 <div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
 
 </body></html>
--- a/layout/reftests/css-grid/grid-item-button-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-button-001-ref.html
@@ -4,30 +4,42 @@
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
   <title>Reference: stretching/clamping button item</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { font:16px/1 monospace; }
 
+.grid2 {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  margin-bottom:20px;
+  margin-right:20px;
+  border:1px solid;
+}
 .grid {
   display: block;
   float: left;
   margin-bottom:20px;
   margin-right:20px;
   border:1px solid;
   line-height: 0;
 }
 button {
   border: 1px solid;
   padding: 0;
   margin: 0;
-  vertical-align:top;
+  vertical-align: top;
+  box-sizing: border-box;
+  min-width: 0;
 }
 button:nth-child(1n) { background: blue; }
 button:nth-child(2n) { background: grey; }
 button:nth-child(3n) { background: tan; }
 button:nth-child(4n) { background: silver; }
 .sz > button {
   width:20px; height:10px;
 }
@@ -39,51 +51,56 @@ button:nth-child(4n) { background: silve
 }
 .sz.t2 > button {
   width:10px; height:20px;
 }
 a30 {
   display: inline-block;
   height: 0;
   width: 30px;
-  margin-left: 5px;
-  text-align: right;
+  direction: rtl;
+}
+a10 {
+  display: inline-block;
+  height: 0;
+  width: 10px;
+  direction: rtl;
 }
 .rel > button {
   position:absolute;
 }
   </style>
 </head>
 <body>
 
 <div class="grid sz">
-<button>AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:15px">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:15px">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>
+<button>&nbsp;&nbsp;</button><button style="margin-left:-5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:15px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:-5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:15px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button></div>
 
 <div class="grid sz t2">
-<button>AB</button><button style="margin-left:5px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:25px">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:25px">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>
+<button>&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:25px">&nbsp;&nbsp;</button><button style="margin-left:25px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:25px">&nbsp;&nbsp;</button><button style="margin-left:25px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button></div>
 
-<div class="grid" style="width:215px">
-<button style="width:10px">AB</button><button style="width:30px;margin-left:5px">AB</button><button style="width:10px;margin-left:5px">AB</button><a30><button style="background:silver">AB</button></a30><button style="width:10px;margin-left:5px">AB</button><button style="width:30px;margin-left:5px">AB</button><button style="width:10px;margin-left:5px">AB</button><a30><button style="background:silver;">AB</button></a30></div>
+<div class="grid2" style="width:215px">
+<button style="width:10px">&nbsp;&nbsp;</button><button style="width:30px">&nbsp;&nbsp;</button><a10><button style="background:tan">&nbsp;&nbsp;</button></a10><a30><button style="background:silver">&nbsp;&nbsp;</button></a30><button style="width:10px">&nbsp;&nbsp;</button><button style="width:30px">&nbsp;&nbsp;</button><a10><button>&nbsp;&nbsp;</button></a10><a30><button style="background:silver;">&nbsp;&nbsp;</button></a30></div>
 
 <div class="grid">
-<button>AB</button><button>AB</button><br><button style="background:tan">AB</button><button style="background:silver">AB</button></div>
+<button>&nbsp;&nbsp;</button><button>&nbsp;&nbsp;</button><br><button style="background:tan">&nbsp;&nbsp;</button><button style="background:silver">&nbsp;&nbsp;</button></div>
 
 <div class="grid rel" style="width:100px; height:100px; position:relative">
-<button style="top:0;width:50px;height:50px">AB</button><button style="top:0;right:0;height:50px">&nbsp;&nbsp;</button><button style="bottom:0;width:50px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
+<button style="top:0;width:50px;height:50px">&nbsp;&nbsp;</button><button style="top:0;right:0;height:50px">&nbsp;&nbsp;</button><button style="bottom:0;width:50px;">&nbsp;&nbsp;</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
 
 <div class="grid rel" style="height:40px; position:relative">
-<button style="left:0;top:0;height:20px">AB</button><button style="top:0;right:0;height:20px">AB</button><button style="left:0;bottom:0;">AB</button><button style="bottom:0;right:0">AB</button><button style="position:static;visibility:hidden">AB</button><button style="position:static;visibility:hidden">AB</button>
+<button style="left:0;top:0;height:20px">&nbsp;&nbsp;</button><button style="top:0;right:0;height:20px">&nbsp;&nbsp;</button><button style="left:0;bottom:0;">&nbsp;&nbsp;</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button><button style="position:static;visibility:hidden">&nbsp;&nbsp;</button><button style="position:static;visibility:hidden">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid sz t2 mw">
-<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>
+<button>&nbsp;&nbsp;</button><button>&nbsp;&nbsp;</button><button style="margin-left:15px">&nbsp;&nbsp;</button><button style="margin-left:20px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button>&nbsp;&nbsp;</button><button style="margin-left:15px">&nbsp;&nbsp;</button><button style="margin-left:20px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</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>
+<button>&nbsp;&nbsp;</button><button style="margin-left:-25px">&nbsp;&nbsp;</button><button style="margin-left:-35px">&nbsp;&nbsp;</button><button style="margin-left:-5px">&nbsp;&nbsp;</button><button style="margin-left:5px">&nbsp;&nbsp;</button><button style="margin-left:-25px">&nbsp;&nbsp;</button><button style="margin-left:-35px">&nbsp;&nbsp;</button><button style="margin-left:-5px">&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>
+<button style="top:0;width:40px;height:40px">&nbsp;&nbsp;</button><button style="top:0;right:0;height:40px">&nbsp;&nbsp;</button><button style="bottom:0;width:40px;">&nbsp;&nbsp;</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>
+<button style="top:0;width:40px;height:40px">&nbsp;&nbsp;</button><button style="top:0;right:0;height:40px">&nbsp;&nbsp;</button><button style="bottom:0;width:40px;">&nbsp;&nbsp;</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
@@ -6,16 +6,17 @@
 <html><head>
   <meta charset="utf-8">
   <title>CSS Grid Test: stretching/clamping button item</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-button-001-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { font:16px/1 monospace; }
 
 .grid {
   display: grid;
   float: left;
   grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
   grid-gap: 5px;
   margin-bottom:20px;
   margin-right:20px;
@@ -50,111 +51,111 @@ button:nth-child(4n) { background: silve
 .jend { justify-self: end; }
 .aend { align-self: end; }
 .end { justify-self: end; align-self: end; }
   </style>
 </head>
 <body>
 
 <div class="grid sz">
-<button>AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
-<button class="end">AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid sz t2">
-<button>AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
-<button class="end">AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid">
-<button>AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid" style="grid: auto/auto auto; grid-gap: 0;">
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid" style="grid: 50px 50px/50px 50px; grid-gap: 0;">
-<button>AB</button>
+<button>&nbsp;&nbsp;</button>
 <button class="jend">&nbsp;&nbsp;</button>
-<button class="aend">AB</button>
+<button class="aend">&nbsp;&nbsp;</button>
 <button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid" style="grid: minmax(auto,20px) 20px/auto auto; grid-gap: 0;">
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid sz t2 mw">
-<button>AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
-<button class="end">AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid mw40">
-<button>AB</button>
-<button>AB</button>
-<button class="jend">AB</button>
-<button class="jend">AB</button>
-<button class="aend">AB</button>
-<button class="aend">AB</button>
-<button class="end">AB</button>
-<button class="end">AB</button>
+<button>&nbsp;&nbsp;</button>
+<button>&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="aend">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
+<button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid max40" style="grid:50px 50px/50px 50px; grid-gap: 0;">
-<button>AB</button>
+<button>&nbsp;&nbsp;</button>
 <button class="jend">&nbsp;&nbsp;</button>
-<button class="aend">AB</button>
+<button class="aend">&nbsp;&nbsp;</button>
 <button class="end">&nbsp;&nbsp;</button>
 </div>
 
 <div class="grid max40" style="grid:50px 50px/50px 50px; place-items:stretch; grid-gap: 0;">
-<button>AB</button>
+<button>&nbsp;&nbsp;</button>
 <button class="jend">&nbsp;&nbsp;</button>
-<button class="aend">AB</button>
+<button class="aend">&nbsp;&nbsp;</button>
 <button class="end">&nbsp;&nbsp;</button>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-canvas-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-canvas-001-ref.html
@@ -33,18 +33,25 @@ canvas {
 <body>
 
 <div class="block sz">
 <canvas></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div>
 
 <div class="block sz t2">
 <canvas></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div>
 
-<div class="block" style="height:150px; width:215px">
-<canvas style="width:10px;height:5px;"></canvas><canvas style="width:30px;height:15px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;vertical-align:bottom;margin-top:145px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;vertical-align:bottom;margin-top:135px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;vertical-align:bottom;margin-top:145px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;vertical-align:bottom;margin-top:135px;margin-left:5px"></canvas></div>
+<br clear=all>
+<br clear=all>
+
+<div class="block" style="height:150px; width:215px; white-space:pre">
+<canvas style="width:195px; height:150px; background:black"></canvas><canvas style="width:220px; height:150px; background:tan"></canvas></div>
+
 
 <div class="block" style="height:300px; width:600px"><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas></div>
 
-<div class="block" style="height:60px; width:600px">
-<canvas style="height:30px"></canvas><canvas style="height:30px;margin-left:480px"></canvas><canvas style="height:30px"></canvas><canvas style="height:30px;margin-left:480px"></canvas></div>
+<br clear=all>
+<br clear=all>
+
+<div class="block" style="height:60px; width:600px; white-space:pre">
+<span style="display:inline-block; height:60px; margin-top:-90px"><canvas style="background:tan; vertical-align:bottom"></canvas><canvas style="background:black; vertical-align:bottom"></canvas></span></div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-canvas-001.html
+++ b/layout/reftests/css-grid/grid-item-canvas-001.html
@@ -62,16 +62,19 @@ canvas:nth-child(4n) { background: black
 <canvas class="end"></canvas>
 <canvas class="end"></canvas>
 <canvas></canvas>
 <canvas class="jend"></canvas>
 <canvas class="aend"></canvas>
 <canvas class="end"></canvas>
 </div>
 
+<br clear=all>
+<br clear=all>
+
 <div class="grid">
 <canvas></canvas>
 <canvas></canvas>
 <canvas class="jend"></canvas>
 <canvas class="jend"></canvas>
 <canvas class="aend"></canvas>
 <canvas class="aend"></canvas>
 <canvas class="end"></canvas>
@@ -80,16 +83,19 @@ canvas:nth-child(4n) { background: black
 
 <div class="grid" style="grid: auto/auto auto; grid-gap: 0;">
 <canvas></canvas>
 <canvas class="jend"></canvas>
 <canvas class="aend"></canvas>
 <canvas class="end"></canvas>
 </div>
 
+<br clear=all>
+<br clear=all>
+
 <div class="grid" style="grid: minmax(auto,30px) 30px/auto auto; grid-gap: 0">
 <canvas></canvas>
 <canvas class="jend"></canvas>
 <canvas class="aend"></canvas>
 <canvas class="end"></canvas>
 </div>
 
 </body>
--- a/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
@@ -52,30 +52,30 @@ input {
 <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>
 <div class="grid"><input class="vmaa ac" style="width:190px"></div>
-<div class="grid"><input class="vr vma10" style="width:190px; height:25px"></div>
-<div class="grid"><input class="vr vmaa ac" style="width:190px; height:28px"></div>
-<div class="grid"><input class="vr p vma10" style="width:182px; height:17px"></div>
-<div class="grid"><input class="vr p vmaa ac" style="width:182px; height:20px"></div>
+<div class="grid"><input class="vr vma10" style="width:190px;"></div>
+<div class="grid"><input class="vr vmaa" style="width:190px;"></div>
+<div class="grid"><input class="vr p vma10" style="width:182px;"></div>
+<div class="grid"><input class="vr p vmaa" style="width:182px;"></div>
 
 <div class="grid"><input class="mxw m" style="height:20px"></div>
 <div class="grid"><input class="mxw hma10 je" style="height:20px"></div>
 <div class="grid"><input class="mxw hmaa jc" style="height:20px"></div>
 <div class="grid"><input class="mxw vr hma10 je" style="width:10px; height:20px"></div>
 <div class="grid"><input class="mxw vr" style="height:28px"></div>
 
 <div class="grid"><input class="mxh m je" style="width:190px"></div>
 <div class="grid"><input class="mxh hma10 je"></div>
 <div class="grid"><input class="mxh hmaa jc"></div>
 <div class="grid"><input class="mxh vr hmaa jc" style="width:10px"></div>
 <div class="grid"><input class="mxh vr" style="width:198px"></div>
 
-<div class="grid" style="grid:2px/2px; padding:0;"><input style="width:0;height:0"></div>
-<div class="grid" style="grid:2px/2px; padding:0;"><input style="width:0;height:0"></div>
+<div class="grid" style="grid:auto/auto; padding:0;"><input></div>
+<div class="grid" style="grid:auto/auto; padding:0;"><input></div>
 
 </body>
 </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,44 +39,44 @@ 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; ">
+<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; width:292px">
 <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; ">
+<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; width:292px">
 <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:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; ">
+<div class="grid w8" style="grid:4px 10px 4px 2px 2px / repeat(7, 8px); grid-gap:8px; width:152px">
 <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>
 
-<div class="grid" style="grid:repeat(3, 8px) / repeat(7, 32px); grid-gap:16px; ">
+<div class="grid" style="grid:8px 10px 8px 2px 2px / repeat(7, 32px); grid-gap:16px; ">
 <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>
 
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html
@@ -20,62 +20,62 @@ x { width:32px; height:2px; background:c
 .w24 > x { width:24px; }
 .w8  > x { width:8px; }
 .w4  > x { width:4px; }
 
   </style>
 </head>
 <body>
 
-<div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;">
+<div class="grid" style="grid: minmax(auto, 24px) minmax(auto, 10px) minmax(auto, 24px) / repeat(7, minmax(auto, 32px)); grid-column-gap: 10px;">
 <div style="height:24px; width:2px; background:cyan; grid-row:1"></div>
 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
 <div style="height:24px; grid-row:3"></div>
 <x style="grid-row:4"></x>
 </div>
 
 <br>
 
-<div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;">
+<div class="grid w24" style="grid: minmax(auto, 32px) minmax(auto, 10px) minmax(auto, 32px) / repeat(7, minmax(auto, 24px)); grid-column-gap: 10px;">
 <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; ">
+<div class="grid w4" style="grid: minmax(auto, 8px) minmax(auto, 10px) minmax(auto, 8px) / repeat(7, minmax(auto, 4px)); grid-column-gap:32px; ">
 <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; ">
+<div class="grid w4" style="grid: minmax(auto, 32px) minmax(auto, 10px) minmax(auto, 32px) / repeat(7, minmax(auto, 4px)); grid-column-gap:32px; ">
 <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:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; ">
+<div class="grid w8" style="grid: repeat(3, minmax(auto, 4px)) / repeat(7, minmax(auto, 8px)); grid-gap:8px; ">
 <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>
 
-<div class="grid" style="grid:repeat(3, 8px) / repeat(7, 32px); grid-gap:16px; ">
+<div class="grid" style="grid: repeat(3, minmax(auto, 8px)) / repeat(7, minmax(auto, 32px)); grid-gap:16px; ">
 <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>
 
--- 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
@@ -17,17 +17,19 @@
 }
 .r { grid: 4px / 32px; }
 
 .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; }
+.w20 { width: 20px; min-width: 0px; }
+.w16 { width: 16px; }
+.w10 { width: 10px; }
 .mw20 { min-width: 20px }
 .mw0 { min-width: 0px }
 
 .h20 { height: 20px; min-height: 0px; }
 .mh20 { min-height: 20px }
 .mh0 { min-height: 0px }
 
   </style>
@@ -37,109 +39,109 @@
 <div class="grid r"><img></div>
 <div class="grid r"><img class="start"></div>
 <div class="grid r"><img class="sa"></div>
 <div class="grid r"><img class="sa mxw10"></div>
 <div class="grid r"><img class="na"></div>
 <div class="grid r"><img class="na mxw2"></div>
 
 <pre><!--min-height:20px--></pre>
-<div class="grid r"><img class="mh20"></div>
-<div class="grid r"><img class="mh20 mxw10"></div>
-<div class="grid r"><img class="start mh20"></div>
-<div class="grid r"><img class="start mh20 mxw10"></div>
-<div class="grid r"><img class="sa mh20"></div>
-<div class="grid r"><img class="sa mh20 mxw10"></div>
-<div class="grid r"><img class="na mh20"></div>
-<div class="grid r"><img class="na mh20 mxw10"></div>
+<div class="grid r mh20"><img class="mh20"></div>
+<div class="grid r mh20"><img class="mh20 mxw10"></div>
+<div class="grid r mh20"><img class="start mh20"></div>
+<div class="grid r mh20"><img class="start mh20 mxw10"></div>
+<div class="grid r mh20"><img class="sa mh20"></div>
+<div class="grid r mh20"><img class="sa mh20 mxw10"></div>
+<div class="grid r mh20"><img class="na mh20"></div>
+<div class="grid r mh20"><img class="na mh20 mxw10"></div>
 
 <pre><!--min-height:0--></pre>
 <div class="grid r"><img class="mh0"></div>
 <div class="grid r"><img class="mh0 mxw10"></div>
 <div class="grid r"><img class="start mh0"></div>
 <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"><img></div>
+<div class="grid w16"><img></div>
 <div class="grid"><img class="mxw2"></div>
-<div class="grid"><img class="start"></div>
+<div class="grid w16"><img class="start"></div>
 <div class="grid"><img class="start mxw2"></div>
-<div class="grid"><img class="sa"></div>
+<div class="grid w16"><img class="sa"></div>
 <div class="grid"><img class="sa mxw2"></div>
-<div class="grid"><img class="na"></div>
+<div class="grid w16"><img class="na"></div>
 <div class="grid"><img class="na mxw2"></div>
 
 <pre><!--min-width:20px--></pre>
-<div class="grid"><img class="mw20"></div>
-<div class="grid"><img class="mw20 mxh10"></div>
-<div class="grid"><img class="start mw20"></div>
-<div class="grid"><img class="start mw20 mxh10"></div>
-<div class="grid"><img class="sa mw20"></div>
-<div class="grid"><img class="sa mw20 mxh10"></div>
-<div class="grid"><img class="na mw20"></div>
-<div class="grid"><img class="na mw20 mxh10"></div>
+<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"><img class="mw0"></div>
-<div class="grid"><img class="mw0 mxh10"></div>
-<div class="grid"><img class="start mw0"></div>
-<div class="grid"><img class="start mw0 mxh10"></div>
-<div class="grid"><img class="sa mw0"></div>
-<div class="grid"><img class="sa mw0 mxh10"></div>
-<div class="grid"><img class="na mw0"></div>
-<div class="grid"><img class="na mw0 mxh10"></div>
+<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>
 
 <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>
 <div class="grid r"><img class="sa w20 mxh2"></div>
 <div class="grid r"><img class="na w20"></div>
 <div class="grid r"><img class="na w20 mxh2"></div>
 
 <pre><!--width:20px--></pre>
 
-<div class="grid"><img class="start w20"></div>
-<div class="grid"><img class="start w20 mxh10"></div>
-<div class="grid"><img class="start w20"></div>
-<div class="grid"><img class="start w20 mxh10"></div>
-<div class="grid"><img class="sa w20"></div>
-<div class="grid"><img class="sa w20 mxh10"></div>
-<div class="grid"><img class="na w20"></div>
-<div class="grid"><img class="na w20 mxh10"></div>
+<div class="grid mw20"><img class="start w20"></div>
+<div class="grid mw20"><img class="start w20 mxh10"></div>
+<div class="grid mw20"><img class="start w20"></div>
+<div class="grid mw20"><img class="start w20 mxh10"></div>
+<div class="grid mw20"><img class="sa w20"></div>
+<div class="grid mw20"><img class="sa w20 mxh10"></div>
+<div class="grid mw20"><img class="na w20"></div>
+<div class="grid mw20"><img class="na w20 mxh10"></div>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid r"><img class="h20"></div>
-<div class="grid r"><img class="h20 mxw10"></div>
-<div class="grid r"><img class="start h20"></div>
-<div class="grid r"><img class="start h20 mxw10"></div>
-<div class="grid r"><img class="as h20"></div>
-<div class="grid r"><img class="as h20 mxw10"></div>
-<div class="grid r"><img class="an h20"></div>
-<div class="grid r"><img class="an h20 mxw10"></div>
+<div class="grid r mh20"><img class="h20"></div>
+<div class="grid r mh20"><img class="h20 mxw10"></div>
+<div class="grid r mh20"><img class="start h20"></div>
+<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"><img class="h20"></div>
+<div class="grid mw20"><img class="h20"></div>
 <div class="grid"><img class="h20 mxw2"></div>
-<div class="grid"><img class="start h20"></div>
-<div class="grid"><img class="start h20 mxw10"></div>
-<div class="grid"><img class="as h20"></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"><img class="an h20"></div>
-<div class="grid"><img class="an h20 mxw10"></div>
+<div class="grid mw20"><img class="an h20"></div>
+<div class="grid w10"><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'],
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
@@ -9,20 +9,20 @@
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
   <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html">
   <style type="text/css">
 * { vertical-align: bottom; }
 .grid {
   display: inline-grid;
   border: 3px solid grey;
-  grid: 32px / 4px;
+  grid: minmax(auto, 32px) / minmax(auto, 4px);
   margin-right:20px;
 }
-.r { grid: 4px / 32px; }
+.r { grid: minmax(auto, 4px) / minmax(auto, 32px); }
 
 button {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
 }
 
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html
@@ -86,47 +86,47 @@ img {
 <img class="aend">
 <img class="end">
 </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'],
+  ['16px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
-  ['8px', '20px'],
+  ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
   ['16px', '20px'],
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html
@@ -86,48 +86,48 @@ img {
 <img class="aend">
 <img class="end">
 </div>
 
 <script>
 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
 var imgSizes =
 [
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['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', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
--- 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,34 +23,34 @@ 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">
+<div class="grid" style="grid: 8px / 20px; width:24px">
 <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">
+<div class="grid" style="grid: 8px / 10px; width:24px">
 <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:24px; width:10px">
 </div>
@@ -59,58 +59,58 @@ body,html { color:black; background:whit
 </div>
 <div class="grid" style="grid: 96px / 10px">
 <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:24px; width:10px">
 </div>
 
-<div class="grid" style="grid: 4px / 10px">
+<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>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
 <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">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
 <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">
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:24px">
 <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: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">
+<div class="grid" style="grid: 8px / 20px; width:24px">
 <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">
+<div class="grid" style="grid: 8px / 10px; width:24px">
 <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:24px; width:10px">
 </div>
@@ -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: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:24px; width:10px">
 </div>
 
-<div class="grid" style="grid: 4px / 10px">
+<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>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
 <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">
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:24px">
 <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">
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:24px">
 <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
@@ -18,128 +18,128 @@ body,html { color:black; background:whit
   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">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png">
 </div>
 
-<div class="grid" style="grid: 8px / 20px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 <img src="support/lime-24x2.png">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png">
 </div>
 
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:start">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="align-self:start">
 </div>
 
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="justify-self:start">
 </div>
-<div class="grid" style="grid: 8px / 10px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start">
 </div>
 
 <br>
 
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:start safe;">
 </div>
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:start unsafe;">
 </div>
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:end safe;">
 </div>
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:end unsafe;">
 </div>
 
-<div class="grid" style="grid: 4px / 10px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start safe">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px">
 <img src="support/lime-24x2.png" style="justify-self:start unsafe">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px">
 <img src="support/lime-24x2.png" style="justify-self:end safe">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 80px">
 <img src="support/lime-24x2.png" style="justify-self:end unsafe">
 </div>
 
 <br>
 
 <div class="vertical-tests">
 
-<div class="grid" style="grid: 96px / 20px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png">
 </div>
 
-<div class="grid" style="grid: 8px / 20px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 <img src="support/lime-24x2.png">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png">
 </div>
 
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:start">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="align-self:start">
 </div>
 
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="justify-self:start">
 </div>
-<div class="grid" style="grid: 8px / 10px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start">
 </div>
 
 <br>
 
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:start safe;">
 </div>
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:start unsafe;">
 </div>
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:end safe;">
 </div>
-<div class="grid" style="grid: 96px / 10px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)">
 <img src="support/lime-2x24.png" style="align-self:end unsafe;">
 </div>
 
-<div class="grid" style="grid: 4px / 10px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start safe">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px">
 <img src="support/lime-24x2.png" style="justify-self:start unsafe">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px">
 <img src="support/lime-24x2.png" style="justify-self:end safe">
 </div>
-<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 80px">
 <img src="support/lime-24x2.png" style="justify-self:end unsafe">
 </div>
 
 </div>
 
 </body>
 </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
@@ -12,16 +12,20 @@ body,html { color:black; background:whit
 
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
   align-items: start;
   justify-items: start;
 }
+img {
+  min-width: 0;
+  min-height: 0;
+}
 .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:96px">
 </div>
@@ -41,47 +45,49 @@ body,html { color:black; background:whit
 </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">
+<div class="grid" style="grid: 8px / 10px; width:24px">
 <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:20px; height:96px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<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">
+<div class="grid" style="grid: 8px / 20px; width:24px">
 <img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: 8px / 100px; width:120px; height:10px">
 <img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
-<div class="grid" style="grid: 48px / 6px">
+<div class="grid" style="grid: 48px / 6px; width:7px; height:80px">
 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<!--
+<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: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
+<div class="grid" style="grid: 4px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px">
+-->
+<div class="grid" style="grid: 4px / 10px; width:72px">
 <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">
@@ -103,46 +109,48 @@ body,html { color:black; background:whit
 </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">
+<div class="grid" style="grid: 8px / 10px; width:24px">
 <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:20px; height:96px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<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">
+<div class="grid" style="grid: 8px / 20px; width:24px">
 <img src="support/lime-24x2.png" style="width:20px; height:8px">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: 8px / 100px; width:120px; height:10px">
 <img src="support/lime-24x2.png" style="width:100px; height:10px">
 </div>
 
-<div class="grid" style="grid: 48px / 6px">
+<div class="grid" style="grid: 48px / 6px; width:7px; height:80px">
 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<!--
+<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: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
+<div class="grid" style="grid: 4px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px">
 </div>
-<div class="grid" style="grid: 4px / 10px">
+-->
+<div class="grid" style="grid: 4px / 10px; width:72px">
 <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
@@ -19,132 +19,136 @@ body,html { color:black; background:whit
   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">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png" style="max-width:4px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="max-height:12px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 <img src="support/lime-24x2.png" style="max-width:12px">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="max-height:6px">
 </div>
 
-<div class="grid" style="grid: 96px / 20px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
 </div>
 
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 </div>
-<div class="grid" style="grid: 8px / 10px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 </div>
 
 <br>
 
-<div class="grid" style="grid: 96px / 20px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png" style="min-width:10px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="min-width:6px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 <img src="support/lime-24x2.png" style="min-height:2px">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="min-height:10px">
 </div>
 
-<div class="grid" style="grid: 48px / 6px">
+<div class="grid" style="grid: minmax(auto, 48px) / minmax(auto, 6px)">
 <img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<!--
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
 </div>
 
-<div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 100px)">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
 </div>
-<div class="grid" style="grid: 4px / 10px">
+-->
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
 </div>
 
 <br>
 
 <div class="vertical-tests">
 
-<div class="grid" style="grid: 96px / 20px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png" style="max-width:4px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="max-height:12px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 <img src="support/lime-24x2.png" style="max-width:12px">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="max-height:6px">
 </div>
 
-<div class="grid" style="grid: 96px / 20px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
 </div>
 
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 </div>
-<div class="grid" style="grid: 8px / 10px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 </div>
 
 <br>
 
-<div class="grid" style="grid: 96px / 20px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 <img src="support/lime-2x24.png" style="min-width:10px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="min-width:6px">
 </div>
 
-<div class="grid" style="grid: 8px / 20px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 <img src="support/lime-24x2.png" style="min-height:2px">
 </div>
-<div class="grid" style="grid: 8px / 100px">
+<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 <img src="support/lime-24x2.png" style="min-height:10px">
 </div>
 
-<div class="grid" style="grid: 48px / 6px">
+<div class="grid" style="grid: minmax(auto, 48px) / minmax(auto, 6px)">
 <img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
 </div>
-<div class="grid" style="grid: 96px / 4px">
+<!--
+<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 <img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
 </div>
 
-<div class="grid" style="grid: 8px / 100px">
-<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 100px)">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
 </div>
-<div class="grid" style="grid: 4px / 10px">
+-->
+<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)">
 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
 </div>
 
 </div>
 
 </body>
 </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 auto auto auto auto;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px 26px 26px 26px 26px;
   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">
+<div class="grid" style="grid-template-columns: 10px 30px 10px 30px 10px 30px 10px 30px 26px 16px">
 <img>
 <img>
 <img class="jend">
 <img class="jend">
 <img class="aend">
 <img class="aend">
 <img class="end">
 <img class="end">
@@ -96,48 +96,48 @@ var imgSizes =
   ['8px', '20px'],
   ['28px', '20px'],
   ['8px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
   ['8px', '20px'],
   ['16px', '20px'],
-  ['16px', '20px'],
+  ['24px', '20px'],
   ['16px', '20px'],
-  ['16px', '20px'],
+  ['24px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
   ['8px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
   ['8px', '20px'],
   ['16px', '20px'],
-  ['16px', '20px'],
+  ['24px', '20px'],
   ['16px', '20px'],
-  ['16px', '20px'],
+  ['24px', '20px'],
   ['16px', '20px'],
   ['8px', '20px'],
   ['28px', '20px'],
   ['8px', '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']
 ];
 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;
 }
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html
@@ -10,17 +10,17 @@
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-006-ref.html">
   <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 auto auto auto auto;
+  grid: auto-flow auto / minmax(auto, 10px)  minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) auto auto auto auto;
   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; }
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-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 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid: auto-flow 18px / 22px 30px 22px 30px 22px 30px 22px 30px 22px 22px 22px 22px;
   grid-gap: 5px;
   border:1px solid;
 }
 img:nth-child(1n) { background: blue; }
 img:nth-child(2n) { background: grey; }
 img:nth-child(3n) { background: tan; }
 img:nth-child(4n) { background: black; }
 img {
@@ -57,17 +57,17 @@ img {
 <img class="end">
 <img class="end">
 <img>
 <img class="jend">
 <img class="aend">
 <img class="end">
 </div>
 
-<div class="grid">
+<div class="grid" style="grid-template-columns: 22px 30px 22px 30px 22px 30px 22px 30px 15px">
 <img>
 <img>
 <img class="jend">
 <img class="jend">
 <img class="aend">
 <img class="aend">
 <img class="end">
 <img class="end">
@@ -86,48 +86,48 @@ img {
 <img class="aend">
 <img class="end">
 </div>
 
 <script>
 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
 var imgSizes =
 [
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['20px', '8px'],
-  ['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', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
   ['20px', '16px'],
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html
@@ -10,17 +10,17 @@
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-007-ref.html">
   <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 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid: auto-flow auto / minmax(auto, 10px)  minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) auto auto auto auto;
   grid-gap: 5px;
   border:1px solid;
 }
 img:nth-child(1n) { background: blue; }
 img:nth-child(2n) { background: grey; }
 img:nth-child(3n) { background: tan; }
 img:nth-child(4n) { background: black; }
 img {
--- 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
@@ -21,129 +21,133 @@
 
 iframe {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
 }
 
-.w20 { width: 20px min-width: 0px; }
+.w20 { width: 20px; min-width: 0px; }
+.w22 { width: 22px; }
 .mw20 { min-width: 20px }
 .mw0 { min-width: 0px }
+.wi { 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>
 </head>
 <body>
 
-<div class="grid r"><iframe></iframe></div>
-<div class="grid r"><iframe class="start"></iframe></div>
-<div class="grid r"><iframe class="sa"></iframe></div>
+<div class="grid r wi"><iframe></iframe></div>
+<div class="grid r wi"><iframe class="start"></iframe></div>
+<div class="grid r wi"><iframe class="sa"></iframe></div>
 <div class="grid r"><iframe class="sa mxw10"></iframe></div>
-<div class="grid r"><iframe class="na"></iframe></div>
+<div class="grid r wi"><iframe class="na"></iframe></div>
 <div class="grid r"><iframe class="na mxw2"></iframe></div>
 
 <pre><!--min-height:20px--></pre>
-<div class="grid r" style="margin-right:0"><iframe class="mh20"></iframe></div>
-<div class="grid r"><iframe class="mh20 mxw10"></iframe></div>
-<div class="grid r"><iframe class="start mh20"></iframe></div>
-<div class="grid r"><iframe class="start mh20 mxw10"></iframe></div>
-<div class="grid r"><iframe class="sa mh20"></iframe></div>
-<div class="grid r"><iframe class="sa mh20 mxw10"></iframe></div>
-<div class="grid r"><iframe class="na mh20"></iframe></div>
-<div class="grid r"><iframe class="na mh20 mxw10"></iframe></div>
+<div class="grid h22 r wi" style="margin-right:0"><iframe class="h20"></iframe></div>
+<div class="grid h22 r"><iframe class="mh20 mxw10"></iframe></div>
+<div class="grid h22 r wi"><iframe class="start mh20"></iframe></div>
+<div class="grid h22 r"><iframe class="start mh20 mxw10"></iframe></div>
+<div class="grid h22 r wi"><iframe class="sa mh20"></iframe></div>
+<div class="grid h22 r"><iframe class="sa mh20 mxw10"></iframe></div>
+<div class="grid h22 r wi"><iframe class="na mh20"></iframe></div>
+<div class="grid h22 r"><iframe class="na mh20 mxw10"></iframe></div>
 
 <pre><!--min-height:0--></pre>
-<div class="grid r"><iframe class="mh0"></iframe></div>
+<div class="grid r wi"><iframe class="mh0"></iframe></div>
 <div class="grid r"><iframe class="mh0 mxw10"></iframe></div>
-<div class="grid r"><iframe class="start mh0"></iframe></div>
+<div class="grid r wi"><iframe class="start mh0"></iframe></div>
 <div class="grid r"><iframe class="start mh0 mxw10"></iframe></div>
-<div class="grid r"><iframe class="sa mh0"></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"><iframe class="na mh0"></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"><iframe></iframe></div>
+<div class="grid wi"><iframe></iframe></div>
 <div class="grid"><iframe class="mxw2"></iframe></div>
-<div class="grid"><iframe class="start"></iframe></div>
+<div class="grid wi"><iframe class="start"></iframe></div>
 <div class="grid"><iframe class="start mxw2"></iframe></div>
-<div class="grid"><iframe class="sa"></iframe></div>
+<div class="grid wi"><iframe class="sa"></iframe></div>
 <div class="grid"><iframe class="sa mxw2"></iframe></div>
-<div class="grid"><iframe class="na"></iframe></div>
+<div class="grid wi"><iframe class="na"></iframe></div>
 <div class="grid"><iframe class="na mxw2"></iframe></div>
 
 <pre><!--min-width:20px--></pre>
-<div class="grid"><iframe class="mw20"></iframe></div>
-<div class="grid"><iframe class="mw20 mxh10"></iframe></div>
-<div class="grid"><iframe class="start mw20"></iframe></div>
-<div class="grid" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div>
-<div class="grid" style="margin-top:10px"><iframe class="sa mw20"></iframe></div>
-<div class="grid" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div>
-<div class="grid"><iframe class="na mw20"></iframe></div>
-<div class="grid" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div>
+<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" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div>
 
 <pre><!--min-width:0--></pre>
-<div class="grid"><iframe class="mw0"></iframe></div>
-<div class="grid"><iframe class="mw0 mxh10"></iframe></div>
-<div class="grid"><iframe class="start mw0"></iframe></div>
-<div class="grid" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div>
-<div class="grid" style="margin-top:10px"><iframe class="sa mw0"></iframe></div>
-<div class="grid" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div>
-<div class="grid"><iframe class="na mw0 mxw10"></iframe></div>
-<div class="grid" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div>
+<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>
 
 <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>
 <div class="grid r"><iframe class="sa w20 mxh2"></iframe></div>
 <div class="grid r"><iframe class="na w20"></iframe></div>
 <div class="grid r"><iframe class="na w20 mxh2"></iframe></div>
 
 <pre><!--width:20px--></pre>
 
-<div class="grid"><iframe class="start w20"></iframe></div>
-<div class="grid"><iframe class="start w20 mxh10"></iframe></div>
-<div class="grid"><iframe class="start w20"></iframe></div>
-<div class="grid"><iframe class="start w20 mxh10"></iframe></div>
-<div class="grid"><iframe class="sa w20"></iframe></div>
-<div class="grid"><iframe class="sa w20 mxh10"></iframe></div>
-<div class="grid"><iframe class="na w20"></iframe></div>
-<div class="grid"><iframe class="na w20 mxh10"></iframe></div>
+<div class="grid w22"><iframe class="start w20"></iframe></div>
+<div class="grid w22"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid w22"><iframe class="start w20"></iframe></div>
+<div class="grid w22"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid w22"><iframe class="sa w20"></iframe></div>
+<div class="grid w22"><iframe class="sa w20 mxh10"></iframe></div>
+<div class="grid w22"><iframe class="na w20"></iframe></div>
+<div class="grid w22"><iframe class="na w20 mxh10"></iframe></div>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid r"><iframe class="h20"></iframe></div>
-<div class="grid r"><iframe class="h20 mxw10"></iframe></div>
-<div class="grid r"><iframe class="start h20"></iframe></div>
-<div class="grid r"><iframe class="start h20 mxw10"></iframe></div>
-<div class="grid r"><iframe class="as h20"></iframe></div>
-<div class="grid r"><iframe class="as h20 mxw10"></iframe></div>
-<div class="grid r"><iframe class="an h20"></iframe></div>
-<div class="grid r"><iframe class="an h20 mxw10"></iframe></div>
+<div class="grid h22 r wi"><iframe class="h20"></iframe></div>
+<div class="grid h22 r"><iframe class="h20 mxw10"></iframe></div>
+<div class="grid h22 r wi"><iframe class="start h20"></iframe></div>
+<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"><iframe class="h20"></iframe></div>
-<div class="grid"><iframe class="h20 mxw2"></iframe></div>
-<div class="grid"><iframe class="start h20"></iframe></div>
-<div class="grid"><iframe class="start h20 mxw10"></iframe></div>
-<div class="grid"><iframe class="as h20"></iframe></div>
-<div class="grid"><iframe class="as h20 mxw2"></iframe></div>
-<div class="grid"><iframe class="an h20"></iframe></div>
-<div class="grid"><iframe class="an h20 mxw10"></iframe></div>
+<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>
 
 <script>
 var iframeSizes =
 [
   ['30px', '2px'],
   ['30px', '2px'],
   ['30px', '2px'],
   ['10px', '2px'],
--- a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html
@@ -9,20 +9,20 @@
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
   <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html">
   <style type="text/css">
 * { vertical-align: top; }
 .grid {
   display: inline-grid;
   border: 3px solid grey;
-  grid: 32px / 4px;
+  grid: minmax(auto, 32px) / minmax(auto, 4px);
   margin-right:20px;
 }
-.r { grid: 4px / 32px; }
+.r { grid: minmax(auto, 4px) / minmax(auto, 32px); }
 
 iframe {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
 }
 
--- a/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html
+++ b/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html
@@ -29,18 +29,18 @@ body,html { color:black; background:whit
 x { display:block; width:110px; height:5px; background:grey; }
 .h .grid x { width:5px; height:110px; }
 
 br { clear:both; }
   </style>
 </head>
 <body>
 
-<div class="grid"><span class=""><x></x></span></div>
-<div class="grid"><span class="m"><x></x></span></div>
+<div class="grid"><span class="" style="width:78px"><x></x></span></div>
+<div class="grid"><span class="m" style="width:68px"><x></x></span></div>
 <div class="grid"><span class="ma" style="margin-left:5px"><x></x></span></div>
 
 <br>
 
 <div class="h">
 
 <div class="grid"><span class="" style="flex:1"><x></x></span></div>
 <div class="grid"><span class="m" style="flex:1"><x></x></span></div>
--- 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,18 +11,19 @@
 * { 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;
 }
-.r { grid: 4px / 32px; }
+.r { grid: 4px / 32px; width: 32px;}
 
 table {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
 }
 caption { border: 1px dashed blue; }
@@ -30,16 +31,17 @@ caption { justify-self: stretch; } /* XX
 x { display:block; width:16px; height:16px; }
 t { display:block; width:6px; height:6px; }
 
 .w20 { width: 20px }
 .mxw2 { width: 2px }
 .mxw10 { width: 10px }
 .mw20 { width: 20px }
 .wfill { width:32px }
+.w6 { width: 6px }
 
 .h20 { height: 20px }
 .mxh10 { height: 10px }
 .mxh2 { height: 2px }
 .mh20 { height: 20px }
 .h16 { height: 16px } /* XXX to workaround bug 307866 */
 .h8 { height: 8px } /* XXX to workaround bug 307866 */
 .w8 { width: 8px } /* XXX to workaround bug 307866 */
@@ -90,103 +92,103 @@ t { display:block; width:6px; height:6px
 <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>
 
 <pre><!----></pre>
 
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<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="as"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><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"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<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>
 
 <pre><!--min-width:0--></pre>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<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><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 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>
 
 <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"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 an 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="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>
 
 <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>
 
 <pre><!--height:20px--></pre>
 
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<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><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
-<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 an 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>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-item-table-stretch-002.html
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002.html
@@ -9,20 +9,20 @@
   <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-table-stretch-002-ref.html">
   <style type="text/css">
 * { vertical-align: bottom; }
 .grid {
   display: inline-grid;
   border: 3px solid grey;
-  grid: 32px / 4px;
+  grid: minmax(auto,32px) / minmax(auto,4px);
   margin-right:20px;
 }
-.r { grid: 4px / 32px; }
+.r { grid: minmax(auto,4px) / minmax(auto,32px); }
 
 table {
   border: 1px solid;
   padding: 0;
   margin: 0;
   background: lightgrey;
 }
 caption { border: 1px dashed blue; }
--- a/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html
@@ -59,21 +59,22 @@ y {
 .w7 .c2 { grid-template-columns: 80px 0 minmax(0px, 1fr); }
 .w7 .c3 { grid-template-columns: 80px 80px minmax(0px, 1fr); }
 .w7 .c4 { grid-template-columns: 0px 100px minmax(0px, 1fr); }
 
 .w8 .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
 .w8 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
 .w8 .c3 { grid-template-columns: 56px 56px minmax(0, 1fr); }
 .w8 .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
+.w8 .c5 { grid-template-columns: 0px 40px 100px; }
 
 .w9 .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
 .w9 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
 .w9 .c3 { grid-template-columns: 32px 32px minmax(0, 1fr); }
-.w9 .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
+.w9 .c4 { grid-template-columns: 0px 100px 100px; }
 
 .wA .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
 .wA .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
 .wA .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); }
 .wA .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
 
 .wB .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
 .wB .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
@@ -141,38 +142,38 @@ y {
 <div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 </div>
 
 <div class="w8" style="width:142px">
 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
-<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span style="width:50px"><a></a><a></a><a></a><a></a></span><y></y></div>
 </div>
 
 <div class="w9" style="width:82px">
 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
-<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span style="width:50px"><a></a><a></a><a></a><a></a></span><y></y></div>
 </div>
 
 <div class="wA" style="width:22px">
 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
-<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span style="width:50px"><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 </div>
 
 <div class="wB" style="width:2px">
 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
-<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span style="width:50px"><a></a><a></a><a></a><a></a></span><y></y></div>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -107,19 +107,19 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-item-intrinsic-ratio-normal-003.html grid-item-intrinsic-ratio-normal-003-ref.html
 == grid-item-intrinsic-ratio-normal-004.html grid-item-intrinsic-ratio-normal-004-ref.html
 == grid-item-intrinsic-ratio-normal-005.html grid-item-intrinsic-ratio-normal-005-ref.html
 == grid-item-intrinsic-size-normal-001.html grid-item-intrinsic-size-normal-001-ref.html
 == grid-item-intrinsic-size-normal-002.html grid-item-intrinsic-size-normal-002-ref.html
 == grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
 == grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
 == grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
-== grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
+# == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976
 == grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
-== grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
+# == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976
 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
 == grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
 == grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
 == grid-item-overflow-stretch-003.html grid-item-overflow-stretch-003-ref.html
 == grid-item-overflow-stretch-004.html grid-item-overflow-stretch-004-ref.html
 == grid-item-overflow-stretch-005.html grid-item-overflow-stretch-005-ref.html
 == grid-item-overflow-stretch-006.html grid-item-overflow-stretch-006-ref.html
 == grid-item-canvas-001.html grid-item-canvas-001-ref.html