Bug 1300369 part 13 - [css-grid] Reftests for margin-box min-size clamping.
authorMats Palmgren <mats@mozilla.com>
Sat, 05 Nov 2016 02:57:07 +0100
changeset 321260 728204430c0bf24aeb3d0f256f24827772f43430
parent 321259 e3bc6e35c8046af9a4b74737c197d799cacad149
child 321261 28219b1ad2983b16d1dbbab260aae44bb2cdd0c2
push id30920
push userphilringnalda@gmail.com
push dateSat, 05 Nov 2016 20:41:02 +0000
treeherdermozilla-central@c44c01dfd264 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1300369
milestone52.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 1300369 part 13 - [css-grid] Reftests for margin-box min-size clamping.
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
layout/reftests/css-grid/grid-container-baselines-003-ref.html
layout/reftests/css-grid/grid-container-baselines-003.html
layout/reftests/css-grid/grid-fragmentation-013-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-001.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.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-004-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.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-006-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.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-intrinsic-ratio-stretch-001-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.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-justify-content-002-ref.html
layout/reftests/css-grid/reftest.list
layout/reftests/css-grid/support/solidblue-20x32.png
--- 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:-moz-min-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
+  <span style="width:28px">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:-moz-min-content">IAmReallyTall</span>
+  <span style="font-size:72px;width:28px;height:28px">IAmReallyTall</span>
   <span>c</span>
   <span>d</span>
 </div>
 
 The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
 <div class="grid">
   <span>a</span>
-  <span style="font-size:72px; height:10%;width:-moz-min-content">IAmReallyTall</span>
+  <span style="font-size:72px; height:10%;width:28px">IAmReallyTall</span>
   <span>c</span>
-  <span style="font-size:72px; height:10px;width:-moz-min-content">SameHere</span>
-  <span style="font-size:72px; height:40px;width:-moz-min-content">SameHere</span>
+  <span style="font-size:72px; height:10px;width:28px">SameHere</span>
+  <span style="font-size:72px; height:40px;width:28px">SameHere</span>
 </div>
 
 </body>
 </html>
--- 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:-moz-min-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
+  <span style="height:28px">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:-moz-min-content">IAmReallyTall</span>
+  <span style="font-size:72px;height:28px;width:28px">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:-moz-min-content">IAmReallyTall</span>
+  <span style="font-size:72px; width:10%;height:28px">IAmReallyTall</span>
   <span>c</span>
-  <span style="font-size:72px; width:10px;height:-moz-min-content">SameHere</span>
-  <span style="font-size:72px; width:40px;height:-moz-min-content">SameHere</span>
+  <span style="font-size:72px; width:10px;height:28px">SameHere</span>
+  <span style="font-size:72px; width:40px;height:28px">SameHere</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-container-baselines-003-ref.html
+++ b/layout/reftests/css-grid/grid-container-baselines-003-ref.html
@@ -47,62 +47,67 @@ span.i { font-size:12px; grid-column:2; 
 .vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
 
 .igrid {
   display: inline-grid;
   grid: 13px repeat(3,50px) / 60px 60px;
   border: 1px solid;
   margin: 1px;
 }
+/* don't clamp grid item automatic minimum size */
+* {
+  min-width: 0;
+  min-height: 0;
+}
 .slb { align-self:last-baseline; align-content:self-end; }
 
 </style>
 </head>
 <body>
 
 A<div class="ib">
   <div class="ib" style="height:120px; width:56px;"><span
-     class="a f" style="width:1em; padding-bottom:5px;">A<br>B</span>
+     class="a f" style="width:30px; padding-bottom:5px;">A<br>B</span>
   </div><span class="i a f" style="width:54px">C<br>D</span>
 </div></div>
 
 <div class="ib" style="width:180px;">
   <div class="ib" style="height:120px; width:56px;"><span
-     class="a f" style="width:1em; padding-top:5px; margin-top:7px">A<br>B</span>
+     class="a f" style="width:30px; padding-top:5px; margin-top:7px">A<br>B</span>
   </div><span class="i a f" style="width:54px">C<br>D</span><span
      class="a f" style="width:54px; padding-top:20px">E<br>F</span>
 </div>
 
 <div class="ib" style="width:180px;">
   <div class="ib" style="height:120px; width:56px;"><span
-     class="a" style="width:1em; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span>
+     class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span>
   </div><span class="i a f" style="width:54px">C<br>D</span><span
      class="a f" style="width:54px; padding-top:20px">E<br>F</span>
 </div>
 
 
 <div class="ib" style="width:200px;">
   <div class="ib" style="height:120px; width:76px; white-space:nowrap"><span
-     class="a" style="width:32px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span
-     class="a" style="float:right; width:36px; margin-right:-2px; padding-bottom:22px; margin-top:-100px">A<br>B</span>
+     class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span
+     class="a f" style="float:right; width:30px; position:relative; left:-4px; padding-bottom:22px; margin-top:-100px">A<br>B</span>
   </div><span class="i a f" style="width:54px">C<br>D</span><span
      class="a f" style="width:54px; padding-top:20px;">E<br>F</span>
 </div>
 
 <br>
 
-<x style="position:relative; top:-33px">A</x><div class="ib" style="width:200px">
+<x style="position:relative; top:-64px">A</x><div class="ib" style="width:200px;margin-top:32px">
   <div class="ib vl" style="height:70px; width:196px;">
-    <span class="a" style="display:block; padding-block-end:15px; height:-moz-min-content">A<br>B</span>
+    <span class="a" style="display:block; padding-block-end:15px; height:1px">A<br>B</span>
   </div>
 </div><div class="ib" style="width:200px">
   <div class="ib vl" style="height:70px; width:196px;">
-    <span class="a" style="display:block; padding-block-end:15px; width:148px; height:-moz-min-content">A<br>B</span>
+    <span class="a" style="display:block; padding-block-end:15px; width:148px; height:1px">A<br>B</span>
   </div>
-</div><div class="ib" style="width:200px">
+</div><div class="ib" style="width:200px;position:relative; top:-31px">
   <div class="ib vl" style="height:70px; width:196px;">
     <span class="a" style="display:block; height:-moz-min-content; padding-block-end:15px; width:148px; height:-moz-min-content">A<br>B</span>
   </div>
 </div>
 
 <br>
 
 A<div class="igrid slb">
--- a/layout/reftests/css-grid/grid-container-baselines-003.html
+++ b/layout/reftests/css-grid/grid-container-baselines-003.html
@@ -21,16 +21,22 @@ html,body {
   grid: 13px repeat(3,50px) / 60px 60px;
   border: 1px solid;
   margin: 1px;
 }
 .grid.sfb , .igrid.sfb {
   grid: repeat(3,50px) 13px / 60px 60px;
 }
 
+/* don't clamp grid item automatic minimum size */
+.igrid *, .grid * {
+  min-width: 0;
+  min-height: 0;
+}
+
 .a {
   border: 3px solid black;
   background:lime;
 }
 
 span:nth-of-type(1) { font-size:32px; }
 span:nth-of-type(2) { font-size:36px; }
 span:nth-of-type(3) { font-size:48px; }
--- a/layout/reftests/css-grid/grid-fragmentation-013-ref.html
+++ b/layout/reftests/css-grid/grid-fragmentation-013-ref.html
@@ -31,23 +31,23 @@ br { page-break-after:always; break-afte
 </head>
 <body>
 
 <div style="padding-top:1in; background:grey">
   <div class="grid t">
     <span class="t" style="align-self:stretch"><x style="height:auto"></x></span>
   </div>
   <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
-    <span class="b"><x style="height:0.04in"></x></span>
+    <span class="b" style="min-height:0"><x style="height:0.04in"></x></span>
   </div>
 </div>
 
 <div style="padding-top:0.91in; background:grey;">
   <div class="grid t" style="height:0.9in">
     <span class="t" style="height:0.86in"><x></x></span>
   </div>
 </div>
   <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
-    <span class="b"><x style="height:0.04in"></x></span>
+    <span class="b" style="min-height:0"><x style="height:0.04in"></x></span>
   </div>
 
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+.a.grid {
+  width: 54px;
+}
+.larger .a.grid {
+  width: 64px;
+}
+.a2.grid {
+  width: 38px;
+}
+.larger .a2.grid {
+  width: 51px;
+}
+.grid.sz.max {
+  width: 40px;
+}
+.larger .grid.max.a span {
+  width:20px;
+}
+.larger .grid.max.a2 span {
+  width:20px;
+}
+
+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;
+}
+.stretch.larger .grid.sz .span2 {
+  width: 22px;
+  height: 32px;
+}
+.stretch.larger .grid.definite .span2 {
+  width: 33px;
+  height: 39px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid a"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid a2"><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 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>
+
+<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 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 a 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 a2 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>
+
+<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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+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;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </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 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>
+
+<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 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 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 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>
+
+<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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+.grid.a.max {
+  height:61px;
+}
+.larger .grid.a.max {
+  height:79px;
+}
+
+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;
+  height: 39px;
+}
+.stretch.larger .grid.sz .span2 {
+  width: 22px;
+  height: 32px;
+}
+.stretch.larger .grid.definite .span2 {
+  width: 33px;
+  height: 39px;
+}
+.grid.max span {
+  height:32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </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 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>
+
+<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 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 a 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 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>
+
+<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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+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;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </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 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>
+
+<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 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 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 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>
+
+<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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+.grid.a {
+  width:54px;
+}
+.grid.a2 {
+  width:38px;
+}
+.larger .grid.a {
+  width:64px;
+}
+.larger .grid.a2 {
+  width:51px;
+}
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+  width: 0;
+  height: 0;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.grid .span2 {
+  width: calc((56/30) * 1px);
+  height: 3px;
+}
+.larger .grid img {
+  width: 6.25px;
+  height: 10px;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid .span2 {
+  width: 24px;
+  height: 39px;
+}
+.stretch.larger .grid.sz .span2 {
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid.definite .span2 {
+  width: 24px;
+  height: 39px;
+}
+.grid.max img {
+  width: 20px;
+  height: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+.grid.a {
+  width:54px;
+}
+.grid.a2 {
+  width:38px;
+}
+.larger .grid.a {
+  width:64px;
+}
+.larger .grid.a2 {
+  width:51px;
+}
+.grid.x1 {
+  grid-template-columns:38px 15px;
+}
+.larger .grid.x1 {
+  grid-template-columns:38px 25px;
+}
+.grid.x2, .grid.x3 {
+  grid-template-columns:18.5px 18.5px;
+}
+.larger .grid.x2 {
+  grid-template-columns:25px 25px;
+}
+.larger .grid.x3 {
+  grid-template-columns:19.5px 19.5px;
+}
+
+img {
+  writing-mode: vertical-rl;
+  grid-area: 1 / 1;
+  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;
+}
+.grid .span2 {
+  width: calc((56/30) * 1px);
+  height: 3px;
+}
+.larger .grid img {
+  width: 6.25px;
+  height: 10px;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid .span2 {
+  width: 24px;
+  height: 39px;
+}
+.larger .grid.sz .span2 {
+  width: 13.75px;
+  height: 22px;
+}
+.larger .grid.sz.definite .span2 {
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid.definite .span2 {
+  width: 24px;
+  height: 39px;
+}
+.grid.max img {
+  width: 12.5px;
+  height: 20px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid x2 max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid x3 sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  writing-mode: vertical-rl;
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  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;
+  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;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </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 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>
+
+<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 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 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 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>
+
+<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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  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;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </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 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>
+
+<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 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 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 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>
+
+<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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 0;
+  align-self:center;
+  justify-self:center;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+.larger .grid .span2 {
+  width: 20px;
+  height: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-006-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  grid-area: 1 / 1;
+  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;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></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);
+
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  grid-template-columns: repeat(2,20px);
+  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; }
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+}
+y {
+  position: absolute;
+  grid-area: 2 / 1 / 3 / 2;
+  top:0;left:0;right:0;
+  height: 10px;
+  background: lightgrey;
+}
+.r y {
+  grid-area: 1 / 2 / 2 / 3;
+  top:0;bottom:0;left:0;
+  width: 10px;
+  height: auto;
+}
+br { clear: both; }
+
+x { display:block; width:30px; height:40px; }
+span { width:15px; }
+.r span { width:20px; }
+.grid.c-30 span, .r.grid.c-30 span { width:30px; }
+.r span { height:15px; }
+  </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>
+
+<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>
+
+<br>
+
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<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>
+
+<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>
+
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-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;
+  position: relative;
+  grid-template-columns: repeat(2,20px);
+  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: minmax(auto, 15px); }
+.c-min { grid-template-columns: minmax(min-content, 15px); }
+.c-max { grid-template-columns: minmax(max-content, 15px); }
+.r-auto { grid-template-rows: minmax(auto, 15px); }
+.r-min { grid-template-rows: minmax(min-content, 15px); }
+.r-max { grid-template-rows: minmax(max-content, 15px); }
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+}
+y {
+  position: absolute;
+  grid-area: 2 / 1 / 3 / 2;
+  top:0;left:0;right:0;
+  height: 10px;
+  background: lightgrey;
+}
+
+.min-content {
+  width: -moz-min-content;
+  width: -webkit-min-content;
+  width: min-content;
+}
+.max-content {
+  width: -moz-max-content;
+  width: -webkit-max-content;
+  width: max-content;
+}
+.fit-content {
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+}
+.fill {
+  width: -moz-available;
+  width: -webkit-fill;
+  width: fill;
+}
+
+.r .min-content {
+  height: -moz-min-content;
+  height: -webkit-min-content;
+  height: min-content;
+}
+.r .max-content {
+  height: -moz-max-content;
+  height: -webkit-max-content;
+  height: max-content;
+}
+.r .fit-content {
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+}
+.r .fill {
+  height: -moz-available;
+  height: -webkit-fill;
+  height: fill;
+}
+.r y {
+  grid-area: 1 / 2 / 2 / 3;
+  top:0;bottom:0;left:0;
+  width: 10px;
+  height: auto;
+}
+br { clear: both; }
+
+x { display:block; width:30px; height:40px; }
+  </style>
+</head>
+<body>
+
+<div class="grid c-auto"><y></y><span><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="fill"><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 class="min-content"><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid c-max"><y></y><span><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="fill"><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 class="min-content"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="fill"><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 class="min-content"><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="fill"><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 class="min-content"><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="fill"><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 class="min-content"><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="fill"><x>X</x></span></div>
+
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-canvas-001-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching canvas item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.block {
+  float: left;
+  border:1px solid;
+  line-height:0;
+}
+canvas:nth-child(1n) { background: blue; }
+canvas:nth-child(2n) { background: grey; }
+canvas:nth-child(3n) { background: tan; }
+canvas:nth-child(4n) { background: black; }
+.sz > canvas {
+  width:20px; height:10px;
+}
+.sz.t2 > canvas {
+  width:10px; height:20px;
+}
+canvas {
+  vertical-align:top;
+}
+  </style>
+</head>
+<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>
+
+<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>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-canvas-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching canvas item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-canvas-001-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-gap: 5px;
+  border:1px solid;
+}
+canvas:nth-child(1n) { background: blue; }
+canvas:nth-child(2n) { background: grey; }
+canvas:nth-child(3n) { background: tan; }
+canvas:nth-child(4n) { background: black; }
+.sz > canvas {
+  width:20px; height:10px;
+}
+.sz.t2 > canvas {
+  width:10px; height:20px;
+}
+
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<canvas></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+<canvas class="end"></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid sz t2">
+<canvas></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+<canvas class="end"></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<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>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
-    <meta charset="utf-8">
-  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size</title>
+  <meta charset="utf-8">
+  <title>Reference: stretching intrinsic ratio item with min/max-size:0</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
   align-items: start;
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
@@ -1,26 +1,30 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
-    <meta charset="utf-8">
-  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size</title>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:0</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-001-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
 }
+.grid > * {
+  min-width: 0;
+  min-height: 0;
+}
 .vertical-tests img { writing-mode: vertical-rl; }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
 <img src="support/lime-2x24.png">
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
-    <meta charset="utf-8">
-  <title>Reference: stretching intrinsic ratio item with min/max-size</title>
+  <meta charset="utf-8">
+  <title>Reference: stretching intrinsic ratio item with definite min/max-size</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
@@ -1,27 +1,31 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
-    <meta charset="utf-8">
-  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size</title>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching intrinsic ratio item with definite min/max-size</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-002-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
 }
+.grid > * {
+  min-width: 0;
+  min-height: 0;
+}
 .vertical-tests img { writing-mode: vertical-rl; }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
 <img src="support/lime-2x24.png" style="max-width:4px">
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
-    <meta charset="utf-8">
+  <meta charset="utf-8">
   <title>Reference: stretching intrinsic ratio item with min/max-size</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: inline-grid;
   border: 1px solid;
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
-    <meta charset="utf-8">
+  <meta charset="utf-8">
   <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
   <link rel="match" href="grid-item-intrinsic-ratio-stretch-003-ref.html">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html
@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  justify-items: start;
+}
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="height:96px; width:8px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:96px; height:8px">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="height:96px; width:8px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:96px; height:8px">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
+</div>
+
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html
@@ -0,0 +1,144 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+.vertical-tests img { writing-mode: vertical-rl; }
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe;">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start safe">
+</div>
+<div class="grid" style="grid: 4px / 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">
+<img src="support/lime-24x2.png" style="justify-self:end safe">
+</div>
+<div class="grid" style="grid: 4px / 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">
+<img src="support/lime-2x24.png">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe;">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start safe">
+</div>
+<div class="grid" style="grid: 4px / 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">
+<img src="support/lime-24x2.png" style="justify-self:end safe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe">
+</div>
+
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html
@@ -0,0 +1,148 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  justify-items: start;
+}
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="height:1px; width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="height:6px; width:72px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:10px; height:120px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:24px; height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:120px; height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
+</div>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="height:1px; width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="height:6px; width:72px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:10px; height:120px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:24px; height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:120px; height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
+</div>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+</div>
+
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html
@@ -0,0 +1,149 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+.vertical-tests img { writing-mode: vertical-rl; }
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="max-width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="max-width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="max-height:6px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-width:6px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
+</div>
+<div class="grid" style="grid: 96px / 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>
+<div class="grid" style="grid: 4px / 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">
+<img src="support/lime-2x24.png" style="max-width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="max-width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="max-height:6px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-width:6px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
+</div>
+<div class="grid" style="grid: 96px / 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>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
+</div>
+
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/grid-justify-content-002-ref.html
+++ b/layout/reftests/css-grid/grid-justify-content-002-ref.html
@@ -9,17 +9,17 @@
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
   <style type="text/css">
 html,body {
   color:black; background-color:white; font-size:16px; padding:0; margin:0;
 }
 
 .grid {
   display: grid;
-  grid-template-rows: 0 7px;
+  grid-template-rows: 7px;
   border: 1px solid blue;
   background: black;
 }
 
 x { background: lime; height:7px; }
 
   </style>
 </head>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -90,16 +90,26 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-item-align-002.html grid-item-align-002-ref.html
 == grid-item-align-003.html grid-item-align-003-ref.html
 == grid-item-justify-001.html grid-item-justify-001-ref.html
 == grid-item-justify-002.html grid-item-justify-002-ref.html
 == grid-item-stretch-001.html grid-item-stretch-001-ref.html
 == grid-item-intrinsic-ratio-stretch-001.html grid-item-intrinsic-ratio-stretch-001-ref.html
 == grid-item-intrinsic-ratio-stretch-002.html grid-item-intrinsic-ratio-stretch-002-ref.html
 == grid-item-intrinsic-ratio-stretch-003.html grid-item-intrinsic-ratio-stretch-003-ref.html
+== grid-item-intrinsic-ratio-stretch-004.html grid-item-intrinsic-ratio-stretch-004-ref.html
+== grid-item-intrinsic-ratio-stretch-005.html grid-item-intrinsic-ratio-stretch-005-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-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-007.html grid-item-auto-min-size-clamp-007-ref.html
+== grid-item-canvas-001.html grid-item-canvas-001-ref.html
 == grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003-ref.html # ditto
 skip-if(!gtkWidget) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004-ref.html # ditto
 == grid-align-content-001.html grid-align-content-001-ref.html
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bba5504d982b771ce972a0096922bce4fce2b74d
GIT binary patch
literal 100
zc%17D@N?(olHy`uVBq!ia0vp^B0#Lb!3HFSk|MSNDQ!;|#}JR>$teQs{-1YnJ#fS!
q)gbG^ipIrkeNq+(hJr0G3xnzc#*6t=ca{OQF?hQAxvX<aXaWGz*c`h6