Bug 1315857 - [css-grid] Reftests for stretching/clamping intrinsic ratio grid items that has a definite size in one axis.
authorMats Palmgren <mats@mozilla.com>
Fri, 11 Nov 2016 18:28:43 +0100
changeset 322266 db459d69392805f291ec28965cfd89b8a71e3522
parent 322265 5b67107f5aa41e0d8090e145988e53f0aaa6302b
child 322267 f250ead28c6975a8822dad4d4cd544d77fcc3a87
push id30945
push usercbook@mozilla.com
push dateMon, 14 Nov 2016 09:22:29 +0000
treeherdermozilla-central@1196bf3032e1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1315857
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1315857 - [css-grid] Reftests for stretching/clamping intrinsic ratio grid items that has a definite size in one axis.
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html
@@ -0,0 +1,233 @@
+<!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 items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <style type="text/css">
+* { vertical-align: bottom; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 32px / 4px;
+  margin-right:20px;
+}
+.r { grid: 4px / 32px; }
+
+.start {align-self:start; justify-self:start}
+.na {align-self:start; justify-self:start}
+.sa {align-self:start; justify-self:start}
+.an {align-self:start; justify-self:start}
+.as {align-self:start; justify-self:start}
+.w20 { width: 20px min-width: 0px; }
+.mw20 { min-width: 20px }
+.mw0 { min-width: 0px }
+
+.h20 { height: 20px; min-height: 0px; }
+.mh20 { min-height: 20px }
+.mh0 { min-height: 0px }
+
+  </style>
+</head>
+<body>
+
+<div class="grid r"><img></div>
+<div class="grid r"><img class="start"></div>
+<div class="grid r"><img class="sa"></div>
+<div class="grid r"><img class="sa mxw10"></div>
+<div class="grid r"><img class="na"></div>
+<div class="grid r"><img class="na mxw2"></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><img class="mh20"></div>
+<div class="grid r"><img class="mh20 mxw10"></div>
+<div class="grid r"><img class="start mh20"></div>
+<div class="grid r"><img class="start mh20 mxw10"></div>
+<div class="grid r"><img class="sa mh20"></div>
+<div class="grid r"><img class="sa mh20 mxw10"></div>
+<div class="grid r"><img class="na mh20"></div>
+<div class="grid r"><img class="na mh20 mxw10"></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><img class="mh0"></div>
+<div class="grid r"><img class="mh0 mxw10"></div>
+<div class="grid r"><img class="start mh0"></div>
+<div class="grid r"><img class="start mh0 mxw10"></div>
+<div class="grid r"><img class="sa mh0"></div>
+<div class="grid r"><img class="sa mh0 mxw10"></div>
+<div class="grid r"><img class="na mh0"></div>
+<div class="grid r"><img class="na mh0 mxw2"></div>
+
+<pre><!----></pre>
+
+<div class="grid"><img></div>
+<div class="grid"><img class="mxw2"></div>
+<div class="grid"><img class="start"></div>
+<div class="grid"><img class="start mxw2"></div>
+<div class="grid"><img class="sa"></div>
+<div class="grid"><img class="sa mxw2"></div>
+<div class="grid"><img class="na"></div>
+<div class="grid"><img class="na mxw2"></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><img class="mw20"></div>
+<div class="grid"><img class="mw20 mxh10"></div>
+<div class="grid"><img class="start mw20"></div>
+<div class="grid"><img class="start mw20 mxh10"></div>
+<div class="grid"><img class="sa mw20"></div>
+<div class="grid"><img class="sa mw20 mxh10"></div>
+<div class="grid"><img class="na mw20"></div>
+<div class="grid"><img class="na mw20 mxh10"></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><img class="mw0"></div>
+<div class="grid"><img class="mw0 mxh10"></div>
+<div class="grid"><img class="start mw0"></div>
+<div class="grid"><img class="start mw0 mxh10"></div>
+<div class="grid"><img class="sa mw0"></div>
+<div class="grid"><img class="sa mw0 mxh10"></div>
+<div class="grid"><img class="na mw0"></div>
+<div class="grid"><img class="na mw0 mxh10"></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><img class="w20"></div>
+<div class="grid r"><img class="w20 mxh10"></div>
+<div class="grid r"><img class="start w20"></div>
+<div class="grid r"><img class="start w20 mxh10"></div>
+<div class="grid r"><img class="sa w20"></div>
+<div class="grid r"><img class="sa w20 mxh2"></div>
+<div class="grid r"><img class="na w20"></div>
+<div class="grid r"><img class="na w20 mxh2"></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><img class="start w20"></div>
+<div class="grid"><img class="start w20 mxh10"></div>
+<div class="grid"><img class="start w20"></div>
+<div class="grid"><img class="start w20 mxh10"></div>
+<div class="grid"><img class="sa w20"></div>
+<div class="grid"><img class="sa w20 mxh10"></div>
+<div class="grid"><img class="na w20"></div>
+<div class="grid"><img class="na w20 mxh10"></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><img class="h20"></div>
+<div class="grid r"><img class="h20 mxw10"></div>
+<div class="grid r"><img class="start h20"></div>
+<div class="grid r"><img class="start h20 mxw10"></div>
+<div class="grid r"><img class="as h20"></div>
+<div class="grid r"><img class="as h20 mxw10"></div>
+<div class="grid r"><img class="an h20"></div>
+<div class="grid r"><img class="an h20 mxw10"></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><img class="h20"></div>
+<div class="grid"><img class="h20 mxw2"></div>
+<div class="grid"><img class="start h20"></div>
+<div class="grid"><img class="start h20 mxw10"></div>
+<div class="grid"><img class="as h20"></div>
+<div class="grid"><img class="as h20 mxw2"></div>
+<div class="grid"><img class="an h20"></div>
+<div class="grid"><img class="an h20 mxw10"></div>
+
+<script>
+var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
+var imgs = document.querySelectorAll('img');
+var imgSizes =
+  [
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['16px', '4px'],
+  ['10px', '4px'],
+  ['4px', '4px'],
+  ['2px', '2px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['16px', '20px'],
+  ['10px', '20px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['16px', '16px'],
+  ['10px', '10px'],
+  ['16px', '4px'],
+  ['10px', '4px'],
+  ['4px', '4px'],
+  ['2px', '2px'],
+  ['4px', '4px'],
+  ['2px', '2px'],
+  ['4px', '4px'],
+  ['2px', '2px'],
+  ['4px', '32px'],
+  ['2px', '32px'],
+  ['4px', '4px'],
+  ['2px', '2px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['32px', '32px'],
+  ['20px', '10px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['16px', '16px'],
+  ['10px', '10px'],
+  ['16px', '32px'],
+  ['16px', '10px'],
+  ['32px', '32px'],
+  ['10px', '10px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '4px'],
+  ['20px', '2px'],
+  ['20px', '20px'],
+  ['20px', '2px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['20px', '20px'],
+  ['20px', '10px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['32px', '20px'],
+  ['10px', '20px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['20px', '20px'],
+  ['2px', '20px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+  ['4px', '20px'],
+  ['2px', '20px'],
+  ['20px', '20px'],
+  ['10px', '20px'],
+];
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+  img.style.width = imgSizes[i][0];
+  img.style.height = imgSizes[i][1];
+}
+
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
@@ -0,0 +1,186 @@
+<!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 size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html">
+  <style type="text/css">
+* { vertical-align: bottom; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 32px / 4px;
+  margin-right:20px;
+}
+.r { grid: 4px / 32px; }
+
+button {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+
+.start {align-self:start; justify-self:start}
+.na {align-self:normal; justify-self:start}
+.sa {align-self:stretch; justify-self:start}
+.an {align-self:start; justify-self:normal}
+.as {align-self:start; justify-self:stretch}
+.w20 { width: 20px }
+.mw20 { min-width: 20px }
+.mxw10 { max-width: 10px }
+.mxw2 { max-width: 2px }
+.mw0 { min-width: 0px }
+
+.h20 { height: 20px }
+.mh20 { min-height: 20px }
+.mxh10 { max-height: 10px }
+.mxh2 { max-height: 2px }
+.mh0 { min-height: 0px }
+
+  </style>
+</head>
+<body>
+
+<div class="grid r"><img></div>
+<div class="grid r"><img class="start"></div>
+<div class="grid r"><img class="sa"></div>
+<div class="grid r"><img class="sa mxw10"></div>
+<div class="grid r"><img class="na"></div>
+<div class="grid r"><img class="na mxw2"></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><img class="mh20"></div>
+<div class="grid r"><img class="mh20 mxw10"></div>
+<div class="grid r"><img class="start mh20"></div>
+<div class="grid r"><img class="start mh20 mxw10"></div>
+<div class="grid r"><img class="sa mh20"></div>
+<div class="grid r"><img class="sa mh20 mxw10"></div>
+<div class="grid r"><img class="na mh20"></div>
+<div class="grid r"><img class="na mh20 mxw10"></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><img class="mh0"></div>
+<div class="grid r"><img class="mh0 mxw10"></div>
+<div class="grid r"><img class="start mh0"></div>
+<div class="grid r"><img class="start mh0 mxw10"></div>
+<div class="grid r"><img class="sa mh0"></div>
+<div class="grid r"><img class="sa mh0 mxw10"></div>
+<div class="grid r"><img class="na mh0"></div>
+<div class="grid r"><img class="na mh0 mxw2"></div>
+
+<pre><!----></pre>
+
+<div class="grid"><img></div>
+<div class="grid"><img class="mxw2"></div>
+<div class="grid"><img class="start"></div>
+<div class="grid"><img class="start mxw2"></div>
+<div class="grid"><img class="sa"></div>
+<div class="grid"><img class="sa mxw2"></div>
+<div class="grid"><img class="na"></div>
+<div class="grid"><img class="na mxw2"></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><img class="mw20"></div>
+<div class="grid"><img class="mw20 mxh10"></div>
+<div class="grid"><img class="start mw20"></div>
+<div class="grid"><img class="start mw20 mxh10"></div>
+<div class="grid"><img class="sa mw20"></div>
+<div class="grid"><img class="sa mw20 mxh10"></div>
+<div class="grid"><img class="na mw20"></div>
+<div class="grid"><img class="na mw20 mxh10"></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><img class="mw0"></div>
+<div class="grid"><img class="mw0 mxh10"></div>
+<div class="grid"><img class="start mw0"></div>
+<div class="grid"><img class="start mw0 mxh10"></div>
+<div class="grid"><img class="sa mw0"></div>
+<div class="grid"><img class="sa mw0 mxh10"></div>
+<div class="grid"><img class="na mw0"></div>
+<div class="grid"><img class="na mw0 mxh10"></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><img class="w20"></div>
+<div class="grid r"><img class="w20 mxh10"></div>
+<div class="grid r"><img class="start w20"></div>
+<div class="grid r"><img class="start w20 mxh10"></div>
+<div class="grid r"><img class="sa w20"></div>
+<div class="grid r"><img class="sa w20 mxh2"></div>
+<div class="grid r"><img class="na w20"></div>
+<div class="grid r"><img class="na w20 mxh2"></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><img class="start w20"></div>
+<div class="grid"><img class="start w20 mxh10"></div>
+<div class="grid"><img class="start w20"></div>
+<div class="grid"><img class="start w20 mxh10"></div>
+<div class="grid"><img class="sa w20"></div>
+<div class="grid"><img class="sa w20 mxh10"></div>
+<div class="grid"><img class="na w20"></div>
+<div class="grid"><img class="na w20 mxh10"></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><img class="h20"></div>
+<div class="grid r"><img class="h20 mxw10"></div>
+<div class="grid r"><img class="start h20"></div>
+<div class="grid r"><img class="start h20 mxw10"></div>
+<div class="grid r"><img class="as h20"></div>
+<div class="grid r"><img class="as h20 mxw10"></div>
+<div class="grid r"><img class="an h20"></div>
+<div class="grid r"><img class="an h20 mxw10"></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><img class="h20"></div>
+<div class="grid"><img class="h20 mxw2"></div>
+<div class="grid"><img class="start h20"></div>
+<div class="grid"><img class="start h20 mxw10"></div>
+<div class="grid"><img class="as h20"></div>
+<div class="grid"><img class="as h20 mxw2"></div>
+<div class="grid"><img class="an h20"></div>
+<div class="grid"><img class="an h20 mxw10"></div>
+
+<script>
+var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  imgs[i].src = url;
+}
+</script>
+
+<script>
+document.body.clientHeight;
+var imgs = document.querySelectorAll('img');
+var s = '  [\n';
+for (var i = 0; i < imgs.length; ++i) {
+  s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+
+<!--  For generating button size results in -ref file
+<script>
+document.body.clientHeight;
+var buttons = document.querySelectorAll('button');
+var s = '  [\n';
+for (var i = 0; i < buttons.length; ++i) {
+  var cs = window.getComputedStyle(buttons[i]);
+  s += "  ['"+ cs['width'] + "', '" + cs['height'] + "'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html
@@ -0,0 +1,145 @@
+<!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: ratio-preserving 'normal' stretch of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  height: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgSizes =
+[
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+];
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.style.width = imgSizes[i][0];
+  img.style.height = imgSizes[i][1];
+  img.src = url;
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html
@@ -0,0 +1,115 @@
+<!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: ratio-preserving 'normal' stretch of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-intrinsic-ratio-normal-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  height: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
+
+<!--  For generating image size results in -ref file (try reloading a few times if you see all zeros)
+<script>
+document.body.clientHeight;
+var imgs = document.querySelectorAll('img');
+var s = '  [\n';
+for (var i = 0; i < imgs.length; ++i) {
+  s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html
@@ -0,0 +1,146 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: ratio-preserving 'normal' stretch of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  width: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgSizes =
+[
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+];
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.style.width = imgSizes[i][0];
+  img.style.height = imgSizes[i][1];
+  img.src = url;
+}
+</script>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html
@@ -0,0 +1,115 @@
+<!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: ratio-preserving 'normal' stretch of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-intrinsic-ratio-normal-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  width: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
+
+<!--  For generating image size results in -ref file (try reloading a few times if you see all zeros)
+<script>
+document.body.clientHeight;
+var imgs = document.querySelectorAll('img');
+var s = '  [\n';
+for (var i = 0; i < imgs.length; ++i) {
+  s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html
@@ -0,0 +1,147 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: 'stretch' of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+  align-items: stretch;
+  justify-items: stretch;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  height: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgSizes =
+[
+  ['8px', '20px'],
+  ['28px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['28px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['28px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['28px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['28px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['8px', '20px'],
+  ['28px', '20px'],
+  ['8px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+  ['16px', '20px'],
+];
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.style.width = imgSizes[i][0];
+  img.style.height = imgSizes[i][1];
+  img.src = url;
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html
@@ -0,0 +1,117 @@
+<!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: 'stretch' of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-006-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+  align-items: stretch;
+  justify-items: stretch;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  height: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
+
+<!--  For generating image size results in -ref file (try reloading a few times if you see all zeros)
+<script>
+document.body.clientHeight;
+var imgs = document.querySelectorAll('img');
+var s = '  [\n';
+for (var i = 0; i < imgs.length; ++i) {
+  s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html
@@ -0,0 +1,145 @@
+<!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: 'stretch' of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  width: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgSizes =
+[
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '8px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+  ['20px', '16px'],
+];
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.style.width = imgSizes[i][0];
+  img.style.height = imgSizes[i][1];
+  img.src = url;
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html
@@ -0,0 +1,115 @@
+<!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: 'stretch' of image with zero ratio</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-007-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+img:nth-child(1n) { background: blue; }
+img:nth-child(2n) { background: grey; }
+img:nth-child(3n) { background: tan; }
+img:nth-child(4n) { background: black; }
+img {
+  width: 20px;
+  border: 1px solid;
+}
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid sz t2">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid">
+<img>
+<img>
+<img class="jend">
+<img class="jend">
+<img class="aend">
+<img class="aend">
+<img class="end">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<img>
+<img class="jend">
+<img class="aend">
+<img class="end">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
+
+<!--  For generating image size results in -ref file (try reloading a few times if you see all zeros)
+<script>
+document.body.clientHeight;
+var imgs = document.querySelectorAll('img');
+var s = '  [\n';
+for (var i = 0; i < imgs.length; ++i) {
+  s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+-->
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -92,18 +92,23 @@ skip-if(Android) == grid-auto-min-sizing
 == grid-item-justify-001.html grid-item-justify-001-ref.html
 == grid-item-justify-002.html grid-item-justify-002-ref.html
 == grid-item-stretch-001.html grid-item-stretch-001-ref.html
 == grid-item-intrinsic-ratio-stretch-001.html grid-item-intrinsic-ratio-stretch-001-ref.html
 == grid-item-intrinsic-ratio-stretch-002.html grid-item-intrinsic-ratio-stretch-002-ref.html
 == grid-item-intrinsic-ratio-stretch-003.html grid-item-intrinsic-ratio-stretch-003-ref.html
 == grid-item-intrinsic-ratio-stretch-004.html grid-item-intrinsic-ratio-stretch-004-ref.html
 == grid-item-intrinsic-ratio-stretch-005.html grid-item-intrinsic-ratio-stretch-005-ref.html
+== grid-item-intrinsic-ratio-stretch-006.html grid-item-intrinsic-ratio-stretch-006-ref.html
+== grid-item-intrinsic-ratio-stretch-007.html grid-item-intrinsic-ratio-stretch-007-ref.html
 == grid-item-intrinsic-ratio-normal-001.html grid-item-intrinsic-ratio-normal-001-ref.html
 == grid-item-intrinsic-ratio-normal-002.html grid-item-intrinsic-ratio-normal-002-ref.html
+== grid-item-intrinsic-ratio-normal-003.html grid-item-intrinsic-ratio-normal-003-ref.html
+== grid-item-intrinsic-ratio-normal-004.html grid-item-intrinsic-ratio-normal-004-ref.html
+== grid-item-intrinsic-ratio-normal-005.html grid-item-intrinsic-ratio-normal-005-ref.html
 == grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
 == grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
 == grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
 == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
 == grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
 == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
 == grid-item-canvas-001.html grid-item-canvas-001-ref.html