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 347953 728204430c0bf24aeb3d0f256f24827772f43430
parent 347952 e3bc6e35c8046af9a4b74737c197d799cacad149
child 347954 28219b1ad2983b16d1dbbab260aae44bb2cdd0c2
push id10298
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:33:03 +0000
treeherdermozilla-aurora@7e29173b1641 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1300369
milestone52.0a1
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