Bug 1218178 part 4 - [css-grid][css-align] Add more reftests with image grid items.
authorMats Palmgren <mats@mozilla.com>
Sat, 05 Nov 2016 02:57:06 +0100
changeset 321104 30c652ff1d1e1bded08e12f4e6398429b2c2005b
parent 321103 4e9d3d21f20db22985bf61346d03b40097bd47e3
child 321105 292c5a180ea30ee58429bf0addf74630a538b54c
push id83532
push usermpalmgren@mozilla.com
push dateSat, 05 Nov 2016 01:57:23 +0000
treeherdermozilla-inbound@253395be59f6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1218178
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1218178 part 4 - [css-grid][css-align] Add more reftests with image grid items.
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.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-min-content-min-sizing-transferred-size-001-ref.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html
layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html
layout/reftests/css-grid/reftest.list
layout/reftests/css-grid/support/lime-24x2.png
layout/reftests/css-grid/support/lime-2x24.png
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.col { grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
+"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
+"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
+"min-height:4px", "min-height:4px; max-width: 30px"
+];
+var results = [
+"48px", "48px", "24px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
+"24px", "48px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</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-auto-min-sizing-min-content-min-size-001-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
+.col img {
+  min-height: 0;
+  min-width: -moz-min-content;
+  min-width: -webkit-min-content;
+  min-width: min-content;
+}
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
+"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
+"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
+"min-height:4px", "min-height:4px; max-width: 30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
+"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
+"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
+"min-height:40%", "min-height:40%; max-width:30px"
+];
+var results = [
+"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
+"24px", "24px", "24px"
+];
+var item_width = [
+"48px", "48px", "24px", "24px", "24px;max-width:none;", "360px", "80px", "60px", "24px", "24px",
+"24px;max-width:none;", "48px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</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-auto-min-sizing-min-content-min-size-002-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
+.col img {
+  min-height: 0;
+  min-width: -moz-min-content;
+  min-width: -webkit-min-content;
+  min-width: min-content;
+}
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+
+<script>
+var coltest = [
+"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
+"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
+"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
+"min-height:40%", "min-height:40%; max-width:30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.row { }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
+];
+var rowtest = [
+"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
+"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
+"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
+];
+var results = [
+"24px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]);
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</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-auto-min-sizing-min-content-min-size-003-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.row { grid-template-rows:minmax(auto,0.0001fr); }
+.row img {
+  min-width: 0;
+  min-height: -moz-min-content;
+  min-height: -webkit-min-content;
+  min-height: min-content;
+}
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
+"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
+"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+body { overflow:hidden; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.row { }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
+"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
+"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
+];
+var results = [
+"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "24px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
+];
+var item_height = [
+"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  grid.setAttribute("style","grid:" + results[i]);
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</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-auto-min-sizing-min-content-min-size-004-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+body { overflow:hidden; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.row { grid-template-rows:minmax(auto,0.0001fr); }
+.row img {
+  min-width: 0;
+  min-height: -moz-min-content;
+  min-height: -webkit-min-content;
+  min-height: min-content;
+}
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
+"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
+"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.col { grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
+"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
+"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
+"min-height:4px", "min-height:4px; max-width: 30px"
+];
+var results = [
+"48px", "48px", "12px", "12px", "12px", "360px", "80px", "12px", "20px", "12px",
+"6px", "48px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</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-auto-min-sizing-transferred-size-001-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
+"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
+"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
+"min-height:4px", "min-height:4px; max-width: 30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
+"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
+"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
+"min-height:40%", "min-height:40%; max-width:30px"
+];
+var results = [
+"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "20px", "24px",
+"6px", "24px", "24px"
+];
+var item_width = [
+"0px", "0px", "0px", "0px", "0px", "360px", "80px", "60px", "20px", "24px",
+"6px", "48px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</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-auto-min-sizing-transferred-size-002-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+
+<script>
+var coltest = [
+"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
+"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
+"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
+"min-height:40%", "min-height:40%; max-width:30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.row { }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
+];
+var rowtest = [
+"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
+"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
+"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
+];
+var results = [
+"24px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]);
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</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-auto-min-sizing-transferred-size-003-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.row { grid-template-rows:minmax(auto,0.0001fr); }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
+"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
+"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+body { overflow:hidden; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.row { }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
+"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
+"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
+];
+var results = [
+"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "24px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
+];
+var item_height = [
+"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  grid.setAttribute("style","grid:" + results[i]);
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</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-auto-min-sizing-transferred-size-004-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+body { overflow:hidden; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.row { grid-template-rows:minmax(auto,0.0001fr); }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
+"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
+"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-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>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">
+  <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:96px; height:8px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+</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:48px; height:4px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:48px; height:4px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:48px; height:4px; margin-right:-38px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:48px; height:4px; margin-left:-38px">
+</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:96px; height:8px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+</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:48px; height:4px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:48px; height:4px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:48px; height:4px; margin-right:-38px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:48px; height:4px; margin-left:-38px">
+</div>
+
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.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</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;
+}
+.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-002-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</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  justify-items: start;
+}
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="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:48px; height:4px">
+</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:48px; height:4px">
+</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-002.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</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;
+}
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-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</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  justify-items: start;
+}
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:1px; height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:12px; height:1px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:72px; height:6px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; width:1px; height:12px">
+</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:48px; height:4px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:10px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:6px; height:36px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="height:2px; width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="height:10px; width:48px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; height:80px; width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:50px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:3px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:2px">
+</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="width:1px; height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:12px; height:1px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:72px; height:6px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; width:1px; height:12px">
+</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:48px; height:4px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:10px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:6px; height:36px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="height:2px; width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="height:10px; width:48px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; height:80px; width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:50px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:3px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:2px">
+</div>
+
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.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</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 {
+  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="min-width:4px; max-width:0">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-height:12px; max-height:0">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-width:12px; max-width:0">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:6px; max-height:0">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:48px; max-height:0">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:12px; max-height:0">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:10px; max-height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-width:6px; max-height:36px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-height:2px; max-width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:10px; max-width:48px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:80px; max-width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:50px; max-width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px; max-height:3px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-height:2px">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:4px; max-width:0">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-height:12px; max-height:0">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-width:12px; max-width:0">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:6px; max-height:0">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:48px; max-height:0">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:12px; max-height:0">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:10px; max-height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-width:6px; max-height:36px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-height:2px; max-width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:10px; max-width:48px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:80px; max-width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:50px; max-width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px; max-height:3px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-height:2px">
+</div>
+
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.col { grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
+"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
+"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
+"min-height:4px", "min-height:4px; max-width: 30px"
+];
+var results = [
+"48px", "48px", "12px", "12px", "12px", "360px", "80px", "12px", "20px", "12px",
+"6px", "48px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</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-min-content-min-sizing-transferred-size-001-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.col { grid-template-columns:min-content; grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
+"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
+"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
+"min-height:4px", "min-height:4px; max-width: 30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
+"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
+"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
+"min-height:40%", "min-height:40%; max-width:30px"
+];
+var results = [
+"0", "0", "0", "0", "0", "360px", "80px", "24px", "20px", "24px",
+"6px", "24px", "24px"
+];
+var item_width = [
+"0px", "0px", "0px", "0px", "0px", "360px", "80px", "60px", "20px", "24px",
+"6px", "48px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</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-min-content-min-sizing-transferred-size-002-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.col { grid-template-columns:min-content; grid-auto-rows:10px; }
+.col img { min-height:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+
+<script>
+var coltest = [
+"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
+"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
+"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
+"min-height:40%", "min-height:40%; max-width:30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < coltest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid col");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-24x2.png");
+  img.setAttribute("style",coltest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.row { }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var coltest = [
+"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
+];
+var rowtest = [
+"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
+"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
+"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
+];
+var results = [
+"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]);
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</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-min-content-min-sizing-transferred-size-003-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.row { grid-template-rows:min-content; }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
+"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
+"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+body { overflow:hidden; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom:1em;
+}
+
+.row { }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
+"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
+"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
+];
+var results = [
+"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "24px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
+];
+var item_height = [
+"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  grid.setAttribute("style","grid:" + results[i]);
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     https://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</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-min-content-min-sizing-transferred-size-004-ref.html">
+  <style type="text/css">
+html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
+body { overflow:hidden; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  align-items: start;
+  justify-items: start;
+  margin-bottom: 1em;
+}
+
+.row { grid-template-rows:min-content; }
+.row img { min-width:0; }
+
+br { clear:both; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var rowtest = [
+"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
+"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
+"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
+];
+
+var h3 = document.createElement('h3');
+h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
+document.body.appendChild(h3);
+for (var i = 0; i < rowtest.length; ++i) {
+  var grid = document.createElement('div');
+  grid.setAttribute("class","grid row");
+  var img = document.createElement('img');
+  img.setAttribute("src","support/lime-2x24.png");
+  img.setAttribute("style",rowtest[i]);
+  grid.appendChild(img);
+  document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
+  document.body.appendChild(document.createElement('br'));
+  document.body.appendChild(grid);
+  document.body.appendChild(document.createElement('br'));
+}
+</script>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -51,16 +51,28 @@ fuzzy-if(winWidget,70,130) fuzzy-if(coco
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
 == grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
 == grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002-ref.html
 fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
 == grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html
 == grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
 == grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
 == grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html
+== grid-auto-min-sizing-transferred-size-001.html grid-auto-min-sizing-transferred-size-001-ref.html
+== grid-auto-min-sizing-transferred-size-002.html grid-auto-min-sizing-transferred-size-002-ref.html
+== grid-auto-min-sizing-transferred-size-003.html grid-auto-min-sizing-transferred-size-003-ref.html
+== grid-auto-min-sizing-transferred-size-004.html grid-auto-min-sizing-transferred-size-004-ref.html
+== grid-auto-min-sizing-min-content-min-size-001.html grid-auto-min-sizing-min-content-min-size-001-ref.html
+== grid-auto-min-sizing-min-content-min-size-002.html grid-auto-min-sizing-min-content-min-size-002-ref.html
+== grid-auto-min-sizing-min-content-min-size-003.html grid-auto-min-sizing-min-content-min-size-003-ref.html
+== grid-auto-min-sizing-min-content-min-size-004.html grid-auto-min-sizing-min-content-min-size-004-ref.html
+== grid-min-content-min-sizing-transferred-size-001.html grid-min-content-min-sizing-transferred-size-001-ref.html
+== grid-min-content-min-sizing-transferred-size-002.html grid-min-content-min-sizing-transferred-size-002-ref.html
+== grid-min-content-min-sizing-transferred-size-003.html grid-min-content-min-sizing-transferred-size-003-ref.html
+== grid-min-content-min-sizing-transferred-size-004.html grid-min-content-min-sizing-transferred-size-004-ref.html
 skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html # bug 1305716
 == grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
 == grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
 == grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html
 == grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html
 == grid-track-percent-sizing-001.html grid-track-percent-sizing-001-ref.html
 == grid-track-fit-content-sizing-001.html grid-track-fit-content-sizing-001-ref.html
 == grid-track-fit-content-sizing-002.html grid-track-fit-content-sizing-002-ref.html
@@ -75,16 +87,19 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html
 == grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html
 == grid-item-align-001.html grid-item-align-001-ref.html
 == 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-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..b9ce5e24612cecbfc4ba158311d495f7f3cd8988
GIT binary patch
literal 96
zc%17D@N?(olHy`uVBq!ia0vp^5<twv!2~4FMs$M&I14-?iy0WWg+Z8+Vb&aw3L#Gy
o#}JO|$tge1JBS`Q;-JdFFj0+>`D{ne6`(AGr>mdKI;Vst06xDJT>t<8
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a1524d46b4efa517304eb33d6db11e2c4682caac
GIT binary patch
literal 98
zc%17D@N?(olHy`uVBq!ia0vp^Oh7Eb0V3mP?(PFpoCO|{#S9GG!XV7ZFl&wkP*B9v
q#W95AdUDE-^9O+7$N_^LnhaYHG3p-+EZ_vnGkCiCxvX<aXaWGmF&Ml6