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 347939 30c652ff1d1e1bded08e12f4e6398429b2c2005b
parent 347938 4e9d3d21f20db22985bf61346d03b40097bd47e3
child 347940 292c5a180ea30ee58429bf0addf74630a538b54c
push id10298
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:33:03 +0000
treeherdermozilla-aurora@7e29173b1641 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1218178
milestone52.0a1
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