Bug 1315383 part 4 - [css-grid] More reftests for align|justify-self:normal|stretch on intrinsic ratio items, with and without Automatic Minimum Size clamping.
authorMats Palmgren <mats@mozilla.com>
Fri, 11 Nov 2016 18:28:43 +0100
changeset 365115 8718ab22261d3eb44ab913f1dea2873d14fa5890
parent 365114 cffc5238b6a0c5e89f5cfc7e695a86b598c302d9
child 365116 5b67107f5aa41e0d8090e145988e53f0aaa6302b
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-beta@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1315383
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 1315383 part 4 - [css-grid] More reftests for align|justify-self:normal|stretch on intrinsic ratio items, with and without Automatic Minimum Size clamping.
layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html
layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html
layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
@@ -79,45 +79,16 @@ img {
   padding: 1px 3px 5px 7px;
   margin: 3px 5px 7px 1px;
   width: 0;
   height: 0;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
 }
-.grid .span2 {
-  width: calc((56/30) * 1px);
-  height: 3px;
-}
-.larger .grid img {
-  width: 6.25px;
-  height: 10px;
-}
-.larger .grid .span2 {
-  font-size: 32px;
-  width: 20px;
-  height: 32px;
-}
-.stretch.larger .grid .span2 {
-  width: 24px;
-  height: 39px;
-}
-.stretch.larger .grid.sz .span2 {
-  width: 20px;
-  height: 32px;
-}
-.stretch.larger .grid.definite .span2 {
-  width: 24px;
-  height: 39px;
-}
-.grid.max img {
-  width: 20px;
-  height: 32px;
-}
 
 x {
   grid-area: 1 / 1;
   min-width: 0;
   min-height: 0;
   align-self: stretch;
   justify-self: stretch;
   background: cyan;
@@ -175,9 +146,85 @@ document.body.appendChild(wrap);
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
 </script>
 
+
+<script>
+var imgSizes =
+[
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['2px', '3px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['2px', '3px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['6px', '10px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['6px', '10px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['13px', '3px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['13px', '3px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['7px', '10px'],
+  ['7px', '10px'],
+  ['33px', '39px'],
+  ['33px', '39px'],
+  ['7px', '10px'],
+  ['7px', '10px'],
+  ['22px', '32px'],
+  ['33px', '39px'],
+  ['7px', '10px'],
+  ['33px', '39px'],
+  ['7px', '10px'],
+  ['22px', '32px'],
+  ['20px', '32px'],
+  ['33px', '39px'],
+  ['20px', '32px'],
+  ['22px', '32px'],
+];
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  imgs[i].style.width = imgSizes[i][0];
+  imgs[i].style.height = imgSizes[i][1];
+}
+</script>
+
 </body></html>
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
@@ -138,9 +138,22 @@ document.body.appendChild(wrap);
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
 </script>
 
+<!--  For generating image size results in -ref file
+<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/grid-item-auto-min-size-clamp-004-ref.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html
@@ -96,49 +96,16 @@ img {
   padding: 1px 3px 5px 7px;
   margin: 3px 5px 7px 1px;
   width: 0;
   height: 0;
 }
 .span2 {
   grid-area: 1 / 1 / span 2 / span 2;
 }
-.grid .span2 {
-  width: calc((56/30) * 1px);
-  height: 3px;
-}
-.larger .grid img {
-  width: 6.25px;
-  height: 10px;
-}
-.larger .grid .span2 {
-  font-size: 32px;
-  width: 20px;
-  height: 32px;
-}
-.stretch.larger .grid .span2 {
-  width: 24px;
-  height: 39px;
-}
-.larger .grid.sz .span2 {
-  width: 13.75px;
-  height: 22px;
-}
-.larger .grid.sz.definite .span2 {
-  width: 20px;
-  height: 32px;
-}
-.stretch.larger .grid.definite .span2 {
-  width: 24px;
-  height: 39px;
-}
-.grid.max img {
-  width: 12.5px;
-  height: 20px;
-}
 
 x {
   grid-area: 1 / 1;
   min-width: 0;
   min-height: 0;
   align-self: stretch;
   justify-self: stretch;
   background: cyan;
@@ -196,9 +163,84 @@ document.body.appendChild(wrap);
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
 </script>
 
+<script>
+var imgSizes =
+[
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['2px', '3px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['2px', '3px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['0px', '0px'],
+  ['2px', '3px'],
+  ['13px', '20px'],
+  ['13px', '20px'],
+  ['13px', '20px'],
+  ['13px', '20px'],
+  ['6px', '10px'],
+  ['6px', '10px'],
+  ['20px', '32px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['6px', '10px'],
+  ['14px', '22px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['20px', '32px'],
+  ['6px', '10px'],
+  ['14px', '22px'],
+  ['13px', '20px'],
+  ['20px', '32px'],
+  ['13px', '20px'],
+  ['14px', '22px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['13px', '3px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['13px', '3px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['0px', '0px'],
+  ['13px', '3px'],
+  ['20px', '20px'],
+  ['20px', '20px'],
+  ['20px', '20px'],
+  ['20px', '20px'],
+  ['7px', '10px'],
+  ['7px', '10px'],
+  ['33px', '39px'],
+  ['33px', '39px'],
+  ['7px', '10px'],
+  ['7px', '10px'],
+  ['22px', '22px'],
+  ['33px', '39px'],
+  ['7px', '10px'],
+  ['33px', '39px'],
+  ['7px', '10px'],
+  ['22px', '22px'],
+  ['20px', '20px'],
+  ['33px', '39px'],
+  ['20px', '20px'],
+  ['22px', '22px'],
+];
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  imgs[i].style.width = imgSizes[i][0];
+  imgs[i].style.height = imgSizes[i][1];
+}
+</script>
+
 </body></html>
--- a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
@@ -139,9 +139,22 @@ document.body.appendChild(wrap);
 var n = tests.cloneNode(true);
 var wrap = document.createElement('div');
 wrap.className = 'stretch larger';
 wrap.appendChild(n);
 document.body.appendChild(wrap);
 
 </script>
 
+<!--  For generating image size results in -ref file
+<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-001-ref.html
@@ -0,0 +1,202 @@
+<!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 'normal' and/or 'stretch', with no Automatic Minimum Size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383">
+  <style type="text/css">
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  grid-template-columns: repeat(7, min-content);
+  grid-auto-rows: min-content;
+  grid-column-gap: 10px;
+  align-items: start;
+  justify-items: start;
+}
+
+img { min-width:0; min-height:0; }
+
+x { width:32px; height:2px; background:cyan; }
+.w24 > x { width:24px; }
+.w8  > x { width:8px; }
+.w4  > x { width:4px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;">
+<div style="height:24px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:24px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:8px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:8px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w8" style="grid:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid" style="grid:repeat(3, 8px) / repeat(7, 32px); grid-gap:16px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<script>
+var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
+var grids = document.querySelectorAll('.grid');
+var js = [ "normal", "start", "center", "stretch" ];
+var as = [ "normal", "start", "center", "stretch" ];
+var imgSizes =
+[
+  ['24px', '24px'],
+  ['32px', '32px'],
+  ['32px', '32px'],
+  ['24px', '24px'],
+  ['24px', '24px'],
+  ['16px', '24px'],
+  ['24px', '24px'],
+  ['16px', '24px'],
+  ['32px', '32px'],
+  ['32px', '16px'],
+  ['32px', '16px'],
+  ['32px', '24px'],
+  ['24px', '24px'],
+  ['24px', '24px'],
+  ['24px', '24px'],
+  ['32px', '32px'],
+  ['32px', '32px'],
+  ['16px', '32px'],
+  ['32px', '32px'],
+  ['16px', '32px'],
+  ['24px', '24px'],
+  ['24px', '16px'],
+  ['24px', '16px'],
+  ['24px', '32px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['4px', '4px'],
+  ['4px', '16px'],
+  ['4px', '16px'],
+  ['4px', '8px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['32px', '32px'],
+  ['32px', '32px'],
+  ['16px', '32px'],
+  ['32px', '32px'],
+  ['16px', '32px'],
+  ['4px', '4px'],
+  ['4px', '16px'],
+  ['4px', '16px'],
+  ['4px', '32px'],
+  ['4px', '4px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['16px', '4px'],
+  ['4px', '4px'],
+  ['16px', '4px'],
+  ['8px', '8px'],
+  ['8px', '16px'],
+  ['8px', '16px'],
+  ['8px', '4px'],
+  ['8px', '8px'],
+  ['32px', '32px'],
+  ['32px', '32px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['32px', '32px'],
+  ['32px', '16px'],
+  ['32px', '16px'],
+  ['32px', '8px'],
+];
+var index = 0;  // imgSizes index
+for (var i = 0; i < grids.length; ++i) {
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var img = document.createElement('img');
+      img.style.width = imgSizes[index][0];
+      img.style.height = imgSizes[index][1];
+      if (as[a] != "normal" && as[a] != "stretch")
+        img.style.alignSelf = as[a];
+      if (js[j] != "normal" && js[j] != "stretch")
+        img.style.justifySelf = js[j];
+      img.src = url;
+      img.setAttribute('title', as[a] + ' / ' + js[j]);
+      grids[i].appendChild(img);
+      index++;
+    }
+  }
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var x = document.createElement('x');
+      grids[i].appendChild(x);
+    }
+  }
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html
@@ -0,0 +1,134 @@
+<!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 'normal' and/or 'stretch', with no Automatic Minimum Size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-intrinsic-ratio-normal-001-ref.html">
+  <style type="text/css">
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  grid-template-columns: repeat(7, min-content);
+  grid-auto-rows: min-content;
+  grid-column-gap: 10px;
+}
+
+img { min-width:0; min-height:0; }
+
+x { width:32px; height:2px; background:cyan; }
+.w24 > x { width:24px; }
+.w8  > x { width:8px; }
+.w4  > x { width:4px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<div style="height:24px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:24px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w24">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:8px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:8px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid-template-columns:repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w8" style="grid:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid" style="grid-template-rows:repeat(3, 8px); grid-gap:16px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<script>
+var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
+var grids = document.querySelectorAll('.grid');
+var js = [ "normal", "start", "center", "stretch" ];
+var as = [ "normal", "start", "center", "stretch" ];
+for (var i = 0; i < grids.length; ++i) {
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var img = document.createElement('img');
+      img.style.alignSelf = as[a];
+      img.style.justifySelf = js[j];
+      img.src = url;
+      img.setAttribute('title', as[a] + ' / ' + js[j]);
+      grids[i].appendChild(img);
+    }
+  }
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var x = document.createElement('x');
+      grids[i].appendChild(x);
+    }
+  }
+}
+</script>
+
+<!--  For generating image size results in -ref file
+<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-002-ref.html
@@ -0,0 +1,198 @@
+<!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 'normal' and/or 'stretch', with Automatic Minimum Size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383">
+  <style type="text/css">
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  grid-column-gap: 10px;
+  align-items: start;
+  justify-items: start;
+}
+
+x { width:32px; height:2px; background:cyan; }
+.w24 > x { width:24px; }
+.w8  > x { width:8px; }
+.w4  > x { width:4px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;">
+<div style="height:24px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:24px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:8px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:8px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w8" style="grid:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid" style="grid:repeat(3, 8px) / repeat(7, 32px); grid-gap:16px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<script>
+var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
+var grids = document.querySelectorAll('.grid');
+var js = [ "normal", "start", "center", "stretch" ];
+var as = [ "normal", "start", "center", "stretch" ];
+var imgSizes =
+[
+  ['24px', '24px'],
+  ['32px', '32px'],
+  ['32px', '32px'],
+  ['24px', '24px'],
+  ['24px', '24px'],
+  ['16px', '24px'],
+  ['24px', '24px'],
+  ['16px', '24px'],
+  ['32px', '32px'],
+  ['32px', '16px'],
+  ['32px', '16px'],
+  ['32px', '24px'],
+  ['24px', '24px'],
+  ['24px', '24px'],
+  ['24px', '24px'],
+  ['32px', '32px'],
+  ['32px', '32px'],
+  ['16px', '32px'],
+  ['32px', '32px'],
+  ['16px', '32px'],
+  ['24px', '24px'],
+  ['24px', '16px'],
+  ['24px', '16px'],
+  ['24px', '32px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '8px'],
+  ['4px', '4px'],
+  ['4px', '8px'],
+  ['4px', '4px'],
+  ['4px', '8px'],
+  ['4px', '8px'],
+  ['4px', '8px'],
+  ['4px', '8px'],
+  ['4px', '8px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '32px'],
+  ['4px', '4px'],
+  ['4px', '32px'],
+  ['4px', '4px'],
+  ['4px', '32px'],
+  ['4px', '4px'],
+  ['4px', '16px'],
+  ['4px', '16px'],
+  ['4px', '32px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['4px', '4px'],
+  ['8px', '4px'],
+  ['4px', '4px'],
+  ['8px', '4px'],
+  ['4px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['8px', '8px'],
+  ['16px', '8px'],
+  ['32px', '8px'],
+  ['32px', '8px'],
+  ['32px', '8px'],
+  ['32px', '8px'],
+];
+var index = 0;  // imgSizes index
+for (var i = 0; i < grids.length; ++i) {
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var img = document.createElement('img');
+      img.style.width = imgSizes[index][0];
+      img.style.height = imgSizes[index][1];
+      if (as[a] != "normal" && as[a] != "stretch")
+        img.style.alignSelf = as[a];
+      if (js[j] != "normal" && js[j] != "stretch")
+        img.style.justifySelf = js[j];
+      img.src = url;
+      img.setAttribute('title', as[a] + ' / ' + js[j]);
+      grids[i].appendChild(img);
+      index++;
+    }
+  }
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var x = document.createElement('x');
+      grids[i].appendChild(x);
+    }
+  }
+}
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html
@@ -0,0 +1,129 @@
+<!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 'normal' and/or 'stretch', with Automatic Minimum Size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-intrinsic-ratio-normal-001-ref.html">
+  <style type="text/css">
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+
+x { width:32px; height:2px; background:cyan; }
+.w24 > x { width:24px; }
+.w8  > x { width:8px; }
+.w4  > x { width:4px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;">
+<div style="height:24px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:24px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:8px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:8px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; ">
+<div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:32px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid w8" style="grid:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<div class="grid" style="grid:repeat(3, 8px) / repeat(7, 32px); grid-gap:16px; ">
+<div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
+<div style="height:10px; grid-row:2; grid-column: span 7"></div>
+<div style="height:4px; grid-row:3"></div>
+<x style="grid-row:4"></x>
+</div>
+
+<br>
+
+<script>
+var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
+var grids = document.querySelectorAll('.grid');
+var js = [ "normal", "start", "center", "stretch" ];
+var as = [ "normal", "start", "center", "stretch" ];
+for (var i = 0; i < grids.length; ++i) {
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var img = document.createElement('img');
+      img.style.alignSelf = as[a];
+      img.style.justifySelf = js[j];
+      img.src = url;
+      img.setAttribute('title', as[a] + ' / ' + js[j]);
+      grids[i].appendChild(img);
+    }
+  }
+  for (var j = 0; j < js.length; j++) {
+    for (var a = 0; a < as.length; a++) {
+      if (as[a] != "normal" && as[a] != "stretch" &&
+          js[j] != "normal" && js[j] != "stretch") {
+        continue;
+      }
+      var x = document.createElement('x');
+      grids[i].appendChild(x);
+    }
+  }
+}
+</script>
+
+<!--  For generating image size results in -ref file
+<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,16 +92,18 @@ 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-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-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