Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/css-grid
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: uxp-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
487 files changed, 54905 insertions, 0 deletions
diff --git a/layout/reftests/css-grid/bug1306106-ref.html b/layout/reftests/css-grid/bug1306106-ref.html
new file mode 100644
index 0000000000..d4f7dc4fc5
--- /dev/null
+++ b/layout/reftests/css-grid/bug1306106-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Table grid item bug</title>
+</head>
+<body>
+
+<pre>You should see "A B" below:</pre>
+
+<div style="display:grid; grid: 50px / 50px 50px">
+<div style="display:table">A</div>
+<div style="display:table">B</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/bug1306106.html b/layout/reftests/css-grid/bug1306106.html
new file mode 100644
index 0000000000..7bc6ce7778
--- /dev/null
+++ b/layout/reftests/css-grid/bug1306106.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Table grid item bug</title>
+</head>
+<body>
+
+<pre>You should see "A B" below:</pre>
+
+<div style="display:grid; grid: 50px / 50px 50px">
+<div style="display:table">B</div>
+<div style="display:table; grid-area:1/1">A</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-001-ref.html b/layout/reftests/css-grid/grid-abspos-items-001-ref.html
new file mode 100644
index 0000000000..a036134450
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-001-ref.html
@@ -0,0 +1,185 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ border: 1px solid;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 7px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 60px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:0px; }
+
+.a {
+  position: absolute;
+  left: 13px; top: 31px;
+  height: 12px; width: 44px;
+  background: blue;
+}
+
+.abs {
+  position: absolute;
+  opacity: 0.7;
+  width: 21px;
+  height: 15px;
+}
+.b {
+  left: 1px; top: 3px; bottom: 1px;
+  width: 28px; height: auto;
+}
+.c {
+  right: 5px; bottom: 1px;
+  width: 112px; height: 82px;
+}
+.d {
+  left: 1px; top: 20px;
+  width: 5px; height: 1px;
+}
+.e {
+  right: 5px; bottom: 1px;
+  width: 112px; height: 51px;
+}
+.f {
+  right: 5px; top: 3px;
+  width: 112px; height: 11px;
+}
+.g {
+  left: 14px; top: 27px;
+  width: 38px; height: 1px;
+}
+.h {
+  top:3px; left:1px; right:5px; bottom:1px;
+  width:auto; height:auto;
+}
+.i, .j {
+  top:3px; left:1px; right:5px; bottom:1px;
+  border:none;
+  width:auto; height:auto;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="g abs">g</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="g abs">g</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid zero-size">
+<span class="b abs" style="width:12px">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="height:7px">
+<span class="i abs">i</span>
+</div>
+
+<div class="grid" style="height:7px">
+<span class="j abs">j</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
+<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
+<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
+<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
+</div>
+
+<div class="grid" style="width:43px; height:28px; border-width:0;">
+<span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span>
+</div>
+<div class="grid" style="width:43px; height:28px; border-width:0;">
+<span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span>
+</div>
+<div class="grid" style="width:43px; height:28px; border-width:0;">
+<span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span>
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-001.html b/layout/reftests/css-grid/grid-abspos-items-001.html
new file mode 100644
index 0000000000..97ac1f77b2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-001.html
@@ -0,0 +1,190 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-001-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ border: 1px solid;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 7px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 60px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:auto; }
+
+.a {
+  grid-column: 1 / 3; 
+  grid-row:    3 / 5;
+  background: blue;
+}
+
+.abs {
+  position: absolute;
+  top:3px; left:1px; right:5px; bottom:1px;
+  opacity: 0.7;
+}
+.b {
+  grid-column:  auto / 2;
+  grid-row:     auto / auto; 
+}
+.c {
+  grid-column:  9 / auto;  /* 9 is outside the grid */
+  grid-row:     9 / auto;  /* 9 is outside the grid */
+}
+.d {
+  grid-column:  auto / 1;
+  grid-row:     2 / 1;
+}
+.e {
+  grid-column:  4 / auto;
+  grid-row:     3 / auto;
+}
+.f {
+  grid-column:  4 / auto;
+  grid-row:     auto / 1;
+}
+.g {
+  grid-column:  1 / 3;
+  grid-row:     2 / 3;
+}
+.h {
+  grid-column:  auto / auto;
+  grid-row:     auto / auto; 
+}
+.i {
+  grid-column:  span 1 / span 2;
+  grid-row:     span 2 / span A;
+  background: lime;
+}
+.j {
+  grid-column:  span A / span 2;
+  grid-row:     span 2 / span 1;
+  background: lime;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="g abs">g</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<div><span class="b abs">b</span></div>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<x><span class="c abs">c</span></x>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<div><span class="e abs">e</span></div>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<x><span class="g abs">g</span></x>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid zero-size">
+<span class="b abs">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="i abs">i</div>
+</div>
+
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="j abs">j</div>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
+<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
+<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span>
+<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
+</div>
+
+<div class="grid" style="width:0px; height:0px; border-width:0;">
+<span class="abs" style="grid-column-start:2; grid-row-end:1;"></span>
+</div>
+<div class="grid" style="width:0px; height:0px; border-width:0;">
+<span class="abs" style="grid-column-end:1; grid-row-start:2;"></span>
+</div>
+<div class="grid" style="width:0px; height:0px; border-width:0;">
+<span class="abs" style="grid-column-start:2; grid-row-start:2;"></span>
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-002-ref.html b/layout/reftests/css-grid/grid-abspos-items-002-ref.html
new file mode 100644
index 0000000000..9be7f8adf5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-002-ref.html
@@ -0,0 +1,176 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ top:2px; left:1px;
+ border: 1px solid;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 7px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 60px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:0px; }
+
+.a {
+  position: absolute;
+  left: 13px; top: 31px;
+  height: 12px; width: 44px;
+  background: blue;
+}
+
+.abs {
+  position: absolute;
+  opacity: 0.7;
+  width: 21px;
+  height: 15px;
+}
+.b {
+  left: 1px; top: 3px; bottom: 1px;
+  width: 28px; height: auto;
+}
+.c {
+  right: 5px; bottom: 1px;
+  width: 112px; height: 82px;
+}
+.d {
+  left: 1px; top: 20px;
+  width: 5px; height: 1px;
+}
+.e {
+  right: 5px; bottom: 1px;
+  width: 112px; height: 51px;
+}
+.f {
+  right: 5px; top: 3px;
+  width: 112px; height: 11px;
+}
+.g {
+  left: 14px; top: 27px;
+  width: 38px; height: 1px;
+}
+.h {
+  top:3px; left:1px; right:5px; bottom:1px;
+  width:auto; height:auto;
+}
+.i, .j {
+  top:3px; left:1px; right:5px; bottom:1px;
+  border:none;
+  width:auto; height:auto;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="g abs">g</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="g abs">g</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid zero-size">
+<span class="b abs" style="width:12px">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="height:7px">
+<span class="i abs">i</span>
+</div>
+
+<div class="grid" style="height:7px">
+<span class="j abs">j</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
+<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
+<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
+<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-002.html b/layout/reftests/css-grid/grid-abspos-items-002.html
new file mode 100644
index 0000000000..a045ab0be1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-002.html
@@ -0,0 +1,180 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-002-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ transform: translate(1px,2px);
+ border: 1px solid;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 7px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 60px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:auto; }
+
+.a {
+  grid-column: 1 / 3; 
+  grid-row:    3 / 5;
+  background: blue;
+}
+
+.abs {
+  position: fixed;
+  top:3px; left:1px; right:5px; bottom:1px;
+  opacity: 0.7;
+}
+.b {
+  grid-column:  auto / 2;
+  grid-row:     auto / auto; 
+}
+.c {
+  grid-column:  9 / auto;  /* 9 is outside the grid */
+  grid-row:     9 / auto;  /* 9 is outside the grid */
+}
+.d {
+  grid-column:  auto / 1;
+  grid-row:     2 / 1;
+}
+.e {
+  grid-column:  4 / auto;
+  grid-row:     3 / auto;
+}
+.f {
+  grid-column:  4 / auto;
+  grid-row:     auto / 1;
+}
+.g {
+  grid-column:  1 / 3;
+  grid-row:     2 / 3;
+}
+.h {
+  grid-column:  auto / auto;
+  grid-row:     auto / auto; 
+}
+.i {
+  grid-column:  span 1 / span 2;
+  grid-row:     span 2 / span A;
+  background: lime;
+}
+.j {
+  grid-column:  span A / span 2;
+  grid-row:     span 2 / span 1;
+  background: lime;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="g abs">g</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid">
+<span class="a"></span>
+<div><span class="b abs">b</span></div>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<x><span class="c abs">c</span></x>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<div><span class="e abs">e</span></div>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<x><span class="g abs">g</span></x>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid zero-size">
+<span class="b abs">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="i abs">i</div>
+</div>
+
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="j abs">j</div>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
+<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
+<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span>
+<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-003-ref.html b/layout/reftests/css-grid/grid-abspos-items-003-ref.html
new file mode 100644
index 0000000000..74cb8e3368
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-003-ref.html
@@ -0,0 +1,71 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
+  margin-right: 4px;
+  inline-size: 55px;
+  block-size: 43px;
+}
+
+abs1,abs2 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+abs2 { background:white; }
+.hl abs2  { top:13px;left:11px;  height:23px; width:31px; }
+.hr abs2  { top:13px;right:11px; height:23px; width:31px;  }
+.vl abs2  { top:11px;left:13px;  height:31px; width:23px;  }
+.vr abs2  { top:11px;right:13px; height:31px; width:23px;  }
+.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px;  }
+.vrl abs2 { top:11px;right:13px; height:31px; width:23px;  }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-003.html b/layout/reftests/css-grid/grid-abspos-items-003.html
new file mode 100644
index 0000000000..89ea7f2b01
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-003.html
@@ -0,0 +1,69 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-004-ref.html b/layout/reftests/css-grid/grid-abspos-items-004-ref.html
new file mode 100644
index 0000000000..0f1d6b8a84
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-004-ref.html
@@ -0,0 +1,73 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 11px 13px 15px 17px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
+  margin-right: 4px;
+  inline-size: 55px;
+  block-size: 43px;
+}
+
+abs1,abs2 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+  margin:11px 13px 15px 17px;
+}
+
+abs2 { background:white; }
+.hl abs2  { top:13px;left:11px;  height:23px; width:31px; }
+.hr abs2  { top:13px;right:11px; height:23px; width:31px;  }
+.vl abs2  { top:11px;left:13px;  height:31px; width:23px;  }
+.vr abs2  { top:11px;right:13px; height:31px; width:23px;  }
+.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px;  }
+.vrl abs2 { top:11px;right:13px; height:31px; width:23px;  }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-004.html b/layout/reftests/css-grid/grid-abspos-items-004.html
new file mode 100644
index 0000000000..e960440217
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-004.html
@@ -0,0 +1,70 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 11px 13px 15px 17px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-005-ref.html b/layout/reftests/css-grid/grid-abspos-items-005-ref.html
new file mode 100644
index 0000000000..fc0c44c2cb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-005-ref.html
@@ -0,0 +1,74 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
+  margin-right: 4px;
+  inline-size: 65px;
+  block-size: 43px;
+}
+
+abs1,abs2 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+  margin:1px;
+  margin-inline-end:11px;
+}
+
+abs2 { background:white; }
+.hl abs2  { top:13px;left:11px;  height:23px; width:31px; }
+.hr abs2  { top:13px;right:11px; height:23px; width:31px;  }
+.vl abs2  { top:11px;left:13px;  height:31px; width:23px;  }
+.vr abs2  { top:11px;right:13px; height:31px; width:23px;  }
+.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px;  }
+.vrl abs2 { top:11px;right:13px; height:31px; width:23px;  }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-005.html b/layout/reftests/css-grid/grid-abspos-items-005.html
new file mode 100644
index 0000000000..897ce76c4c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-005.html
@@ -0,0 +1,71 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+  inline-size: 65px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-006-ref.html b/layout/reftests/css-grid/grid-abspos-items-006-ref.html
new file mode 100644
index 0000000000..efca38b24b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-006-ref.html
@@ -0,0 +1,71 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
+  margin-right: 4px;
+  inline-size: 55px;
+  block-size: 57px;
+}
+
+abs1,abs2 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+  margin-block-end:14px;
+}
+abs2 { background:white; }
+.hl abs2  { top:13px;left:11px;  height:23px; width:31px; }
+.hr abs2  { top:13px;right:11px; height:23px; width:31px;  }
+.vl abs2  { top:11px;left:13px;  height:31px; width:23px;  }
+.vr abs2  { top:11px;right:13px; height:31px; width:23px;  }
+.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px;  }
+.vrl abs2 { top:11px;right:13px; height:31px; width:23px;  }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-006.html b/layout/reftests/css-grid/grid-abspos-items-006.html
new file mode 100644
index 0000000000..4209a7caad
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-006.html
@@ -0,0 +1,70 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-006-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+  block-size: 57px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-007-ref.html b/layout/reftests/css-grid/grid-abspos-items-007-ref.html
new file mode 100644
index 0000000000..97f5837ff9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-007-ref.html
@@ -0,0 +1,61 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  inline-size: 55px;
+  block-size: 43px;
+  margin-right: 4px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-007.html b/layout/reftests/css-grid/grid-abspos-items-007.html
new file mode 100644
index 0000000000..b092f9ea6b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-007.html
@@ -0,0 +1,62 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-007-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-008-ref.html b/layout/reftests/css-grid/grid-abspos-items-008-ref.html
new file mode 100644
index 0000000000..8131e13454
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-008-ref.html
@@ -0,0 +1,62 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 11px 13px 15px 17px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  inline-size: 55px;
+  block-size: 43px;
+  margin-right: 4px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-008.html b/layout/reftests/css-grid/grid-abspos-items-008.html
new file mode 100644
index 0000000000..a3a9d75365
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-008.html
@@ -0,0 +1,63 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-008-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 11px 13px 15px 17px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-009-ref.html b/layout/reftests/css-grid/grid-abspos-items-009-ref.html
new file mode 100644
index 0000000000..1714ec63aa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-009-ref.html
@@ -0,0 +1,63 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  inline-size: 55px;
+  block-size: 43px;
+  margin-right: 4px;
+  block-size: 57px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-009.html b/layout/reftests/css-grid/grid-abspos-items-009.html
new file mode 100644
index 0000000000..35bc6d7488
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-009.html
@@ -0,0 +1,64 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-009-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+  block-size: 57px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-010-ref.html b/layout/reftests/css-grid/grid-abspos-items-010-ref.html
new file mode 100644
index 0000000000..53e2a343ce
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-010-ref.html
@@ -0,0 +1,62 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  inline-size: 65px;
+  block-size: 43px;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
+  margin-right: 4px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-010.html b/layout/reftests/css-grid/grid-abspos-items-010.html
new file mode 100644
index 0000000000..abd2774cb0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-010.html
@@ -0,0 +1,63 @@
+<!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: abs pos areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-010-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
+  margin-right: 4px;
+  inline-size: 65px;
+}
+
+abs1 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-011-ref.html b/layout/reftests/css-grid/grid-abspos-items-011-ref.html
new file mode 100644
index 0000000000..55ddb6da8b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-011-ref.html
@@ -0,0 +1,82 @@
+<!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: abs pos areas in empty grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099">
+  <style type="text/css">
+
+div {
+  display: block;
+  position: relative;
+  float: left;
+  width: 20px;
+  height: 20px;
+  background: red;
+}
+x div {
+  padding: 4px;
+  background: white;
+}
+
+span {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lime;
+}
+
+</style>
+</head>
+<body>
+
+There should be no red areas.
+<br clear="all">
+
+<div><span class="cs"></span></div>
+<div><span class="ce"></span></div>
+<div><span class="rs"></span></div>
+<div><span class="re"></span></div>
+
+<div><span class="cs ce"></span></div>
+<div><span class="cs rs"></span></div>
+<div><span class="cs re"></span></div>
+<div><span class="ce rs"></span></div>
+<div><span class="ce re"></span></div>
+<div><span class="rs re"></span></div>
+
+<div><span class="cs ce rs"></span></div>
+<div><span class="cs ce re"></span></div>
+<div><span class="rs re cs"></span></div>
+<div><span class="rs re ce"></span></div>
+
+<div><span class="cs ce rs re"></span></div>
+
+<br clear="all">
+<br clear="all">
+
+<x>
+<div><span class="cs" style="left:4px"></span></div>
+<div><span class="ce" style="right:auto;width:4px"></span></div>
+<div><span class="rs" style="top:4px"></span></div>
+<div><span class="re" style="bottom:auto;height:4px"></span></div>
+
+<div><span class="cs ce" style="left:4px;"></span></div>
+<div><span class="cs rs" style="left:4px;top:4px"></span></div>
+<div><span class="cs re" style="left:4px;bottom:auto;height:4px"></span></div>
+<div><span class="ce rs" style="right:auto;width:4px;top:4px"></span></div>
+<div><span class="ce re" style="right:auto;width:4px;bottom:auto;height:4px"></span></div>
+<div><span class="rs re" style="top:4px"></span></div>
+
+<div><span class="cs ce rs" style="left:4px;top:4px"></span></div>
+<div><span class="cs ce re" style="left:4px;bottom:auto;height:4px"></span></div>
+<div><span class="rs re cs" style="left:4px;top:4px"></span></div>
+<div><span class="rs re ce" style="top:4px;right:auto;width:4px"></span></div>
+
+<div><span class="cs ce rs re" style="left:4px;top:4px"></span></div>
+</x>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-011.html b/layout/reftests/css-grid/grid-abspos-items-011.html
new file mode 100644
index 0000000000..5706998fef
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-011.html
@@ -0,0 +1,97 @@
+<!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: abs pos areas in empty grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-011-ref.html">
+  <style type="text/css">
+
+div {
+  display: grid;
+  position: relative;
+  float: left;
+  width: 20px;
+  height: 20px;
+  background: red;
+}
+div.green {
+  background: lime;
+}
+x div {
+  padding: 4px;
+  background: white;
+}
+
+span {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lime;
+}
+span.red {
+  background: red;
+}
+
+.cs { grid-column-start: 1; }
+.ce { grid-column-end: 1; }
+.rs { grid-row-start: 1; }
+.re { grid-row-end: 1; }
+
+</style>
+</head>
+<body>
+
+There should be no red areas.
+<br clear="all">
+
+<div><span class="cs"></span></div>
+<div class="green"><span class="ce red"></span></div>
+<div><span class="rs"></span></div>
+<div class="green"><span class="re red"></span></div>
+
+<div><span class="cs ce"></span></div>
+<div><span class="cs rs"></span></div>
+<div class="green"><span class="cs re red"></span></div>
+<div class="green"><span class="ce rs red"></span></div>
+<div class="green"><span class="ce re red"></span></div>
+<div><span class="rs re"></span></div>
+
+<div><span class="cs ce rs"></span></div>
+<div class="green"><span class="cs ce re red"></span></div>
+<div><span class="rs re cs"></span></div>
+<div class="green"><span class="rs re ce red"></span></div>
+
+<div><span class="cs ce rs re"></span></div>
+
+<br clear="all">
+<br clear="all">
+
+<!-- the same combinations in a grid container with padding -->
+
+<x>
+<div><span class="cs"></span></div>
+<div><span class="ce"></span></div>
+<div><span class="rs"></span></div>
+<div><span class="re"></span></div>
+
+<div><span class="cs ce"></span></div>
+<div><span class="cs rs"></span></div>
+<div><span class="cs re"></span></div>
+<div><span class="ce rs"></span></div>
+<div><span class="ce re"></span></div>
+<div><span class="rs re"></span></div>
+
+<div><span class="cs ce rs"></span></div>
+<div><span class="cs ce re"></span></div>
+<div><span class="rs re cs"></span></div>
+<div><span class="rs re ce"></span></div>
+
+<div><span class="cs ce rs re"></span></div>
+</x>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-012-ref.html b/layout/reftests/css-grid/grid-abspos-items-012-ref.html
new file mode 100644
index 0000000000..e0feef2051
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-012-ref.html
@@ -0,0 +1,45 @@
+<!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: margin:auto on grid abs.pos. child</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <style type="text/css">
+
+div {
+  display: block;
+  position: relative;
+  grid-template-columns: 100px;
+  grid-template-rows: 100px;
+  width: 100px;
+  height: 100px;
+  border: 1px solid;
+}
+
+span {
+  display: block;
+  position: absolute;
+  background: lime;
+  width: 20px;
+  height: 20px;
+  margin: 5px 7px 11px 13px;
+  top:0; left:0; right:0; bottom:0;
+}
+
+  </style>
+</head>
+<body>
+
+<div><span style="margin-left:auto"></span></div>
+<div><span style="margin-right:auto"></span></div>
+<div><span style="margin-left:auto; margin-right:auto"></span></div>
+<div><span style="margin-top:auto"></span></div>
+<div><span style="margin-bottom:auto"></span></div>
+<div><span style="margin-top:auto; margin-bottom:auto"></span></div>
+<div><span style="margin:auto"></span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-012.html b/layout/reftests/css-grid/grid-abspos-items-012.html
new file mode 100644
index 0000000000..69c96640c1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-012.html
@@ -0,0 +1,47 @@
+<!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: margin:auto on grid abs.pos. child</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos">
+  <link rel="match" href="grid-abspos-items-012-ref.html">
+  <style type="text/css">
+
+div {
+  display: grid;
+  position: relative;
+  grid-template-columns: 100px;
+  grid-template-rows: 100px;
+  width: 100px;
+  height: 100px;
+  border: 1px solid;
+}
+
+span {
+  display: block;
+  position: absolute;
+  background: lime;
+  width: 20px;
+  height: 20px;
+  margin: 5px 7px 11px 13px;
+  top:0; left:0; right:0; bottom:0;
+}
+
+  </style>
+</head>
+<body>
+
+<div><span style="margin-left:auto"></span></div>
+<div><span style="margin-right:auto"></span></div>
+<div><span style="margin-left:auto; margin-right:auto"></span></div>
+<div><span style="margin-top:auto"></span></div>
+<div><span style="margin-bottom:auto"></span></div>
+<div><span style="margin-top:auto; margin-bottom:auto"></span></div>
+<div><span style="margin:auto"></span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-013-ref.html b/layout/reftests/css-grid/grid-abspos-items-013-ref.html
new file mode 100644
index 0000000000..3e4ef381b1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-013-ref.html
@@ -0,0 +1,133 @@
+<!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: grid abs.pos. child in grid with gutters</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230695">
+  <style type="text/css">
+body { width:800px; }
+
+.grid {
+  display: block;
+  position: relative;
+  grid-template-columns: repeat(5, 20px);
+  grid-auto-rows: 10px;
+  grid-gap: 100px 10px;
+  border: 1px solid;
+  padding: 0 3px 0 5px;
+  height: 40px;
+  margin-bottom: 2px;
+}
+.grid.r {
+  grid-template-columns: 20px;
+  grid-template-rows: repeat(5, 20px);
+  height: 160px;
+  padding: 2px 3px 4px 5px;
+  float: left;
+  min-width: 70px;
+  margin-right: 2px;
+}
+
+x {
+  position: absolute;
+  width: 20px;
+  height: 10px;
+  background: lime;
+}
+
+a {
+  position: absolute;
+  left:0; right:0; bottom:20px; height: 3px;
+  background: black;
+}
+b {
+  position: absolute;
+  left:0; right:0; bottom:10px; height: 3px;
+  background: grey;
+}
+c {
+  position: absolute;
+  left:0; right:0; bottom:0; height: 3px;
+  background: blue;
+}
+
+.r a {
+  left:50px; top:0; bottom:0; width: 3px; height:auto;
+}
+.r b {
+  left:40px; top:0; bottom:0; width: 3px; height:auto;
+}
+.r c {
+  left:30px; top:0; bottom:0; width: 3px; height:auto;
+}
+
+x:nth-of-type(1) { left:5px; }
+x:nth-of-type(2) { left:125px; }
+x:nth-of-type(3) { left:245px; }
+x:nth-of-type(4) { left:365px; }
+
+.r x { left:5px; height:20px; }
+.r x:nth-of-type(1) { top:2px; }
+.r x:nth-of-type(2) { top:32px; }
+.r x:nth-of-type(3) { top:62px; }
+.r x:nth-of-type(4) { top:92px; }
+
+.s x:nth-of-type(1) { left:120px; }
+.s x:nth-of-type(2) { left:255px; }
+.s x:nth-of-type(3) { left:390px; }
+.s x:nth-of-type(4) { left:525px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x></x><x></x><x></x><x></x>
+<a style="left:125px; width:140px"></a><b style="width:265px"></b><c style="left:365px"></c>
+</div>
+
+<div class="grid">
+<x></x><x></x><x></x><x></x>
+<a style="left:5px; width:260px"></a><b style="width:5px"></b><c style="left:5px"></c>
+</div>
+
+<div class="grid">
+<x></x><x></x><x></x><x></x>
+<a style="left:505px"></a><b style="width:505px"></b><c style="left:505px"></c>
+</div>
+
+<div class="grid s">
+<x></x><x></x><x></x><x></x>
+<a style="left:255px; width:155px"></a><b style="width:410px"></b><c style="left:525px"></c>
+</div>
+
+<div class="grid s">
+<x></x><x></x><x></x><x></x>
+<a style="left:120px; width:290px"></a><b style="width:120px"></b><c style="left:120px"></c>
+</div>
+
+<div class="grid s">
+<x></x><x></x><x></x><x></x>
+<a style="left:680px"></a><b style="width:680px"></b><c style="left:680px"></c>
+</div>
+
+<div class="grid r">
+<x></x><x></x><x></x><x></x>
+<a style="top:32px; height:50px"></a><b style="height:82px"></b><c style="top:92px"></c>
+</div>
+
+<div class="grid r">
+<x></x><x></x><x></x><x></x>
+<a style="top:2px; height:80px"></a><b style="height:2px"></b><c style="top:2px"></c>
+</div>
+
+<div class="grid r">
+<x></x><x></x><x></x><x></x>
+<a style="top:142px"></a><b style="height:142px"></b><c style="top:142px"></c>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-013.html b/layout/reftests/css-grid/grid-abspos-items-013.html
new file mode 100644
index 0000000000..9cb3c82a3c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-013.html
@@ -0,0 +1,120 @@
+<!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: grid abs.pos. child in grid with gutters</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230695">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos">
+  <link rel="match" href="grid-abspos-items-013-ref.html">
+  <style type="text/css">
+body { width:800px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  grid-template-columns: repeat(5, 20px);
+  grid-auto-rows: 10px;
+  grid-gap: 10px 100px;
+  border: 1px solid;
+  padding: 0 3px 0 5px;
+  height: 40px;
+  margin-bottom: 2px;
+}
+.grid.r {
+  grid-template-columns: 20px;
+  grid-template-rows: repeat(5, 20px);
+  height: 160px;
+  padding: 2px 3px 4px 5px;
+  float: left;
+  min-width: 70px;
+  margin-right: 2px;
+}
+.c.s {
+  justify-content: space-evenly;
+  grid-gap: 0;
+}
+
+x {
+  background: lime;
+}
+
+a {
+  position: absolute;
+  left:0; right:0; bottom:20px; height: 3px;
+  background: black;
+}
+b {
+  position: absolute;
+  left:0; right:0; bottom:10px; height: 3px;
+  background: grey;
+}
+c {
+  position: absolute;
+  left:0; right:0; bottom:0; height: 3px;
+  background: blue;
+}
+
+.r a {
+  left:50px; top:0; bottom:0; width: 3px; height:auto;
+}
+.r b {
+  left:40px; top:0; bottom:0; width: 3px; height:auto;
+}
+.r c {
+  left:30px; top:0; bottom:0; width: 3px; height:auto;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid c">
+<x></x><x></x><x></x><x></x>
+<a style="grid-column:2/4"></a><b style="grid-column:auto/4"></b><c style="grid-column:4/auto"></c>
+</div>
+
+<div class="grid c">
+<x></x><x></x><x></x><x></x>
+<a style="grid-column:1/4"></a><b style="grid-column:auto/1"></b><c style="grid-column:1/auto"></c>
+</div>
+
+<div class="grid c">
+<x></x><x></x><x></x><x></x>
+<a style="grid-column:6/6"></a><b style="grid-column:auto/6"></b><c style="grid-column:6/auto"></c>
+</div>
+
+<div class="grid c s">
+<x></x><x></x><x></x><x></x>
+<a style="grid-column:2/4"></a><b style="grid-column:auto/4"></b><c style="grid-column:4/auto"></c>
+</div>
+
+<div class="grid c s">
+<x></x><x></x><x></x><x></x>
+<a style="grid-column:1/4"></a><b style="grid-column:auto/1"></b><c style="grid-column:1/auto"></c>
+</div>
+
+<div class="grid c s">
+<x></x><x></x><x></x><x></x>
+<a style="grid-column:6/6"></a><b style="grid-column:auto/6"></b><c style="grid-column:6/auto"></c>
+</div>
+
+<div class="grid r">
+<x></x><x></x><x></x><x></x>
+<a style="grid-row:2/4"></a><b style="grid-row:auto/4"></b><c style="grid-row:4/auto"></c>
+</div>
+
+<div class="grid r">
+<x></x><x></x><x></x><x></x>
+<a style="grid-row:1/4"></a><b style="grid-row:auto/1"></b><c style="grid-row:1/auto"></c>
+</div>
+
+<div class="grid r">
+<x></x><x></x><x></x><x></x>
+<a style="grid-row:6/6"></a><b style="grid-row:auto/6"></b><c style="grid-row:6/auto"></c>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-014-ref.html b/layout/reftests/css-grid/grid-abspos-items-014-ref.html
new file mode 100644
index 0000000000..2cc4989b6a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-014-ref.html
@@ -0,0 +1,78 @@
+<!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: abs pos static position (grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 3px 51px 5px / 5px 33px 7px;
+  margin-right: 4px;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { top:17px; bottom:2px; background:lime; }
+abs2 { right:13px; left:3px; background:pink; }
+abs3 { right:5px; left:11px; top:9px; background:cyan; }
+abs4 { top:23px; bottom:1px; left:11px; background:yellow; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+x {
+  position: relative;
+  grid-area: 2 / 2 / 3 / 3;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(x = document.createElement("x"));
+    x.appendChild(document.createElement("abs1"));
+    x.appendChild(document.createElement("abs2"));
+    x.appendChild(document.createElement("abs3"));
+    x.appendChild(document.createElement("abs4"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-014.html b/layout/reftests/css-grid/grid-abspos-items-014.html
new file mode 100644
index 0000000000..000914ca0f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-014.html
@@ -0,0 +1,80 @@
+<!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: abs pos static position (grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position">
+  <link rel="match" href="grid-abspos-items-014-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 3px 51px 5px / 5px 33px 7px;
+  margin-right: 4px;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { top:17px; bottom:2px; background:lime; }
+abs2 { right:13px; left:3px; background:pink; }
+abs3 { right:5px; left:11px; top:9px; background:cyan; }
+abs4 { top:23px; bottom:1px; left:11px; background:yellow; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+x {
+  grid-area: 2 / 2 / 3 / 3;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    div.appendChild(document.createElement("x"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-015-ref.html b/layout/reftests/css-grid/grid-abspos-items-015-ref.html
new file mode 100644
index 0000000000..13cd190ee3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-015-ref.html
@@ -0,0 +1,114 @@
+<!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: abs pos static position (ancestor of grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  position: relative;
+  display: grid;
+  padding: 1px 3px 5px 7px;
+  grid-template: 25px 33px 7px / 30px 51px 5px;
+  margin-right: 4px;
+  height: 100px;
+  width: 100px;
+}
+.wrap {
+  position: relative;
+  float: left;
+  padding: 3px 5px 7px 9px;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  writing-mode: vertical-lr; direction:rtl;
+  z-index:1;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { height:97px; top:-12px; left:-37px; background:lime; }
+abs2 { right:-18px; left:3px; background:pink; }
+abs3 { top: -20px; left:-35px; right:-26px; background:cyan; }
+abs4 { top:-6px; bottom:-53px; background:silver; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hr abs3 { left:-24px; right:-37px;  }
+.vl abs3, .vr abs3, .vrl abs3, .vlr abs3 { left:-30px; top:-14px; right:-49px; }
+.vr abs3, .vrl abs3 { left:-47px; right:-32px; }
+.vrl abs3 { top:-25px; }
+
+.hl abs2, .hr abs2 { top:-25px; }
+.hl abs2 { left:-43px; }
+.hr abs2 { left:-32px; right:-29px; }
+.vl abs2, .vr abs2, .vrl abs2, .vlr abs2 { left:-38px; right:-41px; }
+.vr abs2, .vrl abs2 { left:-55px; right:-24px; }
+.vrl abs2 { top:-16px; }
+
+.hr abs1 { left: 94px; }
+.vl abs1, .vr abs1, .vrl abs1, .vlr abs1 { top:-6px; left:-32px; }
+.vr abs1, .vrl abs1 { left:71px; }
+.vrl abs1 { top:-17px; }
+
+.hl abs4 { left:51px; }
+.hr abs4 { left:10px; }
+.vl abs4, .vr abs4, .vrl abs4, .vlr abs4 { top:0px; bottom:-41px; left:-25px; }
+.vr abs4, .vrl abs4 { left:68px; }
+.vrl abs4 { top:-11px; bottom:-29px; }
+
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+
+    div.appendChild(span = document.createElement("span"));
+    span.appendChild(document.createTextNode("A"));
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(span = document.createElement("span"));
+    span.appendChild(document.createTextNode("BC"));
+
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    var wrap = document.createElement("div");
+    wrap.className = "wrap ";
+    wrap.appendChild(div);
+    document.body.appendChild(wrap)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-abspos-items-015.html b/layout/reftests/css-grid/grid-abspos-items-015.html
new file mode 100644
index 0000000000..aaa7dc47e6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-015.html
@@ -0,0 +1,99 @@
+<!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: abs pos static position (ancestor of grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position">
+  <link rel="match" href="grid-abspos-items-015-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  padding: 1px 3px 5px 7px;
+  grid-template: 25px 33px 7px / 30px 51px 5px;
+  margin-right: 4px;
+  height: 100px;
+  width: 100px;
+}
+.wrap {
+  position: relative;
+  float: left;
+  padding: 3px 5px 7px 9px;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  writing-mode: vertical-lr; direction:rtl;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { top:17px; bottom:2px; background:lime; }
+abs2 { right:13px; left:3px; background:pink; }
+abs3 { right:5px; left:11px; top:9px; background:cyan; }
+abs4 { top:23px; bottom:1px; background:silver; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+x {
+  grid-area: 2 / 2 / 3 / 3;
+}
+y {
+  grid-area: 3 / 3;
+  display: block;
+}
+z {
+  grid-area: 1 / 3;
+  display: block;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createTextNode("A"));
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createTextNode("BC"));
+    div.appendChild(y = document.createElement("y"));
+    y.appendChild(document.createElement("abs3"));
+    div.appendChild(z = document.createElement("z"));
+    z.appendChild(document.createElement("abs4"));
+    var wrap = document.createElement("div");
+    wrap.className = "wrap ";
+    wrap.appendChild(div);
+    document.body.appendChild(wrap)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-align-content-001-ref.html b/layout/reftests/css-grid/grid-align-content-001-ref.html
new file mode 100644
index 0000000000..f67baf5307
--- /dev/null
+++ b/layout/reftests/css-grid/grid-align-content-001-ref.html
@@ -0,0 +1,91 @@
+<!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: align-content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 40px;
+}
+
+item1,item2,item3 {
+  display: block;
+  position: relative;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.aend *, .aflexend * { offset-block-start:25px; }
+.acenter * { offset-block-start:12.5px;  }
+
+
+.aspace-between item2 { offset-block-start:12.5px; }
+.aspace-between item3 { offset-block-start:25px; }
+
+.aspace-around item1 { offset-block-start:4.1666px; }
+.aspace-around item2 { offset-block-start:12.5px; }
+.aspace-around item3 { offset-block-start:20.8333px; }
+
+.aspace-evenly item1 { offset-block-start:6.25px; }
+.aspace-evenly item2 { offset-block-start:12.5px; }
+.aspace-evenly item3 { offset-block-start:18.75px; }
+
+.astretch2 { grid-template-rows: 1fr 5px 7px; }
+.astretch3 { grid-template-rows: 15.5px 17.5px 7px; }
+.astretch4 { grid-template-rows: 11.33333px 13.33333px 15.33333px; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-align-content-001.html b/layout/reftests/css-grid/grid-align-content-001.html
new file mode 100644
index 0000000000..725b654083
--- /dev/null
+++ b/layout/reftests/css-grid/grid-align-content-001.html
@@ -0,0 +1,90 @@
+<!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: align-content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+  <link rel="match" href="grid-align-content-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 40px;
+}
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-content:start; }
+.aend { align-content:end; }
+.aflexstart { align-content:flex-start; }
+.aflexend { align-content:flex-end; }
+.acenter { align-content:center; }
+.aleft { align-content:left; }
+.aright { align-content:right; }
+
+.aspace-between{ align-content:space-between; }
+.aspace-around { align-content:space-around;  }
+.aspace-evenly { align-content:space-evenly;  }
+
+.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
+.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
+.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
+.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
new file mode 100644
index 0000000000..a0d9180a22
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
@@ -0,0 +1,123 @@
+<!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: Testing 'auto' min-sizing with definite min-width/height</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-size:12px; padding:0; margin:0; }
+br { clear:both; }
+	
+.grid {
+  display: grid;
+  border: 1px dashed silver;
+  grid-template-columns: minmax(0,min-content);
+  grid-template-rows: minmax(0,min-content) minmax(0,min-content);
+  float: left;
+  margin-bottom:20px;
+  align-items: start;
+  justify-items: start;
+}
+.v { 
+  writing-mode: vertical-lr;
+  -webkit-writing-mode: vertical-lr;
+}
+.h { 
+  writing-mode: horizontal-tb;
+  -webkit-writing-mode: horizontal-tb;
+}
+.bb {
+  box-sizing: border-box;
+}
+
+span { 
+  display: block;
+  background: lime;
+  margin: 7px 13px 50% 20%;
+  padding:1px 3px 10% 30%;
+}
+
+span.v {
+  height: 30px;
+  width: 10px;
+  border-left: 1px solid;
+  border-top: 3px solid;
+}
+
+span.h {
+  width: 30px;
+  height: 10px;
+  border-left: 3px solid;
+  border-top: 1px solid;
+}
+
+b40 {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border: 1px solid pink;
+  z-index: 1; position:relative;
+}
+
+w {
+  position:absolute;
+  background: lime;
+  border-width: 1px 0 0 3px;
+  border-style: solid;
+  height:48px;
+  width:75px;
+}
+.v > w {
+  border-width: 3px 0 0 1px;
+  left:-1px; top:-3px;
+  height:53px;
+  width:61px;
+}
+.h.r { margin-left:19px; padding: 1px 15px 37px 30px; }
+.v .h > w {
+  height:48px;
+  width:45px;
+}
+.v.r > w {
+  height:53px;
+  width:61px;
+}
+.v .v > w {
+  height:41px;
+  width:45px;
+}
+
+.r { position:relative; }
+
+.t6 { width:46px; }
+.t8 { width:118px; }
+
+xx { 
+  display: block;
+  background: lime;
+  padding:32px 32px 16px 32px;
+  margin: 0 0 32px 16px;
+}
+  </style>
+</head>
+<body>
+
+
+<div class="grid"><span class="h"><x></x></span></div>
+<div class="grid"><span class="h bb"><x></x></span></div>
+<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
+<div class="grid" style="grid:48px / 122px"><span class="h r"><b40></b40></span></div>
+<br>
+<div class="grid"><span class="v"><x></x></span></div>
+<div class="grid t6"><span class="v bb"><x></x></span></div>
+<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
+<div class="grid t8"><span class="v r"><w></w><b40></b40></span></div>
+
+<div class="grid"><xx class="v"></xx></div>
+<div class="grid v"><xx class="h"></xx></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html
new file mode 100644
index 0000000000..ecedf1512f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html
@@ -0,0 +1,91 @@
+<!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: 'auto' min-sizing with definite min-width/height</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-grid/#min-size-auto">
+  <link rel="match" href="grid-auto-min-sizing-definite-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+br { clear:both; }
+	
+.grid {
+  display: grid;
+  border: 1px dashed silver;
+  grid-template-columns: minmax(auto,0);
+  grid-template-rows: minmax(auto,0) minmax(auto,0);
+  float: left;
+  margin-bottom:20px;
+  align-items: start;
+  justify-items: start;
+}
+.v { 
+  writing-mode: vertical-lr;
+  -webkit-writing-mode: vertical-lr;
+}
+.h { 
+  writing-mode: horizontal-tb;
+  -webkit-writing-mode: horizontal-tb;
+}
+.bb {
+  box-sizing: border-box;
+}
+
+span { 
+  display: block;
+  background: lime;
+  margin: 7px 13px 50% 20%;
+  padding:1px 3px 10% 30%;
+}
+
+span.v {
+  min-height: 30px;
+  min-width: 10px;
+  border-left: 1px solid;
+  border-top: 3px solid;
+}
+
+span.h {
+  min-width: 30px;
+  min-height: 10px;
+  border-left: 3px solid;
+  border-top: 1px solid;
+}
+
+b40 {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border: 1px solid pink;
+}
+
+xx { 
+  display: block;
+  background: lime;
+  padding:32px 32px 20% 40%;
+  margin: 0 0 40% 20%;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><span class="h"><x></x></span></div>
+<div class="grid"><span class="h bb"><x></x></span></div>
+<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
+<div class="grid"><span class="h"><b40></b40></span></div>
+<br>
+<div class="grid"><span class="v"><x></x></span></div>
+<div class="grid"><span class="v bb"><x></x></span></div>
+<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
+<div class="grid"><span class="v"><b40></b40></span></div>
+
+<div class="grid"><xx class="v"></xx></div>
+<div class="grid v"><xx class="h"></xx></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html
new file mode 100644
index 0000000000..9f527f8157
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html
@@ -0,0 +1,154 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: auto min-sizing with intrinsic min-width</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-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: minmax(min-content,0) minmax(0,1fr);
+ border: 1px solid;
+ width: 500px;
+ align-items: start;
+ justify-items: start;
+}
+span,img { min-height:0; }
+
+.c1 { border:2px solid;   min-width:auto; }
+.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
+.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
+.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
+.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
+.w20   { width: 20px; }
+.w450  { width: 450px; }
+.max50 { max-width: 50px; }
+.h05   { height: 0.5px; }
+.h4    { height: 4px; }
+
+c2 { opacity:0.5; background: grey; min-height:10px; }
+i { display:inline-block; width:20px; height:10px; background:blue; }
+span, c2 { min-width:0; }
+.rel { border:none; padding:2px; position:relative; }
+.rel2 { border:none; position:relative; }
+z { position:absolute; border:2px solid; width:450px; top:0;bottom:0;left:0; }
+.rel2 z { border:none; background:inherit; }
+  </style>
+</head>
+<body>
+
+<!--
+<div class="grid">
+  <span class="c1"><i style="width:100px"></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c1"></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 rel"><z></z><i style="width:100px;margin-right:-80px;"></i></span><c2></c2>
+</div>
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1" style="width:12.5px" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h4" style="width:100px" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h4 max50"style="width:50px"  src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 rel2" style="height:22px;width:29px"><z style="width:450px;background:lime;border:2px solid;"></z></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 rel2" style="height:6px;width:29px"><z style="width:50px;background:lime;border:2px solid;"></z></span><c2></c2>
+</div>
+-->
+
+<!--
+<div class="grid" style="margin-left:300px; width:200px">
+  <span class="c3">1 2 3 4 5</span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c4"><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4"><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 rel2"><z><i style="width:100px"></i></z><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4"><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c5 w450 max50">1 2 3 4 5</span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c6 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c6 w450 max50">1 2 3 4 5</span><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid">
+  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid" style="grid-template-columns:25px 1fr">
+  <img  class="c6 w450" src="support/lime-25x1.png"><c2 class="rel2"></c2>
+</div>
+<div class="grid" style="grid-template-columns:25px 1fr">
+  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html
new file mode 100644
index 0000000000..095cc1b5b0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.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>CSS Grid Test: auto min-sizing with intrinsic min-width</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-grid/#min-size-auto">
+  <link rel="match" href="grid-auto-min-sizing-intrinsic-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: minmax(auto,0) minmax(0,1fr);
+ border: 1px solid;
+ width: 500px;
+ align-items: start;
+ justify-items: start;
+}
+span,img { min-height:0; }
+
+.c1 { border:2px solid;   min-width:auto; }
+.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
+.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
+.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
+.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
+.w20   { width: 20px; }
+.w450  { width: 450px; }
+.max50 { max-width: 50px; }
+.h05   { height: 0.5px; }
+.h4    { height: 4px; }
+
+c2 { opacity:0.5; background: grey; min-height:10px; }
+i { display:inline-block; width:20px; height:10px; background:blue; }
+  </style>
+</head>
+<body>
+
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid">
+  <span class="c1"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c1"></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h05" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h4" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h4 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w450" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w450 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-left:300px; width:200px">
+  <span class="c3"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c4"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c5 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c5 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c6 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c6 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c6 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid">
+  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c6 w450" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html
new file mode 100644
index 0000000000..ca7244a20d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html
@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: 'auto' min-sizing with intrinsic min-width and overflow:hidden</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-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: minmax(min-content,0) minmax(0,1fr);
+ border: 1px solid;
+ width: 500px;
+ align-items: start;
+ justify-items: start;
+}
+.min4 { grid-template-columns: minmax(4px,0) minmax(0,1fr); }
+span,img { min-height:0; }
+span, c2 { min-width:0; }
+
+.c1 { border:2px solid;   min-width:auto; }
+.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
+.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
+.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
+.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
+.w20   { width: 20px; }
+.w450  { width: 450px; }
+.max50 { max-width: 50px; }
+.h05   { height: 0.5px; }
+.h4    { height: 4px; }
+
+c2 { opacity:0.5; background: grey; min-height:10px; }
+i { display:inline-block; width:20px; height:10px; background:blue; }
+.rel { border:none; padding:2px; position:relative; }
+.rel2 { border:none; position:relative; }
+z { position:absolute; border:2px solid; width:450px; top:0;bottom:0;left:0; }
+.rel2 z { border:none; background:inherit; }
+.hide {  overflow:hidden; }
+  </style>
+</head>
+<body>
+
+<!--
+<div class="grid min4">
+  <span class="c1 hide"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c1"></span><c2></c2>
+</div>
+<div class="grid min4">
+  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid min4">
+  <span class="c1 rel"><z></z><i style="width:100px"></i></span><c2></c2>
+</div>
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid min4">
+  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid min4">
+  <img  class="c1" style="width:12.5px" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid min4">
+  <img  class="c1 h4" style="width:100px" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid min4">
+  <img  class="c1 h4 max50"style="width:50px"  src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid min4">
+  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid min4">
+  <span class="c1 rel2" style="height:22px;width:29px"><z style="width:450px;background:lime;border:2px solid;"></z></span><c2></c2>
+</div>
+<div class="grid min4">
+  <span class="c1 rel2" style="height:6px;width:29px"><z style="width:50px;background:lime;border:2px solid;"></z></span><c2></c2>
+</div>
+-->
+<!--
+<div class="grid" style="margin-left:300px; width:200px">
+  <span class="c3">1 2 3 4 5</span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c4"><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4"><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 rel2"><z><i style="width:100px"></i></z><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4"><i style="width:100px"></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c5 w450 max50">1 2 3 4 5</span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c6 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c6 w450 max50">1 2 3 4 5</span><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid">
+  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid" style="grid-template-columns:25px 1fr">
+  <img  class="c6 w450" src="support/lime-25x1.png"><c2 class="rel2"></c2>
+</div>
+<div class="grid" style="grid-template-columns:25px 1fr">
+  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html
new file mode 100644
index 0000000000..c15afec944
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: 'auto' min-sizing with intrinsic min-width and overflow:hidden</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-grid/#min-size-auto">
+  <link rel="match" href="grid-auto-min-sizing-intrinsic-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: minmax(auto,0) minmax(0,1fr);
+ border: 1px solid;
+ width: 500px;
+ align-items: start;
+ justify-items: start;
+}
+span,img { min-height:0; overflow:hidden; }
+
+.c1 { border:2px solid;   min-width:auto; }
+.c3 { background: blue;   min-width:-moz-min-content; min-width:-webkit-min-content; }
+.c4 { background: lime;   min-width:-moz-max-content; min-width:-webkit-max-content; }
+.c5 { background: cyan;   min-width:-moz-available;   min-width:-webkit-fill; }
+.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; }
+.w20   { width: 20px; }
+.w450  { width: 450px; }
+.max50 { max-width: 50px; }
+.h05   { height: 0.5px; }
+.h4    { height: 4px; }
+
+c2 { opacity:0.5; background: grey; min-height:10px; }
+i { display:inline-block; width:20px; height:10px; background:blue; }
+  </style>
+</head>
+<body>
+
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid">
+  <span class="c1"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c1"></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c1 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c1" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h05" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h4" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 h4 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w20" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w450" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c1 w450 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-left:300px; width:200px">
+  <span class="c3"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c4"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c4 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c5 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c5 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c5 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<div class="grid">
+  <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid" style="margin-left:40px;margin-bottom:100px">
+  <span class="c6 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<div class="grid">
+  <span class="c6 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid" style="margin-bottom:2em">
+  <span class="c6 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c3" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c4" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: row height doesn't seem right - revisit after bug 1174569
+<div class="grid">
+  <img  class="c5" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+<!-- TODO: disabled until we have support for "transferred size"
+<div class="grid">
+  <img  class="c6" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c6 w450" src="support/lime-25x1.png"><c2></c2>
+</div>
+<div class="grid">
+  <img  class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2>
+</div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
new file mode 100644
index 0000000000..8f524587f3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html
@@ -0,0 +1,66 @@
+<!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: min-width|min-height:auto</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-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  width: 60px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  align-items: start;
+  justify-items: start;
+  border: 3px solid blue;
+}
+span {
+  border: 1px solid;
+  background: lime;
+  min-width:0;
+  min-height:0;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span>a</span>
+  <span style="width:28px">IAmReallyWideAndTheBorderShouldSurroundMe</span>
+</div>
+
+<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
+<div class="grid">
+  <span>a</span>
+  <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span>
+  <span>c</span>
+  <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+  <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
+  <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+</div>
+
+<pre>Now the same tests for 'height':</pre>
+
+<div class="grid" style="margin-bottom:50px;">
+  <span>a</span>
+  <span style="font-size:72px;width:28px;height:28px">IAmReallyTall</span>
+  <span>c</span>
+  <span>d</span>
+</div>
+
+The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
+<div class="grid">
+  <span>a</span>
+  <span style="font-size:72px; height:10%;width:28px">IAmReallyTall</span>
+  <span>c</span>
+  <span style="font-size:72px; height:10px;width:28px">SameHere</span>
+  <span style="font-size:72px; height:40px;width:28px">SameHere</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
new file mode 100644
index 0000000000..63cd48fff9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html
@@ -0,0 +1,66 @@
+<!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: min-width|min-height:auto</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-grid/#min-size-auto">
+  <link rel="match" href="grid-auto-min-sizing-intrinsic-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  width: 60px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  align-items: start;
+  justify-items: start;
+  border: 3px solid blue;
+}
+span {
+  border: 1px solid;
+  background: lime;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span>a</span>
+  <span>IAmReallyWideAndTheBorderShouldSurroundMe</span>
+</div>
+
+<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
+<div class="grid">
+  <span>a</span>
+  <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span>
+  <span>c</span>
+  <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+  <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
+  <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+</div>
+
+<pre>Now the same tests for 'height':</pre>
+
+<div class="grid" style="margin-bottom:50px;">
+  <span>a</span>
+  <span style="font-size:72px">IAmReallyTall</span>
+  <span>c</span>
+  <span>d</span>
+</div>
+
+The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
+<div class="grid">
+  <span>a</span>
+  <span style="font-size:72px; height:10%">IAmReallyTall</span>
+  <span>c</span>
+  <span style="font-size:72px; height:10px">SameHere</span>
+  <span style="font-size:72px; height:40px">SameHere</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
new file mode 100644
index 0000000000..2aa564c214
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html
@@ -0,0 +1,75 @@
+<!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: min-width|min-height:auto w. vertical writing-mode</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-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  width: 60px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  align-items: start;
+  justify-items: start;
+  border: 3px solid blue;
+  writing-mode: vertical-rl;
+  direction: ltr;
+  margin-left: 50px;
+}
+span {
+  border: 1px solid;
+  background: lime;
+  min-width:0;
+  min-height:0;
+}
+pre {
+  writing-mode: vertical-rl;
+  direction: ltr;
+  float: left;
+}
+</style>
+</head>
+<body>
+
+<div class="grid" style="margin-left:0">
+  <span>a</span>
+  <span style="height:28px">IAmReallyWideAndTheBorderShouldSurroundMe</span>
+</div>
+
+<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre>
+<div class="grid">
+  <span>a</span>
+  <span style="height: 130%;">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span>
+  <span>c</span>
+  <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+  <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
+  <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+</div>
+
+<pre>Now the same tests for 'width':</pre>
+
+<div class="grid" style="margin-bottom:50px;">
+  <span>a</span>
+  <span style="font-size:72px;height:28px;width:28px">IAmReallyTall</span>
+  <span>c</span>
+  <span>d</span>
+</div>
+
+<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
+<div class="grid">
+  <span>a</span>
+  <span style="font-size:72px; width:10%;height:28px">IAmReallyTall</span>
+  <span>c</span>
+  <span style="font-size:72px; width:10px;height:28px">SameHere</span>
+  <span style="font-size:72px; width:40px;height:28px">SameHere</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html
new file mode 100644
index 0000000000..35874df27f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html
@@ -0,0 +1,75 @@
+<!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: min-width|min-height:auto w. vertical writing-mode</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-grid/#min-size-auto">
+  <link rel="match" href="grid-auto-min-sizing-intrinsic-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  width: 60px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  align-items: start;
+  justify-items: start;
+  border: 3px solid blue;
+  writing-mode: vertical-rl;
+  direction: ltr;
+  margin-left: 50px;
+}
+span {
+  border: 1px solid;
+  background: lime;
+}
+pre {
+  writing-mode: vertical-rl;
+  direction: ltr;
+  float: left;
+}
+</style>
+</head>
+<body>
+
+<div class="grid" style="margin-left:0">
+  <span>a</span>
+  <span>IAmReallyWideAndTheBorderShouldSurroundMe</span>
+</div>
+
+<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre>
+<div class="grid">
+  <span>a</span>
+  <span style="height: 130%">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span>
+  <span>c</span>
+  <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+  <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
+  <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
+</div>
+
+<pre>Now the same tests for 'width':</pre>
+
+<div class="grid" style="margin-bottom:50px;">
+  <span>a</span>
+  <span style="font-size:72px">IAmReallyTall</span>
+  <span>c</span>
+  <span>d</span>
+</div>
+
+<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
+<div class="grid">
+  <span>a</span>
+  <span style="font-size:72px; width:10%">IAmReallyTall</span>
+  <span>c</span>
+  <span style="font-size:72px; width:10px">SameHere</span>
+  <span style="font-size:72px; width:40px">SameHere</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html
new file mode 100644
index 0000000000..4af961b100
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html
new file mode 100644
index 0000000000..99e8d89f0e
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html
new file mode 100644
index 0000000000..35f596928b
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html
new file mode 100644
index 0000000000..c18d8865dc
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html
new file mode 100644
index 0000000000..3fbc97f7ed
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html
new file mode 100644
index 0000000000..2c8654dfc7
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html
new file mode 100644
index 0000000000..fc74cd2147
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html
new file mode 100644
index 0000000000..512f19965e
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
new file mode 100644
index 0000000000..fd2302add0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-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: Testing 'auto' min-sizing with percentage sizes</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-size:10px; padding:0; margin:0; }
+
+.wrap {
+  float: left;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  grid-template-columns: minmax(0,0) 1fr;
+  grid-auto-rows: 10px;
+  border: 1px solid;
+}
+
+.item {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  background:lime;
+  min-height:10px;
+}
+
+.item2 {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  min-width:0;
+  min-height:10px;
+  justify-self:stretch;
+  background:grey;
+}
+
+br { clear:both; }
+
+#px-border      .item { border-left:20px solid blue; }
+#percent-border .item { padding-left:10%; }
+
+#px-border .grid { grid-template-columns: minmax(20px,0) 1fr; }
+.c100 { grid-template-columns: minmax(100px,0) 1fr; }
+.c100100 { grid-template-columns: minmax(100px,0) 100px; }
+.c200 { grid-template-columns: 200px; }
+#px-border .c100 { grid-template-columns: minmax(120px,0) 1fr; }
+#px-border .c100calc100 { grid-template-columns: minmax(120px,0) 1fr; }
+#px-border .c100100 { grid-template-columns: minmax(120px,0) 120px; }
+#px-border .c200 { grid-template-columns: 240px; }
+.c10 { grid-template-columns: minmax(10px,0) 1fr; }
+#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
+
+#percent-border .c100 { grid-template-columns: 111px 0; }
+#percent-border .c100calc100 { grid-template-columns: 100px 11px; }
+#percent-border .c10 { grid-template-columns: minmax(11px,0) 0; }
+#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; }
+#percent-border .c200 { grid-template-columns: 250px; }
+  </style>
+</head>
+<body>
+
+<table border="1">
+<tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th>
+<tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td>
+</tr></table>
+
+<script>
+var styles = [
+"width:50%",
+"width:50%; max-width:1px",
+"width:50%; min-width:100px",
+"width:calc(100px)",
+"width:calc(100px + 50%)",
+"width:100px; padding-right:50%",
+"width:calc(100px + 50%); min-width:10px",
+"width:calc(10px + 50%); min-width:100px",
+"width:calc(75px + 50%); min-width:100px",
+"width:calc(100px + 50%); max-width:1px",
+"width:calc(100px + 50%); max-width:150px",
+"min-width:50%",
+"min-width:50%; max-width:1px",
+"min-width:50%; width:100px",
+"min-width:calc(100px)",
+"min-width:calc(100px + 50%)",
+"min-width:100px; padding-right:50%",
+"min-width:calc(100px + 50%); width:10px",
+"min-width:calc(10px + 50%); width:100px",
+"min-width:calc(75px + 50%); width:100px",
+"min-width:calc(100px + 50%); max-width:1px",
+"min-width:calc(100px + 50%); max-width:150px",
+];
+var grids = [
+"grid",
+"grid",
+"grid c100",
+"grid c100",
+"grid",
+"grid c200",
+"grid c10",
+"grid c100",
+"grid c100",
+"grid",
+"grid",
+"grid",
+"grid",
+"grid c100",
+"grid c100",
+"grid",
+"grid c200",
+"grid c10",
+"grid c100",
+"grid c100",
+"grid",
+"grid",
+];
+var containers = [ "no-border", "px-border", "percent-border" ];
+for (var i = 0; i < containers.length; ++i) {
+  var c = document.querySelector("#"+containers[i]);
+  for (var j = 0; j < styles.length; ++j) {
+    c.appendChild(document.createElement('br'));
+    c.appendChild(document.createTextNode(styles[j]));
+    c.appendChild(document.createElement('br'));
+    var item = document.createElement('div');
+    item.setAttribute("class","item");
+    item.setAttribute("style", styles[j]);
+    var item2 = document.createElement('div');
+    item2.setAttribute("class","item2");
+    var grid = document.createElement('div');
+    grid.setAttribute("class",grids[j]);
+    grid.appendChild(item);
+    grid.appendChild(item2);
+    var wrap = document.createElement('div');
+    wrap.setAttribute("class","wrap");
+    wrap.appendChild(grid);
+    c.appendChild(wrap);
+  }
+}
+</script>
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html
new file mode 100644
index 0000000000..6854ad71f2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html
@@ -0,0 +1,109 @@
+<!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: Testing 'auto' min-sizing with percentage sizes</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-grid/#min-size-auto">
+  <link rel="match" href="grid-auto-min-sizing-percent-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:10px; padding:0; margin:0; }
+
+.wrap {
+  float: left;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  grid-template-columns: minmax(auto,0) 1fr;
+  grid-auto-rows: 10px;
+  border: 1px solid;
+}
+
+.item {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  background:lime;
+  min-height:10px;
+}
+
+.item2 {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  min-width:0;
+  min-height:10px;
+  justify-self:stretch;
+  background:grey;
+}
+
+br { clear:both; }
+
+#px-border      .item { border-left:20px solid blue; }
+#percent-border .item { padding-left:10%; }
+
+  </style>
+</head>
+<body>
+
+<table border="1">
+<tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th>
+<tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td>
+</tr></table>
+
+<script>
+var styles = [
+"width:50%",
+"width:50%; max-width:1px",
+"width:50%; min-width:100px",
+"width:calc(100px)",
+"width:calc(100px + 50%)",
+"width:100px; padding-right:50%",
+"width:calc(100px + 50%); min-width:10px",
+"width:calc(10px + 50%); min-width:100px",
+"width:calc(75px + 50%); min-width:100px",
+"width:calc(100px + 50%); max-width:1px",
+"width:calc(100px + 50%); max-width:150px",
+"min-width:50%",
+"min-width:50%; max-width:1px",
+"min-width:50%; width:100px",
+"min-width:calc(100px)",
+"min-width:calc(100px + 50%)",
+"min-width:100px; padding-right:50%",
+"min-width:calc(100px + 50%); width:10px",
+"min-width:calc(10px + 50%); width:100px",
+"min-width:calc(75px + 50%); width:100px",
+"min-width:calc(100px + 50%); max-width:1px",
+"min-width:calc(100px + 50%); max-width:150px",
+];
+var containers = [ "no-border", "px-border", "percent-border" ];
+for (var i = 0; i < containers.length; ++i) {
+  var c = document.querySelector("#"+containers[i]);
+  for (var j = 0; j < styles.length; ++j) {
+    c.appendChild(document.createElement('br'));
+    c.appendChild(document.createTextNode(styles[j]));
+    c.appendChild(document.createElement('br'));
+    var item = document.createElement('div');
+    item.setAttribute("class","item");
+    item.setAttribute("style", styles[j]);
+    var item2 = document.createElement('div');
+    item2.setAttribute("class","item2");
+    var grid = document.createElement('div');
+    grid.setAttribute("class","grid");
+    grid.appendChild(item);
+    grid.appendChild(item2);
+    var wrap = document.createElement('div');
+    wrap.setAttribute("class","wrap");
+    wrap.appendChild(grid);
+    c.appendChild(wrap);
+  }
+}
+</script>
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html
new file mode 100644
index 0000000000..12f76d401e
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html
new file mode 100644
index 0000000000..147965ff36
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html
new file mode 100644
index 0000000000..8dcdd563bb
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html
new file mode 100644
index 0000000000..24bca5b2ed
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
new file mode 100644
index 0000000000..1495c3a6f2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-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-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;
+  place-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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html
new file mode 100644
index 0000000000..7a82f050e9
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html
new file mode 100644
index 0000000000..c5d8a68ff1
--- /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>
diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.html
new file mode 100644
index 0000000000..82cb6aadc9
--- /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>
diff --git a/layout/reftests/css-grid/grid-clamping-001-ref.html b/layout/reftests/css-grid/grid-clamping-001-ref.html
new file mode 100644
index 0000000000..2e2b40e051
--- /dev/null
+++ b/layout/reftests/css-grid/grid-clamping-001-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Reference: bug 1229999</title>
+    <style type="text/css">
+html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; }
+	
+.grid {
+  position: fixed;
+  bottom: 0;
+  display: grid;
+  grid-template-rows: 10000px;
+  grid-auto-rows: 1px;
+  grid-auto-columns: 10px;
+  border: 1px solid;
+}
+
+x {
+  position: absolute;
+  grid-row-start: span 2;
+  top:0; bottom:0; left:10px; width:20px;
+  background: grey;
+}
+    </style>
+</head>
+<body>
+
+    <div class="grid">
+        <span style="background:yellow"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:50px">
+        <span style="background:yellow"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:100px">
+        <span style="background:yellow"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:150px">
+        <span style="background:yellow"></span>
+        <span style="background:yellow"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:200px">
+        <span style="background:yellow"></span>
+        <span style="background:yellow"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-clamping-001.html b/layout/reftests/css-grid/grid-clamping-001.html
new file mode 100644
index 0000000000..7d96b2e852
--- /dev/null
+++ b/layout/reftests/css-grid/grid-clamping-001.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1229999</title>
+    <style type="text/css">
+html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; }
+	
+.grid {
+  position: fixed;
+  bottom: 0;
+  display: grid;
+  grid-auto-rows: 1px;
+  grid-auto-columns: 10px;
+  border: 1px solid;
+}
+
+x {
+  position: absolute;
+  grid-row-start: span 2;
+  top:0; bottom:0; left:10px; width:20px;
+  background: grey;
+}
+y { background:blue; }
+y:nth-of-type(2n+1) { background:lime; }
+    </style>
+</head>
+<body>
+
+    <div class="grid">
+        <span style="grid-row-start: A -4;"></span>
+        <span style="grid-row-end: span 134217729; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:50px;">
+        <span style="grid-row-start: A -3;"></span>
+        <span style="grid-row-end: span 134217729; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:100px;">
+        <span style="grid-row-start: A -2;"></span>
+        <span style="grid-row-end: span 134217729; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:150px;">
+        <span style="grid-row-start: A -1;"></span>
+        <span style="grid-row-end: span 134217729; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:150px;">
+        <span style="grid-row-start: 1;"></span>
+        <span style="grid-row-end: span 134217729; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:200px;">
+        <span style="grid-row-end: span 134217729; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-clamping-002-ref.html b/layout/reftests/css-grid/grid-clamping-002-ref.html
new file mode 100644
index 0000000000..d605ff9f1b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-clamping-002-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Reference: Clamp number of auto-fill tracks</title>
+    <style type="text/css">
+html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; }
+	
+.grid {
+  position: fixed;
+  bottom: 0;
+  display: grid;
+  grid-template-rows: 10000px;
+  grid-auto-rows: 1px;
+  grid-auto-columns: 10px;
+  border: 1px solid;
+}
+
+x {
+  position: absolute;
+  grid-row-start: span 2;
+  top:0; bottom:0; left:10px; width:20px;
+  background: grey;
+}
+    </style>
+</head>
+<body>
+
+    <div class="grid">
+        <span style="background:yellow"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:50px">
+        <span style="background:yellow"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <span style="background:lime"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:100px">
+        <span style="background:yellow"></span>
+        <span style="background:lime"></span>
+        <span style="background:blue"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:150px">
+        <span style="background:yellow"></span>
+        <span style="background:yellow"></span>
+        <span style="background:yellow"></span>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:200px">
+        <span style="background:yellow"></span>
+        <span style="background:yellow"></span>
+        <span style="background:yellow"></span>
+        <x></x>
+    </div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-clamping-002.html b/layout/reftests/css-grid/grid-clamping-002.html
new file mode 100644
index 0000000000..cb3db0d276
--- /dev/null
+++ b/layout/reftests/css-grid/grid-clamping-002.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase: Clamp number of auto-fill tracks</title>
+    <style type="text/css">
+html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; }
+	
+.grid {
+  display: grid;
+  position: fixed;
+  bottom: 0;
+  height: 9999px; /* results in 9999 rows, i.e. the max line is 10000 */
+  grid-template-rows: repeat(auto-fill, 1px);
+  grid-template-columns: 10px;
+  grid-auto-flow: column;
+  border: 1px solid;
+}
+
+x {
+  position: absolute;
+  grid-row-start: span 2;
+  top:0; bottom:0; left:10px; width:20px;
+  background: grey;
+}
+y { background:blue; }
+y:nth-of-type(2n+1) { background:lime; }
+    </style>
+</head>
+<body>
+
+    <div class="grid">
+        <span style="grid-row: 1/ span 9995; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:50px;">
+        <span style="grid-row: 1/ span 9996; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:100px;">
+        <span style="grid-row: 1/ span 9997; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:150px;">
+        <span style="grid-row: 1/ span 9998; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:150px;">
+        <span style="grid-row: 1/ span 9999; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+    <div class="grid" style="left:200px;">
+        <span style="grid-row: 1/ span 10000; background:yellow"></span>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <y></y><y></y><y></y><y></y><y></y><y></y>
+        <x></x>
+    </div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html
new file mode 100644
index 0000000000..eda06249b3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html
@@ -0,0 +1,88 @@
+<!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: Testing track max-sizing 'max-content'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: block;
+ border: dashed blue;
+ float:left;
+ clear:left;
+}
+
+.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
+.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
+.c3 { min-width:0; margin: 2px 18px 1px 85px; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="margin-right:54px"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div>
+<div class="grid" style="width:436px">
+<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
+<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="width:583px;">
+<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="width:389px;">
+<span class="c1" style="width:100px"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="width:389px;">
+<span class="c1" style="width:100px"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html
new file mode 100644
index 0000000000..ee87346873
--- /dev/null
+++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html
@@ -0,0 +1,90 @@
+<!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: Testing track max-sizing 'max-content'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
+  <link rel="match" href="grid-col-max-sizing-max-content-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-auto-columns: minmax(min-content,max-content);
+ border: dashed blue;
+ float:left;
+ clear:left;
+ justify-items: stretch;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; }
+.c3 { grid-column: 3 / span 1; min-width:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:30px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html
new file mode 100644
index 0000000000..23ca12e7bf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html
@@ -0,0 +1,92 @@
+<!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: Testing track max-sizing 'max-content'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: block;
+ float:left;
+ clear:left;
+}
+.wrap {
+ border: dashed blue;
+ overflow:hidden;
+ clear:left;
+}
+
+.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
+.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
+.c3 { min-width:0; margin: 2px 18px 1px 85px; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="wrap"><div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div></div>
+
+<div class="wrap"><div class="grid">
+<span class="c1" style="margin-right:54px"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div></div>
+
+<div class="wrap"><div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div></div>
+<div class="wrap"><div class="grid" style="width:436px">
+<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
+<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div></div>
+
+<div class="wrap" style="float:left;"><div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
+</div></div>
+
+<div class="wrap"><div class="grid" style="width:583px;">
+<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div></div>
+
+<div class="wrap"><div class="grid" style="width:389px;">
+<span class="c1" style="width:100px"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div></div>
+
+<div class="wrap"><div class="grid" style="width:389px;">
+<span class="c1" style="width:100px"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html
new file mode 100644
index 0000000000..9aaa8c0340
--- /dev/null
+++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html
@@ -0,0 +1,87 @@
+<!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: Testing track max-sizing 'max-content'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
+  <link rel="match" href="grid-col-max-sizing-max-content-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-auto-columns: minmax(min-content,max-content);
+ border: dashed blue;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; }
+.c3 { grid-column: 3 / span 1; min-width:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:30px"><x>&nbsp;</x></span>
+<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);">
+<span class="c1"><x>&nbsp;</x></span>
+<span class="r1"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x>&nbsp;</x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x>&nbsp;</x></span>
+<span class="c3"><x>&nbsp;</x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-001-ref.html b/layout/reftests/css-grid/grid-column-gap-001-ref.html
new file mode 100644
index 0000000000..470e0d6992
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-001-ref.html
@@ -0,0 +1,124 @@
+<!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: 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(1px,auto);
+  grid-template-rows: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  margin-right: 20px;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; height:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var justify = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "end",
+   "center",
+   "center",
+   "end",
+   "end safe",
+   "start",
+   "center",
+   "end",
+   "end safe",
+   "left",
+   "end",
+];
+var cols = [ "0", "1", "2", "3", "8", "9" ];
+var widths = [ "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < justify.length; ++j) {
+  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < cols.length; ++c) {
+    for (var w = 0; w < widths.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.width = widths[w]+"px";
+          grid.className = "grid";
+          grid.style.justifyContent = justify[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numCols = parseInt(cols[c]);
+          var gapCols = numCols==0 ? 0 : (numCols-1);
+          numCols += gapCols*parseInt(gaps[g]);
+          span.style.gridColumn = "1 / span " + numCols;
+          for (var x = 0; x < numCols; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && cols[c] == 1) { // The 'end safe' tests.
+            if (widths[w] != 0) grid.style.justifyContent = 'end';
+          }
+          if (j == 7 && cols[c] == 1) { // The 'center safe' tests.
+            if (widths[w] != 0) grid.style.justifyContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (cols[c] == 1) {
+              if (widths[w] == 0) {
+                if (grid.style.justifyContent != 'end') {
+                  grid.style.justifyContent = 'start';
+                }
+              } else {
+                grid.style.justifyContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-001.html b/layout/reftests/css-grid/grid-column-gap-001.html
new file mode 100644
index 0000000000..7c7a6599fa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-001.html
@@ -0,0 +1,100 @@
+<!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: 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-column-gap-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(1px,auto);
+  grid-template-rows: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  margin-right: 20px;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var justify = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end unsafe",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start unsafe",
+   "end unsafe",
+   "center unsafe",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-between end unsafe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly flex-end",
+   "space-evenly flex-end safe",
+   "space-evenly flex-start unsafe",
+   "space-evenly right",
+];
+var cols = [ "0", "1", "2", "3", "8", "9" ];
+var widths = [ "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < justify.length; ++j) {
+  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < cols.length; ++c) {
+    for (var w = 0; w < widths.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.width = widths[w]+"px";
+          grid.style.gridColumnGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.justifyContent = justify[j];
+          var span = document.createElement('span');
+          span.style.gridColumn = "1 / span " + cols[c];
+          grid.appendChild(span);
+          for (var x = 0; x < cols[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-002-ref.html b/layout/reftests/css-grid/grid-column-gap-002-ref.html
new file mode 100644
index 0000000000..070d056ce9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-002-ref.html
@@ -0,0 +1,90 @@
+<!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: 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  border: dashed blue;
+  float: left;
+  clear: left;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:41px; }
+.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
+
+span {
+  display: block;
+  float: left;
+  clear: left;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1" style="width:43px"><x></x></span>
+<span class="r1" style="width:79px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:49px"><x></x></span>
+<span class="r1" style="margin-left:44px; width:88px"><x></x></span>
+<span class="c3" style="margin-left:83px; "><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:43px"><x></x></span>
+<span class="r1" style="width:79px"><x></x></span>
+<span class="r1" style="width:79px"><x></x></span>
+<span class="r1" style="width:79px"><x></x></span>
+</div>
+<div class="grid" style="">
+<span class="c1" style="width:413px"><x></x></span>
+<span class="r1" style="margin-left:44px; width:452px"><x></x></span>
+<span class="c3" style="margin-left:447px;"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="width:223px"><x></x></span>
+<span class="r1" style="margin-left:131px; width:348px"><x></x></span>
+<span class="r1" style="margin-left:131px; width:348px"><x></x></span>
+<span class="r1" style="margin-left:131px; width:348px"><x></x></span>
+</div>
+
+<div class="grid" style="">
+<span class="c1" style="width:513px"><x></x></span>
+<span class="r1" style="margin-left:44px; width:552px"><x></x></span>
+<span class="c3" style="margin-left:547px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:117px; margin-right:11px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:228px; width:83px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="margin-left:117px; margin-right:11px; width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3" style="margin-left:228px; width:83px"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-002.html b/layout/reftests/css-grid/grid-column-gap-002.html
new file mode 100644
index 0000000000..d00e640739
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-002.html
@@ -0,0 +1,91 @@
+<!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: 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-column-gap-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(0,1fr);
+  border: dashed blue;
+  float: left;
+  clear: left;
+  grid-column-gap: 3px;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; }
+.c3 { grid-column: 3 / span 1; min-width:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: stretch;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+<span class="r1" style="min-width:30px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="width:300px"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-003-ref.html b/layout/reftests/css-grid/grid-column-gap-003-ref.html
new file mode 100644
index 0000000000..9b574ed1bd
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-003-ref.html
@@ -0,0 +1,90 @@
+<!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: 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: dashed blue;
+  clear: left;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; margin-top:1px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
+.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 2px 5px 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1" style="width:370px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:370px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="c3" style="margin-left:404px; width:170px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:370px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:505px"><x></x></span>
+<span class="r1" style="margin-left:136px;"><x></x></span>
+<span class="c3" style="margin-left:539px; width:103px"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="width:223px"><x></x></span>
+<span class="r1" style="margin-left:131px; width:348px"><x></x></span>
+<span class="r1" style="margin-left:131px; width:348px"><x></x></span>
+<span class="r1" style="margin-left:131px; width:348px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:572px"><x></x></span>
+<span class="r1" style="margin-left:103px;"><x></x></span>
+<span class="c3" style="margin-left:606px; width:69px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:404px; width:170px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:404px; width:170px"><x></x></span>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-003.html b/layout/reftests/css-grid/grid-column-gap-003.html
new file mode 100644
index 0000000000..f1c549b548
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-003.html
@@ -0,0 +1,90 @@
+<!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: 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-column-gap-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(0,1fr);
+  border: dashed blue;
+  grid-column-gap: 3px;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; }
+.c3 { grid-column: 3 / span 1; min-width:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: stretch;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+<span class="r1" style="min-width:30px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="width:300px"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-004-ref.html b/layout/reftests/css-grid/grid-column-gap-004-ref.html
new file mode 100644
index 0000000000..4dff8adeec
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-004-ref.html
@@ -0,0 +1,90 @@
+<!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: Percentage 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 60px;
+  height: 40px;
+  grid-column-gap: 6px;
+}
+.vl.grid, .vr.grid, .vlr.grid, .vrl.grid { grid-column-gap: 4px; }
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-content:start; }
+.aend { align-content:end; }
+.aflexstart { align-content:flex-start; }
+.aflexend { align-content:flex-end; }
+.acenter { align-content:center; }
+.aleft { align-content:left; }
+.aright { align-content:right; }
+
+.aspace-between{ align-content:space-between; }
+.aspace-around { align-content:space-around;  }
+.aspace-evenly { align-content:space-evenly;  }
+
+.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
+.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
+.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
+.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-column-gap-004.html b/layout/reftests/css-grid/grid-column-gap-004.html
new file mode 100644
index 0000000000..8546c579b0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-column-gap-004.html
@@ -0,0 +1,91 @@
+<!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: Percentage 'grid-column-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-column-gap-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 60px;
+  height: 40px;
+  grid-column-gap: 10%;
+}
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-content:start; }
+.aend { align-content:end; }
+.aflexstart { align-content:flex-start; }
+.aflexend { align-content:flex-end; }
+.acenter { align-content:center; }
+.aleft { align-content:left; }
+.aright { align-content:right; }
+
+.aspace-between{ align-content:space-between; }
+.aspace-around { align-content:space-around;  }
+.aspace-evenly { align-content:space-evenly;  }
+
+.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
+.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
+.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
+.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-001-ref.html b/layout/reftests/css-grid/grid-container-baselines-001-ref.html
new file mode 100644
index 0000000000..992e33695f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-001-ref.html
@@ -0,0 +1,89 @@
+<!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: Grid container baselines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+span {
+  background: lime;
+  display: inline-grid;
+  border: 1px solid black;
+  font-size:12px;
+}
+span:nth-child(1) {font-size:32px; }
+span:nth-child(2) {padding-block-end:20px; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.ib {
+  display: inline-table;
+  align-items: start;
+  border: 2px solid;
+  height: 120px;
+  margin: 1px;
+  font-size:1px;
+  position:relative;
+}
+.ib2 {
+  display: inline-table;
+  align-items: start;
+  padding-bottom: 20px;
+  font-size:1px;
+}
+
+</style>
+</head>
+<body>
+
+A<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:left">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right; visibility:hidden">C<br>C</span><span style="position:absolute; bottom:2px; right:2px; padding-bottom:20px;">C<br>C</span></div>
+
+<!-- TODO: figure out a reference for the corresponding test -->
+<!-- TODO: figure out a reference for the corresponding test -->
+
+<div class="ib"><div style="display:inline-grid; align-self:baseline; grid: 120px / auto auto"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+<!--
+<div class="ib"><span style="vertical-align:bottom; margin-bottom:-1px">B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="vertical-align:bottom; margin-bottom:-21px">C<br>C</span></div>
+-->
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+
+<br>
+
+A<!--<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+--><div class="ib"><span style="vertical-align:bottom; margin-top:50px">B<br>B</span><span style="float:right; margin-top:50px">C<br>C</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-001.html b/layout/reftests/css-grid/grid-container-baselines-001.html
new file mode 100644
index 0000000000..529632ae61
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-001.html
@@ -0,0 +1,92 @@
+<!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: Grid container baselines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 120px / repeat(4, min-content);
+  align-items: start;
+  justify-items: start;
+  border: 2px solid;
+  margin: 1px;
+}
+.r2 { grid-template-rows: 0 120px; }
+.r3 { grid-template-rows: 50px 70px; }
+.r4 { grid-template-rows: 120px 0; }
+.grid .grid {
+  border: 0;
+  margin: 0;
+}
+.vgrid { grid: repeat(4, min-content) / 120px;}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+span:nth-child(1) {font-size:32px; }
+span:nth-child(2) {font-size:12px; padding-block-end:20px;}
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+A<div class="grid"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span></div>
+<div class="grid"><span>B<br>B</span><span class="slb">C<br>C</span></div>
+
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb">C<br>C</span></div> -->
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb vl" style="padding:20px 0">D<br>D</span></div> -->
+
+<div class="grid"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div>
+<div class="grid"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span style="order:1">B<br>B</span><span class="sfb">C<br>C</span></div>
+
+<!--
+<div class="grid r2"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:2; order:1">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+-->
+
+<div class="grid r2"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r3"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r3"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+
+<br>
+A<!--<div class="grid r4"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid r4"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div>
+<div class="grid"><div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div></div>
+--><div class="grid"><div class="grid r3"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-002-ref.html b/layout/reftests/css-grid/grid-container-baselines-002-ref.html
new file mode 100644
index 0000000000..960f911792
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-002-ref.html
@@ -0,0 +1,87 @@
+<!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: Grid container baselines w. spacing before first row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+span {
+  background: lime;
+  display: inline-grid;
+  border: 1px solid black;
+  font-size: 12px;
+}
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { padding-block-end:20px; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; }
+.cfb { align-content:baseline; align-self:start; }
+.clb { align-content:last baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.ib {
+  display: inline-table;
+  border: 2px solid;
+  height: 130px;
+  padding-top: 10px;
+  margin: 1px;
+  font-size: 1px;
+}
+.ib2 { display: inline-table; padding-top:10px; }
+.ib3 { display: inline-table; padding-top:20px; }
+
+</style>
+</head>
+<body>
+
+A<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:left">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+
+<!-- TODO: figure out a reference for the corresponding test -->
+<!-- TODO: figure out a reference for the corresponding test -->
+
+<div class="ib"><div style="display:inline-grid; height:120px; align-content:end;"><div style="display:grid; align-self:baseline; grid: 120px / auto auto"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div></div></div>
+
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="display:inline-flex">C<br>C</span></div>
+
+<!--
+<div class="ib"><span style="vertical-align:bottom; margin-bottom:-1px">B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span style="vertical-align:bottom; margin-bottom:-21px">C<br>C</span></div>
+-->
+
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+
+<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+
+<br>
+
+A<!--<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div>
+<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div>
+<div class="ib"><div class="ib2"><span>B<br>B</span><span style="float:right">C<br>C</span></div></div>
+<div class="ib"><div class="ib3"><span>B<br>B</span><span style="float:right">C<br>C</span></div></div>
+--><div class="ib"><span style="vertical-align:bottom; margin-top:60px">B<br>B</span><span style="float:right; margin-top:60px">C<br>C</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-002.html b/layout/reftests/css-grid/grid-container-baselines-002.html
new file mode 100644
index 0000000000..dd94696aa5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-002.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Grid container baselines w. spacing before first row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 120px / repeat(4, min-content);
+  align-items: start;
+  justify-items: start;
+  border: 2px solid;
+  margin: 1px;
+  align-content: center;
+  height: 140px;
+}
+.r2 { grid-template-rows: 0 120px; }
+.r3 { grid-template-rows: 50px 70px; }
+.r4 { grid-template-rows: 120px 0; }
+.grid .grid {
+  border: 0;
+  margin: 0;
+}
+.vgrid { grid: repeat(4, min-content) / 120px;}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+span:nth-child(1) {font-size:32px; }
+span:nth-child(2) {font-size:12px; padding-block-end:20px;}
+
+.sfb { align-self:first baseline; }
+.slb { align-self:last baseline; }
+.cfb { align-content:first baseline; align-self:start; }
+.clb { align-content:last baseline; align-self:end; }
+.s { align-self:stretch; }
+
+.jfb { justify-self:first baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+A<div class="grid"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span></div>
+
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb">C<br>C</span></div> -->
+<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb vl" style="padding:20px 0">D<br>D</span></div> -->
+
+<div class="grid"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div>
+
+<div class="grid"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><span style="order:1">B<br>B</span><span class="sfb">C<br>C</span></div>
+
+<!--
+<div class="grid r2"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:2; order:1">B<br>B</span><span style="grid-row:2">C<br>C</span></div>
+-->
+
+<div class="grid r2"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r2"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+
+<div class="grid r3"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+<div class="grid r3"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div>
+
+<br>
+
+A<!--<div class="grid r4"><span>B<br>B</span><span>C<br>C</span></div>
+<div class="grid r4"><span style="order:1">B<br>B</span><span>C<br>C</span></div>
+<div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div>
+<div class="grid"><div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div></div>
+--><div class="grid"><div class="grid r3"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-003-ref.html b/layout/reftests/css-grid/grid-container-baselines-003-ref.html
new file mode 100644
index 0000000000..aadbb6bda2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-003-ref.html
@@ -0,0 +1,124 @@
+<!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: Grid container baselines, nested flex/grid/table</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.ib {
+  display: inline-table;
+  height: 163px;
+  width: 120px;
+  border: 1px solid;
+  margin: 1px;
+}
+.ib2 {
+  display: inline-flex;
+  border: 1px solid;
+  margin: 1px;
+}
+
+span { display: inline-table; }
+.a {
+  border: 3px solid black;
+  background:lime;
+}
+
+span:nth-of-type(1) { font-size:32px; }
+span:nth-of-type(2) { font-size:36px; }
+span:nth-of-type(3) { font-size:48px; }
+span:nth-of-type(4) { font-size:24px; }
+span.i { font-size:12px; grid-column:2; }
+.f { display:inline-flex; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+.igrid {
+  display: inline-grid;
+  grid: 13px repeat(3,50px) / 60px 60px;
+  border: 1px solid;
+  margin: 1px;
+}
+/* don't clamp grid item automatic minimum size */
+* {
+  min-width: 0;
+  min-height: 0;
+}
+.slb { align-self:last baseline; align-content:self-end; }
+
+</style>
+</head>
+<body>
+
+A<div class="ib">
+  <div class="ib" style="height:120px; width:56px;"><span
+     class="a f" style="width:30px; padding-bottom:5px;">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span>
+</div></div>
+
+<div class="ib" style="width:180px;">
+  <div class="ib" style="height:120px; width:56px;"><span
+     class="a f" style="width:30px; padding-top:5px; margin-top:7px">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span><span
+     class="a f" style="width:54px; padding-top:20px">E<br>F</span>
+</div>
+
+<div class="ib" style="width:180px;">
+  <div class="ib" style="height:120px; width:56px;"><span
+     class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span><span
+     class="a f" style="width:54px; padding-top:20px">E<br>F</span>
+</div>
+
+
+<div class="ib" style="width:200px;">
+  <div class="ib" style="height:120px; width:76px; white-space:nowrap"><span
+     class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span
+     class="a f" style="float:right; width:30px; position:relative; left:-4px; padding-bottom:22px; margin-top:-100px">A<br>B</span>
+  </div><span class="i a f" style="width:54px">C<br>D</span><span
+     class="a f" style="width:54px; padding-top:20px;">E<br>F</span>
+</div>
+
+<br>
+
+<x style="position:relative; top:-64px">A</x><div class="ib" style="width:200px;margin-top:32px">
+  <div class="ib vl" style="height:70px; width:196px;">
+    <span class="a" style="display:block; padding-block-end:15px; height:1px">A<br>B</span>
+  </div>
+</div><div class="ib" style="width:200px">
+  <div class="ib vl" style="height:70px; width:196px;">
+    <span class="a" style="display:block; padding-block-end:15px; width:148px; height:1px">A<br>B</span>
+  </div>
+</div><div class="ib" style="width:200px;position:relative; top:-31px">
+  <div class="ib vl" style="height:70px; width:196px;">
+    <span class="a" style="display:block; height:-moz-min-content; padding-block-end:15px; width:148px; height:-moz-min-content">A<br>B</span>
+  </div>
+</div>
+
+<br>
+
+A<div class="igrid slb">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;">
+    <n></n>
+    <n style="grid-row:2"></n>
+    <span class="slb a" style="margin-bottom:7px; padding-bottom:5px; grid-row:3; display:inline-block">A<br>B</span>
+  </div>
+  <span class="slb i a" style="grid-row:4; display:inline-block">C<br>D</span>
+  <n></n>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-003.html b/layout/reftests/css-grid/grid-container-baselines-003.html
new file mode 100644
index 0000000000..a1ac4e0c02
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-003.html
@@ -0,0 +1,228 @@
+<!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: Grid container baselines, nested grids</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.igrid { display: inline-grid; }
+.grid { display: grid; }
+.grid, .igrid {
+  grid: 13px repeat(3,50px) / 60px 60px;
+  border: 1px solid;
+  margin: 1px;
+}
+.grid.sfb , .igrid.sfb {
+  grid: repeat(3,50px) 13px / 60px 60px;
+}
+
+/* don't clamp grid item automatic minimum size */
+.igrid *, .grid * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.a {
+  border: 3px solid black;
+  background:lime;
+}
+
+span:nth-of-type(1) { font-size:32px; }
+span:nth-of-type(2) { font-size:36px; }
+span:nth-of-type(3) { font-size:48px; }
+span:nth-of-type(4) { font-size:24px; }
+span.i { font-size:12px; grid-column:2; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+.jfb { justify-self:baseline; justify-content:self-end; }
+.jlb { justify-self:last baseline; justify-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<!--  TODO: figure out a way to make a reference for these:
+
+A<div class="igrid">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="slb a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+  </div>
+  <n></n>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+</div>
+
+<div class="igrid" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;">
+    <n></n>
+    <span class="slb a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+  </div>
+  <n></n>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <span class="slb a" style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span>
+</div>
+
+<div class="igrid" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+  </div>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <span class="slb a " style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span>
+</div>
+
+<div class="igrid" style="grid-template-columns:80px 60px 60px">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px 36px; grid-row: span 4;">
+    <span class="a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+    <span class="a" style="grid-row:3; ">A<br>B</span>
+  </div>
+  <n></n>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <span class="slb a " style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span>
+</div>
+
+<br>
+-->
+
+A<div class="igrid sfb">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;">
+    <span class="sfb a" style="margin-bottom:7px; padding-bottom:5px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <n></n>
+</div>
+
+<div class="igrid sfb" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;">
+    <span class="sfb a" style="margin-top:7px; padding-top:5px;">A<br>B</span>
+    <n></n>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <span class="sfb a" style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span>
+  <n></n>
+</div>
+<div class="igrid sfb" style="grid-template-columns:60px 60px 60px">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;">
+    <span class="a" style="margin-top:7px; padding-top:5px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <span class="sfb a " style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span>
+</div>
+
+<div class="igrid sfb" style="grid-template-columns:80px 60px 60px">
+  <div class="igrid sfb" style="grid: 100px 7px 13px / 36px 36px; grid-row: span 4;">
+    <span class="a" style="margin-top:7px; padding-top:5px;">A<br>B</span>
+    <span class="a" style="">A<br>B</span>
+  </div>
+  <span class="sfb i a" style="grid-row:1">C<br>D</span>
+  <span class="sfb a " style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span>
+  <n></n>
+</div>
+
+<br>
+
+<!-- TODO: impossible to make a reference due to bug 1166120
+
+A<div class="igrid" style="grid: auto / 100px;">
+<span class="jfb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid" style="grid: auto / 100px;">
+<span class="jlb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid slb" style="grid: auto / 100px;">
+<span class="jlb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid vl" style="grid: 100px / 50px;">
+<span class="jlb a" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid slb vl" style="grid: 100px / 50px;">
+<span class="jfb a" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+<div class="igrid sfb vl" style="grid: 100px / 50px;">
+<span class="jfb a" style="margin:1px 3px 5px 7px">A<br>B</span>
+</div>
+
+-->
+
+<!--  TODO: figure out a way to make a reference for these:
+
+A<div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="slb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <n></n>
+    <n></n>
+    <span class="jlb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+  </div>
+</div>
+
+-->
+
+A<div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <span class="sfb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <span class="a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+</div><div class="igrid" style="grid-template-columns:200px">
+  <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;">
+    <span class="jfb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span>
+    <n></n>
+    <n></n>
+  </div>
+</div>
+
+<br>
+
+A<div class="igrid slb">
+  <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;">
+    <n></n><n></n>
+    <n></n><n></n>
+    <span class="slb a" style="margin-bottom:7px; padding-bottom:5px;">A<br>B</span><n></n>
+  </div>
+  <span class="slb i a" style="grid-row:4">C<br>D</span>
+  <n></n>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-004-ref.html b/layout/reftests/css-grid/grid-container-baselines-004-ref.html
new file mode 100644
index 0000000000..e1affb3387
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-004-ref.html
@@ -0,0 +1,45 @@
+<!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: Grid container baselines, nested flex/grid/table</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1306906">
+  <style type="text/css">
+
+* {
+    color:black; background-color:white; font-size:16px; font-family:monospace; padding:0; margin:0;
+}
+
+grid, flex {
+  display: inline-flex;
+  border: 1px solid;
+  border-width: 10px 0 3px 0;
+  padding-top: 1px;
+}
+
+flex { display:inline-grid; }
+table { display:inline-table; }
+td { vertical-align: baseline; }
+
+    </style>
+</head>
+<body>
+
+A
+<flex>A<br>B</flex>
+<flex><span>A<br>B</span></flex>
+<grid>A<br>B</grid>
+<grid><span>A<br>B</span></grid>
+<table cellpadding="0" cellspacing="0"><td><flex>A<br>B</flex></td></table>
+<table cellpadding="0" cellspacing="0"><td><grid>A<br>B</grid></td></table>
+<flex><grid>A<br>B</grid></flex>
+<grid><flex>A<br>B</flex></grid>
+<flex><flex>A<br>B</flex></flex>
+<grid><grid>A<br>B</grid></grid>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-baselines-004.html b/layout/reftests/css-grid/grid-container-baselines-004.html
new file mode 100644
index 0000000000..67f9882edb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-baselines-004.html
@@ -0,0 +1,47 @@
+<!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: Grid container baselines, nested flex/grid/table</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1306906">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-baselines-004-ref.html">
+  <style type="text/css">
+
+* {
+    color:black; background-color:white; font-size:16px; font-family:monospace; padding:0; margin:0;
+}
+
+grid, flex {
+  display: inline-grid;
+  border: 1px solid;
+  border-width: 10px 0 3px 0;
+  padding-top: 1px;
+}
+
+flex { display:inline-flex; }
+table { display:inline-table; }
+td { vertical-align: baseline; }
+
+    </style>
+</head>
+<body>
+
+A
+<flex>A<br>B</flex>
+<flex><span>A<br>B</span></flex>
+<grid>A<br>B</grid>
+<grid><span>A<br>B</span></grid>
+<table cellpadding="0" cellspacing="0"><td><flex>A<br>B</flex></td></table>
+<table cellpadding="0" cellspacing="0"><td><grid>A<br>B</grid></td></table>
+<flex><grid>A<br>B</grid></flex>
+<grid><flex>A<br>B</flex></grid>
+<flex><flex>A<br>B</flex></flex>
+<grid><grid>A<br>B</grid></grid>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-min-max-width-height-001-ref.html b/layout/reftests/css-grid/grid-container-min-max-width-height-001-ref.html
new file mode 100644
index 0000000000..0daecf81af
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-min-max-width-height-001-ref.html
@@ -0,0 +1,56 @@
+<!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: definite min/max-width/height values on the grid container</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1229165">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: block;
+  float: left;
+  border: 1px solid black;
+  background: grey;
+  margin-right:50px;
+}
+
+x { position:absolute; top:0; left:0; right:0; bottom:0; background:blue; }
+x:nth-child(1) { right:14px; bottom:14px; }
+x:nth-child(2) { left:14px; bottom:14px; }
+x:nth-child(3) { top:14px; right:14px; }
+x:nth-child(4) { top:14px; left:14px; }
+w { display:block; position:relative; width:24px; height:24px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="min-width:50px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="max-width:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="min-width:50px; max-width:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="width:50px; max-width:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="width:50px; min-width:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="min-width:50px; width:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="min-width:50px; max-width:20px; width:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="max-width:10px; width:20px"><w><x></x><x></x><x></x><x></x></w></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid" style="min-height:50px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="max-height:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="min-height:50px; max-height:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="height:50px; max-height:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="height:50px; min-height:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="min-height:50px; height:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="min-height:50px; max-height:20px; height:10px"><w><x></x><x></x><x></x><x></x></w></div>
+<div class="grid" style="max-height:10px; height:20px"><w><x></x><x></x><x></x><x></x></w></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-min-max-width-height-001.html b/layout/reftests/css-grid/grid-container-min-max-width-height-001.html
new file mode 100644
index 0000000000..b5029429a8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-min-max-width-height-001.html
@@ -0,0 +1,55 @@
+<!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: definite min/max-width/height values on the grid container</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1229165">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-container-min-max-width-height-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  grid-template: 10px 10px / 10px 10px;
+  grid-gap: 4px;
+  border: 1px solid black;
+  background: grey;
+  margin-right:50px;
+}
+
+x { background:blue; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="min-width:50px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="max-width:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="min-width:50px; max-width:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="width:50px; max-width:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="width:50px; min-width:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="min-width:50px; width:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="min-width:50px; max-width:20px; width:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="max-width:10px; width:20px"><x></x><x></x><x></x><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid" style="min-height:50px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="max-height:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="min-height:50px; max-height:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="height:50px; max-height:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="height:50px; min-height:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="min-height:50px; height:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="min-height:50px; max-height:20px; height:10px"><x></x><x></x><x></x><x></x></div>
+<div class="grid" style="max-height:10px; height:20px"><x></x><x></x><x></x><x></x></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-overflow-001-ref.html b/layout/reftests/css-grid/grid-container-overflow-001-ref.html
new file mode 100644
index 0000000000..ace9dfdc61
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-overflow-001-ref.html
@@ -0,0 +1,113 @@
+<!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: overflow:hidden/auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  grid-template-columns: repeat(3, 8px);
+  border: 1px solid black;
+  grid-row-gap: 4px;
+  grid-column-gap: 2px;
+  float: left;
+}
+
+.grid :first-child { background:lime; }
+.grid :nth-child(2n) { border-left:1px solid black; }
+
+x { background: grey;  width:7px; height:5px; }
+y { background: blue;  width:7px; height:5px; }
+z { background: green; width:7px; height:5px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="height:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; grid-template-columns: repeat(1, 8px);">
+<x></x>
+<y></y>
+<z></z>
+</div>
+
+<div class="grid" style="height:8px; grid-template-rows: repeat(1, 5px);">
+<x></x><x></x><x></x>
+</div>
+
+<div class="grid" style="width:8px; height:8px; grid-template-columns: 8px; grid-template-rows: 5px;">
+<x></x>
+</div>
+
+<div class="grid" style="width:8px; height:8px; justify-content:center;  grid-template-columns: 8px; grid-template-rows: 5px;">
+<x style="background:grey; border-left:1px solid black;"></x>
+</div>
+
+<div class="grid" style="width:8px; height:8px; align-content:center;">
+<y style="background:blue; border-left:1px solid black;"></y>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-rows: 10px;; align-items:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; ">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-overflow-001.html b/layout/reftests/css-grid/grid-container-overflow-001.html
new file mode 100644
index 0000000000..1279d4c1c3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-overflow-001.html
@@ -0,0 +1,124 @@
+<!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: overflow:hidden/auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-container-overflow-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  grid-template-columns: repeat(3, 8px);
+  border: 1px solid black;
+  grid-row-gap: 4px;
+  grid-column-gap: 2px;
+  float: left;
+  overflow: hidden;
+}
+
+.grid :first-child { background:lime; }
+.grid :nth-child(2n) { border-left:1px solid black; }
+
+x { background: grey;  width:7px; height:5px; }
+y { background: blue;  width:7px; height:5px; }
+z { background: green; width:7px; height:5px; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="height:40px; justify-content:start; align-content:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="height:8px;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; height:8px;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; height:8px; justify-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="width:8px; height:8px; align-content:center;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end; ">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-rows: 10px;; align-items:end;">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+<div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; ">
+<x></x><x></x><x></x>
+<y></y><y></y><y></y>
+<z></z><z></z><z></z>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-container-synthesized-baseline-001-ref.html b/layout/reftests/css-grid/grid-container-synthesized-baseline-001-ref.html
new file mode 100644
index 0000000000..6b4498ef13
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-synthesized-baseline-001-ref.html
@@ -0,0 +1,46 @@
+<!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: Synthesized grid container baseline.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313068">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+  display: inline-block;
+}
+.ig {
+  display: inline-grid;
+}
+.ib, .ig {
+  border-style: solid;
+  border-width: 3px 1px 5px 1px;
+  padding: 7px 10px 3px 8px;
+  margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Grid:<div class="ib"></div>
+Block:<div class="ig"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Grid:<div class="ib"></div>
+Block:<div class="ig"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Grid:<div class="ib" style="margin-bottom:0"></div>
+Block:<div class="ig"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-container-synthesized-baseline-001.html b/layout/reftests/css-grid/grid-container-synthesized-baseline-001.html
new file mode 100644
index 0000000000..76440f5455
--- /dev/null
+++ b/layout/reftests/css-grid/grid-container-synthesized-baseline-001.html
@@ -0,0 +1,48 @@
+<!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: Synthesized grid container baseline.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313068">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="match" href="grid-container-synthesized-baseline-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+  display: inline-block;
+}
+.ig {
+  display: inline-grid;
+}
+.ib, .ig {
+  border-style: solid;
+  border-width: 3px 1px 5px 1px;
+  padding: 7px 10px 3px 8px;
+  margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Grid:<div class="ig"></div>
+Block:<div class="ib"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Grid:<div class="ig"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Grid:<div class="ig"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html b/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html
new file mode 100644
index 0000000000..1f5b14bc2a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html
@@ -0,0 +1,344 @@
+<!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: flex/auto min-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px solid;
+ float: left;
+ min-width:100px;
+}
+.fixed .grid {
+ width:140px;
+}
+
+.g1 {
+ grid-template-columns: 4px
+                        minmax(0,0)
+                        minmax(0,0)
+                        1fr;
+ min-width:104px;
+}
+
+.g2 {
+ grid-template-columns: minmax(0,max-content)
+                        minmax(0,0)
+                        minmax(0,0)
+                        1fr;
+}
+
+.g3 {
+ grid-template-columns: minmax(0,auto)
+                        minmax(0,0)
+                        minmax(0,0)
+                        1fr;
+}
+
+.g4 {
+ grid-template-columns: minmax(2px,0)
+                        minmax(1px,0)
+                        minmax(1px,0)
+                        1fr;
+ min-width:104px;
+}
+
+.g5 {
+ grid-template-columns: minmax(20px,0)
+                        minmax(0,0)
+                        minmax(0,0)
+                        1fr;
+ min-width:104px;
+}
+
+.g6 {
+ grid-template-columns: minmax(2px,0)
+                        minmax(1px,0)
+                        minmax(1px,0)
+                        20px;
+ min-width:124px;
+}
+
+.g7 {
+ grid-template-columns: minmax(20px,1fr)
+                        minmax(0,0)
+                        minmax(0,0)
+                        20px;
+}
+
+.g8 {
+ grid-template-columns: minmax(0,1fr)
+                        minmax(0,0)
+                        minmax(0,0)
+                        20px;
+}
+
+.g9 {
+ grid-template-columns: 20px
+                        30px
+                        minmax(0,0)
+                        10px;
+ min-width:114px;
+}
+
+.gA {
+ grid-template-columns: minmax(0,0)
+                        minmax(min-content,40px)
+                        minmax(0,0)
+                        20px;
+ min-width:140px;
+}
+
+.gB {
+ grid-template-columns: minmax(0,0)
+                        minmax(auto,40px)
+                        minmax(0,0)
+                        20px;
+}
+
+.gC {
+ grid-template-columns: minmax(0,20px)
+                        minmax(0,40px)
+                        minmax(0,0)
+                        20px;
+ min-width:124px;
+}
+
+.gD {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(0,0)
+                        min-content;
+}
+
+.gE {
+ grid-template-columns: minmax(0,20px)
+                        minmax(0,40px)
+                        minmax(0,20px)
+                        auto;
+ min-width:104px;
+}
+
+.gF {
+ grid-template-columns: minmax(0,20px)
+                        44px
+                        minmax(0,40px)
+                        auto;
+}
+
+
+.t { grid-column: span 3; border:2px solid; }
+.d1 { grid-column: 1 / span 2; background: grey; }
+.d3 { grid-column: 3 / span 2; background: blue; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gE grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gF grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<span class="fixed">
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="gE grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gF grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-001.html b/layout/reftests/css-grid/grid-flex-min-sizing-001.html
new file mode 100644
index 0000000000..2c990faf8b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-001.html
@@ -0,0 +1,343 @@
+<!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: flex/auto min-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax">
+  <link rel="match" href="grid-flex-min-sizing-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px solid;
+ float: left;
+ min-width:100px;
+}
+.fixed .grid {
+ width:140px;
+}
+
+/*
+ * NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now
+ * invalid, so they were replaced in this test with 'auto' instead (for now).
+ */
+
+.g1 {
+ grid-template-columns: minmax(auto,min-content)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g2 {
+ grid-template-columns: minmax(auto,max-content)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g3 {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g4 {
+ grid-template-columns: minmax(auto,0)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g5 {
+ grid-template-columns: minmax(20px,0)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g6 {
+ grid-template-columns: minmax(auto,0)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        20px;
+}
+
+.g7 {
+ grid-template-columns: minmax(20px,1fr)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        20px;
+}
+
+.g8 {
+ grid-template-columns: minmax(auto,1fr)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        20px;
+}
+
+.g9 {
+ grid-template-columns: 20px
+                        30px
+                        minmax(auto,0)
+                        10px;
+}
+
+.gA {
+ grid-template-columns: minmax(auto,0)
+                        minmax(min-content,40px)
+                        minmax(auto,0)
+                        20px;
+}
+
+.gB {
+ grid-template-columns: minmax(auto,0)
+                        minmax(auto,40px)
+                        minmax(auto,0)
+                        20px;
+}
+
+.gC {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(auto,0)
+                        20px;
+}
+
+.gD {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(auto,0)
+                        min-content;
+}
+
+.gE {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(auto,20px)
+                        auto;
+}
+
+.gF {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(min-content,max-content)
+                        minmax(auto,40px)
+                        auto;
+}
+
+
+.t { grid-column: span 3; border:2px solid; }
+.d1 { grid-column: 1 / span 2; background: grey; }
+.d3 { grid-column: 3 / span 2; background: blue; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gE grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gF grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<span class="fixed">
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="gE grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+<div class="gF grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
new file mode 100644
index 0000000000..d9af7e43c7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
@@ -0,0 +1,274 @@
+<!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: flex/auto min-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px solid;
+ float: left;
+}
+
+.g0 {
+ display: grid;
+ grid-template-columns: minmax(min-content,min-content);
+ border:1px solid;
+ float: left;
+ margin-right: 20px;
+}
+
+.g1 {
+ grid-template-columns: 4px
+                        minmax(0,0)
+                        minmax(0,0)
+                        1fr;
+ min-width: 24px;
+}
+
+.g2 {
+ grid-template-columns: min-content
+                        0
+                        0
+                        1fr;
+}
+
+.g3 {
+ grid-template-columns: min-content
+                        0
+                        0
+                        1fr;
+}
+
+.g4 {
+ grid-template-columns: minmax(2px,0)
+                        1px
+                        1px
+                        20px;
+}
+
+.g5 {
+ grid-template-columns: minmax(20px,0)
+                        minmax(0,0)
+                        minmax(0,0)
+                        4px;
+}
+
+.g6 {
+ grid-template-columns: minmax(1.333333px,0)
+                        minmax(1.333333px,0)
+                        minmax(1.333333px,0)
+                        20px;
+ min-width: 44px;
+}
+
+.g7 {
+ grid-template-columns: minmax(20px,1fr)
+                        minmax(min-content,0)
+                        minmax(min-content,0)
+                        20px;
+}
+
+.g8 {
+ grid-template-columns: minmax(min-content,1fr)
+                        minmax(min-content,0)
+                        minmax(min-content,0)
+                        20px;
+}
+
+.g9 {
+ grid-template-columns: 20px
+                        30px
+                        minmax(min-content,0)
+                        10px;
+}
+
+.gA {
+ grid-template-columns: minmax(min-content,0)
+                        minmax(min-content,40px)
+                        minmax(min-content,0)
+                        20px;
+}
+
+.gB {
+ grid-template-columns: 24px
+                        0
+                        0
+                        20px;
+ min-width: 44px;
+}
+
+.gC {
+ grid-template-columns: minmax(24px,0)
+                        0
+                        0
+                        20px;
+ min-width: 44px;
+}
+
+.gD {
+ grid-template-columns: minmax(24px,0)
+                        0
+                        0
+                        0;
+}
+
+.gE {
+ grid-template-columns: minmax(8px,0)
+                        minmax(8px,0)
+                        minmax(8px,0)
+                        0px;
+}
+
+.gF {
+ grid-template-columns: 22px
+                        1px
+                        1px
+                        auto;
+}
+
+
+.t { grid-column: span 3; border:2px solid; }
+.d1 { grid-column: 1 / span 2; background: grey; }
+.d3 { grid-column: 3 / span 2; background: blue; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g0">
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g0">
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g0">
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gE grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gF grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-002.html b/layout/reftests/css-grid/grid-flex-min-sizing-002.html
new file mode 100644
index 0000000000..e10763f5ea
--- /dev/null
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-002.html
@@ -0,0 +1,277 @@
+<!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: flex/auto min-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax">
+  <link rel="match" href="grid-flex-min-sizing-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px solid;
+}
+
+.g0 {
+ display: grid;
+ grid-template-columns: minmax(min-content,min-content);
+ border:1px solid;
+ float: left;
+ margin-right: 20px;
+ justify-items: start;
+}
+
+/*
+ * NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now
+ * invalid, so they were replaced in this test with 'auto' instead (for now).
+ */
+
+.g1 {
+ grid-template-columns: minmax(auto,min-content)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g2 {
+ grid-template-columns: minmax(auto,max-content)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g3 {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g4 {
+ grid-template-columns: minmax(auto,0)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g5 {
+ grid-template-columns: minmax(20px,0)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        1fr;
+}
+
+.g6 {
+ grid-template-columns: minmax(auto,0)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        20px;
+}
+
+.g7 {
+ grid-template-columns: minmax(20px,1fr)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        20px;
+}
+
+.g8 {
+ grid-template-columns: minmax(auto,1fr)
+                        minmax(auto,0)
+                        minmax(auto,0)
+                        20px;
+}
+
+.g9 {
+ grid-template-columns: 20px
+                        30px
+                        minmax(auto,0)
+                        10px;
+}
+
+.gA {
+ grid-template-columns: minmax(auto,0)
+                        minmax(min-content,40px)
+                        minmax(auto,0)
+                        20px;
+}
+
+.gB {
+ grid-template-columns: minmax(auto,0)
+                        minmax(auto,40px)
+                        minmax(auto,0)
+                        20px;
+}
+
+.gC {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(auto,0)
+                        20px;
+}
+
+.gD {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(auto,0)
+                        min-content;
+}
+
+.gE {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(auto,40px)
+                        minmax(auto,20px)
+                        auto;
+}
+
+.gF {
+ grid-template-columns: minmax(auto,20px)
+                        minmax(min-content,max-content)
+                        minmax(auto,40px)
+                        auto;
+}
+
+
+.t { grid-column: span 3; border:2px solid; }
+.d1 { grid-column: 1 / span 2; background: grey; }
+.d3 { grid-column: 3 / span 2; background: blue; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g0">
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g0">
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<br clear="all" style="margin-top:100px">
+
+<div class="g0">
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gE grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+<div class="g0">
+<div class="gF grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+  <div class="d3"></div>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-001-ref.html b/layout/reftests/css-grid/grid-fragmentation-001-ref.html
new file mode 100644
index 0000000000..0dd293c195
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-001-ref.html
@@ -0,0 +1,161 @@
+<!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: Fragmentation of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-template-rows: 50px;
+  grid-column-gap: 12px;
+  border:5px solid;
+}
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+br { page-break-before:always; break-before:always; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-001.html b/layout/reftests/css-grid/grid-fragmentation-001.html
new file mode 100644
index 0000000000..9fabce520d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-001.html
@@ -0,0 +1,122 @@
+<!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: Fragmentation of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-002-ref.html b/layout/reftests/css-grid/grid-fragmentation-002-ref.html
new file mode 100644
index 0000000000..cbbccd9a77
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-002-ref.html
@@ -0,0 +1,135 @@
+<!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: Fragmentation height:auto two row grid without grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  position:relative;
+  border:5px solid;
+}
+.grid {
+  display: grid;
+  position:relative;
+  grid-template-columns: 30px 30px 30px;
+  grid-template-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { grid-row:1/2; position:absolute; top:0;bottom:0;right:0;left:0;background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 64px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block">
+<span style="height:0"></span>
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block t" style="height:2px">
+<span style="height:0px"></span>
+</div>
+<div class="block b" style="margin-top:6px;height:0px">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-002.html b/layout/reftests/css-grid/grid-fragmentation-002.html
new file mode 100644
index 0000000000..5495c8fe30
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-002.html
@@ -0,0 +1,110 @@
+<!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: Fragmentation height:auto two row grid without grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  position:relative;
+  grid-template-columns: 30px 30px 30px;
+  grid-template-rows: 50px 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { position:absolute; top:0;bottom:0;right:0;left:0;background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 64px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="grid-template-rows:auto">
+<span></span>
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="grid-template-rows:auto; height:2px/*creates a Class C break opportunity at the end*/">
+<span></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-003-ref.html b/layout/reftests/css-grid/grid-fragmentation-003-ref.html
new file mode 100644
index 0000000000..d6a73e371f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-003-ref.html
@@ -0,0 +1,138 @@
+<!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: Fragmentation height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-003.html b/layout/reftests/css-grid/grid-fragmentation-003.html
new file mode 100644
index 0000000000..52c1082e6d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-003.html
@@ -0,0 +1,105 @@
+<!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: Fragmentation height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-004-ref.html b/layout/reftests/css-grid/grid-fragmentation-004-ref.html
new file mode 100644
index 0000000000..a8ba0dc03f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-004-ref.html
@@ -0,0 +1,166 @@
+<!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: Fragmentation with first grid row at top-of-page and Class C break opportunities</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+  height: 120px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width: 0;
+  border-bottom-width: 10px;
+  align-content: center;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+.grid.t {padding-top:4px;}
+
+.br1 { height:1px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid t" style="height:112px; padding-bottom:4px;">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div>
+<div style="height:2px;"></div>
+<div class="block" style="border-top-style:none; height:0px;">
+</div></div></div>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="br1"></div>
+<div class="grid b" style="padding-bottom:16px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid m" style="padding-bottom:10px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="block" style="border-top-style:none; height:6px;">
+</div>
+</div></div>
+
+<!--  TODO XXX depends on bug 1238294
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="br1"></div>
+<div class="grid m">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="block" style="margin-top:-19px; border-top-style:none; height:20px;">
+</div>
+</div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="br1"></div>
+<div class="grid m">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="background:black; padding-bottom:10px;"></div>
+</div></div>
+
+<div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */">
+<div style="background:grey;">
+<div class="br1"></div>
+<div class="grid m">
+<span><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+<span class="t"><x></x></span>
+</div>
+<div class="grid m">
+<span><x></x></span>
+<span class="b" style="height:11px; background:cyan"><x></x></span>
+<span class="b"style=""><x></x></span>
+</div>
+<div style="background:black; padding-bottom:10px;"></div>
+</div></div>
+
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-004.html b/layout/reftests/css-grid/grid-fragmentation-004.html
new file mode 100644
index 0000000000..f6ddc95023
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-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: Fragmentation with first grid row at top-of-page and Class C break opportunities</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width: 0;
+  border-bottom-width: 10px;
+  height: 120px; /* 4px before/after first/last row are Class C break opportunities */
+  align-content: center;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<!--  TODO XXX depends on bug 1238294
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */">
+<div style="background:grey">
+<div class="grid">
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-005-ref.html b/layout/reftests/css-grid/grid-fragmentation-005-ref.html
new file mode 100644
index 0000000000..0db95ee560
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-005-ref.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>Reference: Fragmentation of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+.br1 { height:1px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:40px;"></div>
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:50px"></div>
+<div class="grid b">
+<span style=""><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:53px"></div>
+<div class="grid b">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-005.html b/layout/reftests/css-grid/grid-fragmentation-005.html
new file mode 100644
index 0000000000..78e85e44ce
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-005.html
@@ -0,0 +1,133 @@
+<!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: Fragmentation of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-005-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+<!-- TODO XXX bug 775628? (break-after on last row should propagate to container)
+<div class="columns" style="height: 135px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-after" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+<div style="height:20px;background:yellow"></div>
+</div></div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-006-ref.html b/layout/reftests/css-grid/grid-fragmentation-006-ref.html
new file mode 100644
index 0000000000..56808bfdfe
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-006-ref.html
@@ -0,0 +1,116 @@
+<!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: Fragmentation of height:auto grid, not top-of-page, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.br1 { height:94px; border-width:5px; border-top-style:solid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 110px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 70px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 140px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:span 3"><x></x></span>
+<span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-auto-rows: 50px; height:50px;">
+<span class="t" style="grid-row:span 2; height:49px; overflow:hidden"><i></i><i></i><i></i><x></x></span>
+</div>
+<div style="height:44px"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:50px;">
+<span class="b" style="grid-row:span 2; height:11px; overflow:hidden"><i style="margin-top:0;height:2px"></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:116px;">
+<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span style="height:100px; background:pink"><x></x></span>
+<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-006.html b/layout/reftests/css-grid/grid-fragmentation-006.html
new file mode 100644
index 0000000000..f7d51d5d3e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-006.html
@@ -0,0 +1,108 @@
+<!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: Fragmentation of height:auto grid, not top-of-page, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-006-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 110px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="avoid-break"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 70px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span class="avoid-break"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span class="avoid-break" style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 140px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:span 3"><x></x></span>
+<span class="avoid-break" style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px;">
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px; height:116px;">
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span style="height:100px; background:pink"><x></x></span>
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-007-ref.html b/layout/reftests/css-grid/grid-fragmentation-007-ref.html
new file mode 100644
index 0000000000..371f21af6e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-007-ref.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>Reference: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-007.html b/layout/reftests/css-grid/grid-fragmentation-007.html
new file mode 100644
index 0000000000..90b8b32e6a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-007.html
@@ -0,0 +1,104 @@
+<!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: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-007-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px 1fr 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-008-ref.html b/layout/reftests/css-grid/grid-fragmentation-008-ref.html
new file mode 100644
index 0000000000..d5078d231a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-008-ref.html
@@ -0,0 +1,132 @@
+<!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: Fragmentation of height:auto grid, top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  align-content: start;
+}
+span { padding-top:20px; background:lime; border:1px solid black; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px">
+<span style="height:50px;"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px">
+<span class="t"></span>
+<span style="height:50px;"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div style="height:12px"></div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"></span>
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px">
+<span class="t"></span>
+<span style="height:50px"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"></span>
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 5px; grid-row-gap:0; height:5px">
+<span class="t" style="grid-column:3"></span>
+</div>
+<div style="height:88px"></div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-row-gap:0; height:82px">
+<span style="height:50px"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+<span class="m"></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+<span class="m" style="grid-column:3"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 5px; grid-row-gap:0; height:5px">
+<span class="t"></span>
+</div>
+<div style="height:88px"></div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-row-gap:0; height:82px">
+<span class="m"></span>
+<span style="height:50px"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m"></span>
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b"></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-008.html b/layout/reftests/css-grid/grid-fragmentation-008.html
new file mode 100644
index 0000000000..b49b980cee
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-008.html
@@ -0,0 +1,95 @@
+<!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: Fragmentation of height:auto grid, top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-008-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  align-content: space-evenly;
+}
+span { padding-top:20px; background:lime; border:1px solid black; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:2"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 2"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 4"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:2; height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:1/span 5"></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-009-ref.html b/layout/reftests/css-grid/grid-fragmentation-009-ref.html
new file mode 100644
index 0000000000..b28fa41f9c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-009-ref.html
@@ -0,0 +1,161 @@
+<!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: Fragmentation of definite height, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="height:60px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;border:5px solid;"></div>
+</div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:50px;"></div>
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div style="height:60px; border:5px solid; border-top-width:0;">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:87px;"></div>
+<div class="grid t" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="grid b"></div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:50px"></div>
+<div class="grid b">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:53px"></div>
+<div style="height:18px; border:5px solid; border-top-width:0;">
+<span class="b" style="display:block;height:29px;width:28px"></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-009.html b/layout/reftests/css-grid/grid-fragmentation-009.html
new file mode 100644
index 0000000000..f8e82d525e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-009.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: Fragmentation of definite height grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-009-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="background:grey"><m></m>
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+<!-- TODO XXX bug 775628? (break-after on last row should propagate to container)
+<div class="columns" style="height: 135px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-after" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+<div style="height:20px;background:yellow"></div>
+</div></div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-010-ref.html b/layout/reftests/css-grid/grid-fragmentation-010-ref.html
new file mode 100644
index 0000000000..655994f028
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-010-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:0.54in; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-010.html b/layout/reftests/css-grid/grid-fragmentation-010.html
new file mode 100644
index 0000000000..40fa4e83f6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-010.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-010-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:1.5in; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-011-ref.html b/layout/reftests/css-grid/grid-fragmentation-011-ref.html
new file mode 100644
index 0000000000..257b67e3cc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-011-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:0.54in; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-011.html b/layout/reftests/css-grid/grid-fragmentation-011.html
new file mode 100644
index 0000000000..b739148382
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-011.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-011-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+
+</style>
+</head>
+<body>
+
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:1.5in; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-012-ref.html b/layout/reftests/css-grid/grid-fragmentation-012-ref.html
new file mode 100644
index 0000000000..80ac214fa3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-012-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 0.5in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:0.15in; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-012.html b/layout/reftests/css-grid/grid-fragmentation-012.html
new file mode 100644
index 0000000000..c2ce18520e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-012.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-012-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 0.5in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:0.6in; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-013-ref.html b/layout/reftests/css-grid/grid-fragmentation-013-ref.html
new file mode 100644
index 0000000000..1a6f829334
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-013-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  align-items: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+  <div class="grid t">
+    <span class="t" style="align-self:stretch"><x style="height:auto"></x></span>
+  </div>
+  <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
+    <span class="b" style="min-height:0"><x style="height:0.04in"></x></span>
+  </div>
+</div>
+
+<div style="padding-top:0.91in; background:grey;">
+  <div class="grid t" style="height:0.9in">
+    <span class="t" style="height:0.86in"><x></x></span>
+  </div>
+</div>
+  <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
+    <span class="b" style="min-height:0"><x style="height:0.04in"></x></span>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-013.html b/layout/reftests/css-grid/grid-fragmentation-013.html
new file mode 100644
index 0000000000..ff6ebebb3d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-013.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-013-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  align-items: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid">
+<span class="avoid-break"><x></x><x></x><x></x><x></x><x></x></span>
+</div></div>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid" style="align-content:end; grid-auto-rows:auto; height:1in">
+<span xclass="avoid-break"><x></x><x></x><x></x><x></x><x></x></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-014-ref.html b/layout/reftests/css-grid/grid-fragmentation-014-ref.html
new file mode 100644
index 0000000000..70cb12154f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-014-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  border: 0.1in solid;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+i { display:block; height:0.1in; background:blue; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid" style="grid-template-rows: .91in 1in;">
+<span style="height:0.2in"><i style="height:1.5in"></i><x></x></span>
+<span style="height:0.25in"><i></i><i></i><i></i><x></x></span>
+<span style="grid-area:2/2"><x></x></span>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-014.html b/layout/reftests/css-grid/grid-fragmentation-014.html
new file mode 100644
index 0000000000..af1b0cb673
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-014.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-014-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+i { display:block; height:0.1in; background:blue; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 1in; grid-gap:0;">
+<span style="height:0.2in"><i style="height:1.5in"></i><x></x></span>
+<span class="avoid-break" style="height:0.25in"><i></i><i></i><i></i><x></x></span>
+<span style="grid-area:2/2"><x></x></span>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-015-ref.html b/layout/reftests/css-grid/grid-fragmentation-015-ref.html
new file mode 100644
index 0000000000..da843648f6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-015-ref.html
@@ -0,0 +1,128 @@
+<!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: Fragmentation edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<!-- grid wrapped in inline -->
+<div class="columns" style="height: 40px">
+<div style="padding-top:2px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<!-- grid wrapped in inline with orthogonal writing-mode -->
+<div class="columns" style="width: 40px; height:40px;">
+<div style="padding-top:2px; background:grey">
+<div class="grid" style="overflow:hidden; writing-mode:vertical-lr">
+<span style="grid-row:span 2;"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<!-- grid wrapped in overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<div class="grid" style="overflow:hidden">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<!-- grid wrapped in FIELDSET block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<div style="display:block; overflow:hidden; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div></div>
+
+<!-- grid wrapped in FIELDSET inline -->
+<div class="columns" style="height: 40px; margin-left:200px">
+<div style="padding-top:2px; background:grey">
+<div style="display:inline-block; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div></div>
+
+<!-- grid wrapped in FIELDSET overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-left:400px">
+<div style="padding-top:2px; background:grey">
+<div style="display:block; overflow:hidden; border:none; padding:0; margin:0; width:-moz-min-content">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div></div>
+
+<!-- grid with orthogonal writing-mode to fragmentainer -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y>
+<div class="grid" style="overflow:hidden; writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline -->
+<!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be -->
+<div style="visibility:hidden">
+<div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y style="writing-mode:horizontal-lr">
+<div class="grid" style="writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-015.html b/layout/reftests/css-grid/grid-fragmentation-015.html
new file mode 100644
index 0000000000..084fddab92
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-015.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: Fragmentation edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-015-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<!-- grid wrapped in inline -->
+<div class="columns" style="height: 40px">
+<div style="padding-top:2px; background:grey">
+<y>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- grid wrapped in inline with orthogonal writing-mode -->
+<div class="columns" style="width: 40px; height:40px">
+<div style="padding-top:2px; background:grey">
+<y style="writing-mode:vertical-lr">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- grid wrapped in overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y style="display:block;overflow:hidden">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- grid wrapped in FIELDSET block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<fieldset style="display:block; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></fieldset></div></div>
+
+<!-- grid wrapped in FIELDSET inline -->
+<div class="columns" style="height: 40px; margin-left:200px">
+<div style="padding-top:2px; background:grey">
+<fieldset style="display:inline; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></fieldset></div></div>
+
+<!-- grid wrapped in FIELDSET overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-left:400px">
+<div style="padding-top:2px; background:grey">
+<fieldset style="display:block; overflow:hidden; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></fieldset></div></div>
+
+<!-- grid with orthogonal writing-mode to fragmentainer -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y>
+<div class="grid" style="writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline -->
+<!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be -->
+<div style="visibility:hidden">
+<div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y style="writing-mode:horizontal-lr">
+<div class="grid" style="writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-016-ref.html b/layout/reftests/css-grid/grid-fragmentation-016-ref.html
new file mode 100644
index 0000000000..2b7eee9eec
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-016-ref.html
@@ -0,0 +1,167 @@
+<!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: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+x { display:block; height:20px; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block" style="height:1px; overflow:hidden">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block" style="height:1px; overflow:hidden"></div>
+<div class="block" style="height:1px; overflow:hidden"></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-016.html b/layout/reftests/css-grid/grid-fragmentation-016.html
new file mode 100644
index 0000000000..74f2574bf1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-016.html
@@ -0,0 +1,128 @@
+<!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: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-016-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  box-decoration-break: clone;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="height:1px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-017-ref.html b/layout/reftests/css-grid/grid-fragmentation-017-ref.html
new file mode 100644
index 0000000000..4edf70caaa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-017-ref.html
@@ -0,0 +1,139 @@
+<!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: Fragmentation height:auto grid with first grid row at top-of-page and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block" style="height:1px;overflow:hidden"></div>
+<div class="block" style="height:1px;overflow:hidden"></div>
+</div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-017.html b/layout/reftests/css-grid/grid-fragmentation-017.html
new file mode 100644
index 0000000000..9856cb3b62
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-017.html
@@ -0,0 +1,107 @@
+<!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: Fragmentation height:auto grid with first grid row at top-of-page and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-017-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+  box-decoration-break: clone;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-018-ref.html b/layout/reftests/css-grid/grid-fragmentation-018-ref.html
new file mode 100644
index 0000000000..bcc960a9c5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-018-ref.html
@@ -0,0 +1,161 @@
+<!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: Fragmentation of definite height, not top-of-page, forced breaks, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid" style="height:60px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;border:5px solid;box-decoration-break: clone;"></div>
+</div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:50px;"></div>
+<div class="grid" style="padding-bottom:20px">
+<span><x></x></span>
+</div>
+<div style="height:40px; border:5px solid;"></div>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:87px;"></div>
+<div class="grid" style="padding-bottom:15px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:3px;border:5px solid;box-decoration-break: clone;"></div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div></div>
+<div style="height:10px"></div>
+<div class="grid m" style="height:0; margin-top:1px">
+<span><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:48px"></div>
+<div style="height:18px; border:5px solid;">
+<span class="b" style="display:block;height:29px;width:28px"></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-018.html b/layout/reftests/css-grid/grid-fragmentation-018.html
new file mode 100644
index 0000000000..856a4347d9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-018.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>CSS Grid Test: Fragmentation of definite height grid, not top-of-page, forced breaks, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-018-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  box-decoration-break: clone;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="background:grey"><m></m>
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+<!-- TODO XXX bug 775628? (break-after on last row should propagate to container)
+<div class="columns" style="height: 135px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-after" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+<div style="height:20px;background:yellow"></div>
+</div></div>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-019-ref.html b/layout/reftests/css-grid/grid-fragmentation-019-ref.html
new file mode 100644
index 0000000000..9c34efb2e9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-019-ref.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+  box-decoration-break: clone;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:89px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:44px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-row-gap:0; margin-bottom:40px;">
+<span class="m" style="height:16px; background:blue; margin: -5px 1px 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 72px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:89px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:44px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-row-gap:0; margin-bottom:40px;">
+<span class="m"><x></x></span>
+<span class="m" style="height:16px; color:blue; background:blue; margin: -5px 1px 0 1px; border-width:0"></span>
+</div>
+<div class="grid" style="grid-template-rows: 72px; grid-row-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:90px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 61px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:62px">
+<span style="height:60px"><x></x></span>
+<span style="height:50px"><i style="height:54px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 0; grid-gap:0; border-width:0 5px">
+<span class=m style="grid-column:2; border-width:0 1px; height:0"><i style="height:6px;margin:0"></i></span>
+<span class=b style="grid-column:3; height:0"></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-019.html b/layout/reftests/css-grid/grid-fragmentation-019.html
new file mode 100644
index 0000000000..8746e0bb3c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-019.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: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+  box-decoration-break: clone;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px 1fr 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 61px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px 1fr; grid-gap:0;">
+<span style="grid-row:2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-020-ref.html b/layout/reftests/css-grid/grid-fragmentation-020-ref.html
new file mode 100644
index 0000000000..1d163bce61
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-020-ref.html
@@ -0,0 +1,208 @@
+<!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: Fragmentation with forced break propagation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  border:5px solid;
+  height: 20px; /* create Class C break opportunities at both ends */
+  align-content: center;
+}
+.start {
+  align-content: start;
+}
+
+span { background:lime; border:1px solid black; }
+.bb { border-bottom-width:6px; }
+x { display:block; height: 40px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m {  border:5px solid; border-top-width:0; border-bottom-width:0; }
+.br1 { height:34px; border-width:5px; border-top-style:solid; }
+.br2 { height:4px; }
+.br3 { height:39px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="br1"></div>
+<div class="grid b">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="br3"></div>
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="br3"></div>
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="padding-top:1px; background:grey">
+<div class="br2"></div>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="padding-top:1px; background:grey">
+<div class="br2"></div>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px; margin-top:20px">
+<div style="background:grey">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="height:1px; overflow:hidden"></div>
+<div style="height:5px; overflow:hidden; background:black; "></div>
+<div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;">
+<span class="bb"></span>
+</div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="">
+<div style="height:1px; overflow:hidden"></div>
+<div style="height:5px; overflow:hidden; background:black; "></div>
+</div>
+<div style="height:7px; width:30px; margin-left:5px; overflow:hidden; background:black;"></div>
+<div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;">
+<span class="bb"></span>
+</div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="height:1px; overflow:hidden; position:relative"></div>
+<div style="border:5px solid; height:1px; overflow:hidden; ">
+<div style="height:7px; width:30px; overflow:hidden;  position:absolute; background:black;"></div>
+</div>
+</div>
+</div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 1px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb" style="grid-row:span 2"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb" style="grid-row:span 2"></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-020.html b/layout/reftests/css-grid/grid-fragmentation-020.html
new file mode 100644
index 0000000000..3d55621964
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-020.html
@@ -0,0 +1,215 @@
+<!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: Fragmentation with forced break propagation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-020-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  border:5px solid;
+  height: 20px; /* create Class C break opportunities at both ends */
+  align-content: center;
+}
+.start {
+  align-content: start;
+}
+
+span { background:lime; border:1px solid black; }
+.bb { border-bottom-width:6px; }
+x { display:block; height: 40px; }
+m { display:block; padding-top:1px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="background:grey"><m></m>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="background:grey"><m></m>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px; margin-top:20px">
+<div style="background:grey"><m></m>
+<div class="grid" style="height:10px;">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:10px;grid-auto-rows: 0px;">
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:10px;grid-auto-rows: 0px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 1px;">
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 1px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb" style="grid-row:span 2"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb" style="grid-row:span 2"></span>
+</div></div></div>
+
+<!--
+
+XXX TODO: propagation of break-after on the last row to the container doesn't work.
+XXX TODO: I'm guessing the block frame code doesn't know how to deal with that b/c
+XXX TODO: it expects the frame constructor to have created a nsPageBreakFrame...
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="break-after"></span>
+</div>
+<div style="border-top:2px solid blue"></div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<img src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=" class="break-after"></button>
+</div>
+<div style="border-top:2px solid blue"></div>
+</div></div>
+
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-021-ref.html b/layout/reftests/css-grid/grid-fragmentation-021-ref.html
new file mode 100644
index 0000000000..27cab9b459
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-021-ref.html
@@ -0,0 +1,188 @@
+<!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: Fragmentation with ::before/::after items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 3;
+      -ms-columns: 3;
+  -webkit-columns: 3;
+          columns: 3;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 1px;
+  height: 150px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 20px;
+  grid-gap: 2px;
+  border:5px solid;
+  counter-reset: item;
+}
+.start {
+  align-content: start;
+}
+
+span { counter-increment:item; }
+.br1.before { grid-row:1; }
+.ar1.after { grid-row:1; }
+.br2.before { grid-row:2; }
+.ar2.after { grid-row:2; }
+.br7.before { grid-row:7; }
+.ar7.after { grid-row:7; }
+
+.span5 { grid-row-end: span 5; background:lime; }
+
+.span15 { grid-row: 1 / span 15; grid-column:1; background:lime; }
+.span15.before { grid-row-end: span 15; grid-column:3; background:grey; }
+.span15.after { grid-row: 2 / span 15; grid-column:2; background:lime; }
+
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:before</c></span>
+<span><c>2:after</c></span>
+<span><c>1:before</c></span>
+<span class="ar2"><c>1</c></span>
+<span class="ar2"><c>1:after</c></span>
+<span class="ar2"><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>3:before</c></span>
+<span><c>3</c></span>
+<span><c>3:after</c></span>
+<span><c>4:before</c></span>
+<span><c>4</c></span>
+<span class="br1"><c>4:after</c></span>
+<span class="br1"><c>5</c></span>
+<span class="br1"><c>5:after</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:after</c></span>
+<span><c>4:after</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span class="ar2"><c>3</c></span>
+<span class="ar2"><c>3:after</c></span>
+<span class="ar2"><c>4:before</c></span>
+<span class="ar1"><c>4</c></span>
+<span class="ar1"><c>5:before</c></span>
+<span class="ar1"><c>5</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:after</c></span>
+<span><c>5:before</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span><c>3</c></span>
+<span><c>3:after</c></span>
+<span><c>4:before</c></span>
+<span class="ar1 br2"><c>4</c></span>
+<span class="ar1 br2"><c>4:after</c></span>
+<span class="ar1 br2"><c>5</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:before</c></span>
+<span><c>5:after</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span><c>3</c></span>
+<span><c>3:after</c></span>
+<span><c>4:before</c></span>
+<span class="ar2 br1"><c>4</c></span>
+<span class="ar2 br1"><c>4:after</c></span>
+<span class="ar2 br1"><c>5</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:before</c></span>
+<span><c>4:before</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span class="br2"><c>3</c></span>
+<span class="br2"><c>3:after</c></span>
+<span class="br2"><c>4</c></span>
+<span class="br1"><c>4:after</c></span>
+<span class="br1"><c>5</c></span>
+<span class="br1"><c>5:after</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>1:before</c></span>
+<span><c>5:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>4:before</c></span>
+<span><c>2:after</c></span>
+<span class="span5"><c>3:before</c></span>
+<span class="span5"><c>3</c></span>
+<span class="span5"><c></c></span>
+<span class="br7"><c></c></span>
+<span class="br2"><c></c></span>
+<span class="br2"><c></c></span>
+<span class="br2"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid" style="grid-template-columns: 30px 30px 30px">
+<span class="span15 before"><c>1:before</c></span>
+<span class="span15"><c>1</c></span>
+<span class="span15 after"><c>1:after</c></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-021.html b/layout/reftests/css-grid/grid-fragmentation-021.html
new file mode 100644
index 0000000000..c19d829dbe
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-021.html
@@ -0,0 +1,133 @@
+<!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: Fragmentation with ::before/::after items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 3;
+      -ms-columns: 3;
+  -webkit-columns: 3;
+          columns: 3;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 1px;
+  height: 150px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 20px;
+  grid-gap: 2px;
+  border:5px solid;
+  counter-reset: item;
+}
+.start {
+  align-content: start;
+}
+
+span { display:contents; }
+span::before { counter-increment:item; content: counter(item) ":before"; }
+span::after { content: counter(item) ":after"; }
+c::before { content: counter(item); }
+.br1::before { grid-row:1; }
+.ar1::after { grid-row:1; }
+.br2::before { grid-row:2; }
+.ar2::after { grid-row:2; }
+.br7::before { grid-row:7; }
+.ar7::after { grid-row:7; }
+
+.span5 * { grid-row-end: span 5; background:lime; }
+.span5::before { grid-row-end: span 5; background:lime; }
+.span5::after { grid-row-end: span 5; background:lime; }
+
+.span15 * { grid-row: 1 / span 15; background:lime; }
+.span15::before { grid-row-end: span 15; background:grey; }
+.span15::after { grid-row: 2 / span 15; background:lime; }
+
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span class="ar2"><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="br1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="ar2"><c></c></span>
+<span class="ar1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="ar1 br2"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="ar2 br1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="br2"><c></c></span>
+<span class="br1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span class="span5"><c></c></span>
+<span class="br7"><c></c></span>
+<span class="br2"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid" style="grid-template-columns: 30px 30px 30px">
+<span class="span15"><c></c></span>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-022.html b/layout/reftests/css-grid/grid-fragmentation-022.html
new file mode 100644
index 0000000000..d96bfa4dab
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-022.html
@@ -0,0 +1,104 @@
+<!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: Fragmentation of height:auto grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-007-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-023-ref.html b/layout/reftests/css-grid/grid-fragmentation-023-ref.html
new file mode 100644
index 0000000000..74542991ff
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-023-ref.html
@@ -0,0 +1,138 @@
+<!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: Fragmentation of definite height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:86px">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:86px">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 80px; grid-gap:0; padding-bottom:6px">
+<span class="m"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="align-content: start; grid-gap:0; height:1px; border-width:0; margin-left:5px">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 86px; grid-row-gap:0;">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3; height:92px;"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 86px; grid-row-gap:0;">
+<span class="m" style="height:92px"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: 0; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:30px;">
+<span class="b" style="height:49px"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
+
diff --git a/layout/reftests/css-grid/grid-fragmentation-023.html b/layout/reftests/css-grid/grid-fragmentation-023.html
new file mode 100644
index 0000000000..4a667d5ff0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-023.html
@@ -0,0 +1,105 @@
+<!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: Fragmentation of definite height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 180px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-024-ref.html b/layout/reftests/css-grid/grid-fragmentation-024-ref.html
new file mode 100644
index 0000000000..73ce282721
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-024-ref.html
@@ -0,0 +1,172 @@
+<!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: Fragmentation of a height:auto  definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:50px">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:50px">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="grid-gap:0; height:6px">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:30px;">
+<span class="b" style="height:49px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="grid-gap:0; height:6px">
+<span class="b"><x></x></span>
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid m" style="border-style:none; margin-left:5px">
+<span><x></x></span>
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-024.html b/layout/reftests/css-grid/grid-fragmentation-024.html
new file mode 100644
index 0000000000..43b9692a2d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-024.html
@@ -0,0 +1,126 @@
+<!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: Fragmentation of a height:auto  definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-024-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 180px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-025-ref.html b/layout/reftests/css-grid/grid-fragmentation-025-ref.html
new file mode 100644
index 0000000000..967673c6f2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-025-ref.html
@@ -0,0 +1,177 @@
+<!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: Fragmentation of a height:auto, small definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px">
+<span><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div class="grid m" style="grid-template-rows: 80px; border-style:none; margin-left:5px">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="border-style:none; margin-left:5px">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div></div>
+<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; border-style:none; margin-left:5px">
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div></div>
+<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; border-style:none; margin-left:5px">
+<span class="b" style="height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0; height:20px">
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 100px; grid-gap:0; border-style:none; margin-left:5px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px">
+<span class="b" style="height:49px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 80px; border-style:none; margin-left:5px">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid" style="grid-gap:0; border-style:none; margin-left:5px">
+<span class="b"><x></x></span>
+<span><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div style="height:9px"></div>
+<div class="grid" style="border-style:none; margin-left:5px">
+<span><x></x></span>
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-025.html b/layout/reftests/css-grid/grid-fragmentation-025.html
new file mode 100644
index 0000000000..6741fe78f1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-025.html
@@ -0,0 +1,126 @@
+<!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: Fragmentation of a height:auto, small definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-025-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-026-ref.html b/layout/reftests/css-grid/grid-fragmentation-026-ref.html
new file mode 100644
index 0000000000..97f0608fb4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-026-ref.html
@@ -0,0 +1,166 @@
+<!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: Fragmentation of definite height grid, forced row breaks, avoid-break grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+s { display:block; height:90px; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<s></s>
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="height:60px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<s style="height:20px;"></s>
+<div style="height:90px;border:5px solid;"></div>
+</div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:50px;"></div>
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div style="height:60px; border:5px solid; border-top-width:0;">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<s></s>
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<s></s>
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:87px;"></div>
+<div class="grid t" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="grid b"></div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:50px"></div>
+<div class="grid b">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:53px"></div>
+<div style="height:18px; border:5px solid; border-top-width:0;">
+<span class="b" style="display:block;height:29px;width:28px"></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-026.html b/layout/reftests/css-grid/grid-fragmentation-026.html
new file mode 100644
index 0000000000..95779ab9fe
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-026.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: Fragmentation of definite height grid, forced row breaks, avoid-break grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+
+  page-break-inside:avoid;
+  break-inside:avoid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="background:grey"><m></m>
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-027.html b/layout/reftests/css-grid/grid-fragmentation-027.html
new file mode 100644
index 0000000000..c7bf664f5f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-027.html
@@ -0,0 +1,127 @@
+<!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: Fragmentation of a height:auto, small definite min/max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-025-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 10px;
+  min-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-028-ref.html b/layout/reftests/css-grid/grid-fragmentation-028-ref.html
new file mode 100644
index 0000000000..4797fa7677
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-028-ref.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of a height:auto, small definite min-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 50px; grid-gap:0; height:100px">
+<span class="b"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 50px; grid-gap:0; height:100px">
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:6px">
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; align-content:start; height:26px;">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 30px; grid-row-gap:0; align-content:start; height:1px; border-width:0; margin-left:5px;">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="grid-gap:0;">
+<span class="b"><x></x></span>
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0; height:92px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div style="height:8px"></div>
+<div class="grid b" style="">
+<span><x></x></span>
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-028.html b/layout/reftests/css-grid/grid-fragmentation-028.html
new file mode 100644
index 0000000000..b8fdb18ae6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-028.html
@@ -0,0 +1,125 @@
+<!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: Fragmentation of a height:auto, small definite min-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  min-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0; min-height:300px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0; min-height:120px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:120px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:120px; max-height:100px">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0; min-height:120px">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:200px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-029-ref.html b/layout/reftests/css-grid/grid-fragmentation-029-ref.html
new file mode 100644
index 0000000000..2dcc2c395e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-029-ref.html
@@ -0,0 +1,207 @@
+<!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: Fragmentation, various edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: block;
+  border:5px solid;
+  align-content: start;
+}
+span { display:block; height:20px; width:30px; }
+i { display:block; height:10px; background:blue; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-bottom-width:0; border-top-width:0; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:30px">
+<div style="background:grey">
+<div class="grid t" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:10px"></i></span>
+</div>
+<div class="grid b" style="height:25px">
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid t" style="height:60px; overflow:hidden">
+<span><i style="overflow:hidden;height:60px"></i></span>
+</div>
+<div class="grid m" style="height:40px">
+<span><i style="height:20px"></i></span>
+</div>
+<div class="grid b" style="height:0px">
+</div>
+</div></div>
+
+<div class="columns" style="height:30px; margin-left:40px">
+<div style="background:grey">
+<div class="grid t" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:10px"></i></span>
+</div>
+<div class="grid b" style="height:25px">
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:40px">
+<div style="background:grey">
+<div class="grid t" style="height:60px; overflow:hidden">
+<span><i style="overflow:hidden;height:60px"></i></span>
+</div>
+<div class="grid m" style="height:40px">
+<span><i style="height:20px"></i></span>
+</div>
+<div class="grid b" style="height:0px">
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:80px">
+<div style="background:grey">
+<div class="grid" style="height:20px">
+<span><i style="overflow:hidden;height:60px"></i></span>
+</div></div>
+<div style="height:10px"></div>
+<div style="margin-left:5px">
+<span><i style="height:20px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px; margin-left:120px">
+<div style="background:grey">
+<div class="grid t" style="height:30px">
+<span><i style="height:30px"></i></span>
+</div>
+<div style="height:35px"></div>
+<div class="grid b" style="height:30px">
+<span><i style="height:50px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:30px">
+<span><i style="height:30px"></i></span>
+</div>
+<div style="height:35px"></div>
+<div class="grid b" style="height:32px">
+<span><i style="height:50px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:45px">
+<span style="height:45px"><i style="height:45px"></i></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="height:16px">
+<span style="height:16px"><i style="height:35px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:65px">
+<span style="height:65px"><i style="height:65px"></i></span>
+</div>
+<div class="grid b" style="height:0px">
+<span><i style="height:15px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:60px">
+<span style="height:60px"><i style="height:60px"></i></span>
+</div>
+<div style="height:5px"></div>
+<div class="grid b" style="height:1px">
+<span><i style="height:20px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:61px">
+<span style="height:62px"><i style="height:62px"></i></span>
+</div>
+<div style="height:4px"></div>
+<div class="grid b" style="height:0px">
+<span><i style="height:18px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div style="overflow:hidden">
+<div class="grid" style="height:32px;">
+<span><i style="height:33px;"></i></span>
+</div>
+</div>
+<div class="grid m" style="height:0px">
+<span><i style="height:40px"></i></span>
+</div></div>
+<div style="height:40px"></div>
+<div class="grid m" style="height:0px">
+<span><i style="height:7px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div style="overflow:hidden">
+<div class="grid" style="height:32px;">
+<span><i style="height:33px;"></i></span>
+</div>
+</div>
+<div class="grid m" style="height:0px">
+<span><i style="height:40px"></i></span>
+</div></div>
+<div style="height:40px"></div>
+<div class="grid m" style="height:0px">
+<span><i style="height:7px"></i></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-029.html b/layout/reftests/css-grid/grid-fragmentation-029.html
new file mode 100644
index 0000000000..9c59aa0ee2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-029.html
@@ -0,0 +1,141 @@
+<!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: Fragmentation, various edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-029-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; height:20px; }
+x { display:block; height:20px;}
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:30px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px; min-height:100px">
+<span><i style="height:60px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 60px; min-height:100px">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:30px; margin-left:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px; height:100px; min-height:100px">
+<span><i style="height:60px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 60px; height:20px; min-height:100px">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:80px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 60px; height:20px;">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px; margin-left:120px">
+<div style="background:grey">
+<div class="grid" style="grid-gap:2px; min-height:50px">
+<span style="grid-row:span 2"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-gap:2px; height:62px">
+<span style="grid-row:span 2"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 15px 16px; grid-gap:0; height:61px">
+<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 35px 0px; grid-gap:0; height:61px">
+<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 30px 1px; grid-gap:0; height:61px">
+<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 30px 2px 10px; grid-gap:0; height:61px">
+<span style="grid-row:span 3; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 33px 30px; max-height:32px;">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 33px 30px; min-height:32px; max-height:0px;">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-030-ref.html b/layout/reftests/css-grid/grid-fragmentation-030-ref.html
new file mode 100644
index 0000000000..311f9e9ea3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-030-ref.html
@@ -0,0 +1,111 @@
+<!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: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:90px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:94px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:200px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:none;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-030.html b/layout/reftests/css-grid/grid-fragmentation-030.html
new file mode 100644
index 0000000000..6dec52168e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-030.html
@@ -0,0 +1,114 @@
+<!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: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-030-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:90px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:94px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:200px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:none;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-031-ref.html b/layout/reftests/css-grid/grid-fragmentation-031-ref.html
new file mode 100644
index 0000000000..78f9a21d48
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-031-ref.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>Reference: Fragmentation with specified grid height, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-bottom-width:0; border-top-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:90px; max-height:90px; ">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+</div>
+<div style="height:4px"></div>
+<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:94px; max-height:94px; ">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+</div>
+<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:90px; max-height:90px; ">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+</div>
+<div style="height:4px"></div>
+<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div>
+</div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-031.html b/layout/reftests/css-grid/grid-fragmentation-031.html
new file mode 100644
index 0000000000..10f8f52e37
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-031.html
@@ -0,0 +1,114 @@
+<!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: Fragmentation with specified grid height, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-031-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:90px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:94px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:50px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; min-height:90px">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html
new file mode 100644
index 0000000000..7019e147e0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 002 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-002-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-002.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html
new file mode 100644
index 0000000000..66d8c3d7da
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 006 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-006-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-006.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html
new file mode 100644
index 0000000000..e5e10fb59d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 015 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-015-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-015.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html
new file mode 100644
index 0000000000..73838b3591
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 016 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-016-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-016.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html
new file mode 100644
index 0000000000..81b2b963d9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 019 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html
new file mode 100644
index 0000000000..7d8f610225
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 020 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-020-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-020.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-021.html
new file mode 100644
index 0000000000..a7575468e7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-021.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 021 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-023.html
new file mode 100644
index 0000000000..b63495a37a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-023.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 023 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-024.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-024.html
new file mode 100644
index 0000000000..aed871c410
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-024.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 024 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-024-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-024.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-026.html
new file mode 100644
index 0000000000..a375918ec4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-026.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 026 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-027.html
new file mode 100644
index 0000000000..7f29c3f94f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-027.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 027 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-027-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-028.html
new file mode 100644
index 0000000000..61a3631712
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-028.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 028 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-029.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-029.html
new file mode 100644
index 0000000000..9dcc1536bb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-029.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 029 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-029-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-029.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-018.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-018.html
new file mode 100644
index 0000000000..be7712a7cf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-018.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 018 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-018-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-018.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-019.html
new file mode 100644
index 0000000000..e747146f7f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-019.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 019 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-020.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-020.html
new file mode 100644
index 0000000000..47ab75baaa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-020.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 020 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-020-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-020.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-021.html
new file mode 100644
index 0000000000..cc920ed75e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-021.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 021 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-022.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-022.html
new file mode 100644
index 0000000000..c34c67c544
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-022.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 022 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-022-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-022.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-023.html
new file mode 100644
index 0000000000..e6a7c710e5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-023.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 023 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-025.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-025.html
new file mode 100644
index 0000000000..0ab6a8a265
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-025.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 025 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-025-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-025.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-026.html
new file mode 100644
index 0000000000..2603af3032
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-026.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 026 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-027.html
new file mode 100644
index 0000000000..21094d0b1f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-027.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 027 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-027-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-028.html
new file mode 100644
index 0000000000..385ce94f24
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-028.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 028 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-029.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-029.html
new file mode 100644
index 0000000000..42300f2c62
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-029.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 029 dynamic insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-029-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-029.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-030.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-030.html
new file mode 100644
index 0000000000..1f23153343
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-030.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 030 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-030-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-030.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-031.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-031.html
new file mode 100644
index 0000000000..a46f653ff4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-031.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 031 dynamic insert/remove dummy new first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-031-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn2('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-031.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-001.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-001.html
new file mode 100644
index 0000000000..22ef7c028e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 001 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-001-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-001.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-002.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-002.html
new file mode 100644
index 0000000000..f9439082ab
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 002 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-002-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-002.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-003.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-003.html
new file mode 100644
index 0000000000..c9b96cb959
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 001 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-003-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-003.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-007.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-007.html
new file mode 100644
index 0000000000..4cc3e81108
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-007.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 007 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-007-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-007.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-009.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-009.html
new file mode 100644
index 0000000000..c739cfa115
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-009.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 009 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-009-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-009.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-017.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-017.html
new file mode 100644
index 0000000000..04bbda573d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-017.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 017 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-017-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-017.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-019.html
new file mode 100644
index 0000000000..f285b8a05b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-019.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 019 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-021.html
new file mode 100644
index 0000000000..a72bf9f028
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-021.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 021 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-023.html
new file mode 100644
index 0000000000..aa39a5fc04
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-023.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 023 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-026.html
new file mode 100644
index 0000000000..23178492c4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-026.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 026 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-027.html
new file mode 100644
index 0000000000..318b364cb4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-027.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 027 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-027-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-028.html
new file mode 100644
index 0000000000..a2965813d2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-028.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 028 dynamic remove/insert second item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn3('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-001.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-001.html
new file mode 100644
index 0000000000..ff008156f0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 001 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-001-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-001.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-004.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-004.html
new file mode 100644
index 0000000000..3543a7b6dc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 004 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-004-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-004.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-005.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-005.html
new file mode 100644
index 0000000000..ef2c7e630b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 005 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-004-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-005.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-015.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-015.html
new file mode 100644
index 0000000000..8dca11143c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-015.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 015 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-015-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-015.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-019.html
new file mode 100644
index 0000000000..a7cee1f084
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-019.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 019 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-021.html
new file mode 100644
index 0000000000..2718ce19e3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-021.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 021 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-023.html
new file mode 100644
index 0000000000..9edfa68e7d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-023.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 023 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-026.html
new file mode 100644
index 0000000000..292ac216bf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-026.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 026 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-027.html
new file mode 100644
index 0000000000..91d2aab712
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-027.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 027 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-027-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-028.html
new file mode 100644
index 0000000000..b8cfc3dd72
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-028.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 028 dynamic remove/insert second item, then insert/remove dummy first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn4('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-005.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-005.html
new file mode 100644
index 0000000000..9dbcb006af
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 005 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-004-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-005.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-007.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-007.html
new file mode 100644
index 0000000000..1d84d051d5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-007.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 007 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-007-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-007.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-008.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-008.html
new file mode 100644
index 0000000000..432e4ce49e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-008.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 008 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-008-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-008.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-016.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-016.html
new file mode 100644
index 0000000000..36731825b7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-016.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 016 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-004-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-016.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-019.html
new file mode 100644
index 0000000000..47b6c9aae5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-019.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 019 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-021.html
new file mode 100644
index 0000000000..655ab4ee12
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-021.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 021 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-023.html
new file mode 100644
index 0000000000..ba38865939
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-023.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 023 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-026.html
new file mode 100644
index 0000000000..59334df534
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-026.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 026 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-027.html
new file mode 100644
index 0000000000..312a773cc4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-027.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 027 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-027-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-028.html
new file mode 100644
index 0000000000..4e449c72de
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-028.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 028 dynamic insert/remove 20 dummy items at the start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn5('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-align-001-ref.html b/layout/reftests/css-grid/grid-item-align-001-ref.html
new file mode 100644
index 0000000000..35bb263ac7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-001-ref.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>Reference: align-self (part 1 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  inline-size: 36px;
+  block-size: 25px;
+  margin-right: 4px;
+}
+
+span {
+  display: block;
+  position: relative;
+  z-index: 1;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  offset-inline-start: 1px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: white;
+}
+abs1 {
+  border-block-start-width: 3px;
+  border-block-end-width: 2px;
+  border-inline-start-width: 1px;
+  border-inline-end-width: 3px;
+  border-style: solid;
+  border-color: lightgrey;
+}
+abs2 { display:none; }
+abs3 { display:none;  }
+abs4 { display:none;  }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart,.aflexstart,.aleft,.aright,.astretch1,.astretch2,.astretch2,.astretch3,
+.astretch4,.astretch5,.astretch6,.astretch7,.aauto {
+  offset-block-start: 3px;
+}
+
+.aend,.aflexend { offset-block-start: 9px; }
+.acenter {  offset-block-start: 5px; margin-block-start:2px; }
+
+.hl .astretch2, .hr .astretch2 { height: 15px; }
+.hl .astretch3, .hr .astretch3 { height: 15px; }
+
+.astretch2 { width:13px; height:auto; }
+.astretch3 { height:auto; }
+.astretch4 { width:0; }
+.astretch5 { width:0; }
+.astretch6 { height:9px; }
+.astretch7 { width:0; height:9px; }
+
+.hl .hr {margin-left:4px;}
+.hl .vl {offset-block-start: 1px; offset-inline-start:3px;}
+.hl .vl.aend, .hl .vl.aflexend { margin-top: 7px; }
+.hl .vl.acenter { margin-top:4px; }
+
+.hl .vr {margin-left:6px; margin-top:3px; }
+.hl .vr.aend, .hl .vr.aflexend {margin-left:12px; margin-top:9px; }
+.hl .vr.acenter {margin-left:8px; margin-top:6px; }
+
+.hl .vlr { margin-left:0px;  margin-top:5px; }
+.hl .vlr.aend, .hl .vlr.aflexend {margin-left:-6px; margin-top:11px; }
+.hl .vlr.acenter {margin-left:-2px; margin-top:8px; }
+
+.hl .vrl { margin-left:6px;  margin-top:3px; }
+.hl .vrl.aend, .hl .vrl.aflexend {margin-left:12px; margin-top:9px; }
+.hl .vrl.acenter {margin-left:8px; margin-top:6px; }
+
+.hr .hl {margin-right:3px}
+
+.hr .vl {margin-right:5px; margin-top:5px; }
+.hr .vl.aend, .hr .vl.aflexend {margin-right:11px; margin-top:11px; }
+.hr .vl.acenter {margin-right:7px; margin-top:8px; }
+
+.hr .vr {margin-top:5px; margin-right:-1px; }
+.hr .vr.aend, .hr .vr.aflexend {margin-top:11px; margin-right:-7px; }
+.hr .vr.acenter {margin-top:8px; margin-right:-3px; }
+.hr .vr.astretch6, .hr .vr.astretch7 { margin-right:-1px; }
+
+.hr .vlr {margin-top:5px; margin-right:5px;  }
+.hr .vlr.aend, .hr .vlr.aflexend {margin-top:11px; margin-right:11px; }
+.hr .vlr.acenter {margin-top:8px; margin-right:7px; }
+
+.hr .vrl {margin-top:3px; margin-right:-1px;  }
+.hr .vrl.aend, .hr .vrl.aflexend {margin-top:9px; margin-right:-7px; }
+.hr .vrl.acenter {margin-top:6px; margin-right:-3px; }
+
+.vl span { offset-block-start: 1px; offset-inline-start: 3px; }
+.vl .astretch4 { width:15px; }
+.vl .astretch5 { width:13px; }
+
+.vl .hl.aend, .vl .hl.aflexend { margin-left:4px; }
+.vl .hl.acenter { margin-left:3px; margin-top:1px; }
+.vl .astretch6, .vl .astretch7 { height:0px; }
+.vl .hr.astretch6, .vl .hr.astretch7 { height:0px; }
+
+.vl .hr { margin-left:8px; }
+.vl .hr.aend, .vl .hr.aflexend { margin-left:10px; }
+.vl .hr.acenter { margin-left:9px; margin-top:1px; }
+
+.vl .vl { margin-top:-1px; margin-left:4px; }
+.vl .vl.aend, .vl .vl.aflexend { margin-left:6px; }
+.vl .vl.acenter { margin-left:5px; margin-top:-1px; }
+.vl .astretch7 { width:13px; }
+
+.vl .vl.astretch2,  .vl .vl.astretch3,
+.vl .vr.astretch2,  .vl .vr.astretch3,
+.vl .vlr.astretch2, .vl .vlr.astretch3,
+.vl .vrl.astretch2, .vl .vrl.astretch3 { height:0px; }
+
+.vl .vr  { margin-top:-1px; margin-left:6px;  }
+.vl .vr.aend, .vl .vr.aflexend { margin-left:8px; }
+.vl .vr.acenter { margin-left:7px; margin-top:-1px; }
+
+.vl .vlr { margin-top:5px; margin-left:4px;  }
+.vl .vlr.aend, .vl .vlr.aflexend { margin-left:6px; }
+.vl .vlr.acenter { margin-left:5px; }
+
+.vl .vrl { margin-top:-1px; margin-left:6px;  }
+.vl .vrl.aend, .vl .vrl.aflexend { margin-left:8px; }
+.vl .vrl.acenter { margin-left:7px; }
+
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-align-001.html b/layout/reftests/css-grid/grid-item-align-001.html
new file mode 100644
index 0000000000..249f7b3954
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-001.html
@@ -0,0 +1,107 @@
+<!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: align-self (part 1 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="grid-item-align-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-align-002-ref.html b/layout/reftests/css-grid/grid-item-align-002-ref.html
new file mode 100644
index 0000000000..73d60d4c20
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-002-ref.html
@@ -0,0 +1,127 @@
+<!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: align-self (part 2 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  inline-size: 36px;
+  block-size: 25px;
+  margin-right: 4px;
+  background: lightgrey;
+}
+wrap {
+  display: block;
+  position: relative;
+  offset-inline-start:1px;
+  background: white;
+  block-size:20px;
+  inline-size:32px;
+  border-block-start: 3px solid lightgrey;
+}
+
+span {
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;display:none;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { margin-right:2px; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:0; }
+.astretch3 { align-self:stretch; height:0; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:0; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:0; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+.vr .aend, .vr .aflexend { margin-right:3px; }
+.vlr .aend, .vlr .aflexend { margin-left:4px; }
+.vlr .acenter { margin-left:3px; }
+.vrl .aend, .vrl .aflexend { margin-right:3px; }
+
+.astretch6 { width:13px; }
+.astretch5 { width:14px; }
+.astretch4, .astretch7 { width:15px; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var wrap = document.createElement("wrap");
+      div.appendChild(wrap);
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      wrap.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-align-002.html b/layout/reftests/css-grid/grid-item-align-002.html
new file mode 100644
index 0000000000..1d923678e0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-002.html
@@ -0,0 +1,108 @@
+<!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: align-self (part 2 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="grid-item-align-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-align-003-ref.html b/layout/reftests/css-grid/grid-item-align-003-ref.html
new file mode 100644
index 0000000000..f83366cdaa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-003-ref.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>Reference: align-self with overflow</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { margin:40px; }
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  inline-size: 36px;
+  block-size: 25px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+wrap {
+  display: block;
+  position: relative;
+  offset-inline-start:1px;
+  background: white;
+  block-size:20px;
+  inline-size:32px;
+  border-block-start: 3px solid lightgrey;
+}
+
+span {
+  display: block;
+  position: absolute;
+  width: 40px;
+  height: 30px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { bottom: 22px; }
+abs2 { top: 23px; }
+abs3 { left: 33px; }
+abs4 { right: 35px; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.unsafe.hl.aend,  .unsafe.hl.aflexend  { offset-block-start:-15px; }
+.unsafe.vrl.aend, .unsafe.vrl.aflexend { offset-inline-start:-15px; }
+.unsafe.hl.acenter { offset-block-start:-7px; }
+.unsafe.vrl.acenter { offset-inline-start:-7px; }
+.astretch2 { width:40px; height:15px; }
+.astretch3 { height:15px; }
+.astretch4 { width:0; }
+.astretch5 { width:0; max-width:38px; }
+.astretch6 { height:15px; max-height:30px; }
+.astretch7 { width:0; height:15px; max-width:38px; max-height:30px; }
+
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl" ];
+var wm = [ "hl unsafe", "vrl unsafe", "hl safe", "vrl safe" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var wrap = document.createElement("wrap");
+      div.appendChild(wrap);
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      wrap.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-align-003.html b/layout/reftests/css-grid/grid-item-align-003.html
new file mode 100644
index 0000000000..daeb8cc8e9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-003.html
@@ -0,0 +1,128 @@
+<!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: align-self with overflow</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="grid-item-align-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { margin:40px; }
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center grid area */
+  display: block;
+  width: 40px;
+  height: 30px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:unsafe start; }
+.aend { align-self:unsafe end; }
+.aflexstart { align-self:unsafe flex-start; }
+.aflexend { align-self:unsafe flex-end; }
+.aselfstart { align-self:unsafe self-start; }
+.aselfend { align-self:unsafe self-end; }
+.acenter { align-self:unsafe center; }
+.aleft { align-self:unsafe left; }
+.aright { align-self:unsafe right; }
+.astretch1 { align-self:unsafe stretch; }
+.astretch2 { align-self:unsafe stretch; width:40px; height:auto; }
+.astretch3 { align-self:unsafe stretch; height:auto; }
+.astretch4 { align-self:unsafe stretch; width:auto; }
+.astretch5 { align-self:unsafe stretch; width:auto; max-width:38px; }
+.astretch6 { align-self:unsafe stretch; height:auto; max-height:30px; }
+.astretch7 { align-self:unsafe stretch; width:auto; height:auto; max-width:38px; max-height:30px; }
+.aauto { align-self:auto; }
+
+.safe.astart { align-self:safe start; }
+.safe.aend { align-self:safe end; }
+.safe.aflexstart { align-self:safe flex-start; }
+.safe.aflexend { align-self:safe flex-end; }
+.safe.aselfstart { align-self:safe self-start; }
+.safe.aselfend { align-self:safe self-end; }
+.safe.acenter { align-self:safe center; }
+.safe.aleft { align-self:safe left; }
+.safe.aright { align-self:safe right; }
+.safe.astretch1 { align-self:safe stretch; }
+.safe.astretch2 { align-self:safe stretch; }
+.safe.astretch3 { align-self:safe stretch; }
+.safe.astretch4 { align-self:safe stretch; }
+.safe.astretch5 { align-self:safe stretch; }
+.safe.astretch6 { align-self:safe stretch; }
+.safe.astretch7 { align-self:safe stretch; }
+
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl" ];
+var wm = [ "hl", "vrl", "hl safe", "vrl safe" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
new file mode 100644
index 0000000000..85816074c3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+.a.grid {
+  width: 54px;
+}
+.larger .a.grid {
+  width: 64px;
+}
+.a2.grid {
+  width: 38px;
+}
+.larger .a2.grid {
+  width: 51px;
+}
+.grid.sz.max {
+  width: 40px;
+}
+.larger .grid.max.a span {
+  width:20px;
+}
+.larger .grid.max.a2 span {
+  width:20px;
+}
+
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+  width: 0;
+  height: 0;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+  width: 13px;
+  height: 3px;
+}
+.grid.max span {
+  width:20px;
+}
+.larger .grid span {
+  width: 7px;
+  height: 10px;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid .span2 {
+  width: 33px;
+  height: 39px;
+}
+.stretch.larger .grid.sz .span2 {
+  width: 22px;
+  height: 32px;
+}
+.stretch.larger .grid.definite .span2 {
+  width: 33px;
+  height: 39px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid a"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid a2"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid sz"><x></x><span><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span><c>X</c></span></div>
+<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+<div class="grid min"><x></x><span><c>X</c></span></div>
+<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz min"><x></x><span><c>X</c></span></div>
+<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid a max"><x></x><span><c>X</c></span></div>
+<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid a2 sz max"><x></x><span><c>X</c></span></div>
+<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html
new file mode 100644
index 0000000000..1e4976bb1c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid sz"><x></x><span><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span><c>X</c></span></div>
+<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+<div class="grid min"><x></x><span><c>X</c></span></div>
+<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz min"><x></x><span><c>X</c></span></div>
+<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid max"><x></x><span><c>X</c></span></div>
+<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz max"><x></x><span><c>X</c></span></div>
+<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
new file mode 100644
index 0000000000..e379f4edc1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+.grid.a.max {
+  height:61px;
+}
+.larger .grid.a.max {
+  height:79px;
+}
+
+span {
+  writing-mode: vertical-rl;
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+  width: 0;
+  height: 0;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+  width: 13px;
+  height: 3px;
+}
+.larger .grid span {
+  width: 7px;
+  height: 10px;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid .span2 {
+  width: 33px;
+  height: 39px;
+}
+.stretch.larger .grid.sz .span2 {
+  width: 22px;
+  height: 32px;
+}
+.stretch.larger .grid.definite .span2 {
+  width: 33px;
+  height: 39px;
+}
+.grid.max span {
+  height:32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid sz"><x></x><span><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span><c>X</c></span></div>
+<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+<div class="grid min"><x></x><span><c>X</c></span></div>
+<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz min"><x></x><span><c>X</c></span></div>
+<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid a max"><x></x><span><c>X</c></span></div>
+<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz max"><x></x><span><c>X</c></span></div>
+<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html
new file mode 100644
index 0000000000..ffdc0317df
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  writing-mode: vertical-rl;
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid sz"><x></x><span><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span><c>X</c></span></div>
+<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+<div class="grid min"><x></x><span><c>X</c></span></div>
+<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz min"><x></x><span><c>X</c></span></div>
+<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid max"><x></x><span><c>X</c></span></div>
+<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz max"><x></x><span><c>X</c></span></div>
+<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git 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
new file mode 100644
index 0000000000..b6844cc50a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+.grid.a {
+  width:54px;
+}
+.grid.a2 {
+  width:38px;
+}
+.larger .grid.a {
+  width:64px;
+}
+.larger .grid.a2 {
+  width:51px;
+}
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+  width: 0;
+  height: 0;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+
+<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>
diff --git 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
new file mode 100644
index 0000000000..256554ee3c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+<!--  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>
diff --git 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
new file mode 100644
index 0000000000..a0bde8fd78
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+.grid.a {
+  width:54px;
+}
+.grid.a2 {
+  width:38px;
+}
+.larger .grid.a {
+  width:64px;
+}
+.larger .grid.a2 {
+  width:51px;
+}
+.grid.x1 {
+  grid-template-columns:38px 15px;
+}
+.larger .grid.x1 {
+  grid-template-columns:38px 25px;
+}
+.grid.x2, .grid.x3 {
+  grid-template-columns:18.5px 18.5px;
+}
+.larger .grid.x2 {
+  grid-template-columns:25px 25px;
+}
+.larger .grid.x3 {
+  grid-template-columns:19.5px 19.5px;
+}
+
+img {
+  writing-mode: vertical-rl;
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+  width: 0;
+  height: 0;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid x2 max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid x3 sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+<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>
diff --git 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
new file mode 100644
index 0000000000..6ab004cb65
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-left: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  writing-mode: vertical-rl;
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 5px 7px 1px;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+<!--  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>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html
new file mode 100644
index 0000000000..10b902a754
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 0;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+.larger .grid span {
+  align-self:center;
+  justify-self:center;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+  width: 20px;
+  height: 32px;
+}
+.stretch.larger .grid .span2 {
+  align-self:center;
+  justify-self:center;
+}
+.stretch.larger .grid.sz .span2 {
+  align-self:center;
+  justify-self:center;
+}
+.stretch.larger .grid.definite .span2 {
+  align-self:center;
+  justify-self:center;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid sz"><x></x><span><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span><c>X</c></span></div>
+<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+<div class="grid min"><x></x><span><c>X</c></span></div>
+<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz min"><x></x><span><c>X</c></span></div>
+<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid max"><x></x><span><c>X</c></span></div>
+<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz max"><x></x><span><c>X</c></span></div>
+<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
new file mode 100644
index 0000000000..5251977319
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+  background-clip: content-box;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: auto;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+c {
+  display: block;
+  width: 20px;
+  height: 32px;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><span><c>X</c></span></div>
+<div class="grid definite"><x></x><span><c>X</c></span></div>
+<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid sz"><x></x><span><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span><c>X</c></span></div>
+<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+<div class="grid min"><x></x><span><c>X</c></span></div>
+<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz min"><x></x><span><c>X</c></span></div>
+<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
+
+<div class="grid max"><x></x><span><c>X</c></span></div>
+<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
+<div class="grid sz max"><x></x><span><c>X</c></span></div>
+<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.html
new file mode 100644
index 0000000000..4ba01832c9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: 0;
+  align-self:center;
+  justify-self:center;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+.larger .grid .span2 {
+  width: 20px;
+  height: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html
new file mode 100644
index 0000000000..6f67c518bb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-006-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(auto, 15px));
+  grid-template-rows:    repeat(2,minmax(auto, 10px));
+  grid-gap: 1px;
+  align-items: start;
+  justify-items: start;
+  float: left;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.sz {
+  width: 40px;
+  height: 40px;
+}
+
+.definite {
+  grid-template-columns: repeat(2,15px);
+  grid-template-rows:    repeat(2,10px);
+}
+.min {
+  grid-template-columns: repeat(2,minmax(min-content, 15px));
+  grid-template-rows:    repeat(2,minmax(min-content, 10px));
+}
+.max {
+  grid-template-columns: repeat(2,minmax(max-content, 15px));
+  grid-template-rows:    repeat(2,minmax(max-content, 10px));
+}
+
+.larger .grid {
+  grid-template-columns: repeat(2,minmax(auto, 25px));
+  grid-template-rows:    repeat(2,minmax(auto, 28px));
+}
+.larger .definite {
+  grid-template-columns: repeat(2,25px);
+  grid-template-rows:    repeat(2,28px);
+}
+.larger .min {
+  grid-template-columns: repeat(2,minmax(min-content, 25px));
+  grid-template-rows:    repeat(2,minmax(min-content, 28px));
+}
+.larger .max {
+  grid-template-columns: repeat(2,minmax(max-content, 25px));
+  grid-template-rows:    repeat(2,minmax(max-content, 28px));
+}
+
+.stretch .grid {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+img {
+  grid-area: 1 / 1;
+  border: 1px solid;
+  padding: 1px 3px 5px 7px;
+  margin: auto;
+}
+.span2 {
+  grid-area: 1 / 1 / span 2 / span 2;
+}
+.larger .grid .span2 {
+  font-size: 32px;
+}
+
+x {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  background: cyan;
+}
+
+br {
+  clear: both;
+}
+  </style>
+</head>
+<body>
+
+<div id="tests">
+<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
+<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
+
+<br>
+
+</div>
+
+<script>
+var tests = document.getElementById('tests');
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+var n = tests.cloneNode(true);
+var wrap = document.createElement('div');
+wrap.className = 'stretch larger';
+wrap.appendChild(n);
+document.body.appendChild(wrap);
+
+</script>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
new file mode 100644
index 0000000000..6ff0ad94d3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  grid-template-columns: repeat(2,20px);
+  grid-template-rows: repeat(2,20px);
+  align-items: start;
+  justify-items: start;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.c-auto { grid-template-columns: 15px; width: 15px; }
+.c-min { grid-template-columns: 15px; width: 15px; }
+.c-max { grid-template-columns: 15px; width: 15px; }
+.c-1530 { grid-template-columns: 15px; width: 30px; }
+.c-30 { grid-template-columns: 30px; width: 30px; }
+.r-auto { grid-template-rows: 15px; height: 15px; }
+.r-min { grid-template-rows: 15px; height: 15px; }
+.r-max { grid-template-rows: 15px; height: 15px; }
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+}
+y {
+  position: absolute;
+  grid-area: 2 / 1 / 3 / 2;
+  top:0;left:0;right:0;
+  height: 10px;
+  background: lightgrey;
+}
+.r y {
+  grid-area: 1 / 2 / 2 / 3;
+  top:0;bottom:0;left:0;
+  width: 10px;
+  height: auto;
+}
+br { clear: both; }
+
+x { display:block; width:30px; height:40px; }
+span { width:15px; }
+.r span { width:20px; }
+.grid.c-30 span, .r.grid.c-30 span { width:30px; }
+.r span { height:15px; }
+  </style>
+</head>
+<body>
+
+<div class="grid c-1530"><y></y><span><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y style="width:30px"></y><span><x>X</x></span></div>
+<div class="grid c-1530"><y></y><span><x>X</x></span></div>
+<div class="grid c-1530"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid c-min"><y></y><span><x>X</x></span></div>
+<div class="grid c-min"><y></y><span><x>X</x></span></div>
+<div class="grid c-30" style="width:30px"><y style="width:30px"></y><span><x>X</x></span></div>
+<div class="grid c-min"><y></y><span><x>X</x></span></div>
+<div class="grid c-min"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+<div class="grid c-max"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+<div class="grid c-30"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html
new file mode 100644
index 0000000000..5bfc60be44
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-auto-min-size-clamp-007-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  grid-template-columns: repeat(2,20px);
+  grid-template-rows: repeat(2,20px);
+  align-items: start;
+  justify-items: start;
+  border: 1px dashed;
+  margin-right: 16px;
+  margin-bottom: 14px;
+}
+.c-auto { grid-template-columns: minmax(auto, 15px); }
+.c-min { grid-template-columns: minmax(min-content, 15px); }
+.c-max { grid-template-columns: minmax(max-content, 15px); }
+.r-auto { grid-template-rows: minmax(auto, 15px); }
+.r-min { grid-template-rows: minmax(min-content, 15px); }
+.r-max { grid-template-rows: minmax(max-content, 15px); }
+span {
+  grid-area: 1 / 1;
+  font-size: 48px;
+  background: grey;
+}
+y {
+  position: absolute;
+  grid-area: 2 / 1 / 3 / 2;
+  top:0;left:0;right:0;
+  height: 10px;
+  background: lightgrey;
+}
+
+.min-content {
+  width: -moz-min-content;
+  width: -webkit-min-content;
+  width: min-content;
+}
+.max-content {
+  width: -moz-max-content;
+  width: -webkit-max-content;
+  width: max-content;
+}
+.fit-content {
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+}
+.fill {
+  width: -moz-available;
+  width: -webkit-fill;
+  width: fill;
+}
+
+.r .min-content {
+  height: -moz-min-content;
+  height: -webkit-min-content;
+  height: min-content;
+}
+.r .max-content {
+  height: -moz-max-content;
+  height: -webkit-max-content;
+  height: max-content;
+}
+.r .fit-content {
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+}
+.r .fill {
+  height: -moz-available;
+  height: -webkit-fill;
+  height: fill;
+}
+.r y {
+  grid-area: 1 / 2 / 2 / 3;
+  top:0;bottom:0;left:0;
+  width: 10px;
+  height: auto;
+}
+br { clear: both; }
+
+x { display:block; width:30px; height:40px; }
+  </style>
+</head>
+<body>
+
+<div class="grid c-auto"><y></y><span><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid c-auto"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid c-min"><y></y><span><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid c-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid c-max"><y></y><span><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid c-max"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r r-auto"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r r-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r r-max"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-min r-auto"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-min r-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-min r-max"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-max r-auto"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-max r-min"><y></y><span class="fill"><x>X</x></span></div>
+
+<br>
+
+<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="min-content"><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="max-content"><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="fit-content"><x>X</x></span></div>
+<div class="grid r c-max r-max"><y></y><span class="fill"><x>X</x></span></div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-item-blockifying-001-ref.html b/layout/reftests/css-grid/grid-item-blockifying-001-ref.html
new file mode 100644
index 0000000000..19bfa8a431
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-blockifying-001-ref.html
@@ -0,0 +1,312 @@
+<!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: Grid item blockifying</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185140">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 2px;
+  justify-content: start;
+  border: 1px solid blue;
+}
+
+x {
+  grid-column: span 2;
+  border:1px solid;
+}
+
+.itable  { display:inline-table; }
+.table   { display:table; }
+.caption { display: block; }
+.cell    { display: block; }
+.row     { display: block; }
+.rowg    { display: block; }
+.head    { display: block; }
+.foot    { display: block; }
+.col     { display: block; }
+.colg    { display: block; }
+
+.flex  { display:flex; }
+.iflex { display:flex; }
+
+.bgrid  { display:grid; }
+.igrid  { display:grid; }
+
+.list  { display:list-item; }
+
+.r   { display: block; }
+.rb  { display: block; }
+.rt  { display: block; }
+.rbc { display: block; }
+.rtc { display: block; }
+
+</style>
+</head>
+<body>
+
+<!-- These should produce two display:block grid items -->
+
+<div class="grid">
+<x class="cell"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="cell"></x>
+<x class="cell"></x>
+</div>
+</div>
+
+<div class="grid">
+<x class="cell"></x>
+<x class="row"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="row"></x>
+<x class="row"></x>
+</div>
+</div>
+
+<div class="grid">
+<x class="row"></x>
+<x class="row"></x>
+</div>
+
+<div class="grid">
+<x class="rowg"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="head"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="col"></x>
+<x class="col"></x>
+</div>
+
+<div class="grid">
+<x class="col"></x>
+<x class="colg"></x>
+</div>
+
+<div class="grid">
+<x class="colg"></x>
+<x class="colg"></x>
+</div>
+
+<div class="grid">
+<x class="cell"></x>
+<x class="col"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="caption"></x>
+<x class="caption"></x>
+</div>
+</div>
+
+<div class="grid">
+<x class="caption"></x>
+<x class="caption"></x>
+</div>
+
+<div class="grid">
+<x class="caption"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<x></x>
+<x></x>
+</div>
+
+<!-- These should produce two display:table grid items -->
+
+<div class="grid">
+<x class="table"></x>
+<x class="table"></x>
+</div>
+
+<div class="grid">
+<x class="itable"></x>
+<x class="itable"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="table"></x>
+<x class="itable"></x>
+</div>
+</div>
+
+<!-- These should produce one display:table grid item and one display:block grid item -->
+
+<div class="grid">
+<x class="table"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<x class="cell"></x>
+<x class="table"></x>
+</div>
+
+<div class="grid">
+<x class="itable"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<x class="table"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="itable"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="rowg"></x>
+<x class="itable"></x>
+</div>
+
+<!-- These should produce two display:flex grid items -->
+
+<div class="grid">
+<x class="flex"></x>
+<x class="iflex"></x>
+</div>
+
+<div class="grid">
+<x class="iflex"></x>
+<x class="iflex"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="flex"></x>
+<x class="flex"></x>
+</div>
+</div>
+
+<!-- This should produce one display:flex grid item and one display:block -->
+
+<div class="grid">
+<x class="iflex"></x>
+<x class="cell"></x>
+</div>
+
+<!-- These should produce two display:grid grid items -->
+
+<div class="grid">
+<x class="bgrid"></x>
+<x class="igrid"></x>
+</div>
+
+<div class="grid">
+<x class="igrid"></x>
+<x class="igrid"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="bgrid"></x>
+<x class="bgrid"></x>
+</div>
+</div>
+
+<!-- This should produce one display:grid grid item and one display:block -->
+
+<div class="grid">
+<x class="igrid"></x>
+<x class="cell"></x>
+</div>
+
+<!-- This should produce one display:list-item grid item and one display:block -->
+<div class="grid">
+<x class="list"></x>
+<x></x>
+</div>
+
+<!-- Various Ruby tests -->
+
+<div class="grid">
+<x class="r"></x>
+<x class="r"></x>
+</div>
+
+<div class="grid">
+<x class="rb"></x>
+<x class="rb"></x>
+</div>
+
+<div class="grid">
+<x class="rt"></x>
+<x class="rt"></x>
+</div>
+
+<div class="grid">
+<x class="rbc"></x>
+<x class="rbc"></x>
+</div>
+
+<div class="grid">
+<x class="rtc"></x>
+<x class="rtc"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="r"></x>
+<x class="r"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rb"></x>
+<x class="rb"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rt"></x>
+<x class="rt"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rbc"></x>
+<x class="rbc"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rtc"></x>
+<x class="rtc"></x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-blockifying-001.html b/layout/reftests/css-grid/grid-item-blockifying-001.html
new file mode 100644
index 0000000000..26ca8c0980
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-blockifying-001.html
@@ -0,0 +1,409 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Grid item blockifying</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185140">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+  <link rel="match" href="grid-item-blockifying-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 2px;
+  justify-content: start;
+  border: 1px solid blue;
+}
+
+x {
+  grid-column: span 2;
+  border:1px solid;
+}
+
+.itable  { display:inline-table; }
+.table   { display:table; }
+.caption { display:table-caption; }
+.cell    { display:table-cell; }
+.row     { display:table-row; }
+.rowg    { display:table-row-group; }
+.head    { display:table-header-group; }
+.foot    { display:table-footer-group; }
+.col     { display:table-column; }
+.colg    { display:table-column-group; }
+
+.flex  { display:flex; }
+.iflex { display:inline-flex; }
+
+.bgrid  { display:grid; }
+.igrid { display:inline-grid; }
+
+.list  { display:list-item; }
+
+.r   { display: ruby; }
+.rb  { display: ruby-base; }
+.rt  { display: ruby-text; }
+.rbc { display: ruby-base-container; }
+.rtc { display: ruby-text-container; }
+
+</style>
+</head>
+<body>
+
+<!-- These should produce two display:block grid items -->
+
+<div class="grid">
+<x class="cell"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="cell"></x>
+<x class="cell"></x>
+</div>
+</div>
+
+<div class="grid">
+<x class="cell"></x>
+<x class="row"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="row"></x>
+<x class="row"></x>
+</div>
+</div>
+
+<div class="grid">
+<x class="row"></x>
+<x class="row"></x>
+</div>
+
+<div class="grid">
+<x class="rowg"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="head"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="col"></x>
+<x class="col"></x>
+</div>
+
+<div class="grid">
+<x class="col"></x>
+<x class="colg"></x>
+</div>
+
+<div class="grid">
+<x class="colg"></x>
+<x class="colg"></x>
+</div>
+
+<div class="grid">
+<x class="cell"></x>
+<x class="col"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="caption"></x>
+<x class="caption"></x>
+</div>
+</div>
+
+<div class="grid">
+<x class="caption"></x>
+<x class="caption"></x>
+</div>
+
+<div class="grid">
+<x class="caption"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<x></x>
+<x></x>
+</div>
+
+<!-- These should produce two display:table grid items -->
+
+<div class="grid">
+<x class="table"></x>
+<x class="table"></x>
+</div>
+
+<div class="grid">
+<x class="itable"></x>
+<x class="itable"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="table"></x>
+<x class="itable"></x>
+</div>
+</div>
+
+<!-- These should produce one display:table grid item and one display:block grid item -->
+
+<div class="grid">
+<x class="table"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<x class="cell"></x>
+<x class="table"></x>
+</div>
+
+<div class="grid">
+<x class="itable"></x>
+<x class="cell"></x>
+</div>
+
+<div class="grid">
+<x class="table"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="itable"></x>
+<x class="rowg"></x>
+</div>
+
+<div class="grid">
+<x class="rowg"></x>
+<x class="itable"></x>
+</div>
+
+<!-- These should produce two display:flex grid items -->
+
+<div class="grid">
+<x class="flex"></x>
+<x class="iflex"></x>
+</div>
+
+<div class="grid">
+<x class="iflex"></x>
+<x class="iflex"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="flex"></x>
+<x class="flex"></x>
+</div>
+</div>
+
+<!-- This should produce one display:flex grid item and one display:block -->
+
+<div class="grid">
+<x class="iflex"></x>
+<x class="cell"></x>
+</div>
+
+<!-- These should produce two display:grid grid items -->
+
+<div class="grid">
+<x class="bgrid"></x>
+<x class="igrid"></x>
+</div>
+
+<div class="grid">
+<x class="igrid"></x>
+<x class="igrid"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="bgrid"></x>
+<x class="bgrid"></x>
+</div>
+</div>
+
+<!-- This should produce one display:grid grid item and one display:block -->
+
+<div class="grid">
+<x class="igrid"></x>
+<x class="cell"></x>
+</div>
+
+<!-- This should produce one display:list-item grid item and one display:block -->
+<div class="grid">
+<x class="list"></x>
+<x></x>
+</div>
+
+<!-- Various Ruby tests -->
+
+<div class="grid">
+<x class="r"></x>
+<x class="r"></x>
+</div>
+
+<div class="grid">
+<x class="rb"></x>
+<x class="rb"></x>
+</div>
+
+<div class="grid">
+<x class="rt"></x>
+<x class="rt"></x>
+</div>
+
+<div class="grid">
+<x class="rbc"></x>
+<x class="rbc"></x>
+</div>
+
+<div class="grid">
+<x class="rtc"></x>
+<x class="rtc"></x>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="r"></x>
+<x class="r"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rb"></x>
+<x class="rb"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rt"></x>
+<x class="rt"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rbc"></x>
+<x class="rbc"></x>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:contents">
+<x class="rtc"></x>
+<x class="rtc"></x>
+</div>
+</div>
+
+<script>
+var expected = [
+  "block block",
+  "contents",
+  "block block",
+  "contents",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "contents",
+  "block block",
+  "block block",
+  "block block",
+  "table table",
+  "table table",
+  "contents",
+  "table block",
+  "block table",
+  "table block",
+  "table block",
+  "table block",
+  "block table",
+  "flex flex",
+  "flex flex",
+  "contents",
+  "flex block",
+  "grid grid",
+  "grid grid",
+  "contents",
+  "grid block",
+  "list-item block",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "contents",
+  "contents",
+  "contents",
+  "contents",
+  "contents",
+];
+var expected2 = [ /* results for display:contents children */
+  "block block",
+  "block block",
+  "block block",
+  "table table",
+  "flex flex",
+  "grid grid",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+  "block block",
+];
+
+function is(elem, got, expected) {
+  if (got != expected) {
+    var err = elem.innerHTML + '\n' +
+              'got: ' + got + '\n' +
+              'expected: ' + expected;
+    document.body.appendChild(document.createTextNode(err));
+  }
+}
+function checkDisplayTypes() {
+  var grids = Array.prototype.slice.call(document.querySelectorAll('.grid'))
+  var i2 = 0;
+  for (var i = 0; i < grids.length; ++i) {
+    var items = Array.prototype.slice.call(grids[i].children)
+    var s = items.map((e) => getComputedStyle(e).display).join(' ');
+    is(grids[i], s, expected[i]);
+    items.map(function(e) {
+      if (getComputedStyle(e).display == "contents") {
+        items = Array.prototype.slice.call(e.children)
+        s = items.map((e) => getComputedStyle(e).display).join(' ');
+        is(grids[i], s, expected2[i2]);
+        i2++;
+      }
+    });
+  }
+}
+
+function runTests() {
+  checkDisplayTypes();
+  document.documentElement.removeAttribute("class");
+}
+
+runTests();
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-button-001-ref.html b/layout/reftests/css-grid/grid-item-button-001-ref.html
new file mode 100644
index 0000000000..78d453cffa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-button-001-ref.html
@@ -0,0 +1,86 @@
+<!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/clamping button item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  float: left;
+  margin-bottom:20px;
+  margin-right:20px;
+  border:1px solid;
+  line-height: 0;
+}
+button {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  vertical-align:top;
+}
+button:nth-child(1n) { background: blue; }
+button:nth-child(2n) { background: grey; }
+button:nth-child(3n) { background: tan; }
+button:nth-child(4n) { background: silver; }
+.sz > button {
+  width:20px; height:10px;
+}
+.mw > button {
+  min-width:15px;
+}
+.mw40 > button {
+  min-width:40px;
+}
+.sz.t2 > button {
+  width:10px; height:20px;
+}
+a30 {
+  display: inline-block;
+  height: 0;
+  width: 30px;
+  margin-left: 5px;
+  text-align: right;
+}
+.rel > button {
+  position:absolute;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<button>AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:15px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:15px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
+
+<div class="grid sz t2">
+<button>AB</button><button style="margin-left:5px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:25px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
+
+<div class="grid" style="width:215px">
+<button style="width:10px">AB</button><button style="width:30px;margin-left:5px">AB</button><button style="width:10px;margin-left:5px">AB</button><a30><button style="background:silver">AB</button></a30><button style="width:10px;margin-left:5px">AB</button><button style="width:30px;margin-left:5px">AB</button><button style="width:10px;margin-left:5px">AB</button><a30><button style="background:silver;">AB</button></a30></div>
+
+<div class="grid">
+<button>AB</button><button>AB</button><br><button style="background:tan">AB</button><button style="background:silver">AB</button></div>
+
+<div class="grid rel" style="width:100px; height:100px; position:relative">
+<button style="top:0;width:50px;height:50px">AB</button><button style="top:0;right:0;height:50px">&nbsp;&nbsp;</button><button style="bottom:0;width:50px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
+
+<div class="grid rel" style="height:40px; position:relative">
+<button style="left:0;top:0;height:20px">AB</button><button style="top:0;right:0;height:20px">AB</button><button style="left:0;bottom:0;">AB</button><button style="bottom:0;right:0">AB</button><button style="position:static;visibility:hidden">AB</button><button style="position:static;visibility:hidden">AB</button>
+</div>
+
+<div class="grid sz t2 mw">
+<button>AB</button><button>AB</button><button style="margin-left:15px">AB</button><button style="margin-left:20px">AB</button><button style="margin-left:5px">AB</button><button>AB</button><button style="margin-left:15px">AB</button><button style="margin-left:20px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:5px">AB</button></div>
+
+<div class="grid mw40" style="width:215px">
+<button>AB</button><button style="margin-left:-25px">AB</button><button style="margin-left:-35px">AB</button><button style="margin-left:-5px">AB</button><button style="margin-left:5px">AB</button><button style="margin-left:-25px">AB</button><button style="margin-left:-35px">AB</button><button style="margin-left:-5px">AB</button></div>
+
+<div class="grid rel" style="width:100px; height:100px; position:relative">
+<button style="top:0;width:40px;height:40px">AB</button><button style="top:0;right:0;height:40px">&nbsp;&nbsp;</button><button style="bottom:0;width:40px;">AB</button><button style="bottom:0;right:0">&nbsp;&nbsp;</button></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-button-001.html b/layout/reftests/css-grid/grid-item-button-001.html
new file mode 100644
index 0000000000..5321ec7a39
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-button-001.html
@@ -0,0 +1,153 @@
+<!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/clamping button item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-button-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  margin-bottom:20px;
+  margin-right:20px;
+  border:1px solid;
+}
+button {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+}
+button:nth-child(1n) { background: blue; }
+button:nth-child(2n) { background: grey; }
+button:nth-child(3n) { background: tan; }
+button:nth-child(4n) { background: silver; }
+.sz > button {
+  width:20px; height:10px;
+}
+.mw > button {
+  min-width:15px;
+}
+.mw40 > button {
+  min-width:40px;
+}
+.max40 > button {
+  max-width:40px;
+  max-height:40px;
+}
+.sz.t2 > button {
+  width:10px; height:20px;
+}
+
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid sz t2">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid" style="grid:50px 50px/50px 50px">
+<button>AB</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">AB</button>
+<button class="end">&nbsp;&nbsp;</button>
+</div>
+
+<div class="grid" style="grid:minmax(auto,20px) 20px/auto auto">
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid sz t2 mw">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid mw40">
+<button>AB</button>
+<button>AB</button>
+<button class="jend">AB</button>
+<button class="jend">AB</button>
+<button class="aend">AB</button>
+<button class="aend">AB</button>
+<button class="end">AB</button>
+<button class="end">AB</button>
+</div>
+
+<div class="grid max40" style="grid:50px 50px/50px 50px">
+<button>AB</button>
+<button class="jend">&nbsp;&nbsp;</button>
+<button class="aend">AB</button>
+<button class="end">&nbsp;&nbsp;</button>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-canvas-001-ref.html b/layout/reftests/css-grid/grid-item-canvas-001-ref.html
new file mode 100644
index 0000000000..3366c64657
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-canvas-001-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching canvas item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.block {
+  float: left;
+  border:1px solid;
+  line-height:0;
+}
+canvas:nth-child(1n) { background: blue; }
+canvas:nth-child(2n) { background: grey; }
+canvas:nth-child(3n) { background: tan; }
+canvas:nth-child(4n) { background: black; }
+.sz > canvas {
+  width:20px; height:10px;
+}
+.sz.t2 > canvas {
+  width:10px; height:20px;
+}
+canvas {
+  vertical-align:top;
+}
+  </style>
+</head>
+<body>
+
+<div class="block sz">
+<canvas></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div>
+
+<div class="block sz t2">
+<canvas></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div>
+
+<div class="block" style="height:150px; width:215px">
+<canvas style="width:10px;height:5px;"></canvas><canvas style="width:30px;height:15px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;vertical-align:bottom;margin-top:145px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;vertical-align:bottom;margin-top:135px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;vertical-align:bottom;margin-top:145px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;vertical-align:bottom;margin-top:135px;margin-left:5px"></canvas></div>
+
+<div class="block" style="height:300px; width:600px"><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas></div>
+
+<div class="block" style="height:60px; width:600px">
+<canvas style="height:30px"></canvas><canvas style="height:30px;margin-left:480px"></canvas><canvas style="height:30px"></canvas><canvas style="height:30px;margin-left:480px"></canvas></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-canvas-001.html b/layout/reftests/css-grid/grid-item-canvas-001.html
new file mode 100644
index 0000000000..c76c4c75ce
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-canvas-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching canvas item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-canvas-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
+  grid-gap: 5px;
+  border:1px solid;
+}
+canvas:nth-child(1n) { background: blue; }
+canvas:nth-child(2n) { background: grey; }
+canvas:nth-child(3n) { background: tan; }
+canvas:nth-child(4n) { background: black; }
+.sz > canvas {
+  width:20px; height:10px;
+}
+.sz.t2 > canvas {
+  width:10px; height:20px;
+}
+
+.jend { justify-self: end; }
+.aend { align-self: end; }
+.end { justify-self: end; align-self: end; }
+  </style>
+</head>
+<body>
+
+<div class="grid sz">
+<canvas></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+<canvas class="end"></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid sz t2">
+<canvas></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+<canvas class="end"></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid">
+<canvas></canvas>
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid" style="grid:auto/auto auto">
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
+<canvas></canvas>
+<canvas class="jend"></canvas>
+<canvas class="aend"></canvas>
+<canvas class="end"></canvas>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-content-baseline-001-ref.html b/layout/reftests/css-grid/grid-item-content-baseline-001-ref.html
new file mode 100644
index 0000000000..113a7aff33
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-content-baseline-001-ref.html
@@ -0,0 +1,110 @@
+<!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: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:32px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:16px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span style="padding-block-start:16px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:4px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:38px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:16px;" class="fb">M<br>N</span><span style="padding-block-start:20px; padding-block-end:38px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:16px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:16px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:4px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:6px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:16px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:16px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:4px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:6px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:4px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:38px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:4px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:38px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:16px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:4px;" class="fb hl">M<br>N</span><span style="padding-block-start:21px; padding-block-end:25px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:16px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:16px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:16px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:13px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:4px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:4px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:4px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:6px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:16px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:13px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:16px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:16px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:4px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:38px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:1px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:38px;" class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:4px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:4px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:1px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:16px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:16px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-content-baseline-001.html b/layout/reftests/css-grid/grid-item-content-baseline-001.html
new file mode 100644
index 0000000000..bb64de79cf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-content-baseline-001.html
@@ -0,0 +1,110 @@
+<!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: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:32px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-content-baseline-002-ref.html b/layout/reftests/css-grid/grid-item-content-baseline-002-ref.html
new file mode 100644
index 0000000000..8d134c27ea
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-content-baseline-002-ref.html
@@ -0,0 +1,118 @@
+<!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: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:32px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+.cbm { padding-block-start:33px; grid-template-rows: 1fr; }
+.cbm2 { padding-block-start:27px; grid-template-rows: 1fr; }
+.cim { padding-inline-start:33px; grid-template-columns: 1fr; }
+.cim2 { padding-inline-start:27px; grid-template-columns: 1fr; }
+.pe { padding-inline-end:33px; grid-template-columns: 1fr; }
+.pe2 { padding-inline-end:30px; grid-template-columns: 1fr; }
+.vpe { padding-block-end:33px; grid-template-rows: 1fr; }
+.vpe2 { padding-block-end:32px; grid-template-rows: 1fr; }
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:16px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span style="padding-block-start:16px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:4px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:16px;" class="fb">M<br>N</span><span style="padding-block-start:20px; padding-block-end:54px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:16px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:16px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl cbm"><span style="padding-block-end:4px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl cbm2"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:6px;" class="lb">M<br>N</span></div>
+<div class="grid vl cbm"><span style="padding-block-end:16px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl cbm"><span style="padding-block-end:16px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr cbm"><span style="padding-block-end:4px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr cbm2"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:6px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:4px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:4px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:16px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:4px;" class="fb hl">M<br>N</span><span style="padding-block-start:21px; padding-block-end:53px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:16px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:16px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl cim"><span style="padding-block-end:16px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl cim"><span style="padding-block-end:13px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl cim"><span style="padding-block-end:4px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl cim"><span style="padding-block-end:4px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr cim"><span style="padding-block-end:4px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr cim2"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:6px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:16px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:13px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:16px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:16px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:4px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:1px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px;" class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl pe"><span style="padding-block-end:4px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl pe2"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl vpe"><span style="padding-block-end:4px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl vpe2"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:1px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr vpe"><span style="padding-block-end:16px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr vpe"><span style="padding-block-end:16px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-content-baseline-002.html b/layout/reftests/css-grid/grid-item-content-baseline-002.html
new file mode 100644
index 0000000000..854e043ac4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-content-baseline-002.html
@@ -0,0 +1,112 @@
+<!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: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+}
+.e { align-content:end; }
+.c.e { justify-content:end; }
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:32px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-dir-001-ref.html b/layout/reftests/css-grid/grid-item-dir-001-ref.html
new file mode 100644
index 0000000000..d26bb6c212
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-dir-001-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style type="text/css">
+.grid {
+  border: 1px solid gray;
+  font-size: 0;
+}
+.grid > div {
+  display: inline-block;
+  margin: 2px;
+}
+#a { background: #006; height: 46px; width: 96px; }
+#b { background: #009; height: 46px; width: 146px; }
+#c { background: #00c; height: 46px; width: 46px; }
+#d { background: #00f; height: 46px; width: 16px; }
+#e { background: #060; height: 96px; width: 96px; }
+#f { background: #090; height: 96px; width: 146px; }
+#g { background: #0c0; height: 96px; width: 46px; }
+#h { background: #0f0; height: 96px; width: 16px; }
+#i { background: #600; height: 16px; width: 96px; }
+#j { background: #900; height: 16px; width: 146px; }
+#k { background: #c00; height: 16px; width: 46px; }
+#l { background: #f00; height: 16px; width: 16px; }
+</style>
+</head>
+
+<body>
+<div class=grid>
+  <div id=a></div>
+  <div id=b></div>
+  <div id=c></div>
+  <div id=d></div><br>
+  <div id=e></div>
+  <div id=f></div>
+  <div id=g></div>
+  <div id=h></div><br>
+  <div id=i></div>
+  <div id=j></div>
+  <div id=k></div>
+  <div id=l></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-dir-001.html b/layout/reftests/css-grid/grid-item-dir-001.html
new file mode 100644
index 0000000000..1b6b9d202f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-dir-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style type="text/css">
+.grid {
+  display: grid;
+  border: 1px solid gray;
+  grid-template-columns: 100px 150px 50px 20px;
+  grid-template-rows: 50px 100px 20px;
+}
+.grid > div {
+  margin: 2px;
+}
+#a { background: #006; }
+#b { background: #009; }
+#c { background: #00c; }
+#d { background: #00f; }
+#e { background: #060; }
+#f { background: #090; }
+#g { background: #0c0; }
+#h { background: #0f0; }
+#i { background: #600; }
+#j { background: #900; }
+#k { background: #c00; }
+#l { background: #f00; }
+</style>
+</head>
+
+<body>
+<div class=grid>
+  <div id=a></div>
+  <div id=b></div>
+  <div id=c></div>
+  <div id=d></div>
+  <div id=e dir=rtl></div>
+  <div id=f dir=rtl></div>
+  <div id=g dir=rtl></div>
+  <div id=h dir=rtl></div>
+  <div id=i></div>
+  <div id=j dir=rtl></div>
+  <div id=k></div>
+  <div id=l dir=rtl></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-fieldset-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-fieldset-stretch-001-ref.html
new file mode 100644
index 0000000000..d3cc594a04
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-fieldset-stretch-001-ref.html
@@ -0,0 +1,63 @@
+<!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 fieldset items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <style type="text/css">
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 60px / 100px;
+  padding: 10px 4px 3px 6px;
+}
+
+fieldset {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+legend { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:20px; height:20px; }
+i { display:block; background:grey; }
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px 0; }
+.hmaa  { margin: 7px 0 1px 0; }
+.vma10 { margin: 0 7px 3px 1px; }
+.vmaa  { margin: 0 7px 0 1px; }
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><fieldset class="m" style="width:90px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="hma10 je" style="width:22px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="hmaa jc" style="width:22px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr hma10 je" style="width:37px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr hmaa jc" style="width:37px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr" style="height:58px; width:98px"><legend><x></x></legend><i><t></t></i></fieldset></div>
+
+<div class="grid"><fieldset class="vma10 ae" style="width:90px; height:37px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vmaa ac" style="width:90px; height:37px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr vma10 ae" style="width:90px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr vmaa ac" style="width:90px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr p vma10 ae" style="width:82px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr p vmaa ac" style="width:82px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-fieldset-stretch-001.html b/layout/reftests/css-grid/grid-item-fieldset-stretch-001.html
new file mode 100644
index 0000000000..2367e7e735
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-fieldset-stretch-001.html
@@ -0,0 +1,58 @@
+<!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 fieldset items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-table-stretch-004-ref.html">
+  <style type="text/css">
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 10px 60px 3px / 6px 100px 4px;
+}
+
+fieldset {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  grid-area:2/2;
+}
+legend { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:20px; height:20px; }
+i { display:block; background:grey; }
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><fieldset class="m"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="hma10"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="hmaa"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr hma10"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr hmaa"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr"><legend><x></x></legend><i><t></t></i></fieldset></div>
+
+<div class="grid"><fieldset class="vma10"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vmaa"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr vma10"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr vmaa"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr p vma10"><legend><x></x></legend><i><t></t></i></fieldset></div>
+<div class="grid"><fieldset class="vr p vmaa"><legend><x></x></legend><i><t></t></i></fieldset></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
new file mode 100644
index 0000000000..266e4bae8d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html
@@ -0,0 +1,80 @@
+<!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 input items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1317168">
+  <style type="text/css">
+* { color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; }
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  grid: 30px / 200px;
+  padding: 2px 4px 3px 6px;
+  align-items: start;
+  justify-items: start;
+}
+
+input {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px 0; }
+.hmaa  { margin: 7px 0 1px 0; }
+.vma10 { margin: 0 7px 3px 1px; }
+.vmaa  { margin: 0 7px 0 1px; }
+.mxw { width: 32px; }
+.mxh { height: 16px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><input class="m" style="width:190px; height:20px"></div>
+<div class="grid"><input class="hma10 je" style="height:20px"></div>
+<div class="grid"><input class="hmaa jc" style="height:20px"></div>
+<div class="grid"><input class="vr hma10 je" style="height:20px"></div>
+<div class="grid"><input class="vr hmaa jc" style="height:20px"></div>
+<div class="grid"><input class="vr je" style="width:198px; height:28px"></div>
+
+<div class="grid"><input class="vma10 ae" style="width:190px"></div>
+<div class="grid"><input class="vmaa ac" style="width:190px"></div>
+<div class="grid"><input class="vr vma10" style="width:190px; height:25px"></div>
+<div class="grid"><input class="vr vmaa ac" style="width:190px; height:28px"></div>
+<div class="grid"><input class="vr p vma10" style="width:182px; height:17px"></div>
+<div class="grid"><input class="vr p vmaa ac" style="width:182px; height:20px"></div>
+
+<div class="grid"><input class="mxw m" style="height:20px"></div>
+<div class="grid"><input class="mxw hma10 je" style="height:20px"></div>
+<div class="grid"><input class="mxw hmaa jc" style="height:20px"></div>
+<div class="grid"><input class="mxw vr hma10 je" style="width:10px; height:20px"></div>
+<div class="grid"><input class="mxw vr" style="height:28px"></div>
+
+<div class="grid"><input class="mxh m je" style="width:190px"></div>
+<div class="grid"><input class="mxh hma10 je"></div>
+<div class="grid"><input class="mxh hmaa jc"></div>
+<div class="grid"><input class="mxh vr hmaa jc" style="width:10px"></div>
+<div class="grid"><input class="mxh vr" style="width:198px"></div>
+
+<div class="grid" style="grid:2px/2px; padding:0;"><input style="width:0;height:0"></div>
+<div class="grid" style="grid:2px/2px; padding:0;"><input style="width:0;height:0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-input-stretch-001.html b/layout/reftests/css-grid/grid-item-input-stretch-001.html
new file mode 100644
index 0000000000..902aed0b66
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-input-stretch-001.html
@@ -0,0 +1,73 @@
+<!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 input items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1317168">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-input-stretch-001-ref.html">
+  <style type="text/css">
+* { color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; }
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  grid: 2px 30px 3px / 6px 200px 4px;
+}
+
+input {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  grid-area: 2/2;
+}
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+.mxw { max-width: 32px; }
+.mxh { max-height: 16px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><input class="m"></div>
+<div class="grid"><input class="hma10"></div>
+<div class="grid"><input class="hmaa"></div>
+<div class="grid"><input class="vr hma10"></div>
+<div class="grid"><input class="vr hmaa"></div>
+<div class="grid"><input class="vr"></div>
+
+<div class="grid"><input class="vma10"></div>
+<div class="grid"><input class="vmaa"></div>
+<div class="grid"><input class="vr vma10"></div>
+<div class="grid"><input class="vr vmaa"></div>
+<div class="grid"><input class="vr p vma10"></div>
+<div class="grid"><input class="vr p vmaa"></div>
+
+<div class="grid"><input class="mxw m"></div>
+<div class="grid"><input class="mxw hma10"></div>
+<div class="grid"><input class="mxw hmaa"></div>
+<div class="grid"><input class="mxw vr hma10"></div>
+<div class="grid"><input class="mxw vr"></div>
+
+<div class="grid"><input class="mxh m"></div>
+<div class="grid"><input class="mxh hma10"></div>
+<div class="grid"><input class="mxh hmaa"></div>
+<div class="grid"><input class="mxh vr hmaa"></div>
+<div class="grid"><input class="mxh vr"></div>
+
+<div class="grid" style="grid:minmax(min-content,0) / minmax(min-content,0)"><input style="grid-area:1/1"></div>
+<div class="grid" style="grid:minmax(min-content,0) / minmax(min-content,0); align-items:start; justify-items:start"><input style="grid-area:1/1"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html
new file mode 100644
index 0000000000..faa06b3369
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html
new file mode 100644
index 0000000000..712ee06ac2
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html
new file mode 100644
index 0000000000..22fba87853
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html
new file mode 100644
index 0000000000..d5f7e09d99
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html
new file mode 100644
index 0000000000..99afb92f05
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html
new file mode 100644
index 0000000000..ca02b81d0e
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html
new file mode 100644
index 0000000000..439498bd7d
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html
new file mode 100644
index 0000000000..649ed1ef9c
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html
new file mode 100644
index 0000000000..4d90226bca
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html
new file mode 100644
index 0000000000..9344f97d1f
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html
new file mode 100644
index 0000000000..5e6b4dc4d5
--- /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>Reference: stretching intrinsic ratio item with min/max-size:0</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html
new file mode 100644
index 0000000000..9cca400ff8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.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>CSS Grid Test: stretching intrinsic ratio item with min/max-size:0</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+.grid > * {
+  min-width: 0;
+  min-height: 0;
+}
+.vertical-tests img { writing-mode: vertical-rl; }
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png">
+</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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
new file mode 100644
index 0000000000..c10ded9496
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-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: stretching intrinsic ratio item with definite min/max-size</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  place-items: start 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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
new file mode 100644
index 0000000000..ca53b11aba
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html
@@ -0,0 +1,153 @@
+<!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 definite min/max-size</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+.grid > * {
+  min-width: 0;
+  min-height: 0;
+}
+.vertical-tests img { writing-mode: vertical-rl; }
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="max-width:4px">
+</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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html
new file mode 100644
index 0000000000..a8bfd0897a
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.html
new file mode 100644
index 0000000000..7491e15068
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html
new file mode 100644
index 0000000000..c9cea31d2f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html
@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  justify-items: start;
+}
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="height:96px; width:8px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:96px; height:8px">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="height:96px; width:8px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:96px; height:8px">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html
new file mode 100644
index 0000000000..c89c5ac1f6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html
@@ -0,0 +1,144 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+.vertical-tests img { writing-mode: vertical-rl; }
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe;">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start safe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end safe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png">
+</div>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:start unsafe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end safe;">
+</div>
+<div class="grid" style="grid: 96px / 10px">
+<img src="support/lime-2x24.png" style="align-self:end unsafe;">
+</div>
+
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start safe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:start unsafe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
+<img src="support/lime-24x2.png" style="justify-self:end safe">
+</div>
+<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
+<img src="support/lime-24x2.png" style="justify-self:end unsafe">
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html
new file mode 100644
index 0000000000..c9c8028204
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html
@@ -0,0 +1,148 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+  align-items: start;
+  justify-items: start;
+}
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="height:1px; width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="height:6px; width:72px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:10px; height:120px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:24px; height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:120px; height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
+</div>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:4px; height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="height:1px; width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="height:6px; width:72px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:10px; height:1px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="width:10px; height:120px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="width:24px; height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="width:120px; height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
+</div>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html
new file mode 100644
index 0000000000..2771032154
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html
@@ -0,0 +1,149 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="match" href="grid-item-intrinsic-ratio-stretch-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  border: 1px solid;
+  margin: 5px;
+}
+.vertical-tests img { writing-mode: vertical-rl; }
+.vertical-tests div { vertical-align:bottom }
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="max-width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="max-width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="max-height:6px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-width:6px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
+</div>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
+</div>
+
+<br>
+
+<div class="vertical-tests">
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="max-width:4px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="max-width:12px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="max-height:6px">
+</div>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+<div class="grid" style="grid: 8px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
+</div>
+
+<br>
+
+<div class="grid" style="grid: 96px / 20px">
+<img src="support/lime-2x24.png" style="min-width:10px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="min-width:6px">
+</div>
+
+<div class="grid" style="grid: 8px / 20px">
+<img src="support/lime-24x2.png" style="min-height:2px">
+</div>
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="min-height:10px">
+</div>
+
+<div class="grid" style="grid: 48px / 6px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
+</div>
+<div class="grid" style="grid: 96px / 4px">
+<img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
+</div>
+
+<div class="grid" style="grid: 8px / 100px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
+</div>
+<div class="grid" style="grid: 4px / 10px">
+<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
+</div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html
new file mode 100644
index 0000000000..50a7925cc4
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html
new file mode 100644
index 0000000000..d21a4c75f2
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html
new file mode 100644
index 0000000000..467056425b
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html
new file mode 100644
index 0000000000..978740ed88
--- /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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
new file mode 100644
index 0000000000..98cd026d6d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
@@ -0,0 +1,237 @@
+<!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 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=">
+  <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: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"><button></button></div>
+<div class="grid r"><button class="start"></button></div>
+<div class="grid r"><button class="sa"></button></div>
+<div class="grid r"><button class="sa mxw10"></button></div>
+<div class="grid r"><button class="na"></button></div>
+<div class="grid r"><button class="na mxw2"></button></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><button class="mh20"></button></div>
+<div class="grid r"><button class="mh20 mxw10"></button></div>
+<div class="grid r"><button class="start mh20"></button></div>
+<div class="grid r"><button class="start mh20 mxw10"></button></div>
+<div class="grid r"><button class="sa mh20"></button></div>
+<div class="grid r"><button class="sa mh20 mxw10"></button></div>
+<div class="grid r"><button class="na mh20"></button></div>
+<div class="grid r"><button class="na mh20 mxw10"></button></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><button class="mh0"></button></div>
+<div class="grid r"><button class="mh0 mxw10"></button></div>
+<div class="grid r"><button class="start mh0"></button></div>
+<div class="grid r"><button class="start mh0 mxw10"></button></div>
+<div class="grid r"><button class="sa mh0"></button></div>
+<div class="grid r"><button class="sa mh0 mxw10"></button></div>
+<div class="grid r"><button class="na mh0"></button></div>
+<div class="grid r"><button class="na mh0 mxw2"></button></div>
+
+<pre><!----></pre>
+
+<div class="grid"><button></button></div>
+<div class="grid"><button class="mxw2"></button></div>
+<div class="grid"><button class="start"></button></div>
+<div class="grid"><button class="start mxw2"></button></div>
+<div class="grid"><button class="sa"></button></div>
+<div class="grid"><button class="sa mxw2"></button></div>
+<div class="grid"><button class="na"></button></div>
+<div class="grid"><button class="na mxw2"></button></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><button class="mw20"></button></div>
+<div class="grid"><button class="mw20 mxh10"></button></div>
+<div class="grid"><button class="start mw20"></button></div>
+<div class="grid"><button class="start mw20 mxh10"></button></div>
+<div class="grid"><button class="sa mw20"></button></div>
+<div class="grid"><button class="sa mw20 mxh10"></button></div>
+<div class="grid"><button class="na mw20"></button></div>
+<div class="grid"><button class="na mw20 mxh10"></button></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><button class="mw0"></button></div>
+<div class="grid"><button class="mw0 mxh10"></button></div>
+<div class="grid"><button class="start mw0"></button></div>
+<div class="grid"><button class="start mw0 mxh10"></button></div>
+<div class="grid"><button class="sa mw0"></button></div>
+<div class="grid"><button class="sa mw0 mxh10"></button></div>
+<div class="grid"><button class="na mw0"></button></div>
+<div class="grid"><button class="na mw0 mxh10"></button></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><button class="w20"></button></div>
+<div class="grid r"><button class="w20 mxh10"></button></div>
+<div class="grid r"><button class="start w20"></button></div>
+<div class="grid r"><button class="start w20 mxh10"></button></div>
+<div class="grid r"><button class="sa w20"></button></div>
+<div class="grid r"><button class="sa w20 mxh2"></button></div>
+<div class="grid r"><button class="na w20"></button></div>
+<div class="grid r"><button class="na w20 mxh2"></button></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><button class="start w20"></button></div>
+<div class="grid"><button class="start w20 mxh10"></button></div>
+<div class="grid"><button class="start w20"></button></div>
+<div class="grid"><button class="start w20 mxh10"></button></div>
+<div class="grid"><button class="sa w20"></button></div>
+<div class="grid"><button class="sa w20 mxh10"></button></div>
+<div class="grid"><button class="na w20"></button></div>
+<div class="grid"><button class="na w20 mxh10"></button></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><button class="h20"></button></div>
+<div class="grid r"><button class="h20 mxw10"></button></div>
+<div class="grid r"><button class="start h20"></button></div>
+<div class="grid r"><button class="start h20 mxw10"></button></div>
+<div class="grid r"><button class="as h20"></button></div>
+<div class="grid r"><button class="as h20 mxw10"></button></div>
+<div class="grid r"><button class="an h20"></button></div>
+<div class="grid r"><button class="an h20 mxw10"></button></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><button class="h20"></button></div>
+<div class="grid"><button class="h20 mxw2"></button></div>
+<div class="grid"><button class="start h20"></button></div>
+<div class="grid"><button class="start h20 mxw10"></button></div>
+<div class="grid"><button class="as h20"></button></div>
+<div class="grid"><button class="as h20 mxw2"></button></div>
+<div class="grid"><button class="an h20"></button></div>
+<div class="grid"><button class="an h20 mxw10"></button></div>
+
+<script>
+var buttonSizes =
+[
+  ['32px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['2px', '4px'],
+  ['32px', '20px'],
+  ['10px', '20px'],
+  ['8px', '20px'],
+  ['8px', '20px'],
+  ['8px', '20px'],
+  ['8px', '20px'],
+  ['8px', '20px'],
+  ['8px', '20px'],
+  ['32px', '4px'],
+  ['10px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['2px', '4px'],
+  ['4px', '32px'],
+  ['2px', '32px'],
+  ['4px', '4px'],
+  ['2px', '4px'],
+  ['4px', '32px'],
+  ['2px', '32px'],
+  ['4px', '32px'],
+  ['2px', '32px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['4px', '32px'],
+  ['4px', '10px'],
+  ['8px', '4px'],
+  ['8px', '4px'],
+  ['8px', '32px'],
+  ['8px', '10px'],
+  ['8px', '32px'],
+  ['8px', '10px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '2px'],
+  ['20px', '4px'],
+  ['20px', '2px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '4px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['20px', '32px'],
+  ['20px', '10px'],
+  ['32px', '20px'],
+  ['10px', '20px'],
+  ['8px', '20px'],
+  ['8px', '20px'],
+  ['32px', '20px'],
+  ['10px', '20px'],
+  ['32px', '20px'],
+  ['10px', '20px'],
+  ['4px', '20px'],
+  ['2px', '20px'],
+  ['4px', '20px'],
+  ['4px', '20px'],
+  ['4px', '20px'],
+  ['2px', '20px'],
+  ['4px', '20px'],
+  ['4px', '20px'],
+];
+var buttons = document.querySelectorAll('button');
+for (var i = 0; i < buttons.length; ++i) {
+  var button = buttons[i];
+  button.style.width = buttonSizes[i][0];
+  button.style.height = buttonSizes[i][1];
+}
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001.html
new file mode 100644
index 0000000000..1ef9fe1fed
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001.html
@@ -0,0 +1,168 @@
+<!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"><button></button></div>
+<div class="grid r"><button class="start"></button></div>
+<div class="grid r"><button class="sa"></button></div>
+<div class="grid r"><button class="sa mxw10"></button></div>
+<div class="grid r"><button class="na"></button></div>
+<div class="grid r"><button class="na mxw2"></button></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><button class="mh20"></button></div>
+<div class="grid r"><button class="mh20 mxw10"></button></div>
+<div class="grid r"><button class="start mh20"></button></div>
+<div class="grid r"><button class="start mh20 mxw10"></button></div>
+<div class="grid r"><button class="sa mh20"></button></div>
+<div class="grid r"><button class="sa mh20 mxw10"></button></div>
+<div class="grid r"><button class="na mh20"></button></div>
+<div class="grid r"><button class="na mh20 mxw10"></button></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><button class="mh0"></button></div>
+<div class="grid r"><button class="mh0 mxw10"></button></div>
+<div class="grid r"><button class="start mh0"></button></div>
+<div class="grid r"><button class="start mh0 mxw10"></button></div>
+<div class="grid r"><button class="sa mh0"></button></div>
+<div class="grid r"><button class="sa mh0 mxw10"></button></div>
+<div class="grid r"><button class="na mh0"></button></div>
+<div class="grid r"><button class="na mh0 mxw2"></button></div>
+
+<pre><!----></pre>
+
+<div class="grid"><button></button></div>
+<div class="grid"><button class="mxw2"></button></div>
+<div class="grid"><button class="start"></button></div>
+<div class="grid"><button class="start mxw2"></button></div>
+<div class="grid"><button class="sa"></button></div>
+<div class="grid"><button class="sa mxw2"></button></div>
+<div class="grid"><button class="na"></button></div>
+<div class="grid"><button class="na mxw2"></button></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><button class="mw20"></button></div>
+<div class="grid"><button class="mw20 mxh10"></button></div>
+<div class="grid"><button class="start mw20"></button></div>
+<div class="grid"><button class="start mw20 mxh10"></button></div>
+<div class="grid"><button class="sa mw20"></button></div>
+<div class="grid"><button class="sa mw20 mxh10"></button></div>
+<div class="grid"><button class="na mw20"></button></div>
+<div class="grid"><button class="na mw20 mxh10"></button></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><button class="mw0"></button></div>
+<div class="grid"><button class="mw0 mxh10"></button></div>
+<div class="grid"><button class="start mw0"></button></div>
+<div class="grid"><button class="start mw0 mxh10"></button></div>
+<div class="grid"><button class="sa mw0"></button></div>
+<div class="grid"><button class="sa mw0 mxh10"></button></div>
+<div class="grid"><button class="na mw0"></button></div>
+<div class="grid"><button class="na mw0 mxh10"></button></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><button class="w20"></button></div>
+<div class="grid r"><button class="w20 mxh10"></button></div>
+<div class="grid r"><button class="start w20"></button></div>
+<div class="grid r"><button class="start w20 mxh10"></button></div>
+<div class="grid r"><button class="sa w20"></button></div>
+<div class="grid r"><button class="sa w20 mxh2"></button></div>
+<div class="grid r"><button class="na w20"></button></div>
+<div class="grid r"><button class="na w20 mxh2"></button></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><button class="start w20"></button></div>
+<div class="grid"><button class="start w20 mxh10"></button></div>
+<div class="grid"><button class="start w20"></button></div>
+<div class="grid"><button class="start w20 mxh10"></button></div>
+<div class="grid"><button class="sa w20"></button></div>
+<div class="grid"><button class="sa w20 mxh10"></button></div>
+<div class="grid"><button class="na w20"></button></div>
+<div class="grid"><button class="na w20 mxh10"></button></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><button class="h20"></button></div>
+<div class="grid r"><button class="h20 mxw10"></button></div>
+<div class="grid r"><button class="start h20"></button></div>
+<div class="grid r"><button class="start h20 mxw10"></button></div>
+<div class="grid r"><button class="as h20"></button></div>
+<div class="grid r"><button class="as h20 mxw10"></button></div>
+<div class="grid r"><button class="an h20"></button></div>
+<div class="grid r"><button class="an h20 mxw10"></button></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><button class="h20"></button></div>
+<div class="grid"><button class="h20 mxw2"></button></div>
+<div class="grid"><button class="start h20"></button></div>
+<div class="grid"><button class="start h20 mxw10"></button></div>
+<div class="grid"><button class="as h20"></button></div>
+<div class="grid"><button class="as h20 mxw2"></button></div>
+<div class="grid"><button class="an h20"></button></div>
+<div class="grid"><button class="an h20 mxw10"></button></div>
+
+
+<!--  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>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html
new file mode 100644
index 0000000000..87450f2a77
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html
@@ -0,0 +1,234 @@
+<!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 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=">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 32px / 4px;
+  margin-right:20px;
+  align-items: start;
+  justify-items: start;
+}
+.r { grid: 4px / 32px; }
+
+iframe {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+
+.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"><iframe></iframe></div>
+<div class="grid r"><iframe class="start"></iframe></div>
+<div class="grid r"><iframe class="sa"></iframe></div>
+<div class="grid r"><iframe class="sa mxw10"></iframe></div>
+<div class="grid r"><iframe class="na"></iframe></div>
+<div class="grid r"><iframe class="na mxw2"></iframe></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r" style="margin-right:0"><iframe class="mh20"></iframe></div>
+<div class="grid r"><iframe class="mh20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="start mh20"></iframe></div>
+<div class="grid r"><iframe class="start mh20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="sa mh20"></iframe></div>
+<div class="grid r"><iframe class="sa mh20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="na mh20"></iframe></div>
+<div class="grid r"><iframe class="na mh20 mxw10"></iframe></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><iframe class="mh0"></iframe></div>
+<div class="grid r"><iframe class="mh0 mxw10"></iframe></div>
+<div class="grid r"><iframe class="start mh0"></iframe></div>
+<div class="grid r"><iframe class="start mh0 mxw10"></iframe></div>
+<div class="grid r"><iframe class="sa mh0"></iframe></div>
+<div class="grid r"><iframe class="sa mh0 mxw10"></iframe></div>
+<div class="grid r"><iframe class="na mh0"></iframe></div>
+<div class="grid r"><iframe class="na mh0 mxw2"></iframe></div>
+
+<pre><!----></pre>
+
+<div class="grid"><iframe></iframe></div>
+<div class="grid"><iframe class="mxw2"></iframe></div>
+<div class="grid"><iframe class="start"></iframe></div>
+<div class="grid"><iframe class="start mxw2"></iframe></div>
+<div class="grid"><iframe class="sa"></iframe></div>
+<div class="grid"><iframe class="sa mxw2"></iframe></div>
+<div class="grid"><iframe class="na"></iframe></div>
+<div class="grid"><iframe class="na mxw2"></iframe></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><iframe class="mw20"></iframe></div>
+<div class="grid"><iframe class="mw20 mxh10"></iframe></div>
+<div class="grid"><iframe class="start mw20"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div>
+<div class="grid" style="margin-top:10px"><iframe class="sa mw20"></iframe></div>
+<div class="grid" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div>
+<div class="grid"><iframe class="na mw20"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><iframe class="mw0"></iframe></div>
+<div class="grid"><iframe class="mw0 mxh10"></iframe></div>
+<div class="grid"><iframe class="start mw0"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div>
+<div class="grid" style="margin-top:10px"><iframe class="sa mw0"></iframe></div>
+<div class="grid" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div>
+<div class="grid"><iframe class="na mw0 mxw10"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><iframe class="w20"></iframe></div>
+<div class="grid r"><iframe class="w20 mxh10"></iframe></div>
+<div class="grid r"><iframe class="start w20"></iframe></div>
+<div class="grid r"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid r"><iframe class="sa w20"></iframe></div>
+<div class="grid r"><iframe class="sa w20 mxh2"></iframe></div>
+<div class="grid r"><iframe class="na w20"></iframe></div>
+<div class="grid r"><iframe class="na w20 mxh2"></iframe></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><iframe class="start w20"></iframe></div>
+<div class="grid"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid"><iframe class="start w20"></iframe></div>
+<div class="grid"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid"><iframe class="sa w20"></iframe></div>
+<div class="grid"><iframe class="sa w20 mxh10"></iframe></div>
+<div class="grid"><iframe class="na w20"></iframe></div>
+<div class="grid"><iframe class="na w20 mxh10"></iframe></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><iframe class="h20"></iframe></div>
+<div class="grid r"><iframe class="h20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="start h20"></iframe></div>
+<div class="grid r"><iframe class="start h20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="as h20"></iframe></div>
+<div class="grid r"><iframe class="as h20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="an h20"></iframe></div>
+<div class="grid r"><iframe class="an h20 mxw10"></iframe></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><iframe class="h20"></iframe></div>
+<div class="grid"><iframe class="h20 mxw2"></iframe></div>
+<div class="grid"><iframe class="start h20"></iframe></div>
+<div class="grid"><iframe class="start h20 mxw10"></iframe></div>
+<div class="grid"><iframe class="as h20"></iframe></div>
+<div class="grid"><iframe class="as h20 mxw2"></iframe></div>
+<div class="grid"><iframe class="an h20"></iframe></div>
+<div class="grid"><iframe class="an h20 mxw10"></iframe></div>
+
+<script>
+var iframeSizes =
+[
+  ['30px', '2px'],
+  ['30px', '2px'],
+  ['30px', '2px'],
+  ['10px', '2px'],
+  ['30px', '2px'],
+  ['2px', '2px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['30px', '150px'],
+  ['10px', '150px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['30px', '2px'],
+  ['10px', '2px'],
+  ['30px', '150px'],
+  ['10px', '150px'],
+  ['30px', '2px'],
+  ['10px', '2px'],
+  ['30px', '2px'],
+  ['2px', '2px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['2px', '30px'],
+  ['20px', '30px'],
+  ['20px', '10px'],
+  ['300px', '30px'],
+  ['300px', '10px'],
+  ['300px', '30px'],
+  ['300px', '10px'],
+  ['300px', '30px'],
+  ['20px', '10px'],
+  ['2px', '30px'],
+  ['2px', '10px'],
+  ['300px', '30px'],
+  ['300px', '10px'],
+  ['300px', '30px'],
+  ['10px', '10px'],
+  ['10px', '30px'],
+  ['300px', '10px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '2px'],
+  ['20px', '30px'],
+  ['20px', '10px'],
+  ['20px', '30px'],
+  ['20px', '10px'],
+  ['20px', '30px'],
+  ['20px', '10px'],
+  ['20px', '30px'],
+  ['20px', '10px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['30px', '20px'],
+  ['10px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+  ['2px', '20px'],
+];
+var iframes = document.querySelectorAll('iframe');
+for (var i = 0; i < iframes.length; ++i) {
+  var iframe = iframes[i];
+  iframe.style.width = iframeSizes[i][0];
+  iframe.style.height = iframeSizes[i][1];
+}
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html
new file mode 100644
index 0000000000..87f45b3e3d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html
@@ -0,0 +1,168 @@
+<!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: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 32px / 4px;
+  margin-right:20px;
+}
+.r { grid: 4px / 32px; }
+
+iframe {
+  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"><iframe></iframe></div>
+<div class="grid r"><iframe class="start"></iframe></div>
+<div class="grid r"><iframe class="sa"></iframe></div>
+<div class="grid r"><iframe class="sa mxw10"></iframe></div>
+<div class="grid r"><iframe class="na"></iframe></div>
+<div class="grid r"><iframe class="na mxw2"></iframe></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r" style="margin-right:0"><iframe class="mh20"></iframe></div>
+<div class="grid r"><iframe class="mh20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="start mh20"></iframe></div>
+<div class="grid r"><iframe class="start mh20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="sa mh20"></iframe></div>
+<div class="grid r"><iframe class="sa mh20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="na mh20"></iframe></div>
+<div class="grid r"><iframe class="na mh20 mxw10"></iframe></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><iframe class="mh0"></iframe></div>
+<div class="grid r"><iframe class="mh0 mxw10"></iframe></div>
+<div class="grid r"><iframe class="start mh0"></iframe></div>
+<div class="grid r"><iframe class="start mh0 mxw10"></iframe></div>
+<div class="grid r"><iframe class="sa mh0"></iframe></div>
+<div class="grid r"><iframe class="sa mh0 mxw10"></iframe></div>
+<div class="grid r"><iframe class="na mh0"></iframe></div>
+<div class="grid r"><iframe class="na mh0 mxw2"></iframe></div>
+
+<pre><!----></pre>
+
+<div class="grid"><iframe></iframe></div>
+<div class="grid"><iframe class="mxw2"></iframe></div>
+<div class="grid"><iframe class="start"></iframe></div>
+<div class="grid"><iframe class="start mxw2"></iframe></div>
+<div class="grid"><iframe class="sa"></iframe></div>
+<div class="grid"><iframe class="sa mxw2"></iframe></div>
+<div class="grid"><iframe class="na"></iframe></div>
+<div class="grid"><iframe class="na mxw2"></iframe></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><iframe class="mw20"></iframe></div>
+<div class="grid"><iframe class="mw20 mxh10"></iframe></div>
+<div class="grid"><iframe class="start mw20"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div>
+<div class="grid" style="margin-top:10px"><iframe class="sa mw20"></iframe></div>
+<div class="grid" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div>
+<div class="grid"><iframe class="na mw20"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><iframe class="mw0"></iframe></div>
+<div class="grid"><iframe class="mw0 mxh10"></iframe></div>
+<div class="grid"><iframe class="start mw0"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div>
+<div class="grid" style="margin-top:10px"><iframe class="sa mw0"></iframe></div>
+<div class="grid" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div>
+<div class="grid"><iframe class="na mw0 mxw10"></iframe></div>
+<div class="grid" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><iframe class="w20"></iframe></div>
+<div class="grid r"><iframe class="w20 mxh10"></iframe></div>
+<div class="grid r"><iframe class="start w20"></iframe></div>
+<div class="grid r"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid r"><iframe class="sa w20"></iframe></div>
+<div class="grid r"><iframe class="sa w20 mxh2"></iframe></div>
+<div class="grid r"><iframe class="na w20"></iframe></div>
+<div class="grid r"><iframe class="na w20 mxh2"></iframe></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><iframe class="start w20"></iframe></div>
+<div class="grid"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid"><iframe class="start w20"></iframe></div>
+<div class="grid"><iframe class="start w20 mxh10"></iframe></div>
+<div class="grid"><iframe class="sa w20"></iframe></div>
+<div class="grid"><iframe class="sa w20 mxh10"></iframe></div>
+<div class="grid"><iframe class="na w20"></iframe></div>
+<div class="grid"><iframe class="na w20 mxh10"></iframe></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><iframe class="h20"></iframe></div>
+<div class="grid r"><iframe class="h20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="start h20"></iframe></div>
+<div class="grid r"><iframe class="start h20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="as h20"></iframe></div>
+<div class="grid r"><iframe class="as h20 mxw10"></iframe></div>
+<div class="grid r"><iframe class="an h20"></iframe></div>
+<div class="grid r"><iframe class="an h20 mxw10"></iframe></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><iframe class="h20"></iframe></div>
+<div class="grid"><iframe class="h20 mxw2"></iframe></div>
+<div class="grid"><iframe class="start h20"></iframe></div>
+<div class="grid"><iframe class="start h20 mxw10"></iframe></div>
+<div class="grid"><iframe class="as h20"></iframe></div>
+<div class="grid"><iframe class="as h20 mxw2"></iframe></div>
+<div class="grid"><iframe class="an h20"></iframe></div>
+<div class="grid"><iframe class="an h20 mxw10"></iframe></div>
+
+
+<!-- For generating the item sizes used in the -ref file.
+<script>
+document.body.clientHeight;
+var iframes = document.querySelectorAll('iframe');
+var s = '  [\n';
+for (var i = 0; i < iframes.length; ++i) {
+  var cs = window.getComputedStyle(iframes[i]);
+  s += "  ['"+ cs['width'] + "', '" + cs['height'] + "'],\n";
+}
+s += ']';
+console.log(s)
+</script>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-justify-001-ref.html b/layout/reftests/css-grid/grid-item-justify-001-ref.html
new file mode 100644
index 0000000000..99c8536454
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-justify-001-ref.html
@@ -0,0 +1,121 @@
+<!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: justify-self (part 1 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  inline-size: 36px;
+  block-size: 25px;
+  margin-right: 4px;
+  background: lightgrey;
+}
+
+wrap {
+  display: block;
+  position: relative;
+  offset-inline-start: 1px;
+  background: white;
+  block-size: 20px;
+  inline-size: 32px;
+  border-block-start: 3px solid lightgrey;
+}
+
+span {
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  align-self: start;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+.hl .jend, .hl .jflexend, .hl .jright { margin-left: 16px; }
+.hr .jend, .hr .jflexend { margin-right: 15px; }
+.hl .jcenter { margin-left: 9px; }
+.vl .jend, .vl .jflexend { margin-right:3px; }
+.hr .jcenter { margin-right: 8px; }
+.hr .jleft { margin-right: 15px; }
+
+.hl .jstretch5, .hl .jstretch7, .hr .jstretch5, .hr .jstretch7 { width:14px; }
+
+.jstretch4 { width:27px; }
+.vl .jstretch4 { width:0px; }
+
+.vl .jstretch2, .vl .jstretch3 { height:27px; }
+.vl .jstretch6, .vl .jstretch7 { height:9px;  }
+.vl .jend, .vl .jflexend, .vl .jright { margin-top: 19px; }
+.vl .jcenter { margin-top: 10px; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var wrap = document.createElement("wrap");
+      div.appendChild(wrap);
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      wrap.appendChild(span);
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-justify-001.html b/layout/reftests/css-grid/grid-item-justify-001.html
new file mode 100644
index 0000000000..52ba438e35
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-justify-001.html
@@ -0,0 +1,108 @@
+<!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: justify-self (part 1 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+  <link rel="match" href="grid-item-justify-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-justify-002-ref.html b/layout/reftests/css-grid/grid-item-justify-002-ref.html
new file mode 100644
index 0000000000..39e7d26f0e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-justify-002-ref.html
@@ -0,0 +1,120 @@
+<!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: justify-self (part 2 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: block;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  inline-size: 36px;
+  block-size: 25px;
+  margin-right: 4px;
+  background: lightgrey;
+}
+
+wrap {
+  display: block;
+  position: relative;
+  offset-inline-start: 1px;
+  background: white;
+  block-size: 20px;
+  inline-size: 32px;
+  border-block-start: 3px solid lightgrey;
+}
+
+span {
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:27px; }
+.jstretch3 { justify-self:stretch; height:27px; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:9px; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:9px; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+.vr .jend, .vr .jflexend, .vr .jright,
+.vrl .jend, .vrl .jflexend, .vrl .jright { margin-top: 19px; }
+.vlr .jend, .vlr .jflexend, .vlr .jleft { margin-bottom: 20px;}
+.vr .jcenter, .vrl .jcenter { margin-top: 10px; }
+.vlr .jcenter { margin-bottom: 11px; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var wrap = document.createElement("wrap");
+      div.appendChild(wrap);
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      wrap.appendChild(span);
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-justify-002.html b/layout/reftests/css-grid/grid-item-justify-002.html
new file mode 100644
index 0000000000..f72c3f0bad
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-justify-002.html
@@ -0,0 +1,108 @@
+<!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: justify-self (part 2 of 2)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+  <link rel="match" href="grid-item-justify-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html
new file mode 100644
index 0000000000..a7892746df
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.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>Reference: margin-left:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
+  align-self: start;
+}
+
+.hl span { justify-self: right!important; }
+.hr span { justify-self: right!important; }
+.vl span { align-self: end!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-001.html b/layout/reftests/css-grid/grid-item-margin-left-auto-001.html
new file mode 100644
index 0000000000..663f0ddec7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-001.html
@@ -0,0 +1,116 @@
+<!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: margin-left:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-auto-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
+  margin-left: auto;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html
new file mode 100644
index 0000000000..6319ef310b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.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>Reference: margin-left:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 0px;
+  align-self: start;
+}
+
+.vlr span { align-self: end!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-002.html b/layout/reftests/css-grid/grid-item-margin-left-auto-002.html
new file mode 100644
index 0000000000..e68ede0132
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-002.html
@@ -0,0 +1,116 @@
+<!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: margin-left:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-auto-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-left: auto;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html
new file mode 100644
index 0000000000..c7f1979279
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html
@@ -0,0 +1,116 @@
+<!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: margin-left:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 0px;
+  justify-self: start;
+}
+
+.hl span { justify-self:end!important; }
+.hr span { justify-self:start!important; }
+.vl span { align-self:end!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-003.html b/layout/reftests/css-grid/grid-item-margin-left-auto-003.html
new file mode 100644
index 0000000000..353f8f02e0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-003.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: margin-left:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-auto-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-left: auto;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html
new file mode 100644
index 0000000000..4501f52fbc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.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>Reference: margin-left:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 0px;
+  justify-self: start;
+}
+
+.vr span  { align-self:start!important; }
+.vlr span { align-self:end!important; }
+.vrl span { align-self:start!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-004.html b/layout/reftests/css-grid/grid-item-margin-left-auto-004.html
new file mode 100644
index 0000000000..3eef662a43
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-004.html
@@ -0,0 +1,116 @@
+<!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: margin-left:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-auto-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-left: auto;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html
new file mode 100644
index 0000000000..b48f2e7156
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.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>Reference: margin-left/right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 0px; /* overconstrained - we'll fix that below */
+  align-self: start;
+}
+
+.hl span { justify-self: center!important; }
+.hr span { justify-self: center!important; }
+.vl span { align-self: center!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html
new file mode 100644
index 0000000000..fb198f796f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.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: margin-left/right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-right-auto-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
+  margin-left: auto;
+  margin-right: auto;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html
new file mode 100644
index 0000000000..dd2006d96c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.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>Reference: margin-left/right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 0px;
+  align-self: start;
+}
+
+span { align-self: center!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html
new file mode 100644
index 0000000000..3dc049dbe9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.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: margin-left/right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-right-auto-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-left: auto;
+  margin-right: auto;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html
new file mode 100644
index 0000000000..7391f9e0fc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html
@@ -0,0 +1,116 @@
+<!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: margin-left/right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 0px;
+  justify-self: start;
+}
+
+.hl span { justify-self:center!important; }
+.hr span { justify-self:center!important; }
+.vl span { align-self:center!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html
new file mode 100644
index 0000000000..4de40bbcc5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html
@@ -0,0 +1,116 @@
+<!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: margin-left/right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-right-auto-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-left: auto;
+  margin-right: auto;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html
new file mode 100644
index 0000000000..7463065f83
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.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>Reference: margin-left/right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 0px;
+  justify-self: start;
+}
+
+span { align-self: center!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html
new file mode 100644
index 0000000000..b4799ab2fc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.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: margin-left/right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-left-right-auto-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-left: auto;
+  margin-right: auto;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html
new file mode 100644
index 0000000000..bfdb07aba0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.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>Reference: margin-right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
+  align-self: start;
+}
+
+.hl span { justify-self: left!important; }
+.hr span { justify-self: left!important; }
+.vl span { align-self: start!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-001.html b/layout/reftests/css-grid/grid-item-margin-right-auto-001.html
new file mode 100644
index 0000000000..6803478ba7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-001.html
@@ -0,0 +1,116 @@
+<!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: margin-right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-right-auto-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
+  margin-right: auto;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html
new file mode 100644
index 0000000000..4b2bd9788b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html
@@ -0,0 +1,118 @@
+<!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: margin-right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-right-auto-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 2px;
+  align-self: start;
+}
+
+.vr span { align-self: end!important; }
+.vrl span { align-self: end!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-002.html b/layout/reftests/css-grid/grid-item-margin-right-auto-002.html
new file mode 100644
index 0000000000..839ffd8399
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-002.html
@@ -0,0 +1,116 @@
+<!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: margin-right:auto + justify-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-right-auto-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-inline-start: 2px solid lime; */
+  border-inline-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-right: auto;
+  align-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-self:start; }
+.jend { justify-self:end; }
+.jflexstart { justify-self:flex-start; }
+.jflexend { justify-self:flex-end; }
+.jselfstart { justify-self:self-start; }
+.jselfend { justify-self:self-end; }
+.jcenter { justify-self:center; }
+.jleft { justify-self:left; }
+.jright { justify-self:right; }
+.jstretch1 { justify-self:stretch; }
+.jstretch2 { justify-self:stretch; width:13px; height:auto; }
+.jstretch3 { justify-self:stretch; height:auto; }
+.jstretch4 { justify-self:stretch; width:auto; }
+.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
+.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
+.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.jauto { justify-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " j" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html
new file mode 100644
index 0000000000..08a01afca4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html
@@ -0,0 +1,116 @@
+<!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: margin-right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 2px;
+  justify-self: start;
+}
+
+.hl span { justify-self:start!important; }
+.hr span { justify-self:end!important; }
+.vl span { align-self:start!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-003.html b/layout/reftests/css-grid/grid-item-margin-right-auto-003.html
new file mode 100644
index 0000000000..ccec8f7dab
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-003.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: margin-right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-right-auto-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-right: auto;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html
new file mode 100644
index 0000000000..d8efb6a018
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.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>Reference: margin-right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 0px 2px 2px;
+  justify-self: start;
+}
+
+.vr span  { align-self:end!important; }
+.vlr span { align-self:start!important; }
+.vrl span { align-self:end!important; }
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-004.html b/layout/reftests/css-grid/grid-item-margin-right-auto-004.html
new file mode 100644
index 0000000000..fc3a2973b5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-004.html
@@ -0,0 +1,116 @@
+<!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: margin-right:auto + align-self</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+  <link rel="match" href="grid-item-margin-right-auto-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  /* border-block-start: 2px solid blue; */
+  border-block-start: 2px solid black;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
+  margin-right: 4px;
+}
+
+span {
+  grid-area: 2 / 2; /* the center 32 x 20 pixel area */
+  display: block;
+  width: 13px;
+  height: 9px;
+  background: grey;
+  border-block-start: 2px solid blue;
+  border-inline-start: 2px solid lime;
+  margin: 1px 1px 2px 2px;
+  margin-right: auto;
+  justify-self: start;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  background: lightgrey;
+}
+abs1 { grid-area: 1 / 1 / 2 / 4; }
+abs2 { grid-area: 1 / 1 / 4 / 2; }
+abs3 { grid-area: 1 / 3 / 4 / 4; }
+abs4 { grid-area: 3 / 1 / 4 / 4; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hl  { -webkit-writing-mode: horizontal-tb; direction:ltr; }
+.hr  { -webkit-writing-mode: horizontal-tb; direction:rtl; }
+.vl  { -webkit-writing-mode: vertical-lr; }
+.vr  { -webkit-writing-mode: vertical-rl; }
+.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
+.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-self:start; }
+.aend { align-self:end; }
+.aflexstart { align-self:flex-start; }
+.aflexend { align-self:flex-end; }
+.aselfstart { align-self:self-start; }
+.aselfend { align-self:self-end; }
+.acenter { align-self:center; }
+.aleft { align-self:left; }
+.aright { align-self:right; }
+.astretch1 { align-self:stretch; }
+.astretch2 { align-self:stretch; width:13px; height:auto; }
+.astretch3 { align-self:stretch; height:auto; }
+.astretch4 { align-self:stretch; width:auto; }
+.astretch5 { align-self:stretch; width:auto; max-width:13px; }
+.astretch6 { align-self:stretch; height:auto; max-height:9px; }
+.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
+.aauto { align-self:auto; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7", "auto" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " a" + test[k];
+      div.appendChild(span);
+      div.appendChild(document.createElement("abs1"));
+      div.appendChild(document.createElement("abs2"));
+      div.appendChild(document.createElement("abs3"));
+      div.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-001-ref.html b/layout/reftests/css-grid/grid-item-mixed-baseline-001-ref.html
new file mode 100644
index 0000000000..310d96f42b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-001-ref.html
@@ -0,0 +1,110 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+.t2 { grid: auto / repeat(3, auto);}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:self-start; }
+.lb { align-self:last baseline; justify-self:self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:35px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:4px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:38px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:24px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:38px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:25px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:35px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:4px" class="fb">M<br>N</span><span style="padding-block-end:11px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:24px" class="fb">M<br>N</span><span style="padding-block-end:11px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:6px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-001.html b/layout/reftests/css-grid/grid-item-mixed-baseline-001.html
new file mode 100644
index 0000000000..e4b35c8c23
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-001.html
@@ -0,0 +1,112 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+.t2 { grid: auto / repeat(3, auto);}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-002-ref.html b/layout/reftests/css-grid/grid-item-mixed-baseline-002-ref.html
new file mode 100644
index 0000000000..b18d33a28d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-002-ref.html
@@ -0,0 +1,114 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: start;
+  justify-content: end;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: end;
+  justify-content: start;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { place-self:first baseline self-start; }
+.lb { place-self:last baseline self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:4px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:24px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:50px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:4px" class="fb">M<br>N</span><span style="padding-block-end:11px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:24px" class="fb">M<br>N</span><span style="padding-block-end:11px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:6px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span style="padding-block-end:0px" class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-002.html b/layout/reftests/css-grid/grid-item-mixed-baseline-002.html
new file mode 100644
index 0000000000..f28452400c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-002.html
@@ -0,0 +1,114 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  place-content: start end;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  place-content: end start;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; place-self:self-start; }
+.lb { align-content:last baseline; place-self:self-end; }
+.s  { place-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-003-ref.html b/layout/reftests/css-grid/grid-item-mixed-baseline-003-ref.html
new file mode 100644
index 0000000000..d135f5ae0b
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-003-ref.html
@@ -0,0 +1,114 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: end;
+  justify-content: start;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: start;
+  justify-content: end;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:self-start; }
+.lb { align-self:last baseline; justify-self:self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:4px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:70px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:24px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:50px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-start:17px; padding-block-end:57px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span  style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:4px" class="fb">M<br>N</span><span style="padding-block-end:11px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:24px" class="fb">M<br>N</span><span style="padding-block-end:11px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:16px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:6px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:16px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:4px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:14px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-003.html b/layout/reftests/css-grid/grid-item-mixed-baseline-003.html
new file mode 100644
index 0000000000..ee4f66065e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-003.html
@@ -0,0 +1,116 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: end;
+  justify-content: start;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: start;
+  justify-content: end;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-004-ref.html b/layout/reftests/css-grid/grid-item-mixed-baseline-004-ref.html
new file mode 100644
index 0000000000..43f343b0c4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-004-ref.html
@@ -0,0 +1,102 @@
+<!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: mixed align-content/self:baseline/last baseline in fragmentated grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+  height: 120px;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(3, auto);
+  grid-auto-rows: 100px;
+  border: 2px solid;
+  margin: 1px;
+  
+}
+.g1 {
+  border-bottom-width: 0;
+  grid-template-rows: 100px 0 0;
+  height: 
+}
+.g2 {
+  border-top-width: 0;
+  grid-template-rows: 0 100px 100px;
+}
+
+.h {
+  visibility: hidden;
+  height: 0;
+}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.g2 span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid hl g1">
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb h">X<br>Z</span>
+<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span>
+</div>
+<div class="grid hl g2">
+<span class="sfb h ">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-mixed-baseline-004.html b/layout/reftests/css-grid/grid-item-mixed-baseline-004.html
new file mode 100644
index 0000000000..c17456c1fa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-004.html
@@ -0,0 +1,82 @@
+<!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: mixed align-content/self:baseline/last baseline in fragmentated grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+  height: 120px;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(3, auto);
+  grid-auto-rows: 100px;
+  border: 2px solid;
+  margin: 1px;
+}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:32px; }
+span:nth-child(2) { font-size:12px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:24px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid hl">
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-self-baseline-001-ref.html b/layout/reftests/css-grid/grid-item-self-baseline-001-ref.html
new file mode 100644
index 0000000000..afc279e614
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-self-baseline-001-ref.html
@@ -0,0 +1,92 @@
+<!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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+  align-items: start;
+  justify-items: start;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid vl"><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid vl"><span class="fb vl pbe">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb" style="order:99">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+<div class="grid"><span class="fb pbe" style="order:99;">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-self-baseline-001.html b/layout/reftests/css-grid/grid-item-self-baseline-001.html
new file mode 100644
index 0000000000..1d3e595938
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-self-baseline-001.html
@@ -0,0 +1,95 @@
+<!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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="grid-item-self-baseline-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span { 
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid"><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid"><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid c"><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c"><span class="jfb vl pbe">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c vl"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vl"><span class="jfb hl pbs">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl pbe">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid"><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html
new file mode 100644
index 0000000000..3a7f2d6bb0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference 001</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  position:relative;
+  background-color: grey;
+  width: 173px;
+  height: 53px;
+}
+
+.item {
+  position: absolute;
+  background: lime;
+  background-clip: content-box;
+}
+#abs > div div {
+  position: absolute;
+}
+.pbox {
+  box-sizing: border-box;
+}
+.p { padding:2px 3px; }
+.m { margin:2px 3px; }
+.c1.p,.c2.p { padding:5px 9px; }
+.c1.m,.c2.m { margin:5px 9px; }
+.b { border:solid black; }
+
+#t1 { width:50px; height: 20px; }
+#t2 { width:50px; height: 20px; }
+#t0 { width:60px; height: 30px; }
+#t3 { width:60px; height: 30px; }
+#t4 { width:150px; height: 50px; }
+#t5 { width:50px; height: 20px; }
+#t6 { width:50px; height: 20px; }
+#t7 { width:60px; height: 30px; }
+#t8 { width:150px; height: 50px; }
+#t9 { width:50px; height: 20px; }
+#tA { width:60px; height: 30px; }
+#tB { width:150px; height: 50px; }
+#tC { width:50px; height: 20px; }
+#tD { width:50px; height: 20px; }
+#tE { width:150px; height: 50px; }
+
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div id="t1" class="item"></div></div>
+<div class="grid"><div id="t2" class="item pbox p"></div></div>
+<div class="grid"><div id="t0" class="item c1 p"></div></div>
+<div class="grid"><div id="t3" class="item c1 pbox p"></div></div>
+<div class="grid"><div id="t4" class="item c2 pbox p"></div></div>
+<div class="grid"><div id="t5" class="item pbox b"></div></div>
+<div class="grid"><div id="t6" class="item pbox p b"></div></div>
+<div class="grid"><div id="t7" class="item c1 pbox p b"></div></div>
+<div class="grid"><div id="t8" class="item c2 pbox p b"></div></div>
+<div class="grid"><div id="t9" class="item pbox m"></div></div>
+<div class="grid"><div id="tA" class="item c1 pbox m"></div></div>
+<div class="grid"><div id="tB" class="item c2 pbox m"></div></div>
+<div class="grid"><div id="tC" class="item pbox p m"></div></div>
+<div class="grid"><div id="tD" class="item pbox p b m"></div></div>
+<div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div>
+</div>
+
+<div id="abs" style="float:left">
+<div class="grid"><div id="t1" class="item"></div></div>
+<div class="grid"><div id="t2" class="item pbox p"></div></div>
+<div class="grid"><div id="t0" class="item c1 p"></div></div>
+<div class="grid"><div id="t3" class="item c1 pbox p"></div></div>
+<div class="grid"><div id="t4" class="item c2 pbox p"></div></div>
+<div class="grid"><div id="t5" class="item pbox b"></div></div>
+<div class="grid"><div id="t6" class="item pbox p b"></div></div>
+<div class="grid"><div id="t7" class="item c1 pbox p b"></div></div>
+<div class="grid"><div id="t8" class="item c2 pbox p b"></div></div>
+<div class="grid"><div id="t9" class="item pbox m"></div></div>
+<div class="grid"><div id="tA" class="item c1 pbox m"></div></div>
+<div class="grid"><div id="tB" class="item c2 pbox m"></div></div>
+<div class="grid"><div id="tC" class="item pbox p m"></div></div>
+<div class="grid"><div id="tD" class="item pbox p b m"></div></div>
+<div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-001.html b/layout/reftests/css-grid/grid-item-sizing-percent-001.html
new file mode 100644
index 0000000000..cc5948968c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-001-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position:relative;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  grid-template-rows: 20px 30px;
+  width: 173px;
+  height: 53px;
+  justify-items: start;
+  align-items: start;
+}
+
+.item {
+  width: 100%;
+  height: 100%;
+  background: lime;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+#abs > div div {
+  position: absolute;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.p { padding:10% 6%; }
+.m { margin:10% 6%; }
+.b { border:solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"></div></div>
+<div class="grid"><div class="item pbox p"></div></div>
+<div class="grid"><div class="item c1 p"></div></div>
+<div class="grid"><div class="item c1 pbox p"></div></div>
+<div class="grid"><div class="item c2 pbox p"></div></div>
+<div class="grid"><div class="item pbox b"></div></div>
+<div class="grid"><div class="item pbox p b"></div></div>
+<div class="grid"><div class="item c1 pbox p b"></div></div>
+<div class="grid"><div class="item c2 pbox p b"></div></div>
+<div class="grid"><div class="item pbox m"></div></div>
+<div class="grid"><div class="item c1 pbox m"></div></div>
+<div class="grid"><div class="item c2 pbox m"></div></div>
+<div class="grid"><div class="item pbox p m"></div></div>
+<div class="grid"><div class="item pbox p b m"></div></div>
+<div class="grid"><div class="item c2 pbox p b m"></div></div>
+</div>
+
+<div id="abs" style="float:left">
+<div class="grid"><div class="item"></div></div>
+<div class="grid"><div class="item pbox p"></div></div>
+<div class="grid"><div class="item c1 p"></div></div>
+<div class="grid"><div class="item c1 pbox p"></div></div>
+<div class="grid"><div class="item c2 pbox p"></div></div>
+<div class="grid"><div class="item pbox b"></div></div>
+<div class="grid"><div class="item pbox p b"></div></div>
+<div class="grid"><div class="item c1 pbox p b"></div></div>
+<div class="grid"><div class="item c2 pbox p b"></div></div>
+<div class="grid"><div class="item pbox m"></div></div>
+<div class="grid"><div class="item c1 pbox m"></div></div>
+<div class="grid"><div class="item c2 pbox m"></div></div>
+<div class="grid"><div class="item pbox p m"></div></div>
+<div class="grid"><div class="item pbox p b m"></div></div>
+<div class="grid"><div class="item c2 pbox p b m"></div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html
new file mode 100644
index 0000000000..11faf4f6c0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+}
+.c1 {
+  width: 60px;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 25px; }
+.minw .item { min-width: 25px; }
+.maxw .c1.item { max-width: 75px; }
+.minw .c1.item { min-width: 75px; }
+.maxw .c2.item { max-width: 75px; }
+.minw .c2.item { min-width: 75px; }
+
+.p { padding:3px 5px 10% 10px; }
+.c1.p, .c2.p { padding:3px 5px 10% 30px; }
+.m { margin:3px 5px 10% 5px; }
+.c1.m, .c2.m { margin:3px 5px 10% 15px; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(8px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(11px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-002.html b/layout/reftests/css-grid/grid-item-sizing-percent-002.html
new file mode 100644
index 0000000000..10687dbcf5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-002.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-002-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 50%; }
+.minw .item { min-width: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html
new file mode 100644
index 0000000000..fb4d15ff83
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 25px; }
+.minw .item { min-width: 25px; }
+.maxw .c1.item { max-width: 75px; }
+.minw .c1.item { min-width: 75px; }
+.maxw .c2.item { max-width: 75px; }
+.minw .c2.item { min-width: 75px; }
+
+.p { padding:3px 5px 10% 10px; }
+.c1.p, .c2.p { padding:3px 5px 10% 30px; }
+.m { margin:3px 5px 10% 5px; }
+.c1.m, .c2.m { margin:3px 5px 10% 15px; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/0.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-003.html b/layout/reftests/css-grid/grid-item-sizing-percent-003.html
new file mode 100644
index 0000000000..f3f71d2cc4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-003.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-003-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 50%; }
+.minw .item { min-width: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html
new file mode 100644
index 0000000000..51f71e6628
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background-color: grey;
+  grid-template-rows: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 90px;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-height: 50%; }
+.minw .item { min-height: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(43.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(51.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-columns:calc(35px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(57.15px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(46px/.7)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(46px/.7)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-004.html b/layout/reftests/css-grid/grid-item-sizing-percent-004.html
new file mode 100644
index 0000000000..ce2666980d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-004.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-004-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background-color: grey;
+  grid-template-rows: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-height: 50%; }
+.minw .item { min-height: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-sizing-px-001.html b/layout/reftests/css-grid/grid-item-sizing-px-001.html
new file mode 100644
index 0000000000..a004365fc2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-px-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item 'px' sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-001-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position:relative;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  grid-template-rows: 20px 30px;
+  width: 173px;
+  height: 53px;
+}
+
+.item {
+  width: 100%;
+  height: 100%;
+  background: lime;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+#abs > div div {
+  position: absolute;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.p { padding:2px 3px; }
+.m { margin:2px 3px; }
+.c1.p,.c2.p { padding:5px 9px; }
+.c1.m,.c2.m { margin:5px 9px; }
+.b { border:solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"></div></div>
+<div class="grid"><div class="item pbox p"></div></div>
+<div class="grid"><div class="item c1 p"></div></div>
+<div class="grid"><div class="item c1 pbox p"></div></div>
+<div class="grid"><div class="item c2 pbox p"></div></div>
+<div class="grid"><div class="item pbox b"></div></div>
+<div class="grid"><div class="item pbox p b"></div></div>
+<div class="grid"><div class="item c1 pbox p b"></div></div>
+<div class="grid"><div class="item c2 pbox p b"></div></div>
+<div class="grid"><div class="item pbox m"></div></div>
+<div class="grid"><div class="item c1 pbox m"></div></div>
+<div class="grid"><div class="item c2 pbox m"></div></div>
+<div class="grid"><div class="item pbox p m"></div></div>
+<div class="grid"><div class="item pbox p b m"></div></div>
+<div class="grid"><div class="item c2 pbox p b m"></div></div>
+</div>
+
+<div id="abs" style="float:left">
+<div class="grid"><div class="item"></div></div>
+<div class="grid"><div class="item pbox p"></div></div>
+<div class="grid"><div class="item c1 p"></div></div>
+<div class="grid"><div class="item c1 pbox p"></div></div>
+<div class="grid"><div class="item c2 pbox p"></div></div>
+<div class="grid"><div class="item pbox b"></div></div>
+<div class="grid"><div class="item pbox p b"></div></div>
+<div class="grid"><div class="item c1 pbox p b"></div></div>
+<div class="grid"><div class="item c2 pbox p b"></div></div>
+<div class="grid"><div class="item pbox m"></div></div>
+<div class="grid"><div class="item c1 pbox m"></div></div>
+<div class="grid"><div class="item c2 pbox m"></div></div>
+<div class="grid"><div class="item pbox p m"></div></div>
+<div class="grid"><div class="item pbox p b m"></div></div>
+<div class="grid"><div class="item c2 pbox p b m"></div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-stretch-001-ref.html
new file mode 100644
index 0000000000..3f53b119d8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-stretch-001-ref.html
@@ -0,0 +1,109 @@
+<!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: align-items:stretch / justify-items:stretch </title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 25px 5px / 3px 21px 1px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 2px;
+  width: 40px;
+  height: 40px;
+  align-items: start;
+  justify-items: start;
+}
+
+span {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  grid-area: 2 / 2 / 3 / 3; /* the center area */
+  display: block;
+  width: 17px;
+  height: 13px;
+  background: lightgrey;
+  /* good for manual debugging but causes anti-aliasing diff: */
+  /* border-block-start: 2px solid blue; */
+  /* border-inline-start: 2px solid lime; */
+  border-block-start: 2px solid black;
+  border-inline-start: 2px solid black;
+  margin: 1px 1px 2px 2px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  width:2px; height:2px;
+  background: black;
+}
+abs1 { top:auto; left:auto; }
+abs2 { top:auto; right:auto; }
+abs3 { bottom:auto; left:auto; }
+abs4 { bottom:auto; right:auto; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.stretch1 { }
+.stretch2 { height:auto; }
+.stretch3 { height:auto; max-height:13px; }
+.stretch4 { width:auto; }
+.stretch5 { width:auto; max-width:17px; }
+.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
+.stretch7 { width:auto; height:auto; }
+
+  </style>
+</head>
+<body>
+<pre>
+There should be no red areas.
+All grey areas should have a black dot in each corner.
+</pre>
+
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " " + test[k];
+      div.appendChild(span);
+      span.appendChild(document.createElement("abs1"));
+      span.appendChild(document.createElement("abs2"));
+      span.appendChild(document.createElement("abs3"));
+      span.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-stretch-001.html b/layout/reftests/css-grid/grid-item-stretch-001.html
new file mode 100644
index 0000000000..cf5cc0fd20
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-stretch-001.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: align-items:stretch / justify-items:stretch </title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-items-property">
+  <link rel="match" href="grid-align-content-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 1px 25px 5px / 3px 21px 1px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 2px;
+  width: 40px;
+  height: 40px;
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+span {
+  position: relative;
+  grid-area: 2 / 2 / 3 / 3; /* the center area */
+  display: block;
+  width: 17px;
+  height: 13px;
+  background: red;
+  /* good for manual debugging but causes anti-aliasing diff: */
+  /* border-block-start: 2px solid blue; */
+  /* border-inline-start: 2px solid lime; */
+  border-block-start: 2px solid black;
+  border-inline-start: 2px solid black;
+  margin: 1px 1px 2px 2px;
+}
+
+abs1,abs2,abs3,abs4 {
+  position: absolute;
+  top:0;left:0;bottom:0;right:0;
+  width:2px; height:2px;
+  background: black;
+}
+abs1 { top:auto; left:auto; }
+abs2 { top:auto; right:auto; }
+abs3 { bottom:auto; left:auto; }
+abs4 { bottom:auto; right:auto; }
+fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: lightgrey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.stretch1 { }
+.stretch2 { height:auto; }
+.stretch3 { height:auto; max-height:13px; }
+.stretch4 { width:auto; }
+.stretch5 { width:auto; max-width:17px; }
+.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
+.stretch7 { width:auto; height:auto; }
+
+  </style>
+</head>
+<body>
+<pre>
+There should be no red areas.
+All grey areas should have a black dot in each corner.
+</pre>
+
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
+             "stretch6", "stretch7" ];
+for (var i = 0; i < gridwm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    for (var k = 0; k < test.length; ++k) {
+      var div = document.createElement("div");
+      div.className = "grid " + gridwm[i];
+      var span = document.createElement("span");
+      span.className = wm[j] + " " + test[k];
+      div.appendChild(span);
+      span.appendChild(document.createElement("fill"));
+      span.appendChild(document.createElement("abs1"));
+      span.appendChild(document.createElement("abs2"));
+      span.appendChild(document.createElement("abs3"));
+      span.appendChild(document.createElement("abs4"));
+
+      document.body.appendChild(div)
+    }
+    if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html
new file mode 100644
index 0000000000..8b93ff9aeb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html
@@ -0,0 +1,176 @@
+<!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 table 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;
+  align-items: start;
+  justify-items: start;
+}
+.r { grid: 4px / 32px; }
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  min-width: 0;
+  min-height: 0px;
+}
+x { display:block; width:16px; height:16px; }
+
+.w20 { width: 20px }
+.wfill { width:32px }
+.mxw2 { width: 2px }
+.mxw10 { width: 10px }
+.mw20 { width: 20px }
+
+.h20 { height: 20px }
+.hfill { height:32px }
+.mxh10 { height: 10px }
+.mxh2 { height: 2px }
+.mh20 { height: 20px }
+.h16 { height: 16px } /* XXX to workaround bug 307866 */
+
+  </style>
+</head>
+<body>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h16"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h16 wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h16 wfill"><td><x></x></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0 wfill"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0 wfill"><td><x></x></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-001.html b/layout/reftests/css-grid/grid-item-table-stretch-001.html
new file mode 100644
index 0000000000..35f542fb57
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-001.html
@@ -0,0 +1,178 @@
+<!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 table 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=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-table-stretch-001-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; }
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+x { display:block; width:16px; height:16px; }
+
+.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"><table cellpadding=0 cellspacing=0><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><td><x></x></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><td><x></x></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><td><x></x></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
new file mode 100644
index 0000000000..7d34f13139
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html
@@ -0,0 +1,191 @@
+<!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 table items that has a caption 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=1316051">
+  <style type="text/css">
+* { vertical-align: bottom; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 32px / 4px;
+  margin-right:20px;
+  align-items: start;
+  justify-items: start;
+}
+.r { grid: 4px / 32px; }
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+caption { border: 1px dashed blue; }
+x { display:block; width:16px; height:16px; }
+t { display:block; width:6px; height:6px; }
+
+.w20 { width: 20px }
+.mxw2 { width: 2px }
+.mxw10 { width: 10px }
+.mw20 { width: 20px }
+.wfill { width:32px }
+
+.h20 { height: 20px }
+.mxh10 { height: 10px }
+.mxh2 { height: 2px }
+.mh20 { height: 20px }
+.h16 { height: 16px } /* XXX to workaround bug 307866 */
+.h8 { height: 8px } /* XXX to workaround bug 307866 */
+.w8 { width: 8px } /* XXX to workaround bug 307866 */
+.hfill { height:14px }
+
+.as, .an, .end { margin-top:6px; }
+.sa, .na, .end { margin-left:-4px; }
+.sa.mw20, .na.mw20, .end.mw20 { margin-left:-16px; }
+.sa.w20, .na.w20, .end.w20 { margin-left:-16px; }
+.sa caption, .na caption, .end caption { width:6px; }
+.sa.mw20 caption, .na.mw20 caption, .end.mw20 caption { width:18px; }
+.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:18px; }
+.r .as, .r .an, .r .end { margin-top:-22px; }
+.as.h20, .an.h20, .end.h20 { margin-top:-6px; }
+.r .as.h20, .r .an.h20, .r .end.h20 { margin-top:-34px; }
+.r .sa, .r .na, .r .end { margin-left:14px; }
+.r .sa.w20, .r .na.w20, .r .end.w20 { margin-left:12px; }
+.r .sa caption, .r .na caption, .r .end caption { width:auto; }
+  </style>
+</head>
+<body>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h8 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h8"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an mh0"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-002.html b/layout/reftests/css-grid/grid-item-table-stretch-002.html
new file mode 100644
index 0000000000..c765e633cb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-002.html
@@ -0,0 +1,180 @@
+<!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 table items that has a caption 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=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-table-stretch-002-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; }
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+caption { border: 1px dashed blue; }
+x { display:block; width:16px; height:16px; }
+t { display:block; width:6px; height:6px; }
+
+.end {align-self:end; justify-self:end}
+.na {                    justify-self:end}
+.sa {align-self:stretch; justify-self:end}
+.an {align-self:end;                     }
+.as {align-self:end; 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"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-003-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-003-ref.html
new file mode 100644
index 0000000000..bed758e8eb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-003-ref.html
@@ -0,0 +1,191 @@
+<!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 table items that has a side-caption 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=1316051">
+  <style type="text/css">
+* { vertical-align: bottom; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 32px / 4px;
+  margin-right:20px;
+  align-items: start;
+  justify-items: start;
+}
+.r { grid: 4px / 32px; }
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+caption { border: 1px dashed blue; caption-side: right; }
+x { display:block; width:16px; height:16px; }
+t { display:block; width:6px; height:6px; }
+
+.w20 { width: 20px }
+.mxw2 { width: 2px }
+.mxw10 { width: 10px }
+.mw20 { width: 20px }
+.wfill { width:14px }
+
+.h20 { height: 20px }
+.mxh10 { height: 10px }
+.mxh2 { height: 2px }
+.mh20 { height: 20px }
+.h16 { height: 16px } /* XXX to workaround bug 307866 */
+.h8 { height: 8px } /* XXX to workaround bug 307866 */
+.w8 { width: 8px } /* XXX to workaround bug 307866 */
+.hfill { height:32px }
+
+.as, .an, .end { margin-top:14px; }
+.sa, .na, .end { margin-left:-22px; }
+.sa.mw20, .na.mw20, .end.mw20 { margin-left:-34px; }
+.sa.w20, .na.w20, .end.w20 { margin-left:-34px; }
+.sa caption, .na caption, .end caption { width:px; }
+.sa.mw20 caption, .na.mw20 caption, .end.mw20 caption { width:px; }
+.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:px; }
+.r .as, .r .an, .r .end { margin-top:-14px; }
+.as.h20, .an.h20, .end.h20 { margin-top:12px; }
+.r .as.h20, .r .an.h20, .r .end.h20 { margin-top:-16px; }
+.r .sa, .r .na, .r .end { margin-left:6px; }
+.r .sa.w20, .r .na.w20, .r .end.w20 { margin-left:-6px; }
+.r .sa caption, .r .na caption, .r .end caption { width:aauto; }
+  </style>
+</head>
+<body>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h8 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h8"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h8"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an mh0"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h8 mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="w8 an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-003.html b/layout/reftests/css-grid/grid-item-table-stretch-003.html
new file mode 100644
index 0000000000..601f026d56
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-003.html
@@ -0,0 +1,180 @@
+<!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 table items that has a side-caption 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=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-table-stretch-002-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; }
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+caption { border: 1px dashed blue; caption-side: right; }
+x { display:block; width:16px; height:16px; }
+t { display:block; width:6px; height:6px; }
+
+.end {align-self:end; justify-self:end}
+.na {                    justify-self:end}
+.sa {align-self:stretch; justify-self:end}
+.an {align-self:end;                     }
+.as {align-self:end; 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"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:20px--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-height:0--></pre>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!----></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:20px--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--min-width:0--></pre>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--width:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+<pre><!--height:20px--></pre>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html
new file mode 100644
index 0000000000..970cae2f06
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html
@@ -0,0 +1,67 @@
+<!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 table items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 60px / 100px;
+  padding: 10px 4px 3px 6px;
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:20px; height:20px; }
+
+.hma10 { margin: 7px 3px 1px 0; }
+.hmaa  { margin: 7px 0 1px 0; }
+.vma10 { margin: 0 7px 3px 1px; }
+.vmaa  { margin: 0 7px 0 1px; }
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hma10 je"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hmaa jc"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hma10 je"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hmaa jc"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:82px"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vma10 ae"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vmaa ac"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vma10 ae"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vmaa ac"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:34px; width:100px"><caption class="hma10 js"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:34px; width:100px"><caption class="hmaa js"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:39px; width:100px"><caption class="vma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 style="height:42px; width:100px"><caption class="vmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:79px"><caption class="hma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:82px"><caption class="hmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:74px"><caption class="vma10 js"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:74px"><caption class="vmaa js"><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-table-stretch-004.html b/layout/reftests/css-grid/grid-item-table-stretch-004.html
new file mode 100644
index 0000000000..e6e8a96bb2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-table-stretch-004.html
@@ -0,0 +1,62 @@
+<!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 table items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-table-stretch-004-ref.html">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 10px 60px 3px / 6px 100px 4px;
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  grid-area:2/2;
+}
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:20px; height:20px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hmaa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vmaa"><caption><x></x></caption><td><t></t></td></table></div>
+
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="hma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="hmaa"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="vma10"><x></x></caption><td><t></t></td></table></div>
+<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="vmaa"><x></x></caption><td><t></t></td></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html
new file mode 100644
index 0000000000..76d14feca2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html
@@ -0,0 +1,77 @@
+<!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 video items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 50px / 100px;
+  padding: 10px 4px 3px 6px;
+}
+
+video {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+}
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px 0; }
+.hmaa  { margin: 7px 0 1px 0; }
+.vma10 { margin: 0 7px 3px 1px; }
+.vmaa  { margin: 0 7px 0 1px; }
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+
+.mxw, .mxh { width: 32px; height: 16px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><video class="m" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
+<div class="grid"><video class="hma10 je" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
+<div class="grid"><video class="hmaa jc" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
+<div class="grid"><video class="vr hma10 je" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
+<div class="grid"><video class="vr hmaa jc" src="support/colors-16x8.webm" style="width:80px; height:40px"></div>
+<div class="grid"><video class="vr" src="support/colors-16x8.webm" style="width:96px; height:48px"></div>
+
+<div class="grid"><video class="vma10 ae" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
+<div class="grid"><video class="vmaa ac" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
+<div class="grid"><video class="vr vma10 ae" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
+<div class="grid"><video class="vr vmaa ac" src="support/colors-16x8.webm" style="width:90px; height:45px"></div>
+<div class="grid"><video class="vr p vma10 as" src="support/colors-16x8.webm" style="width:82px; height:41px"></div>
+<div class="grid"><video class="vr p vmaa ac" src="support/colors-16x8.webm" style="width:82px; height:41px"></div>
+
+<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hma10 je" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hmaa jc" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-item-video-stretch-001.html b/layout/reftests/css-grid/grid-item-video-stretch-001.html
new file mode 100644
index 0000000000..dd8929d339
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-video-stretch-001.html
@@ -0,0 +1,71 @@
+<!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 video items with auto-margins and/or orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="grid-item-video-stretch-001-ref.html">
+  <style type="text/css">
+* { vertical-align: top; }
+.grid {
+  display: inline-grid;
+  border: 3px solid grey;
+  grid: 10px 50px 3px / 6px 100px 4px;
+}
+
+video {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  grid-area: 2/2;
+}
+
+.m { margin: 7px 3px 1px 5px; }
+.p { padding: 3px 1px 5px 7px; }
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+.mxw { max-width: 32px; }
+.mxh { max-height: 16px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><video class="m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="vma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr vmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="vr p vmaa" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div>
+
+<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hma10" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr hmaa" src="support/colors-16x8.webm"></div>
+<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-justify-content-001-ref.html b/layout/reftests/css-grid/grid-justify-content-001-ref.html
new file mode 100644
index 0000000000..fa92e6cbf4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-justify-content-001-ref.html
@@ -0,0 +1,92 @@
+<!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: justify-content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 40px;
+}
+
+item1,item2,item3 {
+  display: block;
+  position: relative;
+  background: grey;
+  align-self: stretch;
+  justify-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.jend * , .jflexend * { offset-inline-start:17px; }
+.jcenter * {  offset-inline-start:8.5px; }
+.hr.jleft * , .vlr.jleft * { offset-inline-start:17px; }
+.hl.jright * , .vrl.jright * , .vl.jright * , .vr.jright * { offset-inline-start:17px; }
+
+.jspace-between item2 { offset-inline-start:8.5px; }
+.jspace-between item3 { offset-inline-start:17px; }
+
+.jspace-around item1 { offset-inline-start:2.85px;  }
+.jspace-around item2 { offset-inline-start:8.5px;  }
+.jspace-around item3 { offset-inline-start:14.16px;  }
+
+.jspace-evenly item1 { offset-inline-start:4.25px;  }
+.jspace-evenly item2 { offset-inline-start:8.5px;  }
+.jspace-evenly item3 { offset-inline-start:12.75px;  }
+
+.jstretch2 { grid-template-columns:1fr 7px 5px; }
+.jstretch3 { grid-template-columns:19.5px 15.5px 5px; }
+.jstretch4 { grid-template-columns:16.66666px 12.66666px 10.66666px; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid j" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-justify-content-001.html b/layout/reftests/css-grid/grid-justify-content-001.html
new file mode 100644
index 0000000000..b86dadb13e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-justify-content-001.html
@@ -0,0 +1,90 @@
+<!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: justify-content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+  <link rel="match" href="grid-justify-content-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 40px;
+}
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  align-self: stretch;
+  justify-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.jstart { justify-content:start; }
+.jend { justify-content:end; }
+.jflexstart { justify-content:flex-start; }
+.jflexend { justify-content:flex-end; }
+.jcenter { justify-content:center; }
+.jleft { justify-content:left; }
+.jright { justify-content:right; }
+
+.jspace-between{ justify-content:space-between; }
+.jspace-around { justify-content:space-around;  }
+.jspace-evenly { justify-content:space-evenly;  }
+
+.jstretch1, .jstretch2, .jstretch3, .jstretch4 { justify-content:stretch; }
+.jstretch2 { grid-template-columns: minmax(11px,auto) 7px 5px; }
+.jstretch3 { grid-template-columns: minmax(11px,auto) minmax(7px,auto) 5px; }
+.jstretch4 { grid-template-columns: minmax(11px,auto) minmax(7px,auto) minmax(5px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid j" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-justify-content-002-ref.html b/layout/reftests/css-grid/grid-justify-content-002-ref.html
new file mode 100644
index 0000000000..996ef2a9d8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-justify-content-002-ref.html
@@ -0,0 +1,62 @@
+<!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: Testing track distribution rounding errors</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-rows: 7px;
+  border: 1px solid blue;
+  background: black;
+}
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var justify = [ "" ];
+var cols = [ "151", "1" ];
+var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159",
+               "160", "161", "301", "302", "303", "304", "305", "306", "307",
+               "308", "309", "310", "311" ];
+for (var c = 0; c < cols.length; ++c) {
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "float:left; margin:1px;");
+  for (var j = 0; j < justify.length; ++j) {
+    for (var w = 0; w < widths.length; ++w) {
+      var grid = document.createElement('div');
+      grid.style.width = widths[w]+"px";
+      if (widths[w] > 300) {
+        grid.style.gridTemplateColumns = "2px " + (widths[w]-4) + "px 2px";
+      } else {
+        grid.style.gridTemplateColumns = "1px " + (widths[w]-2) + "px 1px";
+      }
+      grid.className = "grid " + justify[j];
+      if (cols[c] > 1) {
+        var x = document.createElement('x');
+        x.style.gridColumn = "2 / 3";
+        x.setAttribute('col', cols[c])
+        grid.appendChild(x);
+      }
+      chunk.appendChild(grid);
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-justify-content-002.html b/layout/reftests/css-grid/grid-justify-content-002.html
new file mode 100644
index 0000000000..73220d041c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-justify-content-002.html
@@ -0,0 +1,67 @@
+<!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: Testing track distribution rounding errors</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+  <link rel="match" href="grid-justify-content-002-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(1px,auto);
+  grid-template-rows: 0px 7px;
+  border: 1px solid blue;
+}
+.stretch       { justify-content: stretch; }
+/* I don't know how to make a reference for these so they are only included to
+   trigger possible assertions: */
+.space-between { justify-content: space-between; visibility:hidden; }
+.space-around  { justify-content: space-around;  visibility:hidden; }
+.space-evenly  { justify-content: space-evenly;  visibility:hidden; }
+
+.grid :last-child, .grid :nth-child(2) { background:black; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+var justify = [ "stretch", "space-between", "space-around", "space-evenly" ];
+var cols = [ "151", "1" ];
+var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159",
+               "160", "161", "301", "302", "303", "304", "305", "306", "307",
+               "308", "309", "310", "311" ];
+for (var c = 0; c < cols.length; ++c) {
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "float:left; margin:1px");
+  for (var j = 0; j < justify.length; ++j) {
+    for (var w = 0; w < widths.length; ++w) {
+      var grid = document.createElement('div');
+      grid.style.width = widths[w]+"px";
+      grid.className = "grid " + justify[j];
+      var span = document.createElement('span');
+      span.style.gridColumn = "1 / span " + cols[c];
+      grid.appendChild(span);
+      for (var x = 0; x < cols[c]; ++x) {
+        grid.appendChild(document.createElement('x'));
+      }
+      chunk.appendChild(grid);
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-justify-content-003-ref.html b/layout/reftests/css-grid/grid-justify-content-003-ref.html
new file mode 100644
index 0000000000..e22c4c9dd6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-justify-content-003-ref.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>Reference: Testing track fallback values</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(1px,auto);
+  grid-template-rows: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  margin-right: 20px;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var justify = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "end",
+   "center",
+   "center",
+   "end",
+   "end safe",
+   "start",
+   "center",
+   "end",
+   "end safe",
+   "left",
+   "end",
+];
+var cols = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ];
+var widths = [ "0", "1", "2", "3", "4", "5", "6" ];
+for (var j = 0; j < justify.length; ++j) {
+  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < cols.length; ++c) {
+    for (var w = 0; w < widths.length; ++w) {
+     // set this to true if you want to see all tests
+     var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
+     if (run_test) {
+      var grid = document.createElement('div');
+      grid.style.width = widths[w]+"px";
+      grid.className = "grid";
+      grid.style.justifyContent = justify[j];
+      var span = document.createElement('span');
+      span.style.gridColumn = "1 / span " + cols[c];
+      grid.appendChild(span);
+      for (var x = 0; x < cols[c]; ++x) {
+        grid.appendChild(document.createElement('x'));
+      }
+      if (j < 5) { // The stretch tests.
+        if (c == 1)
+          grid.style.background = 'pink'
+      }
+      if (j == 6 && cols[c] == 1) { // The 'end safe' tests.
+        if (widths[w] != 0) grid.style.justifyContent = 'end';
+      }
+      if (j == 7 && cols[c] == 1) { // The 'center safe' tests.
+        if (widths[w] != 0) grid.style.justifyContent = 'center';
+      }
+      if (j > 15) { // The space-around and space-evenly tests.
+        if (cols[c] == 1) {
+          if (widths[w] == 0) {
+            if (grid.style.justifyContent != 'end') {
+              grid.style.justifyContent = 'start';
+            }
+          } else {
+            grid.style.justifyContent = 'center';
+          }
+        }
+      }
+      chunk.appendChild(grid);
+     }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-justify-content-003.html b/layout/reftests/css-grid/grid-justify-content-003.html
new file mode 100644
index 0000000000..87a612ec96
--- /dev/null
+++ b/layout/reftests/css-grid/grid-justify-content-003.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing 'justify-content' fallback values</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+  <link rel="match" href="grid-justify-content-003-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(1px,auto);
+  grid-template-rows: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  margin-right: 20px;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var justify = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end unsafe",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start unsafe",
+   "end unsafe",
+   "center unsafe",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-between end unsafe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly flex-end",
+   "space-evenly flex-end safe",
+   "space-evenly flex-start unsafe",
+   "space-evenly right",
+];
+var cols = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ];
+var widths = [ "0", "1", "2", "3", "4", "5", "6" ];
+for (var j = 0; j < justify.length; ++j) {
+  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < cols.length; ++c) {
+    for (var w = 0; w < widths.length; ++w) {
+     // set this to true if you want to see all tests
+     var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
+     if (run_test) {
+      var grid = document.createElement('div');
+      grid.style.width = widths[w]+"px";
+      grid.className = "grid";
+      grid.style.justifyContent = justify[j];
+      var span = document.createElement('span');
+      span.style.gridColumn = "1 / span " + cols[c];
+      grid.appendChild(span);
+      for (var x = 0; x < cols[c]; ++x) {
+        grid.appendChild(document.createElement('x'));
+      }
+      chunk.appendChild(grid);
+     }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html
new file mode 100644
index 0000000000..57332222e2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html
@@ -0,0 +1,90 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  border: dashed blue;
+  float: left;
+  clear: left;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
+.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
+
+span {
+  display: block;
+  float: left;
+  clear: left;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:46px"><x></x></span>
+<span class="r1" style="margin-left:41px; width:82px"><x></x></span>
+<span class="c3" style="margin-left:77px; "><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+</div>
+<div class="grid" style="">
+<span class="c1" style="width:410px"><x></x></span>
+<span class="r1" style="margin-left:41px; width:446px"><x></x></span>
+<span class="c3" style="margin-left:441px;"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="width:224px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+</div>
+
+<div class="grid" style="">
+<span class="c1" style="width:510px"><x></x></span>
+<span class="r1" style="margin-left:41px; width:546px"><x></x></span>
+<span class="c3" style="margin-left:541px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:114px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:222px; width:83px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="margin-left:114px; width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3" style="margin-left:222px; width:83px"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-001.html b/layout/reftests/css-grid/grid-max-sizing-flex-001.html
new file mode 100644
index 0000000000..56adb9e681
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-001.html
@@ -0,0 +1,90 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(0,1fr);
+  border: dashed blue;
+  float: left;
+  clear: left;
+  justify-items: stretch;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; }
+.c3 { grid-column: 3 / span 1; min-width:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+<span class="r1" style="min-width:30px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="width:300px"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html
new file mode 100644
index 0000000000..cc2e665f1d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html
@@ -0,0 +1,90 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: dashed blue;
+  clear: left;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; margin-top:1px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
+.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 2px 5px 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1" style="width:371px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:371px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:371px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:505px"><x></x></span>
+<span class="r1" style="margin-left:136px;"><x></x></span>
+<span class="c3" style="margin-left:536px; width:106px"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="width:224px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:572px"><x></x></span>
+<span class="r1" style="margin-left:103px;"><x></x></span>
+<span class="c3" style="margin-left:603px; width:72px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-002.html b/layout/reftests/css-grid/grid-max-sizing-flex-002.html
new file mode 100644
index 0000000000..d86498207a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-002.html
@@ -0,0 +1,89 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(0,1fr);
+  border: dashed blue;
+  justify-items: stretch;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; }
+.c3 { grid-column: 3 / span 1; min-width:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+<span class="r1" style="min-width:30px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="width:300px"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html
new file mode 100644
index 0000000000..bb6c3390c8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html
@@ -0,0 +1,88 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: 3px dashed blue;
+  width: 794px;
+}
+
+.c1 { min-height:40px; margin-top:1px; }
+.r1 { min-height:70px; margin-top:38px; }
+.c3 { min-height:0; margin-top:138px; }
+
+.gc1 { grid-row: 1 / span 2; min-height:40px; }
+.gr1 { grid-row: 2 / span 3; min-height:70px; }
+.gc3 { grid-row: 3 / span 1; min-height:0; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-height: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+td {
+  vertical-align:top;
+}
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="height:43px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;margin-left:5px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="display:inline-block; margin-left:5px; height:43px"><x>&nbsp;</x></span>
+<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:27px;"><x>&nbsp;</x></span>
+<tr><td><span class="c3" style="margin-left:5px; margin-top:-52px; height:17px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="height:44px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid" style="height:100px;">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="height:40px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:26px; min-height:65px;"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:26px; min-height:65px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:26px; min-height:65px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="display:inline-block; margin-left:5px; height:40px"><x>&nbsp;</x></span>
+<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:28px;"><x>&nbsp;</x></span>
+<tr><td><span class="c3" style="margin-left:5px; margin-top:-53px; height:17px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-003.html b/layout/reftests/css-grid/grid-max-sizing-flex-003.html
new file mode 100644
index 0000000000..83244c85ae
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-003.html
@@ -0,0 +1,74 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-rows: minmax(0,1fr);
+  border: 3px dashed blue;
+  justify-items: stretch;
+  justify-content: start;
+  align-content: start;
+}
+
+.c1 { grid-row: 1 / span 2; min-height:40px; }
+.r1 { grid-row: 2 / span 3; min-height:70px; }
+.c3 { grid-row: 3 / span 1; min-height:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-height: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+}
+
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid" style="height:100px;">
+<span class="c1" style="min-height:20px"><x></x></span>
+<span class="r1" style="min-height:10px"><x></x></span>
+<span class="r1" style="min-height:30px"><x></x></span>
+<span class="r1" style="min-height:10px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="height:30px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="height:40px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
new file mode 100644
index 0000000000..6446c0ee64
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
@@ -0,0 +1,120 @@
+<!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: Testing track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: 3px dashed blue;
+  margin-bottom:20px;
+  float: left;
+  clear: left;
+  position:relative;
+}
+
+.c1 { min-height:20px; min-width:10px;  }
+.c2 { min-height:20px; min-width:10px; }
+.c3 { min-height:0;    min-width:20px; }
+.r1 { min-height:10px;  }
+.x1 { min-height:10px; min-width:0px; border-style:none; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid flex" style="width:0;height:0;"></div>
+<div class="grid flex" style="width:1px;height:1px;"></div>
+<div class="grid mm" style="width:0;height:0;"></div>
+<div class="grid mm" style="width:1px;height:1px;"></div>
+<div class="grid zero" style="width:0;height:0;"></div>
+<div class="grid zero" style="width:1px;height:1px;"></div>
+<!-- TODO: fails due to broken align:stretch
+<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2" style="position:relative;top:0px;width:0;min-height:0;height:1px;min-width:0;border-width:0 0 0 10px;z-index:1;"><x></x></span></div>
+
+<div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div>
+-->
+
+<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
+<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
+<!-- TODO: fails due to broken align:stretch
+<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div>
+<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div>
+-->
+
+<div class="grid flex">
+<span class="c1 r1"><x></x></span>
+</div>
+
+<div class="grid flex10">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.010px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.020px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.040px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.15px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.18px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.19px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:1px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:2px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:3px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:4px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:5px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:6px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:7px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:8px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:9px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:10px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:11px; clear:none;">
+<span class="x1"></span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-004.html b/layout/reftests/css-grid/grid-max-sizing-flex-004.html
new file mode 100644
index 0000000000..dd3813b516
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-004.html
@@ -0,0 +1,173 @@
+<!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: Testing track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing">
+  <link rel="match" href="grid-max-sizing-flex-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  border: 3px dashed blue;
+  margin-bottom:20px;
+  float: left;
+  clear: left;
+}
+.flex {
+  grid-auto-rows: minmax(0,1fr);
+  grid-auto-columns: minmax(0,1fr);
+}
+.flex10 {
+  grid-auto-rows: minmax(0,1fr);
+  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
+                         minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
+                         minmax(0,1fr) minmax(0,1fr);
+}
+.mm {
+  grid-auto-rows: minmax(min-content,max-content);
+  grid-auto-columns: minmax(min-content,max-content);
+}
+.zero {
+  grid-auto-rows: minmax(0,0);
+  grid-auto-columns: minmax(0,0);
+}
+
+.c1 { grid-column: 1 / span 2; min-height:10px; min-width:0px;  }
+.c2 { grid-column: 2 / span 3; min-height:20px; min-width:10px; }
+.c3 { grid-column: 3 / span 1; min-height:0;    min-width:20px; }
+.r1 { grid-row: 1; }
+.x1 { grid-row: 1; min-height:10px; min-width:0px; border-style:none; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+}
+
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid flex" style="width:0;height:0;"></div>
+<div class="grid flex" style="width:1px;height:1px;"></div>
+<div class="grid mm" style="width:0;height:0;"></div>
+<div class="grid mm" style="width:1px;height:1px;"></div>
+<div class="grid zero" style="width:0;height:0;"></div>
+<div class="grid zero" style="width:1px;height:1px;"></div>
+
+<!-- TODO: fails due to broken align:stretch
+<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<div class="grid flex" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+-->
+<div class="grid mm" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<div class="grid mm" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<!-- TODO: fails due to broken align:stretch
+<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+-->
+
+<div class="grid flex">
+<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
+<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
+</div>
+
+<div class="grid flex10">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.010px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.020px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.040px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.15px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.18px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.19px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:1px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:2px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:3px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:4px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:5px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:6px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:7px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:8px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:9px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:10px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:11px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html
new file mode 100644
index 0000000000..38d054fc74
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html
@@ -0,0 +1,109 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-rows: 12px;
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-column: 1 / span 2; }
+.r1 { grid-column: 2 / span 3; }
+.c3 { grid-column: 3 / span 1; }
+
+span {
+  min-height:8px;
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid-template-columns: 80px 160px 240px 160px 80px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 72px 144px 216px 144px 72px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 400px 320px 0 0 0;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 0 400px 0 0 322px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 0 0 0 0 722px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<!-- test some extreme flex values: -->
+
+<div class="grid" style="grid-template-columns: minmax(10px,0fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,1fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:794px; grid-template-columns: minmax(10px,1fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-005.html b/layout/reftests/css-grid/grid-max-sizing-flex-005.html
new file mode 100644
index 0000000000..a4f3947044
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-005.html
@@ -0,0 +1,109 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-rows: minmax(0,1fr);
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-column: 1 / span 2; min-height:8px; }
+.r1 { grid-column: 2 / span 3; }
+.c3 { grid-column: 3 / span 1; }
+
+span {
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(320px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(400px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(322px,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(722px,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<!-- test some extreme flex values: -->
+
+<div class="grid" style="grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:auto; grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:auto; grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:auto; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html
new file mode 100644
index 0000000000..855bcba5ee
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html
@@ -0,0 +1,81 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: 40px;
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-row: 1 / span 2; }
+.c2 { grid-row: 2 / span 3; }
+.c3 { grid-row: 3 / span 1; }
+
+span {
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  min-height: 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</body>
+<head>
+
+<div class="grid" style="grid-template-rows: 3px 6px 9px 6px 3px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 0.9px 1.8px 2.7px 1.8px 0.9px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-006.html b/layout/reftests/css-grid/grid-max-sizing-flex-006.html
new file mode 100644
index 0000000000..7ecf57e79c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-006.html
@@ -0,0 +1,83 @@
+<!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: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-006-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: 40px;
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-row: 1 / span 2; }
+.c2 { grid-row: 2 / span 3; }
+.c3 { grid-row: 3 / span 1; }
+
+span {
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  min-height: 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</body>
+<head>
+
+<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(18px,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html
new file mode 100644
index 0000000000..c5392d32cd
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html
@@ -0,0 +1,110 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<!DOCTYPE html>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing with min/max</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407">
+  <style type="text/css">
+.grid {
+   display: grid;
+   border:1px dashed;
+   margin: 3px;
+}
+.rows {
+   float: left;
+   grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px;
+   grid-row-gap: 33px;
+}
+.cols {
+   display: inline-grid;
+   grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr);
+   grid-column-gap: 33px;
+}
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+
+.w70 { width: 70px; }
+.w90 { width: 90px; }
+.h70 { height: 70px; }
+.h90 { height: 90px; }
+</style>
+
+</head><body>
+
+<!--
+  NOTE: The resulting size (in the relevant axis) is 83px for all tests below
+        in the "If the free space is an indefinite length" algo here:
+        https://drafts.csswg.org/css-grid/#algo-flex-tracks
+  These tests verifies that we then also apply min/max sizes per the spec:
+  "If using this flex fraction would cause the grid to be smaller than the grid
+   container’s min-width/height (or larger than the grid container’s max-width/
+   height), then redo this step, treating the free space as definite and the
+   available grid space as equal to the grid container’s content box size when
+   it’s sized to its min-width/height (max-width/height)."
+-->
+
+<pre>These grids should look the same:</pre>
+<div class="grid rows h70" style="max-height:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows h70" style="min-height:70px; max-height:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows h70" style="height:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all">
+
+<pre>These grids should look the same:</pre>
+<div class="grid rows h90" style="min-height:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows h90" style="min-height:90px; max-height:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows h90" style="height:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all">
+
+<pre>These grids should look the same:</pre>
+<div class="grid cols w70"  style="max-width:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols w70"  style="min-width:70px; max-width:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols w70"  style="width:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<pre>These grids should look the same:</pre>
+<div class="grid cols w90"  style="min-width:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols w90"  style="min-width:90px; max-width:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols w90"  style="width:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-007.html b/layout/reftests/css-grid/grid-max-sizing-flex-007.html
new file mode 100644
index 0000000000..ac9dcc77c4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-007.html
@@ -0,0 +1,108 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<!DOCTYPE html>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing with min/max</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-007-ref.html">
+  <style type="text/css">
+.grid {
+   display: grid;
+   border:1px dashed;
+   margin: 3px;
+}
+.rows {
+   float: left;
+   grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px;
+   grid-row-gap: 33px;
+}
+.cols {
+   display: inline-grid;
+   grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr);
+   grid-column-gap: 33px;
+}
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+
+</style>
+
+</head><body>
+
+<!--
+  NOTE: The resulting size (in the relevant axis) is 83px for all tests below
+        in the "If the free space is an indefinite length" algo here:
+        https://drafts.csswg.org/css-grid/#algo-flex-tracks
+  These tests verifies that we then also apply min/max sizes per the spec:
+  "If using this flex fraction would cause the grid to be smaller than the grid
+   container’s min-width/height (or larger than the grid container’s max-width/
+   height), then redo this step, treating the free space as definite and the
+   available grid space as equal to the grid container’s content box size when
+   it’s sized to its min-width/height (max-width/height)."
+-->
+
+<pre>These grids should look the same:</pre>
+<div class="grid rows" style="max-height:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="min-height:70px; max-height:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="height:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all">
+
+<pre>These grids should look the same:</pre>
+<div class="grid rows" style="min-height:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="min-height:90px; max-height:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="height:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all">
+
+<pre>These grids should look the same:</pre>
+<div class="grid cols"  style="max-width:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols"  style="min-width:70px; max-width:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols"  style="width:70px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<pre>These grids should look the same:</pre>
+<div class="grid cols"  style="min-width:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols"  style="min-width:90px; max-width:60px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols"  style="width:90px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-008-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-008-ref.html
new file mode 100644
index 0000000000..6deb8f3c89
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-008-ref.html
@@ -0,0 +1,111 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<!DOCTYPE html>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407">
+  <style type="text/css">
+.grid {
+   display: grid;
+   border:1px dashed;
+   margin: 3px;
+}
+.rows {
+   float: left;
+   grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px;
+   grid-row-gap: 33px;
+}
+.rows-min {
+   float: left;
+   grid: 10px 10px / 50px;
+   grid-row-gap: 33px;
+}
+.cols {
+   display: inline-grid;
+   grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr);
+   grid-column-gap: 33px;
+}
+.cols-min {
+   display: inline-grid;
+   grid: 50px / 10px 10px;
+   grid-column-gap: 33px;
+}
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+
+.w70 { width: 70px; }
+.w90 { width: 90px; }
+.h70 { height: 70px; }
+.h90 { height: 90px; }
+</style>
+
+</head><body>
+
+<pre>First four are without min/max-sizes:</pre>
+<div style="float:left">
+<div class="grid rows">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+</div>
+<div style="height:100px; margin-bottom:-100px">
+  <div class="grid rows">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</div>
+<div style="display:inline-block; width:73px; margin-right:-2px">
+  <div class="grid cols">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</div>
+<div class="grid cols-min" style="width:53px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all">
+
+<pre>Max-size less than grid-gap:</pre>
+<div class="grid rows-min" style="height:0px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows-min" style="max-height:0px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows-min" style="height:20px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows-min" style="max-height:20px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows-min" style="height:33px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all" style="margin-top:40px; ">
+
+<div class="grid cols-min" style="width:20px; margin-right:30px;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols-min" style="width:20px; margin-right:30px;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols-min" style="width:33px; margin-right:30px;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-008.html b/layout/reftests/css-grid/grid-max-sizing-flex-008.html
new file mode 100644
index 0000000000..437615a2e2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-008.html
@@ -0,0 +1,97 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<!DOCTYPE html>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-008-ref.html">
+  <style type="text/css">
+.grid {
+   display: grid;
+   border:1px dashed;
+   margin: 3px;
+}
+.rows {
+   float: left;
+   grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px;
+   grid-row-gap: 33px;
+}
+.cols {
+   display: inline-grid;
+   grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr);
+   grid-column-gap: 33px;
+}
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+
+</style>
+
+</head><body>
+
+<pre>First four are without min/max-sizes:</pre>
+<div class="grid rows">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div style="height:0">
+  <div class="grid rows">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</div>
+<div class="grid cols">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div style="display:inline-block; width:0">
+  <div class="grid cols">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</div>
+
+<br clear="all">
+
+<pre>Max-size less than grid-gap:</pre>
+<div class="grid rows" style="height:0px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="max-height:0px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="height:20px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="max-height:20px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid rows" style="height:33px">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<br clear="all" style="margin-top:40px; ">
+
+<div class="grid cols" style="max-width:20px; margin-right:30px;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols" style="width:20px; margin-right:30px;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<div class="grid cols" style="width:33px; margin-right:30px;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001-ref.html
new file mode 100644
index 0000000000..4d8a60bcc4
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html
new file mode 100644
index 0000000000..a2e6223c91
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html
new file mode 100644
index 0000000000..c05d93ecf0
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html
new file mode 100644
index 0000000000..fb51a13de5
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html
new file mode 100644
index 0000000000..9fa82283c1
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html
new file mode 100644
index 0000000000..2c5cca3ba7
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html
new file mode 100644
index 0000000000..5fa60b3b56
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html
new file mode 100644
index 0000000000..e12ac9d671
--- /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>
diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html b/layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html
new file mode 100644
index 0000000000..608dc25f50
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html
@@ -0,0 +1,98 @@
+<!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: Testing grid minmax(min-content,max-content) column/rows</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  border: 2px solid green;
+  overflow: hidden;
+  clear: both;
+}
+.float { float:left; clear:both; border: 2px dashed blue;}
+
+span {
+  background: lime;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  float: left;
+}
+
+x10 { display:inline-block; width:10px; height:10px; background:yellow; }
+x30 { display:inline-block; width:30px; height:30px; background:cyan; }
+.c2,.r2 { width:20px; height:20px; background: silver; }
+.r2 { background: pink; }
+.c1 { margin: 1px 3px 5px 7px; }
+.v {
+  writing-mode:vertical-lr;
+  -webkit-writing-mode:vertical-lr;
+}
+    </style>
+</head>
+<body>
+  
+<div class="grid">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="clear:left"></span>
+</div>
+<div class="grid">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="clear:left"></span>
+</div>
+<div class="grid float">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2"  style="clear:left"></span>
+</div>
+<div class="grid float">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2"  style="clear:left"></span>
+</div>
+
+<div class="grid">
+<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="clear:left"></span>
+</div>
+<div class="grid">
+<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="clear:left"></span>
+</div>
+<div class="grid float v">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2" style="background:pink"></span>
+<span class="r2" style="clear:left;background:silver"></span>
+</div>
+<div class="grid float v">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2" style="background:pink"></span>
+<span class="r2" style="clear:left;background:silver"></span>
+</div>
+
+<div class="grid float v" style="padding-bottom:4px">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="clear:left;"></span>
+</div>
+
+<div class="grid" style="position:relative">
+<span class="c1 v" style="min-width:100px;"><x10>X</x10><x30>y</x30><x10 style="visibility:hidden">z</x10></span>
+<span class="c1" style="min-width:50px;margin-left:-113px; border:none; padding:1px 3px 5px 7px; background:none"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c1" style="min-width:10px;max-width:10px;margin-left:-113px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="clear:left"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-001.html b/layout/reftests/css-grid/grid-min-max-content-sizing-001.html
new file mode 100644
index 0000000000..ea4337d02d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-max-content-sizing-001.html
@@ -0,0 +1,105 @@
+<!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: Testing grid minmax(min-content,max-content) column/rows</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
+  <link rel="match" href="grid-min-max-content-sizing-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 2px solid green;
+  grid-template-columns: minmax(min-content,max-content) 30px;
+  grid-template-rows: minmax(min-content,max-content);
+  clear: both;
+}
+.float { float:left; clear:both; border: 2px dashed blue; }
+.flex-min {
+  grid-template-columns: minmax(1fr,max-content) 30px;
+  grid-template-rows: minmax(1fr,max-content);
+}
+
+span {
+  background: lime;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  grid-row: 1;
+}
+
+x10 { display:inline-block; width:10px; height:10px; background:yellow; }
+x30 { display:inline-block; width:30px; height:30px; background:cyan; }
+.c2,.r2 { width:20px; height:20px; background: silver; }
+.r2 { background: pink; }
+.c1 { margin: 1px 3px 5px 7px; grid-column:1; }
+.v {
+  writing-mode:vertical-lr;
+  -webkit-writing-mode:vertical-lr;
+}
+    </style>
+</head>
+<body>
+  
+<div class="grid">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+<div class="grid flex-min">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+<div class="grid float">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+<div class="grid float flex-min">
+<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+
+<div class="grid">
+<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+<div class="grid flex-min">
+<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+<div class="grid float">
+<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+<div class="grid float flex-min">
+<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+
+<div class="grid float v">
+<span class="c1 zv"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto,max-content) 47px;">
+<span class="c1 v" style="min-width:100px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c1" style="min-width:50px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c1" style="min-width:10px;max-width:10px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
+<span class="c2"></span>
+<span class="r2" style="grid-row:2"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-002-ref.html b/layout/reftests/css-grid/grid-min-max-content-sizing-002-ref.html
new file mode 100644
index 0000000000..9765ee1355
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-max-content-sizing-002-ref.html
@@ -0,0 +1,82 @@
+<!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: Testing grid minmax(min-content,max-content) column/rows</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 2px solid green;
+  grid-template-columns: minmax(min-content,max-content);
+  grid-template-rows: minmax(min-content,max-content);
+  clear: both;
+  line-height: 0;
+}
+
+.grid > div {
+  border: 1px solid black;
+  min-height:0;
+  min-width:0;
+}
+
+img.t1 { }
+img.t2 { }
+
+x {
+  display: block;
+  border: 1px solid blue;
+  width: 2px;
+}
+
+.v {
+  writing-mode:vertical-lr;
+  -webkit-writing-mode:vertical-lr;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid">
+  <div>
+    <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div>
+    <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="width:2px; height:2px">
+    <x style="width:2px; height:2px"></x>
+  </div>
+</div>
+
+<div class="grid">
+  <div>
+    <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div>
+    <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="width:2px; height:2px">
+    <x style="width:2px; height:2px"></x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-002.html b/layout/reftests/css-grid/grid-min-max-content-sizing-002.html
new file mode 100644
index 0000000000..759eb30508
--- /dev/null
+++ b/layout/reftests/css-grid/grid-min-max-content-sizing-002.html
@@ -0,0 +1,85 @@
+<!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: Testing grid minmax(min-content,max-content) column/rows</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
+  <link rel="match" href="grid-min-max-content-sizing-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 2px solid green;
+  grid-template-columns: minmax(min-content,max-content);
+  grid-template-rows: minmax(min-content,max-content);
+  clear: both;
+  line-height: 0;
+}
+
+.grid > div {
+  border: 1px solid black;
+  min-height:0;
+  min-width:0;
+}
+
+img.t1 { width: 100%; }
+img.t2 { height: 100%; }
+
+x {
+  display: block;
+  border: 1px solid blue;
+  width: 100%;
+  height: 100%;
+}
+
+.v {
+  writing-mode:vertical-lr;
+  -webkit-writing-mode:vertical-lr;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid">
+  <div>
+    <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div>
+    <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div>
+    <x></x>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="v">
+    <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="v">
+    <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="v">
+    <x></x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-order-abspos-items-001-ref.html b/layout/reftests/css-grid/grid-order-abspos-items-001-ref.html
new file mode 100644
index 0000000000..fb3642422d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-abspos-items-001-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>CSS Test: Testing layout and painting of abs.pos. grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { z-index:1; left:74px; right:5px; background:lime; }
+.b { z-index:1; left:54px; right:5px; background:pink; }
+.c { z-index:1; left:34px; right:5px; background:yellow; }
+.d { z-index:1; left:14px; right:5px; background:silver; }
+.e { display:none; }
+
+.abs {
+  position: absolute;
+  top:3px; bottom:1px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.z-1 { z-index:-1; }
+.z1 { z-index:11; }
+.z1.b { z-index:12; }
+.z2 { z-index:13; }
+.z3 { z-index:14; }
+.z4 { z-index:15; }
+x { background:black; order:99; float:right; }
+f { float:left; }
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+.f2 span.e { z-index:-1; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs b">b</span>
+<span class="abs c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div>
+  <span class="abs c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+<div>
+  <span class="abs a">a</span>
+  <span class="abs b">b</span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="display:grid;">
+<div>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+<div>
+  <span class="abs b">b</span>
+</div>
+</div>
+<div>
+  <span class="abs c">c</span>
+</div>
+<div>
+  <span class="abs a">a</span>
+</div>
+</div>
+</div>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs z1 b">b</span>
+<span class="abs z2 c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div>
+  <span class="abs z1 c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+<div>
+  <span class="abs a">a</span>
+  <span class="abs z1 b">b</span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs z2 c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z-1 d">FAIL<x>x</x></span>
+  <span class="abs z1 d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-order-abspos-items-001.html b/layout/reftests/css-grid/grid-order-abspos-items-001.html
new file mode 100644
index 0000000000..7d915e5098
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-abspos-items-001.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Test: Testing layout and painting of abs.pos. grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
+  <link rel="match" href="grid-order-abspos-items-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { order:4; grid-column-start:4; background:lime; }
+.b { order:3; grid-column-start:3; background:pink; }
+.c { order:2; grid-column-start:2; background:yellow; }
+.d { order:1; grid-column-start:1; background:silver; }
+.e { order:1; grid-column-start:1; background:red; }
+
+.abs {
+  position: absolute;
+  top:3px; left:1px; right:5px; bottom:1px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.z-1 { z-index:-1; }
+.z1 { z-index:1; }
+.z2 { z-index:2; }
+.z3 { z-index:3; }
+.z4 { z-index:4; }
+x { background:black; order:99; float:right; }
+f { float:left; }
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+.f2 span.e { z-index:-1; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs b">b</span>
+<span class="abs c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div style="order:2">
+  <span class="abs a">a</span>
+  <span class="abs b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs z1 b">b</span>
+<span class="abs z2 c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div style="order:2">
+  <span class="abs a">a</span>
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z1 c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs z2 c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z-1 d">FAIL<x>x</x></span>
+  <span class="abs z1 d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html b/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
new file mode 100644
index 0000000000..81c3274497
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
@@ -0,0 +1,204 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Test: Testing automatic placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <style type="text/css">
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+  font-size: 12px;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+.test1 .a {
+  top: 0;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test1 .b {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test1 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test1 .e {
+  top: 20px;
+  left: 0px;
+}
+.test1 .d2 {
+  top: 0px;
+  left: 40px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .b {
+  top: 20px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test2 .e {
+  top: 20px;
+  left: 0px;
+}
+.test2 .d2 {
+  top: 20px;
+  left: 40px;
+}
+
+.test3 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test3 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test3 .c {
+  top: 60px;
+  left: 0px;
+  width: 60px;
+  height: 40px;
+}
+.test3 .d { top: 0px; left:60px; }
+.test3 .e {
+  top: 20px;
+  left: 60px;
+}
+.test3 .d2 {
+  top: 40px;
+  left: 0px;
+}
+
+.test4 .c {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 40px;
+}
+.test4 .d { top: 0px; }
+.test4 .e {
+  top: 20px;
+  left: 0px;
+}
+.test4 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test5 .c {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test5 .e {
+  top: 20px;
+  left: 0px;
+}
+.test5 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test6 { left: 0px; top: 20px;}
+.test6d2 {
+  top: 20px;
+  left: 140px;
+}
+.test6e {
+  top: 20px;
+  left: 160px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="height:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-order-placement-auto-001.html b/layout/reftests/css-grid/grid-order-placement-auto-001.html
new file mode 100644
index 0000000000..2f7279729d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-auto-001.html
@@ -0,0 +1,156 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Test: Testing automatic placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
+  <link rel="match" href="grid-order-placement-auto-001-ref.html">
+  <style type="text/css">
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  font-size: 12px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+  order: 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+  order: 1;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+  order: 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+  order: 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+  order: 5;
+}
+.test3 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+  order: 4;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+  order: 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+  order: 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+  order: 2;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+  order: 1;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+  order: 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html b/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html
new file mode 100644
index 0000000000..a2c9b9841c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html
@@ -0,0 +1,69 @@
+<!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 Test: Testing definite placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 11px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { left:73px; right:3px; background:lime; }
+.b { left:53px; right:3px; background:pink; }
+.c { left:33px; right:3px; background:yellow; }
+.d { left:13px; right:3px; background:silver; }
+
+span {
+  position:absolute;
+  border: 1px solid;
+  height: 18px;
+}
+
+x { background:black; order:99; float:right; }
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="d">d</span>
+<span class="c">c</span>
+<span class="b">b</span>
+<span class="a">a</span>
+</div>
+
+<div class="grid">
+<span class="d">d</span>
+<span class="c">c</span>
+<span class="b">b</span>
+<span class="a">a</span>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-order-placement-definite-001.html b/layout/reftests/css-grid/grid-order-placement-definite-001.html
new file mode 100644
index 0000000000..41625ea44e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-definite-001.html
@@ -0,0 +1,71 @@
+<!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 Test: Testing definite placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
+  <link rel="match" href="grid-order-placement-definite-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-template-rows: 20px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime; }
+.b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink; }
+.c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow; }
+.d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver; }
+.e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red; }
+
+span {
+  border: 1px solid;
+}
+
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+.f2 span.e { display:none; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="e"></span>
+<span class="d">d</span>
+</div>
+
+<div class="grid">
+<span class="e"></span>
+<span class="d">d</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="a">a</span>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
new file mode 100644
index 0000000000..945b43b525
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
@@ -0,0 +1,154 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: 'grid-column-gap' percentage</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182">
+<style>
+html,body {
+    color:black; background-color:white; font-size:1px; padding:0; margin:0;
+}
+	
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px;
+  border: 1px solid;
+}
+
+.inline-grid {
+  display: inline-grid;
+  grid: 120px / 160px;
+  border: 1px solid;
+}
+
+.float { float:left; border: 2px solid blue; }
+
+.percentgap {
+  grid-gap: 24px 32px;
+}
+
+span:nth-of-type(1) { background: magenta; }
+span:nth-of-type(2) { background: cyan; }
+span:nth-of-type(3) { background: yellow; }
+span:nth-of-type(4) { background: lime; }
+
+x {
+  display: block;
+  width: 20px;
+  height: 30px;
+}
+
+br { clear: both; }
+    </style>
+</head>
+<body>
+
+<div class="inline-grid">
+<div class="grid percentgap">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="inline-grid" style="grid: auto / auto">
+<div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="float">
+<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="inline-grid">
+<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<br>
+
+<div style="width:320px;height:200px">
+<div class="grid percentgap" style="height:120px; grid-column-gap:64px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<!--  TODO: fails on Windows 8 x64 Opt
+<div class="inline-grid">
+<div class="grid percentgap">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+-->
+
+<div class="inline-grid" style="grid: auto / auto">
+<div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="inline-grid">
+<div class="grid" style="grid: min-content 20% min-content / min-content 20% min-content">
+  <span><x></x></span><z></z><span><x></x></span>
+  <z></z><z></z><z></z>
+  <span><x></x></span><z></z><span><x></x></span>
+</div>
+</div>
+
+<br>
+
+<div style="width:320px;height:200px">
+<div class="grid percentgap" style="height:120px; grid-column-gap:64px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div style="width:320px;height:200px">
+<div class="grid calcgap" style="height:120px; grid-gap:0">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="float" style="margin-top:-50px">
+<div class="grid" style="min-width:300%; grid-gap:15px 15px">
+  <span><x></x></span>
+  <span style="margin-left:31px; width:30px"><x></x></span>
+  <span><x></x></span>
+  <span style="margin-left:31px; width:30px"><x></x></span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-percent-grid-gap-001.html b/layout/reftests/css-grid/grid-percent-grid-gap-001.html
new file mode 100644
index 0000000000..57c0b3c086
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-grid-gap-001.html
@@ -0,0 +1,161 @@
+<!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: 'grid-column-gap' percentage</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-percent-grid-gap-ref.html">
+<style>
+html,body {
+    color:black; background-color:white; font-size:1px; padding:0; margin:0;
+}
+	
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px;
+  border: 1px solid;
+}
+
+.inline-grid {
+  display: inline-grid;
+  grid-auto-columns: 160px;
+  grid-auto-rows: 120px;
+  border: 1px solid;
+}
+
+.float { float:left; border: 2px solid blue; }
+
+.percentgap {
+  grid-gap: 20%;
+}
+
+.calcgap {
+  grid-gap: calc(12px + 10%) calc(16px + 10%);
+}
+
+span:nth-of-type(1) { background: magenta; }
+span:nth-of-type(2) { background: cyan; }
+span:nth-of-type(3) { background: yellow; }
+span:nth-of-type(4) { background: lime; }
+
+x {
+  display: block;
+  width: 20px;
+  height: 30px;
+}
+
+br { clear: both; }
+    </style>
+</head>
+<body>
+
+<div class="inline-grid">
+<div class="grid percentgap">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="inline-grid" style="grid: auto / auto">
+<div class="grid percentgap" style="place-self:start/start; width:160px; height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="float">
+<div class="grid percentgap cfill" style="max-width:800%">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="inline-grid">
+<div class="grid percentgap" style="place-self:start">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<br>
+
+<div style="width:320px;height:200px">
+<div class="grid percentgap" style="height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<!--  TODO: fails on Windows 8 x64 Opt
+<div class="inline-grid">
+<div class="grid calcgap">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+-->
+
+<div class="inline-grid" style="grid: auto / auto">
+<div class="grid calcgap" style="align-self:start; justify-self:start; width:160px; height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="inline-grid">
+<div class="grid" style="grid: min-content calc(12px + 10%) min-content / min-content calc(16px + 10%) min-content">
+  <span><x></x></span><z></z><span><x></x></span>
+  <z></z><z></z><z></z>
+  <span><x></x></span><z></z><span><x></x></span>
+</div>
+</div>
+
+<br>
+
+<div style="width:320px;height:200px">
+<div class="grid calcgap" style="height:120px; grid-column-gap:calc(32px + 10%)">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div style="width:320px;height:200px">
+<div class="grid calcgap" style="height:120px; grid-gap:calc(32px - 30%)">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+<div class="float" style="margin-top:-50px">
+<div class="grid percentgap cfill" style="min-width:300%">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html
new file mode 100644
index 0000000000..202cb2b662
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <style type="text/css">
+  <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  clear: left;
+  align-content: start;
+  justify-content: start;
+  margin: 3px;
+}
+
+span {
+  background: grey;
+}
+.c > span { width: 10px; }
+.r > span { height: 10px; }
+
+span:nth-child(2) { background:lime; }
+x { background: blue; }
+x:nth-child(2) { background:pink; }
+
+.c { grid-auto-rows: 5px; }
+.c.p1   { grid-template-columns: 1px; width: 10px; }
+.c.p1a  { grid-template-columns: minmax(10%,auto); }
+.c.p2   { grid-template-columns: 10% 10%; grid-gap: 20%; }
+.c.p2a  { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+.c.c0  { grid-template-columns: 0; }
+
+.r { grid-auto-columns: 5px; grid-auto-flow: column; }
+.r.p1   { grid-template-rows: 10%; }
+.r.p1a  { grid-template-rows: minmax(10%,auto); }
+.r.p2   { grid-template-rows: 10% 10%; grid-gap: 20%; }
+.r.p2a  { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+.r.r0   { grid-template-rows: 0; }
+
+  </style>
+</head>
+<body>
+
+<div class="c p1"><span></span><x></x></div>
+<div class="c c0"><x></x></div>
+<div class="c p1a"><span></span><x></x></div>
+<div class="c c0"><x></x></div>
+
+<div class="c p2"><span></span><span></span><x></x></div>
+<div class="c c0"><x></x></div>
+<div class="c p2a"><span></span><span></span><x></x></div>
+<div class="c c0"><x></x></div>
+
+<div class="r p1"><span></span><x></x></div>
+<div class="r r0"><x></x></div>
+<div class="r p1a"><span></span><x></x></div>
+<div class="r r0"><x></x></div>
+
+<div class="r p2"><span></span><span></span><x></x></div>
+<div class="r r0"><x></x></div>
+<div class="r p2a"><span></span><span></span><x></x></div>
+<div class="r r0"><x></x></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
new file mode 100644
index 0000000000..75655d62ae
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <style type="text/css">
+  <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
+  <link rel="match" href="grid-percent-intrinsic-sizing-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  float: left;
+  border: 1px solid;
+  clear: left;
+  place-content: start start;
+  margin: 3px;
+}
+
+span {
+  background: grey;
+}
+.c > span { width: 10px; }
+.r > span { height: 10px; }
+
+span:nth-child(2) { background:lime; }
+x { background: blue; }
+x:nth-child(2) { background:pink; }
+
+.c { grid-auto-rows: 5px; }
+.c.p1   { grid-template-columns: 10%; }
+.c.p1a  { grid-template-columns: minmax(10%,auto); }
+.c.p2   { grid-template-columns: 10% 10%; grid-gap: 20%; }
+.c.p2a  { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+
+.r { grid-auto-columns: 5px; grid-auto-flow: column; }
+.r.p1   { grid-template-rows: 10%; }
+.r.p1a  { grid-template-rows: minmax(10%,auto); }
+.r.p2   { grid-template-rows: 10% 10%; grid-gap: 20%; }
+.r.p2a  { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+
+  </style>
+</head>
+<body>
+
+<div class="c p1"><span></span><x></x></div>
+<div class="c p1"><x></x></div>
+<div class="c p1a"><span></span><x></x></div>
+<div class="c p1a"><x></x></div>
+
+<div class="c p2"><span></span><span></span><x></x></div>
+<div class="c p2"><x></x><x></x></div>
+<div class="c p2a"><span></span><span></span><x></x></div>
+<div class="c p2a"><x></x><x></x></div>
+
+<div class="r p1"><span></span><x></x></div>
+<div class="r p1"><x></x></div>
+<div class="r p1a"><span></span><x></x></div>
+<div class="r p1a"><x></x></div>
+
+<div class="r p2"><span></span><span></span><x></x></div>
+<div class="r p2"><x></x><x></x></div>
+<div class="r p2a"><span></span><span></span><x></x></div>
+<div class="r p2a"><x></x><x></x></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html b/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html
new file mode 100644
index 0000000000..3bc177eb27
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html
@@ -0,0 +1,113 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ border: 1px solid;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 7px;
+ padding: 1px 7px 3px 13px;
+ width: 200px;
+ height: 60px;
+}
+
+.a {
+  position: absolute;
+  left: 59px; top: 22px;
+  height: 12px; width: 44px;
+}
+
+.abs {
+  position: absolute;
+  opacity: 0.7;
+  width: 21px;
+  height: 5px;
+}
+.b {
+  left: 1px; top: 3px; bottom: 1px;
+  width: 74px; height: auto;
+}
+.c {
+  left: 1px; top: 3px;
+  width: 51px; height: 2px;
+}
+.d {
+  left: 1px; top: 5px;
+  width: 212px; height: 7px;
+}
+.e {
+  right: 5px; bottom: 1px;
+  width: 212px; height: 58px;
+}
+.f {
+  right: 5px; bottom: 1px;
+  width: 212px; height: 58px;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="b abs" style="width:212px">b</span>
+</div>
+
+<div class="grid">
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="d abs" style="height:56px;"></span>
+</div>
+
+<div class="grid">
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="f abs">f</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-abspos-implicit-001.html b/layout/reftests/css-grid/grid-placement-abspos-implicit-001.html
new file mode 100644
index 0000000000..98e026bace
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-abspos-implicit-001.html
@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-001-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ border: 1px solid;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 7px;
+ padding: 1px 7px 3px 13px;
+ width: 200px;
+ height: 60px;
+}
+
+span.negative {
+  grid-column: span A 2 / 1; 
+  grid-row:    A -1;
+  background: none;
+  border: none;
+}
+
+.a {
+  grid-column: 1 / 3; 
+  grid-row:    3 / 5;
+}
+
+.abs {
+  position: absolute;
+  top:3px; left:1px; right:5px; bottom:1px;
+  opacity: 0.7;
+}
+.b {
+  grid-column:  span A 4 / 2;
+  grid-row:     auto / auto; 
+}
+.c {
+  grid-column:  span 5 / 1;  /* outside to the left */
+  grid-row:     A -5 / 1;    /* outside to the top */
+}
+.d {
+  grid-column:  auto / A -3;
+  grid-row:     2 / 1;
+  top: -3px;
+}
+.e {
+  grid-column:  A -3 / auto;
+  grid-row:     A -3 / auto;
+}
+.f {
+  grid-column:  A -3 / auto;
+  grid-row:     auto / A -2;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="a"></span>
+<span class="b abs">b</span>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="a"></span>
+<span class="c abs">c</span>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="a"></span>
+<span class="d abs">d</span>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="a"></span>
+<span class="e abs">e</span>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="a"></span>
+<span class="f abs">f</span>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<div><span class="b abs">b</span></div>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<x><span class="c abs">c</span></x>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="d abs"></span>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<div><span class="e abs">e</span></div>
+</div>
+
+<div class="grid">
+<span class="negative"></span>
+<span class="f abs">f</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html
new file mode 100644
index 0000000000..ddaec606f9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-col-dense-001-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: grid item auto placement: column dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+  font-size: 12px;
+}
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  border: 1px solid green;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+x {
+  background: lime;
+  border: 1px solid black;
+}
+
+.test1 .a {
+  top: 0;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test1 .b {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test1 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test1 .d2 {
+  top: 20px;
+  left: 0px;
+}
+.test1 .e {
+  top: 20px;
+  left: 140px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .b {
+  top: 20px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test2 .d2 {
+  top: 20px;
+  left: 0px;
+}
+.test2 .e {
+  top: 20px;
+  left: 40px;
+}
+
+.test3 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test3 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test3 .c {
+  top: 0px;
+  left: 60px;
+  width: 60px;
+  height: 40px;
+}
+.test3 .d { top: 40px; left:0px; }
+.test3 .e {
+  top: 20px;
+  left: 120px;
+}
+.test3 .d2 {
+  top: 40px;
+  left: 80px;
+}
+
+.test4 .c {
+  top: 0;
+  left: 0px;
+  width: 60px;
+  height: 40px;
+}
+.test4 .d { top: 40px; }
+.test4 .e {
+  top: 20px;
+  left: 60px;
+}
+.test4 .d2 {
+  top: 40px;
+  left: 20px;
+}
+
+.test5 .c {
+  top: 20px;
+  left: 0;
+  width: 60px;
+  height: 20px;
+}
+.test5 .e {
+  top: 20px;
+  left: 60px;
+}
+.test5 .d2 {
+  top: 40px;
+  left: 0px;
+}
+
+.test6 { left: 0px; top: 20px;}
+.test6d2 {
+  top: 20px;
+  left: 140px;
+}
+.test6e {
+  top: 20px;
+  left: 160px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+<!-- bug 1228984 test 1 -->
+<div class="grid2">
+<x style="grid-column: 1; grid-row: 1 / 3">1</x>
+<x style="grid-column: 2; grid-row: 1">2</x>
+<x style="grid-column: 3; grid-row: span 2">3</x>
+<x style="grid-column: 2; grid-row: 2">4</x>
+</div>
+
+<!-- bug 1228984 test 2 with "column dense" -->
+<div class="grid2">
+<x style="grid-column: 1; grid-row: 1 / 3">1</x>
+<x style="grid-column: 2; grid-row: 2 / 4">2</x>
+<x style="grid-column: 3; grid-row: 1 / 4">3</x>
+<x style="grid-column: 1; grid-row: 3">4</x>
+<x style="grid-column: 2; grid-row: 1">5</x>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html b/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html
new file mode 100644
index 0000000000..e208a2b6d3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html
@@ -0,0 +1,169 @@
+<!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 Test: grid item auto placement: column dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
+  <link rel="match" href="grid-placement-auto-col-dense-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: dense column;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  grid-auto-flow: column dense;
+  border: 1px solid green;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+<!-- bug 1228984 test 1 -->
+<div class="grid2">
+<span style="grid-column: 1; grid-row: 1 / 3">1</span>
+<span style="grid-column: 2; grid-row: 1">2</span>
+<span style="grid-row: span 2">3</span>
+<span style="grid-row: 2">4</span>
+</div>
+
+<!-- bug 1228984 test 2 with "column dense" -->
+<div class="grid2">
+<span style="grid-row: 1 / 3">1</span>
+<span style="grid-row: 2 / 4">2</span>
+<span style="grid-row: 1 / 4">3</span>
+<span style="">4</span>
+<span style="">5</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html
new file mode 100644
index 0000000000..9d861b7716
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html
@@ -0,0 +1,208 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+  font-size: 12px;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+.test1 .a {
+  top: 0;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test1 .b {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test1 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test1 .d {
+  top: 40px;
+  left: 80px;
+}
+.test1 .d2 {
+  top: 40px;
+  left: 100px;
+}
+.test1 .e {
+  top: 20px;
+  left: 140px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .b {
+  top: 20px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test2 .d {
+  top: 40px;
+  left: 80px;
+}
+.test2 .d2 {
+  top: 40px;
+  left: 100px;
+}
+.test2 .e {
+  top: 20px;
+  left: 140px;
+}
+
+.test3 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test3 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test3 .c {
+  top: 0px;
+  left: 60px;
+  width: 60px;
+  height: 40px;
+}
+.test3 .d { top: 40px; left:80px; }
+.test3 .e {
+  top: 20px;
+  left: 120px;
+}
+.test3 .d2 {
+  top: 40px;
+  left: 100px;
+}
+
+.test4 .c {
+  top: 0;
+  left: 0px;
+  width: 60px;
+  height: 40px;
+}
+.test4 .d { top: 40px; }
+.test4 .e {
+  top: 20px;
+  left: 60px;
+}
+.test4 .d2 {
+  top: 40px;
+  left: 20px;
+}
+
+.test5 .c {
+  top: 20px;
+  left: 0;
+  width: 60px;
+  height: 20px;
+}
+.test5 .d { top: 40px; }
+.test5 .e {
+  top: 20px;
+  left: 60px;
+}
+.test5 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test6 { left: 140px; top: 20px;}
+.test6d2 {
+  top: 20px;
+  left: 160px;
+}
+.test6e {
+  top: 20px;
+  left: 180px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html
new file mode 100644
index 0000000000..ab4892aa04
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html
@@ -0,0 +1,137 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: column;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  font-size: 12px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html
new file mode 100644
index 0000000000..9395b35cdf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html
@@ -0,0 +1,153 @@
+<!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 Test: Testing placement of grid items outside the explicit grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+ border: 1px solid blue;
+ width:270px;
+}
+
+.a { background:lime; }
+.a2 { height:38px; background:lime; }
+.b { display:block; background:pink; }
+.c { width:1px; background:yellow; }
+.e { background:silver; }
+.f { background:cyan; }
+.g { background:tan; }
+
+br { display:block; height:0; width:0; }
+.f2 .b { display:inline-block; }
+
+span {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border: 1px solid;
+  vertical-align:top;
+}
+
+  </style>
+</head>
+<body style="overflow:hidden">
+
+<div style="float:left">
+
+<div class="grid">
+<span class="c" style="width:18px">c</span><span class="a">a</span><span class="e">e</span><span class="b">b</span>
+</div>
+<div class="grid">
+<span class="g">g</span><span class="a">a</span><span class="b">b</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="e">e</span><span class="a">a</span><span class="b" span="2">b</span>
+</div>
+
+<div class="grid">
+<span class="c">c</span><span class="f">f</span><span class="a">a</span><span class="b" span="2">b</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="e" style="width:1px">e</span><span class="a" style="margin-left:23px">a</span><span class="b" span="4">b</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="f" style="margin-left:3px; width:21px">f</span><span class="a">a</span><span class="b" span="4">b</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="e" style="width:28px">e</span><span class="a" style="margin-left:134px">a</span><span class="b" span="50">b</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="f" style="margin-left:144px">f</span><span class="a">a</span><span class="b" span="50">b</span><span class="f" style="margin-left:147px">f</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="f" style="width:4px;margin-left:138px">f</span><span class="f">f</span><span class="a">a</span><span class="b" span="50">b</span>
+</div>
+<div class="grid">
+<span class="c">c</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
+</div>
+<div class="grid">
+<span class="g" style="width:1px">g</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
+</div>
+
+</div><div style="float:left; margin-top:300px;">
+
+<div class="grid" style="height:40px; position:relative">
+<span style="margin-top:-10000px; height:20060px; width:78px;"></span>
+<span style="position:absolute; z-index:1; left:0; width:216px; height:10000px; margin-top:20px;">b</span><br>
+<span style="margin-top:-10042px; height:30px; width:78px; color:black"></span>
+</div>
+<div class="grid" style="height:40px; position:relative">
+<span style="margin-top:20px; position:absolute; left:0; z-index:0; height:30px; width:78px; color:black"></span>
+<span style="margin-top:-10000px; height:20018px; width:78px;"></span>
+<span style="position:absolute; left:0; width:216px; height:2000px; margin-top:20px;">b</span><br>
+</div>
+<div class="grid" style="height:40px; position:relative;">
+<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:black;"></span>
+<span style="position:absolute; left:85px; width: 30px;">b</span>
+</div>
+<div class="grid" style="height:40px; position:relative">
+<span style="position:absolute; left:0; z-index:1; margin-top:20px; height:30px; width:78px; color:black; border-left-color:black;"></span>
+<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br>
+<span style="position:relative; z-index:1; margin-top:-10000px; height:20018px; width:78px;"></span>
+</div>
+<div class="grid" style="height:40px; position:relative;">
+<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:silver;"></span>
+<span style="position:absolute; left:143px; width: 123px;">b</span>
+</div>
+
+</div><div style="float:left" class="f2">
+
+<div class="grid">
+<span class="b">b</span><span class="a2">a</span><br><span class="c" style="width:18px">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="b">b</span><span class="a2">a</span><span class="g">g</span><br><span class="b" style="visibility:hidden">b</span>
+</div>
+<div class="grid">
+<span class="b" span="2">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="b" span="2">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px;">f</span>
+</div>
+<div class="grid">
+<span class="b" span="4">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e" style="width:1px">e</span>
+</div>
+<div class="grid">
+<span class="b" span="4">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; margin-left:3px; width:21px">f</span>
+</div>
+<div class="grid">
+<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e" style="width:28px">e</span>
+</div>
+<div class="grid">
+<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; margin-left:144px">f</span><span class="f" style="position:relative;left:-20px">f</span>
+</div>
+<div class="grid">
+<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; width:4px;margin-left:138px">f</span><span class="f" style="position:relative;top:-20px;">f</span>
+</div>
+<div class="grid">
+<span class="b" span="50">b</span><span class="a2">a</span><span class="g" >g</span><br><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="b" span="50">b</span><span class="a2">a</span><span class="g">g</span><span class="g">g</span><br><span class="g" style="visibility:hidden">g</span>
+</div>
+</div>
+
+<script>
+var elms = document.querySelectorAll("[span].b");
+for (i=0; i < elms.length; ++i) {
+  var e = elms[i];
+  var span = e.getAttribute("span");
+  var width = (15 + (3*parseInt((span>10000?10000:span))));
+  e.style.width = width + "px";
+}
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-implicit-001.html b/layout/reftests/css-grid/grid-placement-auto-implicit-001.html
new file mode 100644
index 0000000000..c14bf06cc5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-implicit-001.html
@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Test: Testing placement of grid items outside the explicit grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
+  <link rel="match" href="grid-placement-auto-implicit-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-template-rows: 20px;
+ grid-auto-columns: 3px;
+ grid-auto-rows: 20px;
+ border: 1px solid blue;
+ width: 270px;
+}
+
+.a { grid-area: 1 / 2; background:lime; }
+.a2 { grid-column:2; grid-row:span 2 / 1; background:lime; }
+.b { grid-column: span 1 / 2; grid-row: 2; background:pink; }
+.b2 { grid-column: span 1 / 2; background:pink; }
+.c { grid-row: 1; background:yellow; }
+.e { grid-row: 1; background:silver; }
+.f { grid-column: 1; background:cyan; }
+.g { background:tan; }
+
+span {
+  border: 1px solid;
+  line-height: 18px;
+  min-width: 0;
+}
+
+  </style>
+</head>
+<body style="overflow:hidden">
+
+<div style="float:left">
+
+<div class="grid">
+<span class="a">a</span><span class="b">b</span><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b">b</span><span class="g">g</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span><span class="f">f</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span><span class="f" style="grid-column:span 2 / 2">f</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="e" style="grid-column-start: span 10;">e</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f">f</span><span class="f">f</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="g">g</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="50">b</span><span class="g">g</span><span class="g">g</span>
+</div>
+
+</div><div style="float:left; margin-top:300px;">
+
+<div class="grid" style="height:40px">
+<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
+<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span>
+<span span="50" style="margin-top:-399960px">b</span>
+</div>
+<div class="grid" style="height:40px">
+<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
+<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span>
+<span style="grid-column: 1 / span 50; margin-top:-399960px">b</span>
+</div>
+<div class="grid" style="height:40px">
+<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
+<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:black"></span>
+<span style="grid-row: 1; grid-column:auto / span 1; width: 30px; margin-left:-59980px">b</span>
+</div>
+<div class="grid" style="height:40px">
+<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
+<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:black"></span>
+<span span="50" style="grid-row:auto / span 5; margin-top:-399960px">b</span>
+</div>
+<div class="grid" style="height:40px">
+<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
+<span style="grid-area: 1 / 1 / 5 / span 9995; width: 30px; margin-left:-29980px; color:silver"></span>
+<span style="grid-row: 1; grid-column:auto / span 10; margin-left:-59910px; margin-right:59800px">b</span>
+</div>
+
+</div><div style="float:left">
+
+<div class="grid">
+<span class="a2">a</span><span class="b2">b</span><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2">b</span><span class="g">g</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="2">b</span><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="2">b</span><span class="c">c</span><span class="f">f</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="4">b</span><span class="c">c</span><span class="e">e</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="4">b</span><span class="c">c</span><span class="f" style="grid-column:span 2 / 2">f</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="e" style="grid-column-start: span 10;">e</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="f">f</span><span class="f">f</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="g">g</span>
+</div>
+<div class="grid">
+<span class="a2">a</span><span class="b2" span="50">b</span><span class="g">g</span><span class="g">g</span>
+</div>
+</div>
+
+<script>
+var elms = document.querySelectorAll("[span]");
+for (i=0; i < elms.length; ++i) {
+  var e = elms[i];
+  e.style.gridColumnStart = "span " + e.getAttribute("span");
+}
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html
new file mode 100644
index 0000000000..85df406e6e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html
@@ -0,0 +1,251 @@
+<!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: grid item auto placement: row dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+  font-size: 12px;
+}
+
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  grid-auto-flow: row dense;
+  border: 1px solid green;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+x {
+  background: lime;
+  border: 1px solid black;
+}
+
+.test1 .a {
+  top: 0;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test1 .b {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test1 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test1 .e {
+  top: 20px;
+  left: 0px;
+}
+.test1 .d2 {
+  top: 0px;
+  left: 40px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .b {
+  top: 20px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test2 .e {
+  top: 20px;
+  left: 0px;
+}
+.test2 .d2 {
+  top: 20px;
+  left: 40px;
+}
+
+.test3 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test3 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test3 .c {
+  top: 60px;
+  left: 0px;
+  width: 60px;
+  height: 40px;
+}
+.test3 .d { top: 0px; left:60px; }
+.test3 .e {
+  top: 20px;
+  left: 60px;
+}
+.test3 .d2 {
+  top: 40px;
+  left: 0px;
+}
+
+.test4 .c {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 40px;
+}
+.test4 .e {
+  top: 20px;
+  left: 0px;
+}
+.test4 .d2 {
+  top: 40px;
+  left: 0px;
+}
+
+.test5 .c {
+  top: 20px;
+  left: 0;
+  width: 60px;
+  height: 20px;
+}
+.test5 .e {
+  top: 20px;
+  left: 60px;
+}
+.test5 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test6d2 {
+  top: 0px;
+  left: 40px;
+}
+.test6e {
+  top: 20px;
+  left: 0px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="height:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<x style="grid-row: 1 / 3">1</x>
+<x style="grid-row: 2 / 4">2</x>
+<x style="grid-row: 1 / 4">3</x>
+<x style="">4</x>
+<x style="">5</x>
+</div>
+
+<!-- bug 1228984 test 1: with "row dense" -->
+<div class="grid2">
+<x style="grid-column: 1; grid-row: 1 / 3">1</x>
+<x style="grid-column: 2; grid-row: 1">2</x>
+<x style="grid-row: span 2">3</x>
+<x style="grid-row: 2">4</x>
+</div>
+
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<x style="grid-column: 1 / 3; grid-row: 1;">1</x>
+<x style="grid-column: 1; grid-row: 2;">2</x>
+<x style="grid-column: span 2; grid-row: 3;">3</x>
+<x style="grid-column: 2; grid-row: 2;">4</x>
+</div>
+
+<!-- bug 1228984 test 3 -->
+<div class="grid2">
+<x style="grid-row: 1 / 3">1</x>
+<x style="grid-row: 2 / 4">2</x>
+<x style="grid-row: 1 / 4">3</x>
+<x style="">4</x>
+<x style="">5</x>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html b/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html
new file mode 100644
index 0000000000..b4f9c5c2d0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html
@@ -0,0 +1,187 @@
+<!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 Test: grid item auto placement: row dense</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
+  <link rel="match" href="grid-placement-auto-row-dense-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: dense row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  grid-auto-flow: row dense;
+  border: 1px solid green;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<span style="grid-row: 1 / 3">1</span>
+<span style="grid-row: 2 / 4">2</span>
+<span style="grid-row: 1 / 4">3</span>
+<span style="">4</span>
+<span style="">5</span>
+</div>
+
+<!-- bug 1228984 test 1: with "row dense" -->
+<div class="grid2">
+<span style="grid-column: 1; grid-row: 1 / 3">1</span>
+<span style="grid-column: 2; grid-row: 1">2</span>
+<span style="grid-row: span 2">3</span>
+<span style="grid-row: 2">4</span>
+</div>
+
+<!-- bug 1228984 test 2 -->
+<div class="grid2">
+<span style="grid-column: 1 / 3; grid-row: 1;">1</span>
+<span style="grid-column: 1; grid-row: 2;">2</span>
+<span style="grid-column: span 2;">3</span>
+<span style="grid-column: 2;">4</span>
+</div>
+
+<!-- bug 1228984 test 3 -->
+<div class="grid2">
+<span style="grid-row: 1 / 3">1</span>
+<span style="grid-row: 2 / 4">2</span>
+<span style="grid-row: 1 / 4">3</span>
+<span style="">4</span>
+<span style="">5</span>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html
new file mode 100644
index 0000000000..15a180dac2
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html
@@ -0,0 +1,226 @@
+<!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: grid item auto placement: row sparse</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+  font-size: 12px;
+}
+
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  border: 1px solid green;
+}
+
+x {
+  background: lime;
+  border: 1px solid black;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+.test1 .a {
+  top: 0;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test1 .b {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test1 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test1 .e {
+  top: 20px;
+  left: 0px;
+}
+.test1 .d2 {
+  top: 0px;
+  left: 40px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .b {
+  top: 20px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test2 .e {
+  top: 20px;
+  left: 0px;
+}
+.test2 .d2 {
+  top: 20px;
+  left: 40px;
+}
+
+.test3 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test3 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test3 .c {
+  top: 60px;
+  left: 0px;
+  width: 60px;
+  height: 40px;
+}
+.test3 .d { top: 60px; left:60px; }
+.test3 .e {
+  top: 20px;
+  left: 60px;
+}
+.test3 .d2 {
+  top: 80px;
+  left: 60px;
+}
+
+.test4 .c {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 40px;
+}
+.test4 .d { top: 40px; }
+.test4 .e {
+  top: 20px;
+  left: 0px;
+}
+.test4 .d2 {
+  top: 40px;
+  left: 20px;
+}
+
+.test5 .c {
+  top: 20px;
+  left: 0;
+  width: 60px;
+  height: 20px;
+}
+.test5 .e {
+  top: 20px;
+  left: 60px;
+}
+.test5 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test6 { left: 0px; top: 20px;}
+.test6d2 {
+  top: 20px;
+  left: 140px;
+}
+.test6e {
+  top: 20px;
+  left: 160px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="height:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+<!-- bug 1229009 -->
+<div class="grid2">
+<x style="grid-column: 2; grid-row: 1;">1</x>
+<x style="grid-column: 1; grid-row: 2;">2</x>
+<x style="grid-column: 3; grid-row: 1 / 3;">3</x>
+<x style="grid-column: 2; grid-row: 2;">4</x>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html
new file mode 100644
index 0000000000..52133ccacf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html
@@ -0,0 +1,160 @@
+<!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 Test: grid item auto placement: row sparse</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
+  <link rel="match" href="grid-placement-auto-row-sparse-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+.grid2 {
+  display: grid;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  border: 1px solid green;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+<!-- bug 1229009 -->
+<div class="grid2">
+<span style="grid-column: 2; grid-row: 1;">1</span>
+<span style="grid-column: 1; grid-row: 2;">2</span>
+<span style="grid-row: 1 / 3;">3</span>
+<span style="grid-row: 2;">4</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-001-ref.html b/layout/reftests/css-grid/grid-placement-definite-001-ref.html
new file mode 100644
index 0000000000..2391d214e3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-001-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+	
+.grid {
+  height: 60px;
+  border: 10px solid green;
+  position: relative;
+  font-size:12px;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.a {
+  left: 40px;
+  width: 60px;
+  height: 40px;
+}
+.b {
+  left: 20px;
+  top: 40px;
+  width: 60px;
+  height: 20px;
+}
+.c {
+  left: 80px;
+  top: 40px;
+  width: 60px;
+  height: 20px;
+}
+.d {
+  left: 0px;
+  width: 20px;
+  height: 60px;
+}
+    </style>
+</head>
+<body>
+
+<div class=grid>
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-001.html b/layout/reftests/css-grid/grid-placement-definite-001.html
new file mode 100644
index 0000000000..60050619ca
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+
+.grid {
+ display: grid;
+ grid-template-areas:
+'. . a a a .'
+'. . a a a .'
+'. b b . . .'
+;
+  border: 10px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: column dense;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+  font-size:12px;
+}
+
+span {
+  background: lime;
+  border: 1px solid black;
+}
+
+.a {
+  grid-area: a;
+}
+.b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+}
+.c {
+  grid-column: span 3;
+}
+.d {
+  grid-row: span 3;
+}
+    </style>
+</head>
+<body>
+
+<div class=grid>
+<span class=a>a</span>
+<span class=b>b</span>
+<span class=c>c</span>
+<span class=d>d</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-002-ref.html b/layout/reftests/css-grid/grid-placement-definite-002-ref.html
new file mode 100644
index 0000000000..9749c62bcf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-002-ref.html
@@ -0,0 +1,108 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+html,body {
+  font-size:12px;
+  font-family:monospace;
+}
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.test1 span {
+  top: 0;
+  left: 40px;
+  width: 100px;
+  height: 20px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test2 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 60px;
+  width: 60px;
+  height: 20px;
+}
+
+.test3 span {
+  top: 0;
+  left: 40px;
+  width: 100px;
+  height: 20px;
+}
+
+.test4 span {
+  top: 0;
+  left: 40px;
+  width: 100px;
+  height: 20px;
+}
+
+.test5 span {
+  top: 0;
+  left: 20px;
+  width: 120px;
+  height: 20px;
+}
+
+.test6 span {
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.test7 span {
+  top: 0;
+  left: 0;
+  width: 700px;
+  height: 60px;
+  padding:3px;
+}
+
+    </style>
+</head>
+<body>
+
+<div class="grid test1"><span>a</span></div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+</div>
+
+<div class="grid test3"><span>a</span></div>
+
+<div class="grid test4"><span>a</span></div>
+
+<div class="grid test5"><span>a</span></div>
+
+<div class="grid test6"><span>b</span></div>
+
+<div class="grid test7"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-002.html b/layout/reftests/css-grid/grid-placement-definite-002.html
new file mode 100644
index 0000000000..6e9cd72d1c
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-002.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+html,body {
+  font-size:12px;
+  font-family:monospace;
+}
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 { grid-template-areas:'. a a-start .'; }
+.test1 span { grid-column: a-start / 8; }
+
+.test2 {
+  grid-template-areas:
+    'a a a . . .'
+    'a a a . . .'
+    '. b b . . .'
+  ;
+}
+
+.test2 .a {
+  grid-area: a;
+}
+.test2 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+}
+.test2 .c {
+  grid-column: auto / span 3;
+}
+
+.test3 {
+  grid-template-areas:'. a .';
+  grid-template-columns: [a-start] 20px 20px [a-start-start] 20px [a-start-end];
+}
+.test3 span { grid-column: a-start / 8; }
+
+.test4, .test5 {
+  grid-template-areas:'. . . a';
+  grid-template-columns: 20px [a-start] 20px [a-start] 20px [a-end] 20px ;
+}
+.test4 span { grid-column: a-start 2 / 8; }
+.test5 span { grid-column: a / 8; }
+
+.test6 #span1 { grid-row:1/2; grid-column:1/2; }
+.test6 #span2 { grid-row:1/2; grid-column:1/2; }
+
+.test7 {grid-template-columns: 700px; grid-template-rows: 60px; }
+.test7 #span1 { grid-area: 1/1; background: red;  border: 4px solid red; color:red; }
+.test7 #span2 { grid-area: 1/1; background: lime; padding: 3px; margin:0; }
+
+    </style>
+</head>
+<body>
+
+<div class="grid test1"><span>a</span></div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+</div>
+
+<div class="grid test3"><span>a</span></div>
+
+<div class="grid test4"><span>a</span></div>
+
+<div class="grid test5"><span>a</span></div>
+
+<div class="grid test6"><span id="span1">a</span><span id="span2">b</span></div>
+
+<div class="grid test7"><span id="span1">FAIL</span><span id="span2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-003-ref.html b/layout/reftests/css-grid/grid-placement-definite-003-ref.html
new file mode 100644
index 0000000000..e9d6f8c142
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-003-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+html,body {
+  font-size:12px;
+  font-family:monospace;
+}
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.test1 span {
+  top: 0;
+  left: 40px;
+  width: 100px;
+  height: 20px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test2 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 60px;
+  width: 60px;
+  height: 20px;
+}
+
+.test3 span {
+  top: 0;
+  left: 40px;
+  width: 100px;
+  height: 20px;
+}
+
+.test4 span {
+  top: 0;
+  left: 40px;
+  width: 100px;
+  height: 20px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1"><span>a</span></div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+</div>
+
+<div class="grid test3"><span>a</span></div>
+
+<div class="grid test4"><span>a</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-003.html b/layout/reftests/css-grid/grid-placement-definite-003.html
new file mode 100644
index 0000000000..c23505f2ac
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-003.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+html,body {
+  font-size:12px;
+  font-family:monospace;
+}
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 { grid-template-areas:'.. a a-start-.'; }
+.test1 span { grid-column: a-start- / 8; }
+
+.test2 {
+  grid-template-areas:
+    'a a a ... . .'
+    'a a a .   . ..'
+    '.-b b .   . ...'
+  ;
+}
+
+.test2 .a {
+  grid-area: a;
+}
+.test2 .b {
+  grid-column: 2 / span 3;
+  grid-row: b;
+}
+.test2 .c {
+  grid-column: auto / span 3;
+}
+
+.test3 {
+  grid-template-areas:'.a.';
+  grid-template-columns: [a-start] 20px 20px [a-start-start] 20px [a-start-end];
+}
+.test3 span { grid-column: a-start / 8; }
+
+.test4 {
+  grid-template-areas:'. .... .-a';
+  grid-template-columns: 20px [-a-start] 20px [-a-start] 20px [-a-end] 20px ;
+}
+.test4 span { grid-column: -a-start 2 / 8; }
+
+    </style>
+</head>
+<body>
+
+<div class="grid test1"><span>a</span></div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+</div>
+
+<div class="grid test3"><span>a</span></div>
+
+<div class="grid test4"><span>a</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html b/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html
new file mode 100644
index 0000000000..a9684cfd1d
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html
@@ -0,0 +1,93 @@
+<!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 Test: Testing placement of grid items outside the explicit grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+ border: 1px solid blue;
+}
+
+.a { background:lime; }
+.b { background:pink; }
+.c { width:1px; display: block; background:yellow; }
+.d { margin-left:3px; width:10000px; display: block; background:cyan; }
+
+span {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border: 1px solid;
+  vertical-align:top;
+}
+
+  </style>
+</head>
+<body style="overflow:hidden">
+
+<div class="grid">
+<span class="b">b</span><span class="a">a</span><span class="c" style="width:18px">c</span>
+</div>
+
+<div class="grid">
+<span class="b" span="2">b</span><span class="a">a</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="b" span="3">b</span><span class="a">a</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="b" span="4">b</span><span class="a">a</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="b" span="100">b</span><span class="a">a</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="b" span="9998">b</span>
+</div>
+<div class="grid">
+<span class="b" span="9999">b</span>
+</div>
+<div class="grid">
+<span class="b" span="10000">b</span>
+</div>
+<div class="grid">
+<span class="b" span="12345">b</span>
+</div>
+<div class="grid" style="height:40px">
+<span class="b" span="10000">b</span>
+</div>
+<div class="grid">
+<span class="b" span="2">b</span><span class="a">a</span><span class="d">d</span>
+</div>
+<div class="grid">
+<span class="b" style="margin-left:56px; width:30000px; ">b</span>
+</div>
+
+<div class="grid cols" style="margin-left:-30000px;">
+<span class="b" style="width:1px; margin-left:30062px">b</span>
+<span class="c" style="margin-left:29000px; width:1063px;">c</span>
+</div>
+<div class="grid rows" style="border:none">
+<span class="b" style="margin-top:11px;height:1px;"></span>
+</div>
+
+
+<script>
+var elms = document.querySelectorAll("[span].b");
+for (i=0; i < elms.length; ++i) {
+  var e = elms[i];
+  var span = e.getAttribute("span");
+  var width = (15 + 3*parseInt((span>10000?10000:span)));
+  e.style.width = width + "px";
+}
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-001.html b/layout/reftests/css-grid/grid-placement-definite-implicit-001.html
new file mode 100644
index 0000000000..b559770948
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-001.html
@@ -0,0 +1,112 @@
+<!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 Test: Testing placement of grid items outside the explicit grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
+  <link rel="match" href="grid-placement-definite-implicit-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-template-rows: 20px;
+ grid-auto-columns: 3px;
+ grid-auto-rows: 20px;
+ border: 1px solid blue;
+ justify-items: stretch;
+}
+
+.a { grid-area: 1 / 2; background:lime; }
+.b { grid-column: span 1 / 2; grid-row: 1; background:pink; }
+.c { grid-row: 2; background:yellow; }
+.d { grid-row: 2; grid-column: 1 / span 20000; background:cyan; }
+
+span {
+  border: 1px solid;
+  line-height: 18px;
+  min-width: 0;
+}
+
+  </style>
+</head>
+<body style="overflow:hidden">
+
+<div class="grid">
+<span class="a">a</span><span class="b">b</span><span class="c">c</span>
+</div>
+
+<div class="grid">
+<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="3">b</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="100">b</span><span class="c">c</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="9998">b</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="9999">b</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="10000">b</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="12345">b</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="10000">b</span><span class="d">d</span>
+</div>
+<div class="grid">
+<span class="a">a</span><span class="b" span="2">b</span><span class="d">d</span>
+</div>
+<div class="grid">
+<span class="b" style="grid-column: 9997 / span 1000; margin-left:-30000px; ">b</span>
+</div>
+
+<div class="grid cols" style="margin-left:-30000px;">
+<span class="b" style="grid-column: span 1 / a;">b</span>
+<span class="c" style="grid-column: a;">c</span>
+</div>
+<div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none">
+<span class="b" style="grid-row: span 1 / a;"></span>
+</div>
+
+<script>
+var elms = document.querySelectorAll("[span]");
+for (i=0; i < elms.length; ++i) {
+  var e = elms[i];
+  e.style.gridColumnStart = "span " + e.getAttribute("span");
+}
+var cols = '"';
+for (j = 0; j < 10010; ++j) {
+  cols += "a "
+}
+cols += '"';
+var rows = '';
+for (j = 0; j < 10010; ++j) {
+  rows += '"a" '
+}
+
+var style = document.createElement('style');
+style.appendChild(document.createTextNode(
+  ".cols { grid-template-areas: " + cols + "; }" +
+  ".rows { grid-template-areas: " + rows + "; }"));
+var head = document.querySelector("head");
+head.appendChild(style)
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html b/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html
new file mode 100644
index 0000000000..a796ea9acd
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html
@@ -0,0 +1,231 @@
+<!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 Test: Testing definite placement with non-existent line names</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
+  <style type="text/css">
+html,body {
+  font-size: 16px;
+  font-family: monospace;
+  padding:0; margin:0;
+}
+
+.grid {
+  height: 40px;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  top:0; left:0; width:20px; height:20px;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.XeN   { left: 20px; width: 80px; }
+.XsN   { width: 80px; }              .XsN ~ span { top:20px; left:60px; }
+.NeX   { left: 20px; width: 80px; }
+.NsX   { width: 80px; }              .NsX  ~ span { left: 60px; top: 20px; }
+.XeA   { width: 100px; }             .XeA  ~ span { top: 20px; }
+.XsA   { width: 60px; }              .XsA  ~ span { left: 60px; }
+.XsA2  { width: 80px; }              .XsA2 ~ span { left: 60px; top: 20px; }
+.XsA3  { width: 120px; }             .XsA3 ~ span { left: 60px; top: 20px; }
+.AsX   { width: 60px;}               .AsX  ~ span { left: 60px; }
+.xsN   { }                           .xsN  ~ span { left: 20px; }
+.x2sN  { width: 40px; }              .x2sN ~ span { left: 40px; }
+.xsN2  { width: 40px; }              .xsN2 ~ span { left: 20px; top: 20px; }
+.xXs   { }                           .xXs  ~ span { left: 60px;}
+.aXs   { }                           .aXs  ~ span { left: 60px;}
+.aXe   { left: 20px; width: 60px; }
+.xXe   { width: 100px; }             .xXe  ~ span { left: 20px; top: 20px; }
+
+.AXe   { width: 80px; }              .AXe  ~ span { top: 20px; }
+.A2Xe  { left: 20px; width: 60px; }
+.XXe   { left: 60px; }
+.XX3e  { left: 60px; width: 40px; }
+.XbXe  { width: 100px; }             .XbXe ~ span  { top: 20px; left: 40px; }
+.XX0b  { }                           .XX0b ~ span  { left: 60px; }
+.XX1b  { }                           .XX1b ~ span  { left: 60px; }
+.XX2b  { width: 40px; }              .XX2b ~ span  { left: 60px; }
+.XbN1  { width: 60px; }              .XbN1 ~ span  { left: 60px; }
+.XbN2  { width: 80px; }              .XbN2 ~ span  { top: 20px; left: 60px; }
+.Xbb   { }                           .Xbb  ~ span  { left: 80px; }
+.Xee   { left: 60px; width:40px; }
+.nX2s  { width: 40px; }              .nX2s ~ span  { left: 80px; }
+.nXs   { width: 40px; }              .nXs  ~ span  { left: 60px; }
+.nXe   { left: 20px; width: 40px; }
+.nX2e  { left: 40px; width: 40px; }
+
+.nX3e  { left: 60px; width: 40px; }
+.n3Xe  { width: 60px; }              .n3Xe ~ span  { top: 20px; }
+.n4Xe  { width: 80px; }              .n4Xe ~ span  { top: 20px; left: 20px; }
+.Xen3  { left: 60px; width: 60px; }
+.Xea   { left: 60px;  }
+.Xea2  { left: 60px; width: 40px; }
+.Xea3  { left: 60px; width: 60px; }
+.Xsa   { }                           .Xsa   ~ span  { left: 20px; }
+.Xsa2  { width: 40px;   }            .Xsa2  ~ span  { left: 20px; top: 20px; }
+.Xsa4  { width: 100px;  }            .Xsa4  ~ span  { left: 20px; top: 20px; }
+.Xs2a  { width: 40px;   }            .Xs2a  ~ span  { left: 40px; }
+.Xs2a2 { width: 60px;   }            .Xs2a2 ~ span  { left: 40px; top: 20px; }
+.Xs2a4 { width: 120px;  }            .Xs2a4 ~ span  { left: 40px; top: 20px; }
+.Xs3a  { width: 60px;   }            .Xs3a  ~ span  { left: 60px; }
+.Xs3a2 { width: 80px;   }            .Xs3a2 ~ span  { left: 60px; top: 20px; }
+.Xs3a4 { width: 140px;  }            .Xs3a4 ~ span  { left: 60px; top: 20px; }
+
+.nxe   { width: 60px;   }            .nxe   ~ span  { top: 20px; }
+.nx3e  { width: 100px;  }            .nx3e  ~ span  { top: 20px; }
+.n2x3e { left: 20px; width: 80px; }
+.Axe   { width: 60px;   }            .Axe   ~ span  { top: 20px; }
+.A2xe  { left: 20px; width: 40px; }
+.Ax3e  { width: 100px;  }            .Ax3e  ~ span  { top: 20px; }
+.A2x3e { left: 20px; width: 80px; }
+.Aa    { }                           .Aa    ~ span  { top: 20px; }
+.A2a   { left: 20px; width: 40px; }
+.Aa3   { width: 80px;   }            .Aa3   ~ span  { top: 20px; }
+.AXs   { width: 40px; }              .AXs   ~ span  { left:40px; }
+.A2Xs  { width: 60px; }              .A2Xs  ~ span  { left: 40px; top:20px; }
+._Xs   { }                           ._Xs   ~ span  { left: 60px; }
+._Xe   { left: 60px; }
+._xe   { }                           ._xe   ~ span  { top: 20px; }
+._x3e  { }                           ._x3e  ~ span  { top: 20px; }
+
+._xa   { }                           ._xa   ~ span  { top: 20px; }
+._xa3  { }                           ._xa3  ~ span  { top: 20px; }
+._xn3  { width: 60px;   }            ._xn3  ~ span  { top: 20px; }
+._xn5  { width: 100px;  }            ._xn5  ~ span  { top: 20px; }
+.Xs_   { }                           .Xs_   ~ span  { left: 20px; }
+.X2s_  { }                           .X2s_  ~ span  { left: 40px; }
+.X2e_  { left: 80px; }
+.A_    { }                           .A_    ~ span  { top: 20px; }
+.A2_   { left: 20px; }
+.x3_   { }                           .x3_   ~ span  { top: 20px; }
+.a2_   { }                           .a2_   ~ span  { top: 20px; }
+.a-2_  { }                           .a-2_  ~ span  { top: 20px; }
+._n    { }                           ._n    ~ span  { left: 20px; }
+._n2   { }                           ._n2   ~ span  { top: 20px; }
+.A3Xe  { left: 60px; }
+.asA   { }                           .asA   ~ span  { left: 20px; }
+.asA2  { }                           .asA2  ~ span  { top: 20px; }
+.a2sA2 { width: 40px; }              .a2sA2 ~ span  { left: 20px; top: 20px; }
+.as1   { }                           .as1   ~ span  { left: 20px; }
+.as2   { }                           .as2   ~ span  { top: 20px; }
+.as3   { left: 20px; }
+
+.c1 { background:grey; }
+
+    </style>
+</head>
+<body>
+
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="XeN" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XsN" ></span><span class="c1"></span></div>
+<div class="grid"><span class="NeX" ></span><span class="c1"></span></div>
+<div class="grid"><span class="NsX" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XeA" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XsA" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XsA2"></span><span class="c1"></span></div>
+<div class="grid"><span class="XsA3"></span><span class="c1"></span></div>
+<div class="grid"><span class="AsX" ></span><span class="c1"></span></div>
+<div class="grid"><span class="xsN" ></span><span class="c1"></span></div>
+<div class="grid"><span class="x2sN"></span><span class="c1"></span></div>
+<div class="grid"><span class="xsN2"></span><span class="c1"></span></div>
+<div class="grid"><span class="xXs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="aXs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="aXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="xXe" ></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="AXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div>
+<div class="grid"><span class="XXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XX3e"></span><span class="c1"></span></div>
+<div class="grid"><span class="XbXe"></span><span class="c1"></span></div>
+<div class="grid"><span class="XX0b"></span><span class="c1"></span></div>
+<div class="grid"><span class="XX1b"></span><span class="c1"></span></div>
+<div class="grid"><span class="XX2b"></span><span class="c1"></span></div>
+<div class="grid"><span class="XbN1"></span><span class="c1"></span></div>
+<div class="grid"><span class="XbN2"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xee" ></span><span class="c1"></span></div>
+<div class="grid"><span class="nX2s"></span><span class="c1"></span></div>
+<div class="grid"><span class="nXs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="nXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="nX2e"></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div>
+<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xea"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xsa"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="nxe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div>
+<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div>
+<div class="grid"><span class="Axe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div>
+<div class="grid"><span class="Aa"   ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2a"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="Aa3"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="AXs"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="_Xs"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_Xe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_xe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="_xa" ></span><span class="c1"></span></div>
+<div class="grid"><span class="_xa3"></span><span class="c1"></span></div>
+<div class="grid"><span class="_xn3"></span><span class="c1"></span></div>
+<div class="grid"><span class="_xn5"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="X2s_"></span><span class="c1"></span></div>
+<div class="grid"><span class="X2e_"></span><span class="c1"></span></div>
+<div class="grid"><span class="A_"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="x3_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="a2_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="a-2_"></span><span class="c1"></span></div>
+<div class="grid"><span class="_n"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
+<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
+<div class="grid"><span class="asA"></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px; clear:both">
+<div class="grid"><span class="asA2"></span><span class="c1"></span></div>
+<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div>
+<div class="grid"><span class="as1"></span><span class="c1"></span></div>
+<div class="grid"><span class="as2"></span><span class="c1"></span></div>
+<div class="grid"><span class="as3"></span><span class="c1"></span></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-002.html b/layout/reftests/css-grid/grid-placement-definite-implicit-002.html
new file mode 100644
index 0000000000..5e74258547
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-definite-implicit-002.html
@@ -0,0 +1,244 @@
+<!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 Test: Testing definite placement with non-existent line names</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot">
+  <link rel="match" href="grid-placement-definite-implicit-002-ref.html">
+  <style type="text/css">
+html,body {
+  font-size: 16px;
+  font-family: monospace;
+  padding:0; margin:0;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+  grid-row: 1;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: [A] 20px [A] 20px;
+  grid-template-rows: 20px 20px;
+  grid-auto-columns: 20px;
+}
+
+/* Legend:
+             X = line name with no match
+             x = ditto with span
+             A = existing line name
+             a = ditto with span
+             N = line number
+             n = ditto with span
+             e = on the end side
+             s = on the start side
+*/
+.XeN   { grid-column: X 3 / 2;            }
+.XsN   { grid-column: X -3 / 2;           }
+.NeX   { grid-column: 2 / X 3;            }
+.NsX   { grid-column: 2 / X -3;           }
+.XeA   { grid-column: X 3 / A;            }
+.XsA   { grid-column: X -3 / A;           }
+.XsA2  { grid-column: X -3 / A 2;         }
+.XsA3  { grid-column: X -3 / A 3;         }
+.AsX   { grid-column: A / X -3;           }
+.xsN   { grid-column: span X / 1;         }
+.x2sN  { grid-column: span X 2 / 1;       }
+.xsN2  { grid-column: span X / 2;         }
+.xXs   { grid-column: span X / X -2;      }
+.aXs   { grid-column: span A / X -2;      }
+.aXe   { grid-column: span A / X 2;       }
+.xXe   { grid-column: span X / X 2;       }
+
+.AXe   { grid-column: A / X 2;            }
+.A2Xe  { grid-column: A 2 / X 2;          }
+.XXe   { grid-column: X / X 2;            }
+.XX3e  { grid-column: X / X 3;            }
+.XbXe  { grid-column: X -2 / X;           }
+.XX0b  { grid-column: X -3 / X -3;        }
+.XX1b  { grid-column: X -3 / X -2;        }
+.XX2b  { grid-column: X -3 / X -1;        }
+.XbN1  { grid-column: X -3 / 1;           }
+.XbN2  { grid-column: X -3 / 2;           }
+.Xbb   { grid-column: X -3 / X -4;        }
+.Xee   { grid-column: X 3 / X;            }
+.nX2s  { grid-column: span 2 / X -2;      }
+.nXs   { grid-column: span 2 / X -1;      }
+.nXe   { grid-column: span 2 / X;         }
+.nX2e  { grid-column: span 2 / X 2;       }
+
+.nX3e  { grid-column: span 2 / X 3;       }
+.n3Xe  { grid-column: span 3 / X;         }
+.n4Xe  { grid-column: span 4 / X;         }
+.Xen3  { grid-column: X / span 3;         }
+.Xea   { grid-column: X / span A;         }
+.Xea2  { grid-column: X / span A 2;       }
+.Xea3  { grid-column: X / span A 3;       }
+.Xsa   { grid-column: X -1 / span A;      }
+.Xsa2  { grid-column: X -1 / span A 2;    }
+.Xsa4  { grid-column: X -1 / span A 4;    }
+.Xs2a  { grid-column: X -2 / span A;      }
+.Xs2a2 { grid-column: X -2 / span A 2;    }
+.Xs2a4 { grid-column: X -2 / span A 4;    }
+.Xs3a  { grid-column: X -3 / span A;      }
+.Xs3a2 { grid-column: X -3 / span A 2;    }
+.Xs3a4 { grid-column: X -3 / span A 4;    }
+
+.nxe   { grid-column: 1 / span X;         }
+.nx3e  { grid-column: 1 / span X 3;       }
+.n2x3e { grid-column: 2 / span X 3;       }
+.Axe   { grid-column: A / span X;         }
+.A2xe  { grid-column: A 2 / span X;       }
+.Ax3e  { grid-column: A / span X 3;       }
+.A2x3e { grid-column: A 2 / span X 3;     }
+.Aa    { grid-column: A / span A;         }
+.A2a   { grid-column: A 2 / span A;       }
+.Aa3   { grid-column: A / span A 3;       }
+.AXs   { grid-column: A / X -2;           }
+.A2Xs  { grid-column: A 2 / X -2;         }
+._Xs   { grid-column: auto / X -2;        }
+._Xe   { grid-column: auto / X 2;         }
+._xe   { grid-column: auto / span X;      }
+._x3e  { grid-column: auto / span X 3;    }
+
+._xa   { grid-column: auto / span A;      }
+._xa3  { grid-column: auto / span A 3;    }
+._xn3  { grid-column: auto / span 3;      }
+._xn5  { grid-column: auto / span 5;      }
+.Xs_   { grid-column: X -1 / auto;        }
+.X2s_  { grid-column: X -2 / auto;        }
+.X2e_  { grid-column: X 2 / auto;         }
+.A_    { grid-column: A / auto;           }
+.A2_   { grid-column: A 2 / auto;         }
+.x3_   { grid-column: span X 3 / auto;    }
+.a2_   { grid-column: span A 2 / auto;    }
+.a-2_  { grid-column: span A -2 / auto;   } /*intentionally invalid span*/
+._n    { grid-column: auto / 1;           }
+._n2   { grid-column: auto / 2;           }
+.A3Xe  { grid-column: A 3 / X 2;          }
+.asA   { grid-column: span A / A;         }
+.asA2  { grid-column: span A / A 2;       }
+.a2sA2 { grid-column: span A 2 / A 2;     }
+.as1   { grid-column: span A / 1;         }
+.as2   { grid-column: span A / 2;         }
+.as3   { grid-column: span A / 3;         }
+
+.c1 { grid-column:1; grid-row:auto; background:grey; }
+
+  </style>
+</head>
+<body>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="XeN" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XsN" ></span><span class="c1"></span></div>
+<div class="grid"><span class="NeX" ></span><span class="c1"></span></div>
+<div class="grid"><span class="NsX" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XeA" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XsA" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XsA2"></span><span class="c1"></span></div>
+<div class="grid"><span class="XsA3"></span><span class="c1"></span></div>
+<div class="grid"><span class="AsX" ></span><span class="c1"></span></div>
+<div class="grid"><span class="xsN" ></span><span class="c1"></span></div>
+<div class="grid"><span class="x2sN"></span><span class="c1"></span></div>
+<div class="grid"><span class="xsN2"></span><span class="c1"></span></div>
+<div class="grid"><span class="xXs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="aXs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="aXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="xXe" ></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="AXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div>
+<div class="grid"><span class="XXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="XX3e"></span><span class="c1"></span></div>
+<div class="grid"><span class="XbXe"></span><span class="c1"></span></div>
+<div class="grid"><span class="XX0b"></span><span class="c1"></span></div>
+<div class="grid"><span class="XX1b"></span><span class="c1"></span></div>
+<div class="grid"><span class="XX2b"></span><span class="c1"></span></div>
+<div class="grid"><span class="XbN1"></span><span class="c1"></span></div>
+<div class="grid"><span class="XbN2"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xee" ></span><span class="c1"></span></div>
+<div class="grid"><span class="nX2s"></span><span class="c1"></span></div>
+<div class="grid"><span class="nXs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="nXe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="nX2e"></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div>
+<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xea"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xsa"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div>
+
+<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div>
+
+<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="nxe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div>
+<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div>
+<div class="grid"><span class="Axe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div>
+<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div>
+<div class="grid"><span class="Aa"   ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2a"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="Aa3"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="AXs"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div>
+<div class="grid"><span class="_Xs"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_Xe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_xe"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px">
+<div class="grid"><span class="_xa" ></span><span class="c1"></span></div>
+<div class="grid"><span class="_xa3"></span><span class="c1"></span></div>
+<div class="grid"><span class="_xn3"></span><span class="c1"></span></div>
+<div class="grid"><span class="_xn5"></span><span class="c1"></span></div>
+<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="X2s_"></span><span class="c1"></span></div>
+<div class="grid"><span class="X2e_"></span><span class="c1"></span></div>
+<div class="grid"><span class="A_"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="A2_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="x3_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="a2_" ></span><span class="c1"></span></div>
+<div class="grid"><span class="a-2_"></span><span class="c1"></span></div>
+<div class="grid"><span class="_n"  ></span><span class="c1"></span></div>
+<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
+<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
+<div class="grid"><span class="asA"></span><span class="c1"></span></div>
+</div>
+
+<div style="float:left; width:140px; clear:both">
+<div class="grid"><span class="asA2"></span><span class="c1"></span></div>
+<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div>
+<div class="grid"><span class="as1"></span><span class="c1"></span></div>
+<div class="grid"><span class="as2"></span><span class="c1"></span></div>
+<div class="grid"><span class="as3"></span><span class="c1"></span></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
new file mode 100644
index 0000000000..01e936d3ae
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: implicit named areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182">
+  <style type="text/css">
+div {
+  display: grid;
+  grid-auto-columns: 3px;
+  grid-auto-rows: 3px;
+  border: 1px solid;
+  float: left;
+  width: 100px;
+  margin: 2px;
+  place-items: stretch;
+  place-content: start;
+}
+.row-tests div {
+  height: 100px;
+}
+span { background:lime; grid-column:A/B; grid-row:A/B; }
+
+.col-valid { grid-template-columns:[A] 40px [] 40px [B]; }
+.row-valid { grid-template-rows:   [A] 40px [] 40px [B]; }
+
+.col-start-1 { grid-template-columns:[A] 40px [] 40px; }
+.row-start-1 { grid-template-rows:   [A] 40px [] 40px; }
+
+.col-end-1 { grid-template-columns:[B] 40px [] 40px; }
+.row-end-1 { grid-template-rows:   [B] 40px [] 40px; }
+
+.col-start { grid-template-columns: 40px [A] 40px []; }
+.row-start { grid-template-rows:    40px [A] 40px []; }
+
+.col-end { grid-template-columns:40px [B] 40px; }
+.row-end { grid-template-rows:   40px [B] 40px; }
+
+.col-end-start { grid-template-columns:[B] 40px [A] 40px; }
+.row-end-start { grid-template-rows:   [B] 40px [A] 40px; }
+
+.col-start-end-start { grid-template-columns:[A] 40px [B] 40px [A] 40px; }
+.row-start-end-start { grid-template-rows:   [A] 40px [B] 40px [A] 40px; }
+
+.col-start-start-end { grid-template-columns:[A] 40px [A] 40px [B] 40px; }
+.row-start-start-end { grid-template-rows:   [A] 40px [A] 40px [B] 40px; }
+
+.col-start-end-end { grid-template-columns:[A] 40px [B] 40px [B]; }
+.row-start-end-end { grid-template-rows:   [A] 40px [B] 40px [B]; }
+
+.col-start-last { grid-template-columns: 40px [] 40px [A]; }
+.row-start-last { grid-template-rows:    40px [] 40px [A]; }
+
+.col-same-1 { grid-template-columns:[B A] 40px [] 40px; }
+.row-same-1 { grid-template-rows:   [B A] 40px [] 40px; }
+
+.col-same-2 { grid-template-columns:40px [B A] 40px; }
+.row-same-2 { grid-template-rows:   40px [B A] 40px; }
+
+.col-same-2b { grid-template-columns:40px [A B] 40px; }
+.row-same-2b { grid-template-rows:   40px [A B] 40px; }
+
+.col-same-3 { grid-template-columns:40px [] 40px [B A]; }
+.row-same-3 { grid-template-rows:   40px [] 40px [B A]; }
+    </style>
+</head>
+<body>
+
+<div class="col-valid"><span></span></div>
+<div class="col-start-1"><span></span></div>
+<div class="col-end-1"><span></span></div>
+<div class="col-start"><span></span></div>
+<div class="col-end"><span></span></div>
+<div class="col-end-start"><span></span></div>
+<div class="col-start-end-start"><span></span></div>
+
+<br clear="all">
+
+<div class="col-valid row-valid"><span></span></div>
+<div class="col-start-1 row-valid"><span></span></div>
+<div class="col-end-1 row-valid"><span></span></div>
+<div class="col-start row-valid"><span></span></div>
+<div class="col-end row-valid"><span></span></div>
+<div class="col-end-start row-valid"><span></span></div>
+<div class="col-start-end-start row-valid"><span></span></div>
+
+<br clear="all">
+
+<div class="col-start-start-end"><span></span></div>
+<div class="col-start-end-end"><span></span></div>
+<div class="col-start-last"><span></span></div>
+<div class="col-same-1"><span></span></div>
+<div class="col-same-2"><span></span></div>
+<div class="col-same-2b"><span></span></div>
+<div class="col-same-3"><span></span></div>
+
+<br clear="all">
+
+<div class="col-start-start-end row-valid"><span></span></div>
+<div class="col-start-end-end row-valid"><span></span></div>
+<div class="col-start-last row-valid"><span></span></div>
+<div class="col-same-1 row-valid"><span></span></div>
+<div class="col-same-2 row-valid"><span></span></div>
+<div class="col-same-2b row-valid"><span></span></div>
+<div class="col-same-3 row-valid"><span></span></div>
+
+<br clear="all">
+
+<x class="row-tests">
+
+<div class="row-valid"><span></span></div>
+<div class="row-start-1"><span></span></div>
+<div class="row-end-1"><span></span></div>
+<div class="row-start"><span></span></div>
+<div class="row-end"><span></span></div>
+<div class="row-end-start"><span></span></div>
+<div class="row-start-end-start"><span></span></div>
+
+<br clear="all">
+
+<div class="row-valid col-valid"><span></span></div>
+<div class="row-start-1 col-valid"><span></span></div>
+<div class="row-end-1 col-valid"><span></span></div>
+<div class="row-start col-valid"><span></span></div>
+<div class="row-end col-valid"><span></span></div>
+<div class="row-end-start col-valid"><span></span></div>
+<div class="row-start-end-start col-valid"><span></span></div>
+
+<br clear="all">
+
+<div class="row-start-start-end"><span></span></div>
+<div class="row-start-end-end"><span></span></div>
+<div class="row-start-last"><span></span></div>
+<div class="row-same-1"><span></span></div>
+<div class="row-same-2"><span></span></div>
+<div class="row-same-2b"><span></span></div>
+<div class="row-same-3"><span></span></div>
+
+<br clear="all">
+
+<div class="row-start-start-end col-valid"><span></span></div>
+<div class="row-start-end-end col-valid"><span></span></div>
+<div class="row-start-last col-valid"><span></span></div>
+<div class="row-same-1 col-valid"><span></span></div>
+<div class="row-same-2 col-valid"><span></span></div>
+<div class="row-same-2b col-valid"><span></span></div>
+<div class="row-same-3 col-valid"><span></span></div>
+
+</x>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html
new file mode 100644
index 0000000000..8f73dfb9b6
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html
@@ -0,0 +1,159 @@
+<!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: implicit named areas</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot">
+  <link rel="match" href="grid-placement-implicit-named-areas-001-ref.html">
+  <style type="text/css">
+div {
+  display: grid;
+  grid-auto-columns: 3px;
+  grid-auto-rows: 3px;
+  border: 1px solid;
+  float: left;
+  width: 100px;
+  margin: 2px;
+  align-items: stretch;
+  justify-items: stretch;
+  align-content: start;
+  justify-content: start;
+}
+.row-tests div {
+  height: 100px;
+}
+span { background:lime; grid-column:A; grid-row:A; }
+
+.col-valid { grid-template-columns:[A-start] 40px [] 40px [A-end]; }
+.row-valid { grid-template-rows:   [A-start] 40px [] 40px [A-end]; }
+
+.col-start-1 { grid-template-columns:[A-start] 40px [] 40px; }
+.row-start-1 { grid-template-rows:   [A-start] 40px [] 40px; }
+
+.col-end-1 { grid-template-columns:[A-end] 40px [] 40px; }
+.row-end-1 { grid-template-rows:   [A-end] 40px [] 40px; }
+
+.col-start { grid-template-columns: 40px [A-start] 40px []; }
+.row-start { grid-template-rows:    40px [A-start] 40px []; }
+
+.col-end { grid-template-columns:40px [A-end] 40px; }
+.row-end { grid-template-rows:   40px [A-end] 40px; }
+
+.col-end-start { grid-template-columns:[A-end] 40px [A-start] 40px; }
+.row-end-start { grid-template-rows:   [A-end] 40px [A-start] 40px; }
+
+.col-start-end-start { grid-template-columns:[A-start] 40px [A-end] 40px [A-start] 40px; }
+.row-start-end-start { grid-template-rows:   [A-start] 40px [A-end] 40px [A-start] 40px; }
+
+.col-start-start-end { grid-template-columns:[A-start] 40px [A-start] 40px [A-end] 40px; }
+.row-start-start-end { grid-template-rows:   [A-start] 40px [A-start] 40px [A-end] 40px; }
+
+.col-start-end-end { grid-template-columns:[A-start] 40px [A-end] 40px [A-end]; }
+.row-start-end-end { grid-template-rows:   [A-start] 40px [A-end] 40px [A-end]; }
+
+.col-start-last { grid-template-columns: 40px [] 40px [A-start]; }
+.row-start-last { grid-template-rows:    40px [] 40px [A-start]; }
+
+.col-same-1 { grid-template-columns:[A-end A-start] 40px [] 40px; }
+.row-same-1 { grid-template-rows:   [A-end A-start] 40px [] 40px; }
+
+.col-same-2 { grid-template-columns:40px [A-end A-start] 40px; }
+.row-same-2 { grid-template-rows:   40px [A-end A-start] 40px; }
+
+.col-same-2b { grid-template-columns:40px [A-start A-end] 40px; }
+.row-same-2b { grid-template-rows:   40px [A-start A-end] 40px; }
+
+.col-same-3 { grid-template-columns:40px [] 40px [A-end A-start]; }
+.row-same-3 { grid-template-rows:   40px [] 40px [A-end A-start]; }
+    </style>
+</head>
+<body>
+
+<div class="col-valid"><span></span></div>
+<div class="col-start-1"><span></span></div>
+<div class="col-end-1"><span></span></div>
+<div class="col-start"><span></span></div>
+<div class="col-end"><span></span></div>
+<div class="col-end-start"><span></span></div>
+<div class="col-start-end-start"><span></span></div>
+
+<br clear="all">
+
+<div class="col-valid row-valid"><span></span></div>
+<div class="col-start-1 row-valid"><span></span></div>
+<div class="col-end-1 row-valid"><span></span></div>
+<div class="col-start row-valid"><span></span></div>
+<div class="col-end row-valid"><span></span></div>
+<div class="col-end-start row-valid"><span></span></div>
+<div class="col-start-end-start row-valid"><span></span></div>
+
+<br clear="all">
+
+<div class="col-start-start-end"><span></span></div>
+<div class="col-start-end-end"><span></span></div>
+<div class="col-start-last"><span></span></div>
+<div class="col-same-1"><span></span></div>
+<div class="col-same-2"><span></span></div>
+<div class="col-same-2b"><span></span></div>
+<div class="col-same-3"><span></span></div>
+
+<br clear="all">
+
+<div class="col-start-start-end row-valid"><span></span></div>
+<div class="col-start-end-end row-valid"><span></span></div>
+<div class="col-start-last row-valid"><span></span></div>
+<div class="col-same-1 row-valid"><span></span></div>
+<div class="col-same-2 row-valid"><span></span></div>
+<div class="col-same-2b row-valid"><span></span></div>
+<div class="col-same-3 row-valid"><span></span></div>
+
+<br clear="all">
+
+<x class="row-tests">
+
+<div class="row-valid"><span></span></div>
+<div class="row-start-1"><span></span></div>
+<div class="row-end-1"><span></span></div>
+<div class="row-start"><span></span></div>
+<div class="row-end"><span></span></div>
+<div class="row-end-start"><span></span></div>
+<div class="row-start-end-start"><span></span></div>
+
+<br clear="all">
+
+<div class="row-valid col-valid"><span></span></div>
+<div class="row-start-1 col-valid"><span></span></div>
+<div class="row-end-1 col-valid"><span></span></div>
+<div class="row-start col-valid"><span></span></div>
+<div class="row-end col-valid"><span></span></div>
+<div class="row-end-start col-valid"><span></span></div>
+<div class="row-start-end-start col-valid"><span></span></div>
+
+<br clear="all">
+
+<div class="row-start-start-end"><span></span></div>
+<div class="row-start-end-end"><span></span></div>
+<div class="row-start-last"><span></span></div>
+<div class="row-same-1"><span></span></div>
+<div class="row-same-2"><span></span></div>
+<div class="row-same-2b"><span></span></div>
+<div class="row-same-3"><span></span></div>
+
+<br clear="all">
+
+<div class="row-start-start-end col-valid"><span></span></div>
+<div class="row-start-end-end col-valid"><span></span></div>
+<div class="row-start-last col-valid"><span></span></div>
+<div class="row-same-1 col-valid"><span></span></div>
+<div class="row-same-2 col-valid"><span></span></div>
+<div class="row-same-2b col-valid"><span></span></div>
+<div class="row-same-3 col-valid"><span></span></div>
+
+</x>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-named-lines-001-ref.html b/layout/reftests/css-grid/grid-placement-named-lines-001-ref.html
new file mode 100644
index 0000000000..2a0c095185
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-named-lines-001-ref.html
@@ -0,0 +1,187 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+.t1 {
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px ;
+
+}
+.t2 {
+  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
+}
+.t3 {
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: [A-start] 60px 60px 60px;
+grid-template-areas: "B A";
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid t1" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column-start:4; background:grey"></x>
+<x style="grid-row:2; grid-column-start:7">-1</x>
+<x style="grid-row:3; grid-column-start:7">4</x>
+<x style="grid-row:3; grid-column-start:6">-2</x>
+<x style="grid-row:3; grid-column-start:5">-3</x>
+<x style="grid-row:3; grid-column-start:4">-4</x>
+<x style="grid-row:3; grid-column-start:3">-5</x>
+<x style="grid-row:4; grid-column-start:5">A -1</x>
+<x style="grid-row:4; grid-column-start:3">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:4">A</x>
+<x style="grid-row:7; grid-column-start:4">B</x>
+<x style="grid-row:8; grid-column-start:4">A 1</x>
+<x style="grid-row:8; grid-column-start:5">A 2</x>
+<x style="grid-row:8; grid-column-start:8">A 3</x>
+<x style="grid-row:8; grid-column-start:9">A 4</x>
+<x style="grid-row:8; grid-column-start:10">A 5</x>
+<y style="grid-row:2; grid-column-start:7"></y>
+<y style="grid-row:3; grid-column-start:7"></y>
+<y style="grid-row:3; grid-column-start:6" class="a2"></y>
+<y style="grid-row:3; grid-column-start:5" class="a3"></y>
+<y style="grid-row:3; grid-column-start:4" class="a4"></y>
+<y style="grid-row:3; grid-column-start:3" class="a5"></y>
+<y style="grid-row:4; grid-column-start:5"></y>
+<y style="grid-row:4; grid-column-start:3" class="a2"></y>
+<y style="grid-row:5; grid-column-start:4"></y>
+<y style="grid-row:6; grid-column-start:3"></y>
+<y style="grid-row:6; grid-column-start:2" class="a2"></y>
+<y style="grid-row:6; grid-column-start:1" class="a3"></y>
+<y style="grid-row:7; grid-column-start:4"></y>
+<y style="grid-row:7; grid-column-start:4" class="a2"></y>
+<y style="grid-row:8; grid-column-start:4"></y>
+<y style="grid-row:8; grid-column-start:5" class="a2"></y>
+<y style="grid-row:8; grid-column-start:8" class="a3"></y>
+<y style="grid-row:8; grid-column-start:9" class="a4"></y>
+<y style="grid-row:8; grid-column-start:10" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid t2" style="padding-left:13px;">
+<x style="grid-row:1; grid-column-start:5; background:grey"></x>
+<x style="grid-row:2; grid-column-start:7">-1</x>
+<x style="grid-row:3; grid-column-start:7">4</x>
+<x style="grid-row:3; grid-column-start:6">-2</x>
+<x style="grid-row:3; grid-column-start:5">-3</x>
+<x style="grid-row:3; grid-column-start:4">-4</x>
+<x style="grid-row:3; grid-column-start:3">-5</x>
+<x style="grid-row:4; grid-column-start:5">A -1</x>
+<x style="grid-row:4; grid-column-start:3">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:4">A</x>
+<x style="grid-row:7; grid-column-start:5">B</x>
+<x style="grid-row:8; grid-column-start:4">A 1</x>
+<x style="grid-row:8; grid-column-start:5">A 2</x>
+<x style="grid-row:8; grid-column-start:8">A 3</x>
+<x style="grid-row:8; grid-column-start:9">A 4</x>
+<x style="grid-row:8; grid-column-start:10">A 5</x>
+<y style="grid-row:2; grid-column-end:8"></y>
+<y style="grid-row:3; grid-column-end:8"></y>
+<y style="grid-row:3; grid-column-end:7" class="a5"></y>
+<y style="grid-row:3; grid-column-end:6" class="a4"></y>
+<y style="grid-row:3; grid-column-end:5" class="a3"></y>
+<y style="grid-row:3; grid-column-end:4" class="a2"></y>
+<y style="grid-row:4; grid-column-end:6"></y>
+<y style="grid-row:4; grid-column-end:4" class="a2"></y>
+<y style="grid-row:5; grid-column-end:5"></y>
+<y style="grid-row:6; grid-column-end:4"></y>
+<y style="grid-row:6; grid-column-end:3" class="a2"></y>
+<y style="grid-row:6; grid-column-end:2" class="a3"></y>
+<y style="grid-row:7; grid-column-end:5"></y>
+<y style="grid-row:7; grid-column-end:6" class="a2"></y>
+<y style="grid-row:8; grid-column-end:5"></y>
+<y style="grid-row:8; grid-column-end:6" class="a2"></y>
+<y style="grid-row:8; grid-column-end:9" class="a3"></y>
+<y style="grid-row:8; grid-column-end:10" class="a4"></y>
+<y style="grid-row:8; grid-column-end:11" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid t3">
+<x style="grid-row:1;  grid-column:4; background:grey"></x>
+<x style="grid-row:2;  grid-column:7/span 2;">-1</x>
+<x style="grid-row:3;  grid-column:7/span 2;">4</x>
+<x style="grid-row:4;  grid-column:6/span 3;">-2</x>
+<x style="grid-row:5;  grid-column:5/span 4;">-3</x>
+<x style="grid-row:6;  grid-column:4/span 4;">-4</x>
+<x style="grid-row:7;  grid-column:3/span 2;">-5</x>
+<x style="grid-row:8;  grid-column:5/span 4;">A -1</x>
+<x style="grid-row:9;  grid-column:3/span 2;">B -1</x>
+<x style="grid-row:10; grid-column:4/span 4;">A -2</x>
+<x style="grid-row:11; grid-column:3/span 2;">A -3</x>
+<x style="grid-row:12; grid-column:2/span 3;">A -4</x>
+<x style="grid-row:13; grid-column:1/span 4;">A -5</x>
+<x style="grid-row:14; grid-column:4/span 4;">A</x>
+<x style="grid-row:15; grid-column:4/span 4;">B</x>
+<x style="grid-row:16; grid-column:4/span 4;">A 1</x>
+<x style="grid-row:17; grid-column:5/span 4;">A 2</x>
+<x style="grid-row:18; grid-column:8/span 2;">A 3</x>
+<x style="grid-row:19; grid-column:9/span 2;">A 4</x>
+<x style="grid-row:20; grid-column:10/span 2;">A 5</x>
+<y style="grid-row:2;  grid-column:7/span 2;"></y>
+<y style="grid-row:3;  grid-column:7/span 2;"></y>
+<y style="grid-row:4;  grid-column:6/span 3;"></y>
+<y style="grid-row:5;  grid-column:5/span 4;"></y>
+<y style="grid-row:6;  grid-column:4/span 4;"></y>
+<y style="grid-row:7;  grid-column:3/span 2;"></y>
+<y style="grid-row:8;  grid-column:5/span 4;"></y>
+<y style="grid-row:9;  grid-column:3/span 2;"></y>
+<y style="grid-row:10; grid-column:4/span 4;"></y>
+<y style="grid-row:11; grid-column:3/span 2;"></y>
+<y style="grid-row:12; grid-column:2/span 3;"></y>
+<y style="grid-row:13; grid-column:1/span 4;"></y>
+<y style="grid-row:14; grid-column:4/span 4;"></y>
+<y style="grid-row:15; grid-column:4/span 4;"></y>
+<y style="grid-row:16; grid-column:4/span 4;"></y>
+<y style="grid-row:17; grid-column:5/span 4;"></y>
+<y style="grid-row:18; grid-column:8/span 2;"></y>
+<y style="grid-row:19; grid-column:9/span 2;"></y>
+<y style="grid-row:20; grid-column:10/span 2;"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-named-lines-001.html b/layout/reftests/css-grid/grid-placement-named-lines-001.html
new file mode 100644
index 0000000000..d0e4244923
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-named-lines-001.html
@@ -0,0 +1,182 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="grid-placement-named-lines-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px 60px 60px;
+  grid-template-areas: "B A";
+  grid-auto-columns: 40px;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: [A-start] 60px 60px 60px;
+grid-template-areas: "B A";
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-start:-1">-1</x>
+<x style="grid-row:3; grid-column-start:4">4</x>
+<x style="grid-row:3; grid-column-start:-2">-2</x>
+<x style="grid-row:3; grid-column-start:-3">-3</x>
+<x style="grid-row:3; grid-column-start:-4">-4</x>
+<x style="grid-row:3; grid-column-start:-5">-5</x>
+<x style="grid-row:4; grid-column-start:A-start -1">A -1</x>
+<x style="grid-row:4; grid-column-start:B -1">B -1</x>
+<x style="grid-row:5; grid-column-start:A-start -2">A -2</x>
+<x style="grid-row:6; grid-column-start:A-start -3">A -3</x>
+<x style="grid-row:6; grid-column-start:A-start -4">A -4</x>
+<x style="grid-row:6; grid-column-start:A-start -5">A -5</x>
+<x style="grid-row:7; grid-column-start:A-start">A</x>
+<x style="grid-row:7; grid-column-start:B">B</x>
+<x style="grid-row:8; grid-column-start:A-start 1">A 1</x>
+<x style="grid-row:8; grid-column-start:A-start 2">A 2</x>
+<x style="grid-row:8; grid-column-start:A-start 3">A 3</x>
+<x style="grid-row:8; grid-column-start:A-start 4">A 4</x>
+<x style="grid-row:8; grid-column-start:A-start 5">A 5</x>
+<y style="grid-row:2; grid-column-start:-1"></y>
+<y style="grid-row:3; grid-column-start:4"></y>
+<y style="grid-row:3; grid-column-start:-2" class="a2"></y>
+<y style="grid-row:3; grid-column-start:-3" class="a3"></y>
+<y style="grid-row:3; grid-column-start:-4" class="a4"></y>
+<y style="grid-row:3; grid-column-start:-5" class="a5"></y>
+<y style="grid-row:4; grid-column-start:A-start -1"></y>
+<y style="grid-row:4; grid-column-start:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-start:A-start -2"></y>
+<y style="grid-row:6; grid-column-start:A-start -3"></y>
+<y style="grid-row:6; grid-column-start:A-start -4" class="a2"></y>
+<y style="grid-row:6; grid-column-start:A-start -5" class="a3"></y>
+<y style="grid-row:7; grid-column-start:A-start"></y>
+<y style="grid-row:7; grid-column-start:B" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A-start 1"></y>
+<y style="grid-row:8; grid-column-start:A-start 2" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A-start 3" class="a3"></y>
+<y style="grid-row:8; grid-column-start:A-start 4" class="a4"></y>
+<y style="grid-row:8; grid-column-start:A-start 5" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid" style="padding-left:13px;">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-end:-1">-1</x>
+<x style="grid-row:3; grid-column-end:4">4</x>
+<x style="grid-row:3; grid-column-end:-5">-5</x>
+<x style="grid-row:3; grid-column-end:-4">-4</x>
+<x style="grid-row:3; grid-column-end:-3">-3</x>
+<x style="grid-row:3; grid-column-end:-2">-2</x>
+<x style="grid-row:4; grid-column-end:A-start -1">A -1</x>
+<x style="grid-row:4; grid-column-end:B -1">B -1</x>
+<x style="grid-row:5; grid-column-end:A-start -2">A -2</x>
+<x style="grid-row:6; grid-column-end:A-start -3">A -3</x>
+<x style="grid-row:6; grid-column-end:A-start -4">A -4</x>
+<x style="grid-row:6; grid-column-end:A-start -5">A -5</x>
+<x style="grid-row:7; grid-column-end:A-start">A</x>
+<x style="grid-row:7; grid-column-end:B">B</x>
+<x style="grid-row:8; grid-column-end:A-start 1">A 1</x>
+<x style="grid-row:8; grid-column-end:A-start 2">A 2</x>
+<x style="grid-row:8; grid-column-end:A-start 3">A 3</x>
+<x style="grid-row:8; grid-column-end:A-start 4">A 4</x>
+<x style="grid-row:8; grid-column-end:A-start 5">A 5</x>
+<y style="grid-row:2; grid-column-end:-1"></y>
+<y style="grid-row:3; grid-column-end:4"></y>
+<y style="grid-row:3; grid-column-end:-5" class="a2"></y>
+<y style="grid-row:3; grid-column-end:-4" class="a3"></y>
+<y style="grid-row:3; grid-column-end:-3" class="a4"></y>
+<y style="grid-row:3; grid-column-end:-2" class="a5"></y>
+<y style="grid-row:4; grid-column-end:A-start -1"></y>
+<y style="grid-row:4; grid-column-end:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-end:A-start -2"></y>
+<y style="grid-row:6; grid-column-end:A-start -3"></y>
+<y style="grid-row:6; grid-column-end:A-start -4" class="a2"></y>
+<y style="grid-row:6; grid-column-end:A-start -5" class="a3"></y>
+<y style="grid-row:7; grid-column-end:A-start"></y>
+<y style="grid-row:7; grid-column-end:B" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A-start 1"></y>
+<y style="grid-row:8; grid-column-end:A-start 2" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A-start 3" class="a3"></y>
+<y style="grid-row:8; grid-column-end:A-start 4" class="a4"></y>
+<y style="grid-row:8; grid-column-end:A-start 5" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column:-1/span A-start 2">-1</x>
+<x style="grid-row:3; grid-column:4/span A-start 2">4</x>
+<x style="grid-row:4; grid-column:-2/span A-start 2">-2</x>
+<x style="grid-row:5; grid-column:-3/span A-start 2">-3</x>
+<x style="grid-row:6; grid-column:-4/span A-start 2">-4</x>
+<x style="grid-row:7; grid-column:-5/span A-start 2">-5</x>
+<x style="grid-row:8; grid-column:A-start -1/span A-start 2">A -1</x>
+<x style="grid-row:9; grid-column:B -1/span A-start 2">B -1</x>
+<x style="grid-row:10; grid-column:A-start -2/span A-start 2">A -2</x>
+<x style="grid-row:11; grid-column:A-start -3/span A-start 2">A -3</x>
+<x style="grid-row:12; grid-column:A-start -4/span A-start 2">A -4</x>
+<x style="grid-row:13; grid-column:A-start -5/span A-start 2">A -5</x>
+<x style="grid-row:14; grid-column:A-start/span A-start 2">A</x>
+<x style="grid-row:15; grid-column:B/span B">B</x>
+<x style="grid-row:16; grid-column:A-start 1/span A-start 2">A 1</x>
+<x style="grid-row:17; grid-column:A-start 2/span A-start 2">A 2</x>
+<x style="grid-row:18; grid-column:A-start 3/span A-start 2">A 3</x>
+<x style="grid-row:19; grid-column:A-start 4/span A-start 2">A 4</x>
+<x style="grid-row:20; grid-column:A-start 5/span A-start 2">A 5</x>
+<y style="grid-row:2; grid-column:-1/span A-start 2"></y>
+<y style="grid-row:3; grid-column:4/span A-start 2"></y>
+<y style="grid-row:4; grid-column:-2/span A-start 2"></y>
+<y style="grid-row:5; grid-column:-3/span A-start 2"></y>
+<y style="grid-row:6; grid-column:-4/span A-start 2"></y>
+<y style="grid-row:7; grid-column:-5/span A-start 2"></y>
+<y style="grid-row:8; grid-column:A-start -1/span A-start 2"></y>
+<y style="grid-row:9; grid-column:B -1/span A-start 2"></y>
+<y style="grid-row:10; grid-column:A-start -2/span A-start 2"></y>
+<y style="grid-row:11; grid-column:A-start -3/span A-start 2"></y>
+<y style="grid-row:12; grid-column:A-start -4/span A-start 2"></y>
+<y style="grid-row:13; grid-column:A-start -5/span A-start 2"></y>
+<y style="grid-row:14; grid-column:A-start/span A-start 2"></y>
+<y style="grid-row:15; grid-column:B/span B"></y>
+<y style="grid-row:16; grid-column:A-start 1/span A-start 2"></y>
+<y style="grid-row:17; grid-column:A-start 2/span A-start 2"></y>
+<y style="grid-row:18; grid-column:A-start 3/span A-start 2"></y>
+<y style="grid-row:19; grid-column:A-start 4/span A-start 2"></y>
+<y style="grid-row:20; grid-column:A-start 5/span A-start 2"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-named-lines-002-ref.html b/layout/reftests/css-grid/grid-placement-named-lines-002-ref.html
new file mode 100644
index 0000000000..9b0c931062
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-named-lines-002-ref.html
@@ -0,0 +1,187 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+.t1 {
+  grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px ;
+
+}
+.t2 {
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
+}
+.t3 {
+  grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px 40px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: [A-start] 60px [A-start] 60px 60px;
+grid-template-areas: "B . . . A";
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid t1" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column-start:3; background:grey"></x>
+<x style="grid-row:2; grid-column-start:8">-1</x>
+<x style="grid-row:3; grid-column-start:7">4</x>
+<x style="grid-row:3; grid-column-start:7">-2</x>
+<x style="grid-row:3; grid-column-start:6">-3</x>
+<x style="grid-row:3; grid-column-start:5">-4</x>
+<x style="grid-row:3; grid-column-start:4">-5</x>
+<x style="grid-row:4; grid-column-start:7">A -1</x>
+<x style="grid-row:4; grid-column-start:2">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:3">A</x>
+<x style="grid-row:7; grid-column-start:3">B</x>
+<x style="grid-row:8; grid-column-start:3">A 1</x>
+<x style="grid-row:8; grid-column-start:4">A 2</x>
+<x style="grid-row:8; grid-column-start:7">A 3</x>
+<x style="grid-row:8; grid-column-start:9">A 4</x>
+<x style="grid-row:8; grid-column-start:10">A 5</x>
+<y style="grid-row:2; grid-column-start:8"></y>
+<y style="grid-row:3; grid-column-start:6"></y>
+<y style="grid-row:3; grid-column-start:7" class="a2"></y>
+<y style="grid-row:3; grid-column-start:6" class="a3"></y>
+<y style="grid-row:3; grid-column-start:5" class="a4"></y>
+<y style="grid-row:3; grid-column-start:4" class="a5"></y>
+<y style="grid-row:4; grid-column-start:7"></y>
+<y style="grid-row:4; grid-column-start:2" class="a2"></y>
+<y style="grid-row:5; grid-column-start:4"></y>
+<y style="grid-row:6; grid-column-start:3"></y>
+<y style="grid-row:6; grid-column-start:2" class="a2"></y>
+<y style="grid-row:6; grid-column-start:1" class="a3"></y>
+<y style="grid-row:7; grid-column-start:3"></y>
+<y style="grid-row:7; grid-column-start:3" class="a2"></y>
+<y style="grid-row:8; grid-column-start:3"></y>
+<y style="grid-row:8; grid-column-start:4" class="a2"></y>
+<y style="grid-row:8; grid-column-start:7" class="a3"></y>
+<y style="grid-row:8; grid-column-start:9" class="a4"></y>
+<y style="grid-row:8; grid-column-start:10" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid t2" style="padding-left:13px;">
+<x style="grid-row:1; grid-column-start:4; background:grey"></x>
+<x style="grid-row:2; grid-column-start:8">-1</x>
+<x style="grid-row:3; grid-column-start:7">4</x>
+<x style="grid-row:3; grid-column-start:7">-2</x>
+<x style="grid-row:3; grid-column-start:6">-3</x>
+<x style="grid-row:3; grid-column-start:5">-4</x>
+<x style="grid-row:3; grid-column-start:4">-5</x>
+<x style="grid-row:4; grid-column-start:7">A -1</x>
+<x style="grid-row:4; grid-column-start:2">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:3">A</x>
+<x style="grid-row:7; grid-column-start:4">B</x>
+<x style="grid-row:8; grid-column-start:3">A 1</x>
+<x style="grid-row:8; grid-column-start:4">A 2</x>
+<x style="grid-row:8; grid-column-start:7">A 3</x>
+<x style="grid-row:8; grid-column-start:9">A 4</x>
+<x style="grid-row:8; grid-column-start:10">A 5</x>
+<y style="grid-row:2; grid-column-end:9"></y>
+<y style="grid-row:3; grid-column-end:7"></y>
+<y style="grid-row:3; grid-column-end:8" class="a5"></y>
+<y style="grid-row:3; grid-column-end:7" class="a4"></y>
+<y style="grid-row:3; grid-column-end:6" class="a3"></y>
+<y style="grid-row:3; grid-column-end:5" class="a2"></y>
+<y style="grid-row:4; grid-column-end:8"></y>
+<y style="grid-row:4; grid-column-end:3" class="a2"></y>
+<y style="grid-row:5; grid-column-end:5"></y>
+<y style="grid-row:6; grid-column-end:4"></y>
+<y style="grid-row:6; grid-column-end:3" class="a2"></y>
+<y style="grid-row:6; grid-column-end:2" class="a3"></y>
+<y style="grid-row:7; grid-column-end:4"></y>
+<y style="grid-row:7; grid-column-end:5" class="a2"></y>
+<y style="grid-row:8; grid-column-end:4"></y>
+<y style="grid-row:8; grid-column-end:5" class="a2"></y>
+<y style="grid-row:8; grid-column-end:8" class="a3"></y>
+<y style="grid-row:8; grid-column-end:10" class="a4"></y>
+<y style="grid-row:8; grid-column-end:11" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid t3">
+<x style="grid-row:1;  grid-column:3; background:grey"></x>
+<x style="grid-row:2;  grid-column:8/span 2;">-1</x>
+<x style="grid-row:3;  grid-column:6/span 3;">4</x>
+<x style="grid-row:4;  grid-column:7/span 3;">-2</x>
+<x style="grid-row:5;  grid-column:6/span 3;">-3</x>
+<x style="grid-row:6;  grid-column:5/span 4;">-4</x>
+<x style="grid-row:7;  grid-column:4/span 5;">-5</x>
+<x style="grid-row:8;  grid-column:7/span 3;">A -1</x>
+<x style="grid-row:9;  grid-column:2/span 2;">B -1</x>
+<x style="grid-row:10; grid-column:4/span 5;">A -2</x>
+<x style="grid-row:11; grid-column:3/span 4;">A -3</x>
+<x style="grid-row:12; grid-column:2/span 2;">A -4</x>
+<x style="grid-row:13; grid-column:1/span 3;">A -5</x>
+<x style="grid-row:14; grid-column:3/span 4;">A</x>
+<x style="grid-row:15; grid-column:3/span 6;">B</x>
+<x style="grid-row:16; grid-column:3/span 4;">A 1</x>
+<x style="grid-row:17; grid-column:4/span 5;">A 2</x>
+<x style="grid-row:18; grid-column:7/span 3;">A 3</x>
+<x style="grid-row:19; grid-column:9/span 2;">A 4</x>
+<x style="grid-row:20; grid-column:10/span 2;">A 5</x>
+<y style="grid-row:2;  grid-column:8/span 2;"></y>
+<y style="grid-row:3;  grid-column:6/span 3;"></y>
+<y style="grid-row:4;  grid-column:7/span 3;"></y>
+<y style="grid-row:5;  grid-column:6/span 3;"></y>
+<y style="grid-row:6;  grid-column:5/span 4;"></y>
+<y style="grid-row:7;  grid-column:4/span 5;"></y>
+<y style="grid-row:8;  grid-column:7/span 3;"></y>
+<y style="grid-row:9;  grid-column:2/span 2;"></y>
+<y style="grid-row:10; grid-column:4/span 5;"></y>
+<y style="grid-row:11; grid-column:3/span 4;"></y>
+<y style="grid-row:12; grid-column:2/span 2;"></y>
+<y style="grid-row:13; grid-column:1/span 3;"></y>
+<y style="grid-row:14; grid-column:3/span 4;"></y>
+<y style="grid-row:15; grid-column:3/span 6;"></y>
+<y style="grid-row:16; grid-column:3/span 4;"></y>
+<y style="grid-row:17; grid-column:4/span 5;"></y>
+<y style="grid-row:18; grid-column:7/span 3;"></y>
+<y style="grid-row:19; grid-column:9/span 2;"></y>
+<y style="grid-row:20; grid-column:10/span 2;"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-named-lines-002.html b/layout/reftests/css-grid/grid-placement-named-lines-002.html
new file mode 100644
index 0000000000..7a07093c24
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-named-lines-002.html
@@ -0,0 +1,182 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="grid-placement-named-lines-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px [A-start] 60px 60px;
+  grid-template-areas: "B . . . A";
+  grid-auto-columns: 40px;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: [A-start] 60px [A-start] 60px 60px;
+grid-template-areas: "B . . . A";
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-start:-1">-1</x>
+<x style="grid-row:3; grid-column-start:4">4</x>
+<x style="grid-row:3; grid-column-start:-2">-2</x>
+<x style="grid-row:3; grid-column-start:-3">-3</x>
+<x style="grid-row:3; grid-column-start:-4">-4</x>
+<x style="grid-row:3; grid-column-start:-5">-5</x>
+<x style="grid-row:4; grid-column-start:A-start -1">A -1</x>
+<x style="grid-row:4; grid-column-start:B -1">B -1</x>
+<x style="grid-row:5; grid-column-start:A-start -2">A -2</x>
+<x style="grid-row:6; grid-column-start:A-start -3">A -3</x>
+<x style="grid-row:6; grid-column-start:A-start -4">A -4</x>
+<x style="grid-row:6; grid-column-start:A-start -5">A -5</x>
+<x style="grid-row:7; grid-column-start:A-start">A</x>
+<x style="grid-row:7; grid-column-start:B">B</x>
+<x style="grid-row:8; grid-column-start:A-start 1">A 1</x>
+<x style="grid-row:8; grid-column-start:A-start 2">A 2</x>
+<x style="grid-row:8; grid-column-start:A-start 3">A 3</x>
+<x style="grid-row:8; grid-column-start:A-start 4">A 4</x>
+<x style="grid-row:8; grid-column-start:A-start 5">A 5</x>
+<y style="grid-row:2; grid-column-start:-1"></y>
+<y style="grid-row:3; grid-column-start:4"></y>
+<y style="grid-row:3; grid-column-start:-2" class="a2"></y>
+<y style="grid-row:3; grid-column-start:-3" class="a3"></y>
+<y style="grid-row:3; grid-column-start:-4" class="a4"></y>
+<y style="grid-row:3; grid-column-start:-5" class="a5"></y>
+<y style="grid-row:4; grid-column-start:A-start -1"></y>
+<y style="grid-row:4; grid-column-start:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-start:A-start -2"></y>
+<y style="grid-row:6; grid-column-start:A-start -3"></y>
+<y style="grid-row:6; grid-column-start:A-start -4" class="a2"></y>
+<y style="grid-row:6; grid-column-start:A-start -5" class="a3"></y>
+<y style="grid-row:7; grid-column-start:A-start"></y>
+<y style="grid-row:7; grid-column-start:B" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A-start 1"></y>
+<y style="grid-row:8; grid-column-start:A-start 2" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A-start 3" class="a3"></y>
+<y style="grid-row:8; grid-column-start:A-start 4" class="a4"></y>
+<y style="grid-row:8; grid-column-start:A-start 5" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid" style="padding-left:13px;">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-end:-1">-1</x>
+<x style="grid-row:3; grid-column-end:4">4</x>
+<x style="grid-row:3; grid-column-end:-5">-5</x>
+<x style="grid-row:3; grid-column-end:-4">-4</x>
+<x style="grid-row:3; grid-column-end:-3">-3</x>
+<x style="grid-row:3; grid-column-end:-2">-2</x>
+<x style="grid-row:4; grid-column-end:A-start -1">A -1</x>
+<x style="grid-row:4; grid-column-end:B -1">B -1</x>
+<x style="grid-row:5; grid-column-end:A-start -2">A -2</x>
+<x style="grid-row:6; grid-column-end:A-start -3">A -3</x>
+<x style="grid-row:6; grid-column-end:A-start -4">A -4</x>
+<x style="grid-row:6; grid-column-end:A-start -5">A -5</x>
+<x style="grid-row:7; grid-column-end:A-start">A</x>
+<x style="grid-row:7; grid-column-end:B">B</x>
+<x style="grid-row:8; grid-column-end:A-start 1">A 1</x>
+<x style="grid-row:8; grid-column-end:A-start 2">A 2</x>
+<x style="grid-row:8; grid-column-end:A-start 3">A 3</x>
+<x style="grid-row:8; grid-column-end:A-start 4">A 4</x>
+<x style="grid-row:8; grid-column-end:A-start 5">A 5</x>
+<y style="grid-row:2; grid-column-end:-1"></y>
+<y style="grid-row:3; grid-column-end:4"></y>
+<y style="grid-row:3; grid-column-end:-5" class="a2"></y>
+<y style="grid-row:3; grid-column-end:-4" class="a3"></y>
+<y style="grid-row:3; grid-column-end:-3" class="a4"></y>
+<y style="grid-row:3; grid-column-end:-2" class="a5"></y>
+<y style="grid-row:4; grid-column-end:A-start -1"></y>
+<y style="grid-row:4; grid-column-end:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-end:A-start -2"></y>
+<y style="grid-row:6; grid-column-end:A-start -3"></y>
+<y style="grid-row:6; grid-column-end:A-start -4" class="a2"></y>
+<y style="grid-row:6; grid-column-end:A-start -5" class="a3"></y>
+<y style="grid-row:7; grid-column-end:A-start"></y>
+<y style="grid-row:7; grid-column-end:B" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A-start 1"></y>
+<y style="grid-row:8; grid-column-end:A-start 2" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A-start 3" class="a3"></y>
+<y style="grid-row:8; grid-column-end:A-start 4" class="a4"></y>
+<y style="grid-row:8; grid-column-end:A-start 5" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column:-1/span A-start 2">-1</x>
+<x style="grid-row:3; grid-column:4/span A-start 2">4</x>
+<x style="grid-row:4; grid-column:-2/span A-start 2">-2</x>
+<x style="grid-row:5; grid-column:-3/span A-start 2">-3</x>
+<x style="grid-row:6; grid-column:-4/span A-start 2">-4</x>
+<x style="grid-row:7; grid-column:-5/span A-start 2">-5</x>
+<x style="grid-row:8; grid-column:A-start -1/span A-start 2">A -1</x>
+<x style="grid-row:9; grid-column:B -1/span A-start 2">B -1</x>
+<x style="grid-row:10; grid-column:A-start -2/span A-start 2">A -2</x>
+<x style="grid-row:11; grid-column:A-start -3/span A-start 2">A -3</x>
+<x style="grid-row:12; grid-column:A-start -4/span A-start 2">A -4</x>
+<x style="grid-row:13; grid-column:A-start -5/span A-start 2">A -5</x>
+<x style="grid-row:14; grid-column:A-start/span A-start 2">A</x>
+<x style="grid-row:15; grid-column:B/span B">B</x>
+<x style="grid-row:16; grid-column:A-start 1/span A-start 2">A 1</x>
+<x style="grid-row:17; grid-column:A-start 2/span A-start 2">A 2</x>
+<x style="grid-row:18; grid-column:A-start 3/span A-start 2">A 3</x>
+<x style="grid-row:19; grid-column:A-start 4/span A-start 2">A 4</x>
+<x style="grid-row:20; grid-column:A-start 5/span A-start 2">A 5</x>
+<y style="grid-row:2; grid-column:-1/span A-start 2"></y>
+<y style="grid-row:3; grid-column:4/span A-start 2"></y>
+<y style="grid-row:4; grid-column:-2/span A-start 2"></y>
+<y style="grid-row:5; grid-column:-3/span A-start 2"></y>
+<y style="grid-row:6; grid-column:-4/span A-start 2"></y>
+<y style="grid-row:7; grid-column:-5/span A-start 2"></y>
+<y style="grid-row:8; grid-column:A-start -1/span A-start 2"></y>
+<y style="grid-row:9; grid-column:B -1/span A-start 2"></y>
+<y style="grid-row:10; grid-column:A-start -2/span A-start 2"></y>
+<y style="grid-row:11; grid-column:A-start -3/span A-start 2"></y>
+<y style="grid-row:12; grid-column:A-start -4/span A-start 2"></y>
+<y style="grid-row:13; grid-column:A-start -5/span A-start 2"></y>
+<y style="grid-row:14; grid-column:A-start/span A-start 2"></y>
+<y style="grid-row:15; grid-column:B/span B"></y>
+<y style="grid-row:16; grid-column:A-start 1/span A-start 2"></y>
+<y style="grid-row:17; grid-column:A-start 2/span A-start 2"></y>
+<y style="grid-row:18; grid-column:A-start 3/span A-start 2"></y>
+<y style="grid-row:19; grid-column:A-start 4/span A-start 2"></y>
+<y style="grid-row:20; grid-column:A-start 5/span A-start 2"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-named-lines-003-ref.html b/layout/reftests/css-grid/grid-placement-named-lines-003-ref.html
new file mode 100644
index 0000000000..8baf2be8ad
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-named-lines-003-ref.html
@@ -0,0 +1,171 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+.t1 {
+  grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px ;
+
+}
+.t2 {
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
+}
+.t3 {
+  grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px 40px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: [A-start] 60px 60px [A-start] 60px;
+grid-template-areas: "B A";
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid t1" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column-start:3; background:grey"></x>
+<x style="grid-row:2; grid-column-start:6">-1</x>
+<x style="grid-row:3; grid-column-start:3">A</x>
+<x style="grid-row:4; grid-column-start:5">A -1</x>
+<x style="grid-row:4; grid-column-start:2">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:3">A</x>
+<x style="grid-row:7; grid-column-start:3">B</x>
+<x style="grid-row:8; grid-column-start:3">A 1</x>
+<x style="grid-row:8; grid-column-start:4">A 2</x>
+<x style="grid-row:8; grid-column-start:5">A 3</x>
+<x style="grid-row:8; grid-column-start:7">A 4</x>
+<x style="grid-row:8; grid-column-start:8">A 5</x>
+<y style="grid-row:2; grid-column-start:6"></y>
+<y style="grid-row:3; grid-column-start:3"></y>
+<y style="grid-row:4; grid-column-start:5"></y>
+<y style="grid-row:4; grid-column-start:2" class="a2"></y>
+<y style="grid-row:5; grid-column-start:4"></y>
+<y style="grid-row:6; grid-column-start:3"></y>
+<y style="grid-row:6; grid-column-start:2" class="a2"></y>
+<y style="grid-row:6; grid-column-start:1" class="a3"></y>
+<y style="grid-row:7; grid-column-start:3"></y>
+<y style="grid-row:7; grid-column-start:3" class="a2"></y>
+<y style="grid-row:8; grid-column-start:3"></y>
+<y style="grid-row:8; grid-column-start:4" class="a2"></y>
+<y style="grid-row:8; grid-column-start:5" class="a3"></y>
+<y style="grid-row:8; grid-column-start:7" class="a4"></y>
+<y style="grid-row:8; grid-column-start:8" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid t2" style="padding-left:13px;">
+<x style="grid-row:1; grid-column-start:4; background:grey"></x>
+<x style="grid-row:2; grid-column-start:6">-1</x>
+<x style="grid-row:3; grid-column-start:5">A</x>
+<x style="grid-row:4; grid-column-start:5">A -1</x>
+<x style="grid-row:4; grid-column-start:2">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:3">A</x>
+<x style="grid-row:7; grid-column-start:4">B</x>
+<x style="grid-row:8; grid-column-start:3">A 1</x>
+<x style="grid-row:8; grid-column-start:4">A 2</x>
+<x style="grid-row:8; grid-column-start:5">A 3</x>
+<x style="grid-row:8; grid-column-start:7">A 4</x>
+<x style="grid-row:8; grid-column-start:8">A 5</x>
+<y style="grid-row:2; grid-column-end:7"></y>
+<y style="grid-row:3; grid-column-end:6"></y>
+<y style="grid-row:4; grid-column-end:6"></y>
+<y style="grid-row:4; grid-column-end:3" class="a2"></y>
+<y style="grid-row:5; grid-column-end:5"></y>
+<y style="grid-row:6; grid-column-end:4"></y>
+<y style="grid-row:6; grid-column-end:3" class="a2"></y>
+<y style="grid-row:6; grid-column-end:2" class="a3"></y>
+<y style="grid-row:7; grid-column-end:4"></y>
+<y style="grid-row:7; grid-column-end:5" class="a2"></y>
+<y style="grid-row:8; grid-column-end:4"></y>
+<y style="grid-row:8; grid-column-end:5" class="a2"></y>
+<y style="grid-row:8; grid-column-end:6" class="a3"></y>
+<y style="grid-row:8; grid-column-end:8" class="a4"></y>
+<y style="grid-row:8; grid-column-end:9" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid t3">
+<x style="grid-row:1;  grid-column:3; background:grey"></x>
+<x style="grid-row:2;  grid-column:6/span 2;">-1</x>
+<x style="grid-row:3;  grid-column:6/span 1;">A</x>
+<x style="grid-row:4;  grid-column:5/span 3;">-2</x>
+<x style="grid-row:5;  grid-column:4/span 3;">-3</x>
+<x style="grid-row:6;  grid-column:3/span 2;">-4</x>
+<x style="grid-row:7;  grid-column:2/span 2;">-5</x>
+<x style="grid-row:8;  grid-column:5/span 3;">A -1</x>
+<x style="grid-row:9;  grid-column:2/span 2;">B -1</x>
+<x style="grid-row:10; grid-column:4/span 3;">A -2</x>
+<x style="grid-row:11; grid-column:3/span 2;">A -3</x>
+<x style="grid-row:12; grid-column:2/span 2;">A -4</x>
+<x style="grid-row:13; grid-column:1/span 3;">A -5</x>
+<x style="grid-row:14; grid-column:3/span 2;">A</x>
+<x style="grid-row:15; grid-column:3/span 4;">span A</x>
+<x style="grid-row:16; grid-column:3/span 2;">A 1</x>
+<x style="grid-row:17; grid-column:4/span 3;">A 2</x>
+<x style="grid-row:18; grid-column:5/span 3;">A 3</x>
+<x style="grid-row:19; grid-column:7/span 2;">A 4</x>
+<x style="grid-row:20; grid-column:8/span 2;">A 5</x>
+<y style="grid-row:2;  grid-column:6/span 2;"></y>
+<y style="grid-row:3;  grid-column:6/span 1;"></y>
+<y style="grid-row:4;  grid-column:5/span 3;"></y>
+<y style="grid-row:5;  grid-column:4/span 3;"></y>
+<y style="grid-row:6;  grid-column:3/span 2;"></y>
+<y style="grid-row:7;  grid-column:2/span 2;"></y>
+<y style="grid-row:8;  grid-column:5/span 3;"></y>
+<y style="grid-row:9;  grid-column:2/span 2;"></y>
+<y style="grid-row:10; grid-column:4/span 3;"></y>
+<y style="grid-row:11; grid-column:3/span 2;"></y>
+<y style="grid-row:12; grid-column:2/span 2;"></y>
+<y style="grid-row:13; grid-column:1/span 3;"></y>
+<y style="grid-row:14; grid-column:3/span 2;"></y>
+<y style="grid-row:15; grid-column:3/span 4;"></y>
+<y style="grid-row:16; grid-column:3/span 2;"></y>
+<y style="grid-row:17; grid-column:4/span 3;"></y>
+<y style="grid-row:18; grid-column:5/span 3;"></y>
+<y style="grid-row:19; grid-column:7/span 2;"></y>
+<y style="grid-row:20; grid-column:8/span 2;"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-named-lines-003.html b/layout/reftests/css-grid/grid-placement-named-lines-003.html
new file mode 100644
index 0000000000..e4a8de4b6e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-named-lines-003.html
@@ -0,0 +1,166 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="grid-placement-named-lines-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px 60px [A-start] 60px;
+  grid-template-areas: "B A";
+  grid-auto-columns: 40px;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: [A-start] 60px 60px [A-start] 60px;
+grid-template-areas: "B A";
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-start:-1">-1</x>
+<x style="grid-row:3; grid-column-start:A">A</x>
+<x style="grid-row:4; grid-column-start:A-start -1">A -1</x>
+<x style="grid-row:4; grid-column-start:B -1">B -1</x>
+<x style="grid-row:5; grid-column-start:A-start -2">A -2</x>
+<x style="grid-row:6; grid-column-start:A-start -3">A -3</x>
+<x style="grid-row:6; grid-column-start:A-start -4">A -4</x>
+<x style="grid-row:6; grid-column-start:A-start -5">A -5</x>
+<x style="grid-row:7; grid-column-start:A-start">A</x>
+<x style="grid-row:7; grid-column-start:B">B</x>
+<x style="grid-row:8; grid-column-start:A-start 1">A 1</x>
+<x style="grid-row:8; grid-column-start:A-start 2">A 2</x>
+<x style="grid-row:8; grid-column-start:A-start 3">A 3</x>
+<x style="grid-row:8; grid-column-start:A-start 4">A 4</x>
+<x style="grid-row:8; grid-column-start:A-start 5">A 5</x>
+<y style="grid-row:2; grid-column-start:-1"></y>
+<y style="grid-row:3; grid-column-start:A"></y>
+<y style="grid-row:4; grid-column-start:A-start -1"></y>
+<y style="grid-row:4; grid-column-start:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-start:A-start -2"></y>
+<y style="grid-row:6; grid-column-start:A-start -3"></y>
+<y style="grid-row:6; grid-column-start:A-start -4" class="a2"></y>
+<y style="grid-row:6; grid-column-start:A-start -5" class="a3"></y>
+<y style="grid-row:7; grid-column-start:A-start"></y>
+<y style="grid-row:7; grid-column-start:B" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A-start 1"></y>
+<y style="grid-row:8; grid-column-start:A-start 2" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A-start 3" class="a3"></y>
+<y style="grid-row:8; grid-column-start:A-start 4" class="a4"></y>
+<y style="grid-row:8; grid-column-start:A-start 5" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid" style="padding-left:13px;">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-end:-1">-1</x>
+<x style="grid-row:3; grid-column-end:A">A</x>
+<x style="grid-row:4; grid-column-end:A-start -1">A -1</x>
+<x style="grid-row:4; grid-column-end:B -1">B -1</x>
+<x style="grid-row:5; grid-column-end:A-start -2">A -2</x>
+<x style="grid-row:6; grid-column-end:A-start -3">A -3</x>
+<x style="grid-row:6; grid-column-end:A-start -4">A -4</x>
+<x style="grid-row:6; grid-column-end:A-start -5">A -5</x>
+<x style="grid-row:7; grid-column-end:A-start">A</x>
+<x style="grid-row:7; grid-column-end:B">B</x>
+<x style="grid-row:8; grid-column-end:A-start 1">A 1</x>
+<x style="grid-row:8; grid-column-end:A-start 2">A 2</x>
+<x style="grid-row:8; grid-column-end:A-start 3">A 3</x>
+<x style="grid-row:8; grid-column-end:A-start 4">A 4</x>
+<x style="grid-row:8; grid-column-end:A-start 5">A 5</x>
+<y style="grid-row:2; grid-column-end:-1"></y>
+<y style="grid-row:3; grid-column-end:A"></y>
+<y style="grid-row:4; grid-column-end:A-start -1"></y>
+<y style="grid-row:4; grid-column-end:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-end:A-start -2"></y>
+<y style="grid-row:6; grid-column-end:A-start -3"></y>
+<y style="grid-row:6; grid-column-end:A-start -4" class="a2"></y>
+<y style="grid-row:6; grid-column-end:A-start -5" class="a3"></y>
+<y style="grid-row:7; grid-column-end:A-start"></y>
+<y style="grid-row:7; grid-column-end:B" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A-start 1"></y>
+<y style="grid-row:8; grid-column-end:A-start 2" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A-start 3" class="a3"></y>
+<y style="grid-row:8; grid-column-end:A-start 4" class="a4"></y>
+<y style="grid-row:8; grid-column-end:A-start 5" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column:-1/span A-start 2">-1</x>
+<x style="grid-row:3; grid-column:4/span A">A</x>
+<x style="grid-row:4; grid-column:-2/span A-start 2">-2</x>
+<x style="grid-row:5; grid-column:-3/span A-start 2">-3</x>
+<x style="grid-row:6; grid-column:-4/span A-start 2">-4</x>
+<x style="grid-row:7; grid-column:-5/span A-start 2">-5</x>
+<x style="grid-row:8; grid-column:A-start -1/span A-start 2">A -1</x>
+<x style="grid-row:9; grid-column:B -1/span A-start 2">B -1</x>
+<x style="grid-row:10; grid-column:A-start -2/span A-start 2">A -2</x>
+<x style="grid-row:11; grid-column:A-start -3/span A-start 2">A -3</x>
+<x style="grid-row:12; grid-column:A-start -4/span A-start 2">A -4</x>
+<x style="grid-row:13; grid-column:A-start -5/span A-start 2">A -5</x>
+<x style="grid-row:14; grid-column:A-start/span A-start 2">A</x>
+<x style="grid-row:15; grid-column:B/span A">span A</x>
+<x style="grid-row:16; grid-column:A-start 1/span A-start 2">A 1</x>
+<x style="grid-row:17; grid-column:A-start 2/span A-start 2">A 2</x>
+<x style="grid-row:18; grid-column:A-start 3/span A-start 2">A 3</x>
+<x style="grid-row:19; grid-column:A-start 4/span A-start 2">A 4</x>
+<x style="grid-row:20; grid-column:A-start 5/span A-start 2">A 5</x>
+<y style="grid-row:2; grid-column:-1/span A-start 2"></y>
+<y style="grid-row:3; grid-column:4/span A"></y>
+<y style="grid-row:4; grid-column:-2/span A-start 2"></y>
+<y style="grid-row:5; grid-column:-3/span A-start 2"></y>
+<y style="grid-row:6; grid-column:-4/span A-start 2"></y>
+<y style="grid-row:7; grid-column:-5/span A-start 2"></y>
+<y style="grid-row:8; grid-column:A-start -1/span A-start 2"></y>
+<y style="grid-row:9; grid-column:B -1/span A-start 2"></y>
+<y style="grid-row:10; grid-column:A-start -2/span A-start 2"></y>
+<y style="grid-row:11; grid-column:A-start -3/span A-start 2"></y>
+<y style="grid-row:12; grid-column:A-start -4/span A-start 2"></y>
+<y style="grid-row:13; grid-column:A-start -5/span A-start 2"></y>
+<y style="grid-row:14; grid-column:A-start/span A-start 2"></y>
+<y style="grid-row:15; grid-column:B/span B"></y>
+<y style="grid-row:16; grid-column:A-start 1/span A-start 2"></y>
+<y style="grid-row:17; grid-column:A-start 2/span A-start 2"></y>
+<y style="grid-row:18; grid-column:A-start 3/span A-start 2"></y>
+<y style="grid-row:19; grid-column:A-start 4/span A-start 2"></y>
+<y style="grid-row:20; grid-column:A-start 5/span A-start 2"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html b/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html
new file mode 100644
index 0000000000..863ec716a1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.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>Reference: Placement involving negative line numbers</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215957">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+.t1 {
+  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
+
+}
+.t2 {
+  grid-template-columns: 40px 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px;
+}
+.t3 {
+  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: 60px [A] 60px 60px;
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid t1" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column-start:5; background:grey"></x>
+<x style="grid-row:2; grid-column-start:8">-1</x>
+<x style="grid-row:3; grid-column-start:8">4</x>
+<x style="grid-row:3; grid-column-start:7">-2</x>
+<x style="grid-row:3; grid-column-start:6">-3</x>
+<x style="grid-row:3; grid-column-start:5">-4</x>
+<x style="grid-row:3; grid-column-start:4">-5</x>
+<x style="grid-row:4; grid-column-start:6">A -1</x>
+<x style="grid-row:4; grid-column-start:4">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:6">A</x>
+<x style="grid-row:7; grid-column-start:9">B</x>
+<x style="grid-row:8; grid-column-start:6">A 1</x>
+<x style="grid-row:8; grid-column-start:9">A 2</x>
+<x style="grid-row:8; grid-column-start:10">A 3</x>
+<x style="grid-row:8; grid-column-start:11">A 4</x>
+<x style="grid-row:8; grid-column-start:12">A 5</x>
+<y style="grid-row:2; grid-column-start:8"></y>
+<y style="grid-row:3; grid-column-start:8"></y>
+<y style="grid-row:3; grid-column-start:7" class="a2"></y>
+<y style="grid-row:3; grid-column-start:6" class="a3"></y>
+<y style="grid-row:3; grid-column-start:5" class="a4"></y>
+<y style="grid-row:3; grid-column-start:4" class="a5"></y>
+<y style="grid-row:4; grid-column-start:6"></y>
+<y style="grid-row:4; grid-column-start:4" class="a2"></y>
+<y style="grid-row:5; grid-column-start:4"></y>
+<y style="grid-row:6; grid-column-start:3"></y>
+<y style="grid-row:6; grid-column-start:2" class="a2"></y>
+<y style="grid-row:6; grid-column-start:1" class="a3"></y>
+<y style="grid-row:7; grid-column-start:6"></y>
+<y style="grid-row:7; grid-column-start:9" class="a2"></y>
+<y style="grid-row:8; grid-column-start:6"></y>
+<y style="grid-row:8; grid-column-start:9" class="a2"></y>
+<y style="grid-row:8; grid-column-start:10" class="a3"></y>
+<y style="grid-row:8; grid-column-start:11" class="a4"></y>
+<y style="grid-row:8; grid-column-start:12" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid t2" style="padding-left:13px;">
+<x style="grid-row:1; grid-column-start:6; background:grey"></x>
+<x style="grid-row:2; grid-column-start:8">-1</x>
+<x style="grid-row:3; grid-column-start:8">4</x>
+<x style="grid-row:3; grid-column-start:7">-2</x>
+<x style="grid-row:3; grid-column-start:6">-3</x>
+<x style="grid-row:3; grid-column-start:5">-4</x>
+<x style="grid-row:3; grid-column-start:4">-5</x>
+<x style="grid-row:4; grid-column-start:6">A -1</x>
+<x style="grid-row:4; grid-column-start:4">B -1</x>
+<x style="grid-row:5; grid-column-start:4">A -2</x>
+<x style="grid-row:6; grid-column-start:3">A -3</x>
+<x style="grid-row:6; grid-column-start:2">A -4</x>
+<x style="grid-row:6; grid-column-start:1">A -5</x>
+<x style="grid-row:7; grid-column-start:6">A</x>
+<x style="grid-row:7; grid-column-start:9">B</x>
+<x style="grid-row:8; grid-column-start:6">A 1</x>
+<x style="grid-row:8; grid-column-start:9">A 2</x>
+<x style="grid-row:8; grid-column-start:10">A 3</x>
+<x style="grid-row:8; grid-column-start:11">A 4</x>
+<x style="grid-row:8; grid-column-start:12">A 5</x>
+<y style="grid-row:2; grid-column-end:9"></y>
+<y style="grid-row:3; grid-column-end:9"></y>
+<y style="grid-row:3; grid-column-end:8" class="a5"></y>
+<y style="grid-row:3; grid-column-end:7" class="a4"></y>
+<y style="grid-row:3; grid-column-end:6" class="a3"></y>
+<y style="grid-row:3; grid-column-end:5" class="a2"></y>
+<y style="grid-row:4; grid-column-end:7"></y>
+<y style="grid-row:4; grid-column-end:5" class="a2"></y>
+<y style="grid-row:5; grid-column-end:5"></y>
+<y style="grid-row:6; grid-column-end:4"></y>
+<y style="grid-row:6; grid-column-end:3" class="a2"></y>
+<y style="grid-row:6; grid-column-end:2" class="a3"></y>
+<y style="grid-row:7; grid-column-end:7"></y>
+<y style="grid-row:7; grid-column-end:10" class="a2"></y>
+<y style="grid-row:8; grid-column-end:7"></y>
+<y style="grid-row:8; grid-column-end:10" class="a2"></y>
+<y style="grid-row:8; grid-column-end:11" class="a3"></y>
+<y style="grid-row:8; grid-column-end:12" class="a4"></y>
+<y style="grid-row:8; grid-column-end:13" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A 2</pre>
+<div class="grid t3">
+<x style="grid-row:1;  grid-column:5; background:grey"></x>
+<x style="grid-row:2;  grid-column:8/span 2;">-1</x>
+<x style="grid-row:3;  grid-column:8/span 2;">4</x>
+<x style="grid-row:4;  grid-column:7/span 3;">-2</x>
+<x style="grid-row:5;  grid-column:6/span 4;">-3</x>
+<x style="grid-row:6;  grid-column:5/span 4;">-4</x>
+<x style="grid-row:7;  grid-column:4/span 5;">-5</x>
+<x style="grid-row:8;  grid-column:6/span 4;">A -1</x>
+<x style="grid-row:9;  grid-column:4/span 5;">B -1</x>
+<x style="grid-row:10; grid-column:4/span 5;">A -2</x>
+<x style="grid-row:11; grid-column:3/span 6;">A -3</x>
+<x style="grid-row:12; grid-column:2/span 7;">A -4</x>
+<x style="grid-row:13; grid-column:1/span 8;">A -5</x>
+<x style="grid-row:14; grid-column:6/span 4;">A</x>
+<x style="grid-row:15; grid-column:9/span 1;">B</x>
+<x style="grid-row:16; grid-column:6/span 4;">A 1</x>
+<x style="grid-row:17; grid-column:9/span 2;">A 2</x>
+<x style="grid-row:18; grid-column:10/span 2;">A 3</x>
+<x style="grid-row:19; grid-column:11/span 2;">A 4</x>
+<x style="grid-row:20; grid-column:12/span 2;">A 5</x>
+<y style="grid-row:2;  grid-column:8/span 2;"></y>
+<y style="grid-row:3;  grid-column:8/span 2;"></y>
+<y style="grid-row:4;  grid-column:7/span 3;"></y>
+<y style="grid-row:5;  grid-column:6/span 4;"></y>
+<y style="grid-row:6;  grid-column:5/span 4;"></y>
+<y style="grid-row:7;  grid-column:4/span 5;"></y>
+<y style="grid-row:8;  grid-column:6/span 4;"></y>
+<y style="grid-row:9;  grid-column:4/span 5;"></y>
+<y style="grid-row:10; grid-column:4/span 5;"></y>
+<y style="grid-row:11; grid-column:3/span 6;"></y>
+<y style="grid-row:12; grid-column:2/span 7;"></y>
+<y style="grid-row:13; grid-column:1/span 8;"></y>
+<y style="grid-row:14; grid-column:6/span 4;"></y>
+<y style="grid-row:15; grid-column:9/span 1;"></y>
+<y style="grid-row:16; grid-column:6/span 4;"></y>
+<y style="grid-row:17; grid-column:9/span 2;"></y>
+<y style="grid-row:18; grid-column:10/span 2;"></y>
+<y style="grid-row:19; grid-column:11/span 2;"></y>
+<y style="grid-row:20; grid-column:12/span 2;"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-placement-negative-lines-001.html b/layout/reftests/css-grid/grid-placement-negative-lines-001.html
new file mode 100644
index 0000000000..4218f3c8e8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-placement-negative-lines-001.html
@@ -0,0 +1,180 @@
+<!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: Placement involving negative line numbers</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215957">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="grid-placement-negative-lines-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: 60px [A] 60px 60px;
+  grid-auto-columns: 40px;
+  grid-auto-rows: 15px;
+  grid-gap: 1px;
+}
+
+x {
+  background: lime;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+.a2 { bottom:2px; }
+.a3 { bottom:4px; }
+.a4 { bottom:6px; }
+.a5 { bottom:8px; }
+
+  </style>
+</head>
+<body>
+
+<pre>
+grid-template-columns: 60px [A] 60px 60px;
+grid-auto-columns: 40px;
+grid-gap: 1px;
+</pre>
+
+<pre>grid-column-start:</pre>
+<div class="grid" style="padding-right:13px; border-right-width:5px">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-start:-1">-1</x>
+<x style="grid-row:3; grid-column-start:4">4</x>
+<x style="grid-row:3; grid-column-start:-2">-2</x>
+<x style="grid-row:3; grid-column-start:-3">-3</x>
+<x style="grid-row:3; grid-column-start:-4">-4</x>
+<x style="grid-row:3; grid-column-start:-5">-5</x>
+<x style="grid-row:4; grid-column-start:A -1">A -1</x>
+<x style="grid-row:4; grid-column-start:B -1">B -1</x>
+<x style="grid-row:5; grid-column-start:A -2">A -2</x>
+<x style="grid-row:6; grid-column-start:A -3">A -3</x>
+<x style="grid-row:6; grid-column-start:A -4">A -4</x>
+<x style="grid-row:6; grid-column-start:A -5">A -5</x>
+<x style="grid-row:7; grid-column-start:A">A</x>
+<x style="grid-row:7; grid-column-start:B">B</x>
+<x style="grid-row:8; grid-column-start:A 1">A 1</x>
+<x style="grid-row:8; grid-column-start:A 2">A 2</x>
+<x style="grid-row:8; grid-column-start:A 3">A 3</x>
+<x style="grid-row:8; grid-column-start:A 4">A 4</x>
+<x style="grid-row:8; grid-column-start:A 5">A 5</x>
+<y style="grid-row:2; grid-column-start:-1"></y>
+<y style="grid-row:3; grid-column-start:4"></y>
+<y style="grid-row:3; grid-column-start:-2" class="a2"></y>
+<y style="grid-row:3; grid-column-start:-3" class="a3"></y>
+<y style="grid-row:3; grid-column-start:-4" class="a4"></y>
+<y style="grid-row:3; grid-column-start:-5" class="a5"></y>
+<y style="grid-row:4; grid-column-start:A -1"></y>
+<y style="grid-row:4; grid-column-start:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-start:A -2"></y>
+<y style="grid-row:6; grid-column-start:A -3"></y>
+<y style="grid-row:6; grid-column-start:A -4" class="a2"></y>
+<y style="grid-row:6; grid-column-start:A -5" class="a3"></y>
+<y style="grid-row:7; grid-column-start:A"></y>
+<y style="grid-row:7; grid-column-start:B" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A 1"></y>
+<y style="grid-row:8; grid-column-start:A 2" class="a2"></y>
+<y style="grid-row:8; grid-column-start:A 3" class="a3"></y>
+<y style="grid-row:8; grid-column-start:A 4" class="a4"></y>
+<y style="grid-row:8; grid-column-start:A 5" class="a5"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid" style="padding-left:13px;">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column-end:-1">-1</x>
+<x style="grid-row:3; grid-column-end:4">4</x>
+<x style="grid-row:3; grid-column-end:-5">-5</x>
+<x style="grid-row:3; grid-column-end:-4">-4</x>
+<x style="grid-row:3; grid-column-end:-3">-3</x>
+<x style="grid-row:3; grid-column-end:-2">-2</x>
+<x style="grid-row:4; grid-column-end:A -1">A -1</x>
+<x style="grid-row:4; grid-column-end:B -1">B -1</x>
+<x style="grid-row:5; grid-column-end:A -2">A -2</x>
+<x style="grid-row:6; grid-column-end:A -3">A -3</x>
+<x style="grid-row:6; grid-column-end:A -4">A -4</x>
+<x style="grid-row:6; grid-column-end:A -5">A -5</x>
+<x style="grid-row:7; grid-column-end:A">A</x>
+<x style="grid-row:7; grid-column-end:B">B</x>
+<x style="grid-row:8; grid-column-end:A 1">A 1</x>
+<x style="grid-row:8; grid-column-end:A 2">A 2</x>
+<x style="grid-row:8; grid-column-end:A 3">A 3</x>
+<x style="grid-row:8; grid-column-end:A 4">A 4</x>
+<x style="grid-row:8; grid-column-end:A 5">A 5</x>
+<y style="grid-row:2; grid-column-end:-1"></y>
+<y style="grid-row:3; grid-column-end:4"></y>
+<y style="grid-row:3; grid-column-end:-5" class="a2"></y>
+<y style="grid-row:3; grid-column-end:-4" class="a3"></y>
+<y style="grid-row:3; grid-column-end:-3" class="a4"></y>
+<y style="grid-row:3; grid-column-end:-2" class="a5"></y>
+<y style="grid-row:4; grid-column-end:A -1"></y>
+<y style="grid-row:4; grid-column-end:B -1" class="a2"></y>
+<y style="grid-row:5; grid-column-end:A -2"></y>
+<y style="grid-row:6; grid-column-end:A -3"></y>
+<y style="grid-row:6; grid-column-end:A -4" class="a2"></y>
+<y style="grid-row:6; grid-column-end:A -5" class="a3"></y>
+<y style="grid-row:7; grid-column-end:A"></y>
+<y style="grid-row:7; grid-column-end:B" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A 1"></y>
+<y style="grid-row:8; grid-column-end:A 2" class="a2"></y>
+<y style="grid-row:8; grid-column-end:A 3" class="a3"></y>
+<y style="grid-row:8; grid-column-end:A 4" class="a4"></y>
+<y style="grid-row:8; grid-column-end:A 5" class="a5"></y>
+</div>
+
+<pre>grid-column: / span A 2</pre>
+<div class="grid">
+<x style="grid-row:1; grid-column:1; background:grey"></x>
+<x style="grid-row:2; grid-column:-1/span A 2">-1</x>
+<x style="grid-row:3; grid-column:4/span A 2">4</x>
+<x style="grid-row:4; grid-column:-2/span A 2">-2</x>
+<x style="grid-row:5; grid-column:-3/span A 2">-3</x>
+<x style="grid-row:6; grid-column:-4/span A 2">-4</x>
+<x style="grid-row:7; grid-column:-5/span A 2">-5</x>
+<x style="grid-row:8; grid-column:A -1/span A 2">A -1</x>
+<x style="grid-row:9; grid-column:B -1/span A 2">B -1</x>
+<x style="grid-row:10; grid-column:A -2/span A 2">A -2</x>
+<x style="grid-row:11; grid-column:A -3/span A 2">A -3</x>
+<x style="grid-row:12; grid-column:A -4/span A 2">A -4</x>
+<x style="grid-row:13; grid-column:A -5/span A 2">A -5</x>
+<x style="grid-row:14; grid-column:A/span A 2">A</x>
+<x style="grid-row:15; grid-column:B/span B">B</x>
+<x style="grid-row:16; grid-column:A 1/span A 2">A 1</x>
+<x style="grid-row:17; grid-column:A 2/span A 2">A 2</x>
+<x style="grid-row:18; grid-column:A 3/span A 2">A 3</x>
+<x style="grid-row:19; grid-column:A 4/span A 2">A 4</x>
+<x style="grid-row:20; grid-column:A 5/span A 2">A 5</x>
+<y style="grid-row:2; grid-column:-1/span A 2"></y>
+<y style="grid-row:3; grid-column:4/span A 2"></y>
+<y style="grid-row:4; grid-column:-2/span A 2"></y>
+<y style="grid-row:5; grid-column:-3/span A 2"></y>
+<y style="grid-row:6; grid-column:-4/span A 2"></y>
+<y style="grid-row:7; grid-column:-5/span A 2"></y>
+<y style="grid-row:8; grid-column:A -1/span A 2"></y>
+<y style="grid-row:9; grid-column:B -1/span A 2"></y>
+<y style="grid-row:10; grid-column:A -2/span A 2"></y>
+<y style="grid-row:11; grid-column:A -3/span A 2"></y>
+<y style="grid-row:12; grid-column:A -4/span A 2"></y>
+<y style="grid-row:13; grid-column:A -5/span A 2"></y>
+<y style="grid-row:14; grid-column:A/span A 2"></y>
+<y style="grid-row:15; grid-column:B/span B"></y>
+<y style="grid-row:16; grid-column:A 1/span A 2"></y>
+<y style="grid-row:17; grid-column:A 2/span A 2"></y>
+<y style="grid-row:18; grid-column:A 3/span A 2"></y>
+<y style="grid-row:19; grid-column:A 4/span A 2"></y>
+<y style="grid-row:20; grid-column:A 5/span A 2"></y>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-relpos-items-001-ref.html b/layout/reftests/css-grid/grid-relpos-items-001-ref.html
new file mode 100644
index 0000000000..e45ba5cf07
--- /dev/null
+++ b/layout/reftests/css-grid/grid-relpos-items-001-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing layout of rel.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151316">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ height: 30px;
+ border: 3px solid;
+}
+
+.c1 { background: grey; }
+.r2 { -moz-transform: translate(-201px, -90px); }
+.r3 { -moz-transform: translate(-10px, -40px); }
+.r4 { -moz-transform: translate(70px, 40px); }
+
+span {
+  border: 1px solid;
+  display: inline-block;
+  width: 18px;
+  height: 28px;
+  vertical-align: top;
+}
+.abs {
+  background: lime;
+  position: absolute;
+  top: 116px;
+  left: 204px;
+  padding-left: 3px;
+  padding-top: 5px;
+  width: 18px;
+  height: 28px;
+  vertical-align: top;
+}
+.abs1 {
+  position: absolute;
+  top: -5px;
+  left: -11px;
+  width: 30px;
+  height: 36px;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1">1</span>
+<span class="abs r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span>
+<span class="abs r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span>
+<span class="abs r3" style="xheight:23px"><span class="abs1">r3</span></span>
+<span class="abs r4" style="xheight:23px"><span class="abs1">r4</span></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-relpos-items-001.html b/layout/reftests/css-grid/grid-relpos-items-001.html
new file mode 100644
index 0000000000..000e9660ea
--- /dev/null
+++ b/layout/reftests/css-grid/grid-relpos-items-001.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing layout of rel.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151316">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-relpos-items-001-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ grid-template-columns: 20px 20px [A] 20px;
+ grid-template-rows: 30px;
+ grid-auto-columns: 20px;
+ grid-auto-rows: 30px;
+ border: solid;
+}
+
+.c1 { background: grey; }
+.r1 { }
+.r2 { -moz-transform: translate(-201px, -90px); }
+.r3 { grid-column-start: auto; -moz-transform: translate(-30px, -40px); }
+.r4 { grid-area: auto; -moz-transform: translate(30px, 40px); }
+
+span {
+  border: 1px solid;
+  grid-area: 1 / 1;
+}
+.rel {
+  background: lime;
+  position: relative;
+  top: 113px;
+  left: 201px;
+  padding-left: 3px;
+  padding-top: 5px;
+  width: 18px;
+  height: 28px;
+  vertical-align: top;
+}
+.abs1 {
+  position: absolute;
+  top: -5px;
+  left: -11px;
+  right: 0px;
+  bottom: 0px;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1">1</span>
+<span class="rel r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span>
+<span class="rel r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span>
+<span class="rel r3"><span class="abs1">r3</span></span>
+<span class="rel r4"><span class="abs1">r4</span></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html
new file mode 100644
index 0000000000..e650af263a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html
@@ -0,0 +1,275 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  margin-bottom: 2px;
+  padding-right: 3px;
+}
+.r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; }
+.r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+.r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { width: 100px; }
+.w50 { width: 50px; }
+.w40 { width: 40px; }
+.w42 { width: 42px; }
+.w64 { width: 64px; }
+.w20 { width: 20px; }
+.w80 { width: 80px; }
+.w90 { width: 90px; }
+.mw100 { min-width: 100px; }
+.mw50 { min-width: 50px; }
+.mw42 { min-width: 42px; }
+.mw80 { min-width: 80px; }
+.xw100 { max-width: 100px; }
+.xw50 { max-width: 50px; }
+.xw42 { max-width: 42px; }
+.xw80 { max-width: 80px; }
+.pw10 { width: 10%; }
+.pxw10 { max-width: 10%; }
+.pmw10 { min-width: 10%; }
+.cw10 { width: calc(50px + 10%); }
+.cxw10 { max-width: calc(50px + 10%); }
+.cmw10 { min-width: calc(50px - 10%); }
+.float { float: left; }
+
+x {
+  height: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; right:0; top:0; height: 3px;
+  background: black;
+  grid-column: c / c -1;
+}
+b {
+  position: absolute;
+  left:0; right:0; bottom:0; height: 3px;
+  background: brown;
+  grid-column: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  width: 400px;
+}
+
+.r1.c0 { grid-template-columns: none;}
+.r1.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d];}
+.r1.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d]; }
+.r1.c4 { grid-template-columns: [a] repeat(4, [b] 20px [c]) [d]; }
+.r1.c18 { grid-template-columns: [a] repeat(18, [b] 20px [c]) [d]; }
+
+.r2.c16 { grid-template-columns: [a] repeat(16, [b] 20px [c]) [d] 30px [e]; }
+.r2.c0 { grid-template-columns:  30px [e];}
+.r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
+
+.r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; }
+.r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.zero-progress {
+  grid-column-gap: calc(10px - 1%);
+  grid-template-columns: [a] 10px repeat(3, [b] 0 [c]) [d];
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1 c18"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 c4"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float c4"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float c4"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float c4"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w42 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw42 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw42 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+
+<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c2 w42 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+
+<div class="grid r1 w80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w64 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c4 w90 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+
+<div class="float">
+<div style="width:296px">
+<div class="grid r1 c1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+</div>
+<div class="grid r1 c1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c2 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c4 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+</div>
+
+<br clear="all">
+
+<div class="float">
+<div class="grid r1 c3 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c3 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 c4 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div style="width:318px">
+<div class="grid r1 c3 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+</div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 c16"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 c15"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+
+</fill>
+
+<fit>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html
new file mode 100644
index 0000000000..93af88ed73
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html
@@ -0,0 +1,254 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  margin-bottom: 2px;
+  padding-right: 3px;
+}
+.r1 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,20px) [c]) [d] 30px [e]; }
+.r3 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { width: 100px; }
+.w50 { width: 50px; }
+.w80 { width: 80px; }
+.w42 { width: 42px; }
+.xw42 { max-width: 42px; }
+.mw42 { min-width: 42px; }
+.mw100 { min-width: 100px; }
+.mw50 { min-width: 50px; }
+.mw80 { min-width: 80px; }
+.xw100 { max-width: 100px; }
+.xw50 { max-width: 50px; }
+.xw80 { max-width: 80px; }
+.pw10 { width: 10%; }
+.pxw10 { max-width: 10%; }
+.pmw10 { min-width: 10%; }
+.cw10 { width: calc(50px + 10%); }
+.cxw10 { max-width: calc(50px + 10%); }
+.cmw10 { min-width: calc(50px - 10%); }
+.float { float: left; }
+
+x {
+  height: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; right:0; top:0; height: 3px;
+  background: black;
+  grid-column: c / c -1;
+}
+b {
+  position: absolute;
+  left:0; right:0; bottom:0; height: 3px;
+  background: brown;
+  grid-column: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  width: 400px;
+}
+
+.zero-progress {
+  grid-column-gap: calc(10px - 1%);
+  grid-template-columns: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d];
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w42 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw42 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw42 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+
+<div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+
+<div class="grid r1 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+
+<div class="float">
+<div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+</div>
+
+<br clear="all">
+
+<div class="float">
+<div class="grid r1 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+</fill>
+
+<fit>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
new file mode 100644
index 0000000000..a404a09058
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
@@ -0,0 +1,211 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: row;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; }
+.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; }
+.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; }
+
+.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
+.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+  width: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  height: 400px;
+}
+
+.zero-progress {
+  grid-row-gap: calc(10px - 1%);
+  grid-template-rows: [a] 10px repeat(4, [b] minmax(0,auto) [c]) [d];
+}
+.w50.zero-progress {
+  grid-row-gap: calc(10px - 1%);
+  grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+</fill>
+
+<fit>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html
new file mode 100644
index 0000000000..4a9061a010
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html
@@ -0,0 +1,199 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: row;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+  width: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  height: 400px;
+}
+
+.zero-progress {
+  grid-row-gap: calc(10px - 1%);
+  grid-template-rows: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d];
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+</fill>
+
+<fit>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003-ref.html
new file mode 100644
index 0000000000..1978563152
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003-ref.html
@@ -0,0 +1,197 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d];  }
+.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; }
+.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; }
+.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; }
+
+.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
+.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
+.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
+.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
+
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+  width: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<fit>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003.html
new file mode 100644
index 0000000000..5d88ea37b3
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003.html
@@ -0,0 +1,189 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+  width: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<fit>
+
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html
new file mode 100644
index 0000000000..d61a9dcaab
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html
@@ -0,0 +1,191 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d];  width:34px; }
+.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; width:34px; }
+.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; width:34px; }
+.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; width:34px; }
+
+.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; width:22px; }
+.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; width:22px; }
+.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; width:22px; }
+
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
+.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
+.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
+
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+wrap { float:left; height: 100px; }
+
+x {
+  width: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<fill>
+
+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<fit>
+
+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004.html
new file mode 100644
index 0000000000..dd9af776aa
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004.html
@@ -0,0 +1,183 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100%; }
+.w50 { height: 50%; }
+.w80 { height: 80%; }
+.mw100 { min-height: 100%; }
+.mw50 { min-height: 50%; }
+.mw80 { min-height: 80%; }
+.xw100 { max-height: 100%; }
+.xw50 { max-height: 50%; }
+.xw80 { max-height: 80%; }
+.float { float: left; }
+
+wrap { float:left; height: 100px; }
+
+x {
+  width: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<fill>
+
+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<fit>
+
+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005-ref.html
new file mode 100644
index 0000000000..b68c40be82
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005-ref.html
@@ -0,0 +1,382 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 2px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+  padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+.r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+.r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}
+.r01 a {grid-row-end:auto; }
+.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e];  }
+.r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows:  [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+.r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 10px [f]; grid-gap:0; padding-bottom:4px;}
+
+fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;}
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows:  [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }
+fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}
+fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+  height: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  height: 400px;
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w w20"><a></a><b></b></div>
+<div class="grid r20 w w3"><a></a><b></b></div>
+<div class="grid r20 w xw20"><a></a><b></b></div>
+<div class="grid r20 w xw3"><a></a><b></b></div>
+<div class="grid r20 w mw20"><a></a><b></b></div>
+<div class="grid r20 w mw3"><a></a><b></b></div>
+<div class="grid r20 w w20 xw3"><a></a><b></b></div>
+<div class="grid r20 w w3 mw20"><a></a><b></b></div>
+<div class="grid r20 w w3 mw3"><a></a><b></b></div>
+<div class="grid r20 w xw20"><a></a><b></b></div>
+<div class="grid r20 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r20 w mw20"><a></a><b></b></div>
+
+<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r20" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r20" style="height:0"><a></a><b></b></div>
+<div class="grid w r20" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r20" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><a></a><b></b></div>
+<div class="grid r30 w w3"><a></a><b></b></div>
+<div class="grid r30 w xw20"><a></a><b></b></div>
+<div class="grid r30 w xw3"><a></a><b></b></div>
+<div class="grid r30 w mw20"><a></a><b></b></div>
+<div class="grid r30 w mw3"><a></a><b></b></div>
+<div class="grid r30 w w20 xw3"><a></a><b></b></div>
+<div class="grid r30 w w3 mw20"><a></a><b></b></div>
+<div class="grid r30 w w3 mw3"><a></a><b></b></div>
+<div class="grid r30 w xw20"><a></a><b></b></div>
+<div class="grid r30 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r30 w mw20"><a></a><b></b></div>
+
+<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid  r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid  ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r30" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r30" style="height:0"><a></a><b></b></div>
+<div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r30" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r003"><a></a><b></b></div>
+
+
+</fill>
+
+<fit>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r01 w w20"><a></a><b></b></div>
+<div class="grid r01 w w3"><a></a><b></b></div>
+<div class="grid r01 w xw20"><a></a><b></b></div>
+<div class="grid r01 w xw3"><a></a><b></b></div>
+<div class="grid r01 w mw20"><a></a><b></b></div>
+<div class="grid r01 w mw3"><a></a><b></b></div>
+<div class="grid r01 w w20 xw3"><a></a><b></b></div>
+<div class="grid r01 w w3 mw20"><a></a><b></b></div>
+<div class="grid r01 w w3 mw3"><a></a><b></b></div>
+<div class="grid r01 w xw20"><a></a><b></b></div>
+<div class="grid r01 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r01 w mw20"><a></a><b></b></div>
+
+<div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r01" style="height:0"><a></a><b></b></div>
+<div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0a"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r02 w w20"><a></a><b></b></div>
+<div class="grid r02 w w3"><a></a><b></b></div>
+<div class="grid r02 w xw20"><a></a><b></b></div>
+<div class="grid r02 w xw3"><a></a><b></b></div>
+<div class="grid r02 w mw20"><a></a><b></b></div>
+<div class="grid r02 w mw3"><a></a><b></b></div>
+<div class="grid r02 w w20 xw3"><a></a><b></b></div>
+<div class="grid r02 w w3 mw20"><a></a><b></b></div>
+<div class="grid r02 w w3 mw3"><a></a><b></b></div>
+<div class="grid r02 w xw20"><a></a><b></b></div>
+<div class="grid r02 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r02 w mw20"><a></a><b></b></div>
+
+<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r02" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r02" style="height:0"><a></a><b></b></div>
+<div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r02" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r03 w w20"><a></a><b></b></div>
+<div class="grid r03 w w3"><a></a><b></b></div>
+<div class="grid r03 w xw20"><a></a><b></b></div>
+<div class="grid r03 w xw3"><a></a><b></b></div>
+<div class="grid r03 w mw20"><a></a><b></b></div>
+<div class="grid r03 w mw3"><a></a><b></b></div>
+<div class="grid r03 w w20 xw3"><a></a><b></b></div>
+<div class="grid r03 w w3 mw20"><a></a><b></b></div>
+<div class="grid r03 w w3 mw3"><a></a><b></b></div>
+<div class="grid r03 w xw20"><a></a><b></b></div>
+<div class="grid r03 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r03 w mw20"><a></a><b></b></div>
+
+<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid  r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid  ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r003" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r03" style="height:0"><a></a><b></b></div>
+<div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r03" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r003"><a></a><b></b></div>
+
+
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005.html
new file mode 100644
index 0000000000..b6b521787f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005.html
@@ -0,0 +1,377 @@
+<!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: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 2px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+  padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+  height: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  height: 400px;
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w w20"><a></a><b></b></div>
+<div class="grid r2 w w3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+<div class="grid r2 w mw3"><a></a><b></b></div>
+<div class="grid r2 w w20 xw3"><a></a><b></b></div>
+<div class="grid r2 w w3 mw20"><a></a><b></b></div>
+<div class="grid r2 w w3 mw3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+
+<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r2" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r2" style="height:0"><a></a><b></b></div>
+<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r2" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w w20"><a></a><b></b></div>
+<div class="grid r3 w w3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+<div class="grid r3 w mw3"><a></a><b></b></div>
+<div class="grid r3 w w20 xw3"><a></a><b></b></div>
+<div class="grid r3 w w3 mw20"><a></a><b></b></div>
+<div class="grid r3 w w3 mw3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+
+<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r3" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r3" style="height:0"><a></a><b></b></div>
+<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r3" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r03"><a></a><b></b></div>
+
+
+</fill>
+
+<fit>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w w20"><a></a><b></b></div>
+<div class="grid r2 w w3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+<div class="grid r2 w mw3"><a></a><b></b></div>
+<div class="grid r2 w w20 xw3"><a></a><b></b></div>
+<div class="grid r2 w w3 mw20"><a></a><b></b></div>
+<div class="grid r2 w w3 mw3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+
+<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r2" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r2" style="height:0"><a></a><b></b></div>
+<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r2" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w w20"><a></a><b></b></div>
+<div class="grid r3 w w3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+<div class="grid r3 w mw3"><a></a><b></b></div>
+<div class="grid r3 w w20 xw3"><a></a><b></b></div>
+<div class="grid r3 w w3 mw20"><a></a><b></b></div>
+<div class="grid r3 w w3 mw3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+
+<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r3" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r3" style="height:0"><a></a><b></b></div>
+<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r3" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r03"><a></a><b></b></div>
+
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html
new file mode 100644
index 0000000000..79ac94548e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html
@@ -0,0 +1,184 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: repeat(auto-fit) with grid-aligned abs.pos.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 30px;
+  grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
+  grid-gap: 2px;
+  width: 160px;
+  height: 30px;
+}
+
+.c1 { width: 160px; }
+.c2 { width: 150px; }
+.c3 { width: 140px; }
+.p1 { padding-left:5px; }
+
+.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+
+x {
+  width: 18px;
+  border:1px solid;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; height:3px; right:0;
+  background: cyan;
+  grid-column: -1 / auto;
+}
+b {
+  position: absolute;
+  left:0; bottom:0; height:3px; right:0;
+  background: brown;
+  grid-column: auto / -1;
+}
+c {
+  position: absolute;
+  left:0; bottom:5px; height:3px; right:0;
+  background: pink;
+  grid-column: 6 / auto;
+}
+d {
+  position: absolute;
+  left:0; bottom:10px; height:3px; right:0;
+  background: silver;
+  grid-column: 3 / -2;
+}
+e {
+  position: absolute;
+  left:0; bottom:15px; height:3px; right:0;
+  background: magenta;
+  grid-column: 3 / -1;
+}
+f {
+  position: absolute;
+  left:0; bottom:20px; height:3px; right:0;
+  background: orange;
+  grid-column: auto / -2;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+.t1 x:last-child {
+  grid-column-end:-1;
+}
+
+float { float:left; margin-right:20px; }
+
+.x5 { grid-template-columns: repeat(5,20px); }
+.x4 { grid-template-columns: repeat(4,20px); }
+.x3 { grid-template-columns: repeat(3,20px); }
+.x2 { grid-template-columns: repeat(2,20px); }
+.x1 { grid-template-columns: repeat(1,20px); }
+.x0 { grid-template-columns: none; }
+
+.c1.t1.x5 a { grid-column:5/auto; }
+.c1.t1.x4 a { grid-column:4/auto; }
+.c1.t1.x3 a { grid-column:3/auto; }
+.c1.t1.x2 a { grid-column:2/auto; }
+.c1.t1.x1 a { grid-column:1/auto; }
+.c2.t1.x0 a { grid-column:2/auto; }
+
+.c1.t1.x5 c { grid-column:-2/auto; }
+.c2.t1.x5 c,.c3.t1.x5 c { grid-column:5/6; }
+
+.c1.t1.x4 c { grid-column:4/auto; }
+.c2.t1.x4 c,.c3.t1.x4 c { grid-column:-2/-1; }
+.t2.x4 c { grid-column:-1/auto; }
+
+.c1.t1.x3 c, .c1.t1.x2 c, .c1.t1.x1 c { grid-column:-2/auto; }
+.c2.t1.x3 c, .c3.t1.x3 c, .c2.t1.x2 c, .c3.t1.x2 c, .c2.t1.x1 c, .c3.t1.x1 c { grid-column:-2/-1; }
+.t2.x3 c, .t2.x2 c, .t2.x1 c { grid-column:-1/auto; }
+
+.t2 f { grid-column:auto/-1; }
+
+.c1.t1.x5 e, .c1.t1.x4 e, .c2.t1.x2 e, .c3.t1.x2 e { grid-column:3/-2; }
+.c1.t1.x3 e ,.c1.t1.x2 e { grid-column:-2/auto; }
+.c1.t1.x1 e { grid-column:1/auto; }
+.c2.t1.x1 e,.c3.t1.x1 e { grid-column:1/2; }
+
+.t2.x5 d, .t2.x4 d { grid-column:3/-1; }
+.t1.x3 d, .t1.x2 d { grid-column:-2/auto; }
+.t2.x2 d, .t2.x1 d { grid-column:-1/auto; }
+.t2.x0 d, .t2.x0 c { grid-column:1/auto; }
+
+.c1.t1 b { grid-column:auto/-2; }
+
+</style>
+</head>
+<body>
+
+<float>
+<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<float>
+<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+
+<div class="grid c1 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c2 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c3 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+</float>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006.html
new file mode 100644
index 0000000000..73a37e0a59
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006.html
@@ -0,0 +1,213 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-006-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 30px;
+  grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
+  grid-gap: 2px;
+  width: 160px;
+  height: 30px;
+}
+
+.c1 { width: 160px; }
+.c2 { width: 150px; }
+.c3 { width: 140px; }
+.p1 { padding-left:5px; }
+
+.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+
+x {
+  width: 18px;
+  border:1px solid;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; height:3px; right:0;
+  background: cyan;
+  grid-column: 7 / auto;
+}
+b {
+  position: absolute;
+  left:0; bottom:0; height:3px; right:0;
+  background: brown;
+  grid-column: auto / 7;
+}
+c {
+  position: absolute;
+  left:0; bottom:5px; height:3px; right:0;
+  background: pink;
+  grid-column: 6 / 7;
+}
+d {
+  position: absolute;
+  left:0; bottom:10px; height:3px; right:0;
+  background: silver;
+  grid-column: 3 / 6;
+}
+e {
+  position: absolute;
+  left:0; bottom:15px; height:3px; right:0;
+  background: magenta;
+  grid-column: 3 / 7;
+}
+f {
+  position: absolute;
+  left:0; bottom:20px; height:3px; right:0;
+  background: orange;
+  grid-column: auto / 6;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+.t1 x:last-child {
+  grid-column-end:-1;
+}
+
+float { float:left; margin-right:20px; }
+
+</style>
+</head>
+<body>
+
+<float>
+<div class="grid c1 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<float>
+<div class="grid c1 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c2 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c3 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+
+<div class="grid c1 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c2 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c3 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
+</float>
+
+<script>
+function testGridTemplateColumns(elem, expected) {
+  var actual = window.getComputedStyle(elem).gridTemplateColumns;
+  if (actual != expected) {
+    var err = "FAIL: gridTemplateColumns " + elem.className +
+              ", GOT=" + actual +
+              ", EXPECTED=" + expected;
+    document.body.appendChild(document.createTextNode(err));
+  }
+}
+var a1 = [
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px"
+];
+var a2 = [
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]"
+];
+function runTest() {
+ var t1 = document.querySelectorAll('.t1');
+ for (var i = 0; i < t1.length; ++i) {
+   testGridTemplateColumns(t1[i], a1[i]);
+ }
+ var t2 = document.querySelectorAll('.t2');
+ for (var i = 0; i < t2.length; ++i) {
+   testGridTemplateColumns(t2[i], a2[i]);
+ }
+
+ document.documentElement.className='';
+}
+document.addEventListener('MozReftestInvalidate', runTest, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html
new file mode 100644
index 0000000000..5f3cebf6a7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html
@@ -0,0 +1,177 @@
+<!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: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1237805">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 30px;
+  grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
+  grid-gap: 2px;
+  width: 160px;
+  height: 30px;
+}
+
+.c1 { width: 160px; }
+.c2 { width: 150px; }
+.c3 { width: 140px; }
+.p1 { padding-left:5px; }
+
+.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+
+x {
+  width: 18px;
+  border:1px solid;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; height:3px; right:0;
+  background: cyan;
+  grid-column: -1 / auto;
+}
+b {
+  position: absolute;
+  left:0; bottom:0; height:3px; right:0;
+  background: brown;
+  grid-column: auto / -1;
+}
+c {
+  position: absolute;
+  left:0; bottom:5px; height:3px; right:0;
+  background: pink;
+  grid-column: -2 / auto;
+}
+d {
+  position: absolute;
+  left:0; bottom:10px; height:3px; right:0;
+  background: silver;
+  grid-column: 2 / -3;
+}
+e {
+  position: absolute;
+  left:0; bottom:15px; height:3px; right:0;
+  background: magenta;
+  grid-column: 3 / -1;
+}
+f {
+  position: absolute;
+  left:0; bottom:20px; height:3px; right:0;
+  background: orange;
+  grid-column: auto / -2;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+.t1 x:last-child {
+  grid-column-end:-1;
+}
+
+.x5 x:first-child , .x3 x:first-child , .x2 x:first-child {
+  background: cyan;
+}
+
+.x5.t1 x:nth-child(2) , .x4 x:nth-child(2) , .x3 x:nth-child(2) {
+  background: purple;
+}
+
+
+float { float:left; margin-right:20px; }
+
+.x5 { grid-template-columns: repeat(5,20px); }
+.x4 { grid-template-columns: repeat(4,20px); }
+.x3 { grid-template-columns: repeat(3,20px); }
+.x2 { grid-template-columns: repeat(2,20px); }
+
+.t1.x5 a { grid-column:5/auto; }
+.c2.t1.x5 a , .c3.t1.x5 a { grid-column-start:-2; left:-2px; }
+.c1.t1.x4 a { grid-column:4/auto; }
+.c1.t1.x3 a { grid-column:3/auto; }
+.c1.t1.x2 a { grid-column:2/auto; }
+
+.t1.x5 c { grid-column:-3/-2; }
+.t2.x5 c { grid-column:-2/-1; }
+
+.c1.t1.x4 c { grid-column:-2/auto; }
+.x4 c { grid-column:-2/-1; }
+
+.c1.t1.x3 c, .c1.t1.x2 c { grid-column:-2/auto; }
+.c2.t1.x3 c, .c3.t1.x3 c, .c2.t1.x2 c, .c3.t1.x2 c { grid-column:-2/-1; }
+.t2.x3 c, .t2.x2 c { grid-column:-1/auto; }
+
+.t1.x5 f , .t2.x4 f { grid-column:auto/4; }
+.t2.x5 f { grid-column:auto/5; }
+.t2 f { grid-column:auto/-1; }
+
+.t2.x5 e , .t2.x4 e , .x3 e { grid-column:2/-1; }
+.t1.x5 e , .c1.t1.x4 e, .c3.t1.x2 e { grid-column:2/-2; }
+.c2.t1.x4 e, .c3.t1.x4 e  { grid-column:2/-1; }
+.c1.t1.x2 e { grid-column:2/auto; }
+.c1.t1.x3 e , .x2 e { grid-column:2/3; }
+
+.t2.x5 d, .t2.x4 d , .t1.x4 d { grid-column:2/-2; }
+.t1.x3 d, .t1.x2 d { grid-column:2/3; }
+.t2.x3 d { grid-column:2/-1; }
+.t1.x2 d { grid-column:2/auto; }
+.t2.x2 d { grid-column:2/3; }
+
+.c1.t1 b , .c2.t1.x5 b , .c3.t1.x5 b { grid-column:auto/-2; }
+
+</style>
+</head>
+<body>
+
+<float>
+<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f></div>
+<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f></div>
+
+<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<float>
+<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007.html
new file mode 100644
index 0000000000..fbf386b843
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007.html
@@ -0,0 +1,195 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1237805">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-007-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 30px;
+  grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
+  grid-gap: 2px;
+  width: 160px;
+  height: 30px;
+}
+
+.c1 { width: 160px; }
+.c2 { width: 150px; }
+.c3 { width: 140px; }
+.p1 { padding-left:5px; }
+
+.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+
+x {
+  width: 18px;
+  border:1px solid;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; height:3px; right:0;
+  background: cyan;
+  grid-column: 7 / auto;
+}
+b {
+  position: absolute;
+  left:0; bottom:0; height:3px; right:0;
+  background: brown;
+  grid-column: auto / 7;
+}
+c {
+  position: absolute;
+  left:0; bottom:5px; height:3px; right:0;
+  background: pink;
+  grid-column: 6 / 7;
+}
+d {
+  position: absolute;
+  left:0; bottom:10px; height:3px; right:0;
+  background: silver;
+  grid-column: 3 / 6;
+}
+e {
+  position: absolute;
+  left:0; bottom:15px; height:3px; right:0;
+  background: magenta;
+  grid-column: 3 / 7;
+}
+f {
+  position: absolute;
+  left:0; bottom:20px; height:3px; right:0;
+  background: orange;
+  grid-column: auto / 6;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+.t1 x:last-child {
+  grid-column-end:-1;
+}
+
+float { float:left; margin-right:20px; }
+
+.m x:first-child , .n x:first-child {
+  background: cyan;
+  grid-column:2;
+}
+
+.n x:nth-child(2) , .o x:nth-child(2) {
+  background: purple;
+  grid-column:4;
+}
+
+</style>
+</head>
+<body>
+
+<float>
+<div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<float>
+<div class="grid c1 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<script>
+function testGridTemplateColumns(elem, expected) {
+  var actual = window.getComputedStyle(elem).gridTemplateColumns;
+  if (actual != expected) {
+    var err = "FAIL: gridTemplateColumns " + elem.className +
+              ", GOT=" + actual +
+              ", EXPECTED=" + expected;
+    document.body.appendChild(document.createTextNode(err));
+  }
+}
+var a1 = [
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px"
+];
+var a2 = [
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]",
+"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]"
+];
+function runTest() {
+ var t1 = document.querySelectorAll('.t1');
+ for (var i = 0; i < t1.length; ++i) {
+   testGridTemplateColumns(t1[i], a1[i]);
+ }
+ var t2 = document.querySelectorAll('.t2');
+ for (var i = 0; i < t2.length; ++i) {
+   testGridTemplateColumns(t2[i], a2[i]);
+ }
+
+ document.documentElement.className='';
+}
+document.addEventListener('MozReftestInvalidate', runTest, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html
new file mode 100644
index 0000000000..96f606682a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html
@@ -0,0 +1,194 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks and implicit tracks on either/both sides</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1239036">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 30px;
+  grid-auto-columns: 3px;
+  grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
+  height: 30px;
+}
+
+.c1 { width: 165px; }
+.c2 { width: 155px; }
+.c3 { width: 150px; }
+.p1 { padding-left:5px; }
+
+.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+
+x {
+  width: 18px;
+  border:1px solid;
+  background: grey;
+}
+a {
+  position: absolute;
+  top:0; height:3px; right:0;
+  background: cyan;
+  grid-column: auto / auto;
+}
+b {
+  position: absolute;
+  left:0; bottom:0; height:3px; width:103px;
+  background: brown;
+  grid-column: auto / auto;
+}
+.c2 b {width:100px;}
+c {
+  position: absolute;
+  left:0; bottom:5px; height:3px; right:0;
+  background: pink;
+  grid-column: auto / auto;
+}
+d {
+  position: absolute;
+  left:23px; bottom:10px; height:3px; width:60px;
+  background: silver;
+  grid-column: auto / auto;
+}
+e {
+  position: absolute;
+  left:0; bottom:15px; height:3px; right:0;
+  background: magenta;
+  grid-column: auto / auto;
+}
+f {
+  position: absolute;
+  left:0; bottom:20px; height:3px; width:83px;
+  background: orange;
+  grid-column: auto / auto;
+}
+.c2 f {width:80px;}
+
+x:first-of-type {
+  background: lime;
+}
+x:nth-of-type(1) { grid-area:1/1; }
+x:nth-of-type(2) { grid-area:1/2; }
+x:nth-of-type(3) { grid-area:1/3; }
+x:nth-of-type(4) { grid-area:1/4; }
+x:nth-of-type(5) { grid-area:1/5; }
+
+x:last-of-type {
+  background: blue;
+}
+
+.t1 x:last-of-type {
+  grid-column-end:-1;
+}
+
+float { float:left; margin-right:20px; }
+
+.m x:first-of-type , .n x:first-of-type {
+  background: cyan;
+  grid-area:1/2;
+}
+
+.n x:nth-of-type(2) , .o x:nth-of-type(2) {
+  background: purple;
+  grid-area:1/4;
+}
+
+.c1 y, .c3 y:first-of-type { grid-column: span X / 1; background:black; }
+.c2 y, .c3 y:last-of-type { grid-column: -1 / span X; background:black; }
+
+.s2 { left: 23px; }
+.s2a { left: 20px; }
+.e5 { right: 82px; }
+.e5a { right: 75px; }
+.e5b { right: 67px; }
+.e6 { right: 62px; }
+.e6a { right: 55px; }
+.e6b { right: 47px; }
+.c2 d { left:20px; }
+.t2.x4 f, .t2.x3 f { width:63px; }
+.c2.t2.x4 f, .c2.t2.x3 f { width:60px; }
+.t2.x4 d, .t2.x3 d { width:40px; }
+.x2 d { width:20px; }
+.x2 f { width:43px; }
+.c2.x2 f { width:40px; }
+
+.t2.x5 b { width:83px; }
+.c2.t2.x5 b { width:80px; }
+.t2.x4 b, .t2.x3 b { width:63px; }
+.c2.t2.x4 b, .c2.t2.x3 b { width:60px; }
+.x2 b { width:43px; }
+.c2.x2 b { width:40px; }
+
+.t1.x5 c, .t1.x4 c, .t1.x3 c { left:83px; width:20px; right:auto; }
+.c2.x5 c , .c2.t1.x4 c , .c2.t1.x3 c { left:80px; }
+.t2.x5 c { left:83px; }
+.c2.t2.x5 c { left:80px; }
+.t2.x4 c , .t2.x3 c { left:63px; }
+.c2.t2.x4 c , .c2.t2.x3 c { left:60px; }
+.t1.x2 c , .t2.x2 c { left:43px; }
+.c2.t2.x2 c , .c2.t1.x2 c { left:40px;}
+
+.x2 e { left:23px; width:20px; right:auto; }
+.c2.x2 e { left:20px;  }
+.t1.c3.x2 e { width:40px; }
+.t1.c3.x2 b { width:63px; }
+.t1.c3.x2 c { width:20px; right:auto;}
+
+.t2.x5 e { left:23px; width:60px; }
+.x4 e , .x3 e , .x2 e { left:23px; }
+.c2.x4 e , .c2.x3 e , .c2.x2 e { left:20px; }
+.c2.t2.x5 e { left:20px; }
+.t1.x4 e , .t1.x3 e { width:80px; }
+.t2.x4 e , .t2.x3 e { width:40px; }
+
+</style>
+</head>
+<body>
+
+<float>
+<div class="grid c1 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e class="s2 e6"></e><f class="e5"></f><x></x></div>
+<div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div>
+<div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div>
+
+<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><c></c><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
+<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><c></c><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
+<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
+
+<div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
+<div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
+<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
+<div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
+<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
+<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<float>
+<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html
new file mode 100644
index 0000000000..e821c8d0ec
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html
@@ -0,0 +1,203 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks and implicit tracks on either/both sides</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1239036">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-008-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 30px;
+  grid-auto-columns: 3px;
+  grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
+  height: 30px;
+}
+
+.c1 { width: 165px; }
+.c2 { width: 155px; }
+.c3 { width: 150px; }
+.p1 { padding-left:5px; }
+
+.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+
+x {
+  width: 18px;
+  border:1px solid;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; height:3px; right:0;
+  background: cyan;
+  grid-column: 7 / auto;
+}
+b {
+  position: absolute;
+  left:0; bottom:0; height:3px; right:0;
+  background: brown;
+  grid-column: auto / 7;
+}
+c {
+  position: absolute;
+  left:0; bottom:5px; height:3px; right:0;
+  background: pink;
+  grid-column: 6 / 7;
+}
+d {
+  position: absolute;
+  left:0; bottom:10px; height:3px; right:0;
+  background: silver;
+  grid-column: 3 / 6;
+}
+e {
+  position: absolute;
+  left:0; bottom:15px; height:3px; right:0;
+  background: magenta;
+  grid-column: 3 / 7;
+}
+f {
+  position: absolute;
+  left:0; bottom:20px; height:3px; right:0;
+  background: orange;
+  grid-column: auto / 6;
+}
+
+x:first-of-type {
+  background: lime;
+}
+x:nth-of-type(1) { grid-area:1/1; }
+x:nth-of-type(2) { grid-area:1/2; }
+x:nth-of-type(3) { grid-area:1/3; }
+x:nth-of-type(4) { grid-area:1/4; }
+x:nth-of-type(5) { grid-area:1/5; }
+
+x:last-of-type {
+  background: blue;
+}
+
+.t1 x:last-of-type {
+  grid-column-end:-1;
+}
+
+float { float:left; margin-right:20px; }
+
+.m x:first-of-type , .n x:first-of-type {
+  background: cyan;
+  grid-area:1/2;
+}
+
+.n x:nth-of-type(2) , .o x:nth-of-type(2) {
+  background: purple;
+  grid-area:1/4;
+}
+
+.c1 y, .c3 y:first-of-type { grid-column: span X / 1; background:black; }
+.c2 y, .c3 y:last-of-type { grid-column: -1 / span X; background:black; }
+
+</style>
+</head>
+<body>
+
+<float>
+<div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 o"><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 o"><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t1 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n"><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 n"><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<float>
+<div class="grid c1 t1 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t1 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t1 n"><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+
+<div class="grid c1 t2 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 n"><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
+</float>
+
+<script>
+function testGridTemplateColumns(elem, expected) {
+  var actual = window.getComputedStyle(elem).gridTemplateColumns;
+  if (actual != expected) {
+    var err = "FAIL: gridTemplateColumns " + elem.className +
+              ", GOT=" + actual +
+              ", EXPECTED=" + expected;
+    document.body.appendChild(document.createTextNode(err));
+  }
+}
+var a1 = [
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px 3px"
+];
+var a2 = [
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
+"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
+"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 3px"
+];
+function runTest() {
+ var t1 = document.querySelectorAll('.t1');
+ for (var i = 0; i < t1.length; ++i) {
+   testGridTemplateColumns(t1[i], a1[i]);
+ }
+ var t2 = document.querySelectorAll('.t2');
+ for (var i = 0; i < t2.length; ++i) {
+   testGridTemplateColumns(t2[i], a2[i]);
+ }
+
+ document.documentElement.className='';
+}
+document.addEventListener('MozReftestInvalidate', runTest, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009-ref.html
new file mode 100644
index 0000000000..e475d4921f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009-ref.html
@@ -0,0 +1,131 @@
+<!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: repeat(auto-fill/auto-fit) with intrinsic min- or max-sizing function</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  margin-bottom: 2px;
+  padding-right: 3px;
+}
+.r1 { grid-template-columns: repeat(17, minmax(20px,auto)); }
+.r2 { grid-template-columns: repeat(18, minmax(auto,20px)); }
+.r3 { grid-template-columns: repeat(17, minmax(20px,1fr)); }
+.r4 { grid-template-columns: repeat(17, minmax(1fr,20px)); }
+.r5 { grid-template-columns: repeat(18, minmax(20px,min-content)); }
+.r6 { grid-template-columns: repeat(18, minmax(min-content,20px)); }
+.r7 { grid-template-columns: repeat(17, minmax(20px,max-content)); }
+.r8 { grid-template-columns: repeat(18, minmax(max-content,20px)); }
+.r1.w200 { grid-template-columns: repeat(9, minmax(20px,auto)); }
+.r2.w200 { grid-template-columns: repeat(9, minmax(auto,20px)); }
+.r3.w200 { grid-template-columns: repeat(9, minmax(20px,1fr)); }
+.r4.w200 { grid-template-columns: repeat(9, minmax(1fr,20px)); }
+.r5.w200 { grid-template-columns: repeat(9, minmax(20px,min-content)); }
+.r6.w200 { grid-template-columns: repeat(9, minmax(min-content,20px)); }
+.r7.w200 { grid-template-columns: repeat(9, minmax(20px,max-content)); }
+.r8.w200 { grid-template-columns: repeat(9, minmax(max-content,20px)); }
+
+fit .r1 { grid-template-columns: repeat(3, minmax(20px,auto)); }
+fit .r2 { grid-template-columns: repeat(18, minmax(auto,20px)); }
+fit .r3 { grid-template-columns: repeat(3, minmax(20px,1fr)); }
+fit .r4 { grid-template-columns: repeat(17, minmax(1fr,20px)); }
+fit .r5 { grid-template-columns: repeat(18, minmax(20px,min-content)); }
+fit .r6 { grid-template-columns: repeat(18, minmax(min-content,20px)); }
+fit .r7 { grid-template-columns: repeat(3, minmax(20px,max-content)); }
+fit .r8 { grid-template-columns: repeat(3, minmax(max-content,20px)); }
+fit .r1.w200 { grid-template-columns: repeat(3, minmax(20px,auto)); }
+fit .r2.w200 { grid-template-columns: repeat(9, minmax(auto,20px)); }
+fit .r3.w200 { grid-template-columns: repeat(3, minmax(20px,1fr)); }
+fit .r4.w200 { grid-template-columns: repeat(9, minmax(1fr,20px)); }
+fit .r5.w200 { grid-template-columns: repeat(9, minmax(20px,min-content)); }
+fit .r6.w200 { grid-template-columns: repeat(9, minmax(min-content,20px)); }
+fit .r7.w200 { grid-template-columns: repeat(3, minmax(20px,max-content)); }
+fit .r8.w200 { grid-template-columns: repeat(3, minmax(max-content,20px)); }
+
+.w200 { width: 200px; }
+
+x {
+  height: 10px;
+  background: grey;
+}
+a,b,c { display:inline-block; height:10px; width:10px; }
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  width: 390px;
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+<br clear="all">
+
+<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+</fill>
+
+<fit>
+
+<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+<br clear="all">
+
+<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009.html
new file mode 100644
index 0000000000..5a56a8f6c0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009.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: repeat(auto-fill/auto-fit) with intrinsic min- or max-sizing function</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-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-009-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  margin-bottom: 2px;
+  padding-right: 3px;
+}
+.r1 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,auto) [c]) [d]; }
+.r2 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(auto,20px) [c]) [d]; }
+.r3 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,1fr) [c]) [d]; }
+.r4 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(1fr,20px) [c]) [d]; }
+.r5 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,min-content) [c]) [d]; }
+.r6 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(min-content,20px) [c]) [d]; }
+.r7 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,max-content) [c]) [d]; }
+.r8 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(max-content,20px) [c]) [d]; }
+
+fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,auto) [c]) [d]; }
+fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(auto,20px) [c]) [d]; }
+fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,1fr) [c]) [d]; }
+fit .r4 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(1fr,20px) [c]) [d]; }
+fit .r5 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,min-content) [c]) [d]; }
+fit .r6 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(min-content,20px) [c]) [d]; }
+fit .r7 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,max-content) [c]) [d]; }
+fit .r8 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(max-content,20px) [c]) [d]; }
+
+.w200 { width: 200px; }
+
+x {
+  height: 10px;
+  background: grey;
+}
+a,b,c { display:inline-block; height:10px; width:10px; }
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  width: 390px;
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+<br clear="all">
+
+<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+</fill>
+
+<fit>
+
+<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+<br clear="all">
+
+<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010-ref.html
new file mode 100644
index 0000000000..f41b16ada5
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010-ref.html
@@ -0,0 +1,334 @@
+<!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: intrinsic grid container size with repeat(auto-fill/auto-fit) under min-content constraint</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  border: 1px solid;
+}
+
+.inline-grid {
+  display: inline-grid;
+  grid: min-content 40px / min-content 40px; 
+  border: 3px dotted silver;
+  align-items: start;
+  justify-items: start;
+}
+
+.cfill { grid: auto auto / repeat(3, 100px); }
+.rfill { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; }
+fit .cfill { grid: auto auto / repeat(2, 100px); }
+fit .rfill { grid: repeat(2, 50px) / auto auto; grid-auto-flow:column; }
+.r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; }
+
+span:nth-of-type(1) { background: magenta; }
+span:nth-of-type(2) { background: cyan; }
+span:nth-of-type(3) { background: yellow; }
+span:nth-of-type(4) { background: lime; }
+
+x {
+  display: inline-block;
+  width: 20px;
+  height: 30px;
+}
+
+y {
+  grid-row: 2;
+  align-self: stretch;
+  justify-self: stretch;
+  min-width: 10px;
+  min-height: 10px;
+  background: grey;
+}
+.fill {
+  min-width: -moz-available;
+  min-width: -webkit-fill;
+  min-width: fill;
+}
+.rfill.fill {
+  min-height: -moz-available;
+  min-height: -webkit-fill;
+  min-height: fill;
+}
+    </style>
+</head>
+<body>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="max-width:250px; grid-template-columns: 100px 100px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:350px; max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:100px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:100px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:100px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:100px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="max-height:160px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px; max-height:100px; grid-template-rows: 50px 50px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:160px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:50px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:50px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:50px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:50px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid r3" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<fit>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:250px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="max-width:250px;  grid-template-columns: 100px">
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:350px; max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="grid-template-columns:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fill" style="grid-template-columns:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="max-height:160px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px; max-height:100px;  grid-template-rows: 50px">
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:160px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="grid-template-rows:none">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fill" style="grid-template-rows:none">
+</div>
+<y></y>
+</div>
+
+</fit>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.html
new file mode 100644
index 0000000000..27973390ee
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.html
@@ -0,0 +1,368 @@
+<!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: intrinsic grid container size with repeat(auto-fill/auto-fit) under min-content constraint</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-010-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  border: 1px solid;
+}
+
+.inline-grid {
+  display: inline-grid;
+  grid: min-content 40px / min-content 40px; 
+  border: 3px dotted silver;
+  align-items: start;
+  justify-items: start;
+}
+
+.cfill { grid: auto auto / repeat(auto-fill, 100px); }
+.rfill { grid: repeat(auto-fill, 50px) / auto auto; grid-auto-flow:column; }
+fit .cfill { grid: auto auto / repeat(auto-fit, 100px); }
+fit .rfill { grid: repeat(auto-fit, 50px) / auto auto; grid-auto-flow:column; }
+.r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; }
+
+span:nth-of-type(1) { background: magenta; }
+span:nth-of-type(2) { background: cyan; }
+span:nth-of-type(3) { background: yellow; }
+span:nth-of-type(4) { background: lime; }
+
+x {
+  display: inline-block;
+  width: 20px;
+  height: 30px;
+}
+
+y {
+  grid-row: 2;
+  align-self: stretch;
+  justify-self: stretch;
+  min-width: 10px;
+  min-height: 10px;
+  background: grey;
+}
+
+.min-content {
+  min-width: -moz-min-content;
+  min-width: -webkit-min-content;
+  min-width: min-content;
+}
+.max-content {
+  min-width: -moz-max-content;
+  min-width: -webkit-max-content;
+  min-width: max-content;
+}
+.fill {
+  min-width: -moz-available;
+  min-width: -webkit-fill;
+  min-width: fill;
+}
+.fit-content {
+  min-width: -moz-fit-content;
+  min-width: -webkit-fit-content;
+  min-width: fit-content;
+}
+
+.rfill.min-content {
+  min-height: -moz-min-content;
+  min-height: -webkit-min-content;
+  min-height: min-content;
+}
+.rfill.max-content {
+  min-height: -moz-max-content;
+  min-height: -webkit-max-content;
+  min-height: max-content;
+}
+.rfill.fill {
+  min-height: -moz-available;
+  min-height: -webkit-fill;
+  min-height: fill;
+}
+.rfill.fit-content {
+  min-height: -moz-fit-content;
+  min-height: -webkit-fit-content;
+  min-height: fit-content;
+}
+    </style>
+</head>
+<body>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:350px; max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill min-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill max-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fit-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fill">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="max-height:160px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:160px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill min-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill max-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fit-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fill">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid r3" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<fit>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="max-width:250px">
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:350px; max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill min-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill max-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fit-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fill">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="max-height:160px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px; max-height:100px;">
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:160px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill min-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill max-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fit-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fill">
+</div>
+<y></y>
+</div>
+
+</fit>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-011.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-011.html
new file mode 100644
index 0000000000..0c599c0649
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-011.html
@@ -0,0 +1,368 @@
+<!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: intrinsic grid container size with repeat(auto-fill/auto-fit) under max-content constraint</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-010-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  border: 1px solid;
+}
+
+.inline-grid {
+  display: inline-grid;
+  grid: max-content 40px / max-content 40px; 
+  border: 3px dotted silver;
+  align-items: start;
+  justify-items: start;
+}
+
+.cfill { grid: auto auto / repeat(auto-fill, 100px); }
+.rfill { grid: repeat(auto-fill, 50px) / auto auto; grid-auto-flow:column; }
+fit .cfill { grid: auto auto / repeat(auto-fit, 100px); }
+fit .rfill { grid: repeat(auto-fit, 50px) / auto auto; grid-auto-flow:column; }
+.r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; }
+
+span:nth-of-type(1) { background: magenta; }
+span:nth-of-type(2) { background: cyan; }
+span:nth-of-type(3) { background: yellow; }
+span:nth-of-type(4) { background: lime; }
+
+x {
+  display: inline-block;
+  width: 20px;
+  height: 30px;
+}
+
+y {
+  grid-row: 2;
+  align-self: stretch;
+  justify-self: stretch;
+  min-width: 10px;
+  min-height: 10px;
+  background: grey;
+}
+
+.min-content {
+  min-width: -moz-min-content;
+  min-width: -webkit-min-content;
+  min-width: min-content;
+}
+.max-content {
+  min-width: -moz-max-content;
+  min-width: -webkit-max-content;
+  min-width: max-content;
+}
+.fill {
+  min-width: -moz-available;
+  min-width: -webkit-fill;
+  min-width: fill;
+}
+.fit-content {
+  min-width: -moz-fit-content;
+  min-width: -webkit-fit-content;
+  min-width: fit-content;
+}
+
+.rfill.min-content {
+  min-height: -moz-min-content;
+  min-height: -webkit-min-content;
+  min-height: min-content;
+}
+.rfill.max-content {
+  min-height: -moz-max-content;
+  min-height: -webkit-max-content;
+  min-height: max-content;
+}
+.rfill.fill {
+  min-height: -moz-available;
+  min-height: -webkit-fill;
+  min-height: fill;
+}
+.rfill.fit-content {
+  min-height: -moz-fit-content;
+  min-height: -webkit-fit-content;
+  min-height: fit-content;
+}
+    </style>
+</head>
+<body>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:350px; max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill min-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill max-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fit-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fill">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="max-height:160px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:160px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill min-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill max-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fit-content">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fill">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid r3" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<fit>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="max-width:250px">
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill" style="min-width:350px; max-width:250px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill min-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill max-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fit-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid cfill fill">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="max-height:160px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:120px; max-height:100px;">
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill" style="min-height:160px; max-height:100px;">
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill min-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill max-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fit-content">
+</div>
+<y></y>
+</div>
+
+<div class="inline-grid">
+<div class="grid rfill fill">
+</div>
+<y></y>
+</div>
+
+</fit>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-001-ref.html b/layout/reftests/css-grid/grid-row-gap-001-ref.html
new file mode 100644
index 0000000000..cfa815514a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-001-ref.html
@@ -0,0 +1,91 @@
+<!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: 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template:  3px 1px 5px 1px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 40px;
+}
+
+item1,item2,item3 {
+  display: block;
+  position: relative;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 3 / 2; }
+item3 { grid-area: 5 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.aend *, .aflexend * { offset-block-start:23px; }
+.acenter * { offset-block-start:11.5px;  }
+
+
+.aspace-between item2 { offset-block-start:11.5px; }
+.aspace-between item3 { offset-block-start:23px; }
+
+.aspace-around item1 { offset-block-start:4.1666px; }
+.aspace-around item2 { offset-block-start:11.5px; }
+.aspace-around item3 { offset-block-start:18.8333px; }
+
+.aspace-evenly item1 { offset-block-start:6.25px; }
+.aspace-evenly item2 { offset-block-start:11.5px; }
+.aspace-evenly item3 { offset-block-start:16.75px; }
+
+.astretch2 { grid-template-rows: 1fr 1px 5px 1px 7px; }
+.astretch3 { grid-template-rows: 14.5px 1px 16.3333px 1px 7px; }
+.astretch4 { grid-template-rows: 10.66666px 1px 12.66666px 1px 14.66666px; }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-001.html b/layout/reftests/css-grid/grid-row-gap-001.html
new file mode 100644
index 0000000000..65c58ca60a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-001.html
@@ -0,0 +1,91 @@
+<!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: 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 40px;
+  grid-row-gap: 1px;
+}
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-content:start; }
+.aend { align-content:end; }
+.aflexstart { align-content:flex-start; }
+.aflexend { align-content:flex-end; }
+.acenter { align-content:center; }
+.aleft { align-content:left; }
+.aright { align-content:right; }
+
+.aspace-between{ align-content:space-between; }
+.aspace-around { align-content:space-around;  }
+.aspace-evenly { align-content:space-evenly;  }
+
+.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
+.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
+.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
+.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-002-ref.html b/layout/reftests/css-grid/grid-row-gap-002-ref.html
new file mode 100644
index 0000000000..27e1da041e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-002-ref.html
@@ -0,0 +1,120 @@
+<!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: 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; width:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "center",
+   "center",
+   "start",
+   "end safe",
+   "start",
+   "center",
+   "end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.height = heights[w]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numRows = parseInt(rows[c]);
+          var gapRows = numRows==0 ? 0 : (numRows-1);
+          numRows += gapRows*parseInt(gaps[g]);
+          span.style.gridRow = "1 / span " + numRows;
+          for (var x = 0; x < numRows; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && rows[c] == 1) { // The 'end safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'end';
+          }
+          if (j == 7 && rows[c] == 1) { // The 'center safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (rows[c] == 1) {
+              if (heights[w] == 0) {
+                if (grid.style.alignContent != 'end') {
+                  grid.style.alignContent = 'start';
+                }
+              } else {
+                grid.style.alignContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-002.html b/layout/reftests/css-grid/grid-row-gap-002.html
new file mode 100644
index 0000000000..5618e560c7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-002.html
@@ -0,0 +1,97 @@
+<!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: 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-002-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; width:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end unsafe",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start unsafe",
+   "end unsafe",
+   "center unsafe",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          if (heights[w] != "auto")
+            grid.style.height = heights[w]+"px";
+          grid.style.gridRowGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          span.style.gridRow = "1 / span " + rows[c];
+          grid.appendChild(span);
+          for (var x = 0; x < rows[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-003-ref.html b/layout/reftests/css-grid/grid-row-gap-003-ref.html
new file mode 100644
index 0000000000..257d5d2f50
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-003-ref.html
@@ -0,0 +1,122 @@
+<!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: 'grid-row-gap' sideways-lr</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-lr;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; height:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "center",
+   "center",
+   "start",
+   "end safe",
+   "start",
+   "center",
+   "end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.width = heights[w]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numRows = parseInt(rows[c]);
+          var gapRows = numRows==0 ? 0 : (numRows-1);
+          numRows += gapRows*parseInt(gaps[g]);
+          span.style.gridRow = "1 / span " + numRows;
+          for (var x = 0; x < numRows; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && rows[c] == 1) { // The 'end safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'end';
+          }
+          if (j == 7 && rows[c] == 1) { // The 'center safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (rows[c] == 1) {
+              if (heights[w] == 0) {
+                if (grid.style.alignContent != 'end') {
+                  grid.style.alignContent = 'start';
+                }
+              } else {
+                grid.style.alignContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-003.html b/layout/reftests/css-grid/grid-row-gap-003.html
new file mode 100644
index 0000000000..51cd009ccb
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-003.html
@@ -0,0 +1,99 @@
+<!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: 'grid-row-gap' sideways-lr</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-003-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-lr;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end unsafe",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start unsafe",
+   "end unsafe",
+   "center unsafe",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          if (heights[w] != "auto")
+            grid.style.width = heights[w]+"px";
+          grid.style.gridRowGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          span.style.gridRow = "1 / span " + rows[c];
+          grid.appendChild(span);
+          for (var x = 0; x < rows[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-004-ref.html b/layout/reftests/css-grid/grid-row-gap-004-ref.html
new file mode 100644
index 0000000000..e29cb7f66f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-004-ref.html
@@ -0,0 +1,118 @@
+<!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: 'grid-row-gap' sideways-rl</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-rl;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; height:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "center",
+   "center",
+   "start",
+   "end safe",
+   "start",
+   "center",
+   "end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.width = heights[w]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numRows = parseInt(rows[c]);
+          var gapRows = numRows==0 ? 0 : (numRows-1);
+          numRows += gapRows*parseInt(gaps[g]);
+          span.style.gridRow = "1 / span " + numRows;
+          for (var x = 0; x < numRows; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && rows[c] == 1) { // The 'end safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'end';
+          }
+          if (j == 7 && rows[c] == 1) { // The 'center safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (rows[c] == 1) {
+              if (heights[w] != 0) {
+                grid.style.alignContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-004.html b/layout/reftests/css-grid/grid-row-gap-004.html
new file mode 100644
index 0000000000..d1bdfb05bf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-004.html
@@ -0,0 +1,99 @@
+<!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: 'grid-row-gap' sideways-rl</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-004-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-rl;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end unsafe",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start unsafe",
+   "end unsafe",
+   "center unsafe",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          if (heights[w] != "auto")
+            grid.style.width = heights[w]+"px";
+          grid.style.gridRowGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          span.style.gridRow = "1 / span " + rows[c];
+          grid.appendChild(span);
+          for (var x = 0; x < rows[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-005-ref.html b/layout/reftests/css-grid/grid-row-gap-005-ref.html
new file mode 100644
index 0000000000..11727afdc1
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-005-ref.html
@@ -0,0 +1,90 @@
+<!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: Percentage 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 30px;
+  grid-row-gap: 3px;
+}
+.vl.grid, .vr.grid, .vlr.grid, .vrl.grid { grid-row-gap: 4px; }
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-content:start; }
+.aend { align-content:end; }
+.aflexstart { align-content:flex-start; }
+.aflexend { align-content:flex-end; }
+.acenter { align-content:center; }
+.aleft { align-content:left; }
+.aright { align-content:right; }
+
+.aspace-between{ align-content:space-between; }
+.aspace-around { align-content:space-around;  }
+.aspace-evenly { align-content:space-evenly;  }
+
+.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
+.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
+.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
+.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-row-gap-005.html b/layout/reftests/css-grid/grid-row-gap-005.html
new file mode 100644
index 0000000000..69dc675fcd
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-005.html
@@ -0,0 +1,91 @@
+<!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: Percentage 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-005-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 1px solid;
+  border-block-start: 2px solid blue;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
+  padding: 1px 1px 3px 2px;
+  margin-right: 4px;
+  width: 40px;
+  height: 30px;
+  grid-row-gap: 10%;
+}
+
+item1,item2,item3 {
+  display: block;
+  background: grey;
+  justify-self: stretch;
+  align-self: stretch;
+}
+
+item1 { grid-area: 1 / 1; }
+item2 { grid-area: 2 / 2; }
+item3 { grid-area: 3 / 3; }
+
+.hl  { writing-mode: horizontal-tb; direction:ltr; }
+.hr  { writing-mode: horizontal-tb; direction:rtl; }
+.vl  { writing-mode: vertical-lr; }
+.vr  { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.astart { align-content:start; }
+.aend { align-content:end; }
+.aflexstart { align-content:flex-start; }
+.aflexend { align-content:flex-end; }
+.acenter { align-content:center; }
+.aleft { align-content:left; }
+.aright { align-content:right; }
+
+.aspace-between{ align-content:space-between; }
+.aspace-around { align-content:space-around;  }
+.aspace-evenly { align-content:space-evenly;  }
+
+.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; }
+.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; }
+.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; }
+.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); }
+
+</style>
+</head>
+<body>
+
+<script>
+var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
+             "space-between", "space-around", "space-evenly",
+             "stretch1", "stretch2", "stretch3", "stretch4" ];
+for (var k = 0; k < test.length; ++k) {
+  for (var i = 0; i < gridwm.length; ++i) {
+      var div = document.createElement("div");
+      div.className = "grid a" + test[k] + " " + gridwm[i];
+      div.appendChild(document.createElement("item1"));
+      div.appendChild(document.createElement("item2"));
+      div.appendChild(document.createElement("item3"));
+      document.body.appendChild(div)
+  }
+    document.body.appendChild(document.createElement("separator"));
+}
+</script>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html
new file mode 100644
index 0000000000..395f8d2c59
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html
@@ -0,0 +1,178 @@
+<!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: fit-content() track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281320">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:1px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-rows: auto auto;
+  position: relative;
+  border: 1px solid;
+}
+
+.c1 { grid-template-columns: max-content minmax(100px, 1fr); }
+.c2 { grid: auto 10px / 200px 0 minmax(100px, 1fr); }
+.c3 { grid: auto 10px / 100px 100px minmax(0px, 1fr); }
+.c4 { grid: auto 10px / 100px 100px minmax(100px, 1fr); }
+.c5 { grid: auto 10px / 0px minmax(0, 1fr) minmax(100px, 1fr); }
+.c6 { grid: auto 10px / fit-content(0px) minmax(0, 1fr) minmax(100px, 1fr); }
+.c7 { grid: auto 10px / fit-content(40%) fit-content(40%); }
+
+span { line-height:0; grid-column:span 2; background: lime; }
+.c1 span { grid-column:span 1; }
+
+a {
+  display: inline-block;
+  width: 50px;
+  height: 1px;
+}
+
+y {
+  position: absolute;
+  left:0; right:0; top:0; bottom:0;
+  grid-area: 2/2/3/3;
+  height: 1px;
+  background: grey;
+}
+
+.w3 .c1 { grid-template-columns: 176px minmax(0px, 1fr); }
+.w3 .c2 { grid-template-columns: 176px 0 minmax(0px, 1fr); }
+
+.w4 .c1 { grid-template-columns: 152px minmax(0px, 1fr); }
+.w4 .c2 { grid-template-columns: 152px 0 minmax(0px, 1fr); }
+
+.w5 .c1 { grid-template-columns: 128px minmax(0px, 1fr); }
+.w5 .c2 { grid-template-columns: 128px 0 minmax(0px, 1fr); }
+
+.w6 .c1 { grid-template-columns: 104px minmax(0px, 1fr); }
+.w6 .c2 { grid-template-columns: 104px 0 minmax(0px, 1fr); }
+.w6 .c4 { grid-template-columns: 60px 100px minmax(0px, 1fr); }
+
+.w7 .c1 { grid-template-columns: 80px minmax(0px, 1fr); }
+.w7 .c2 { grid-template-columns: 80px 0 minmax(0px, 1fr); }
+.w7 .c3 { grid-template-columns: 80px 80px minmax(0px, 1fr); }
+.w7 .c4 { grid-template-columns: 0px 100px minmax(0px, 1fr); }
+
+.w8 .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
+.w8 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
+.w8 .c3 { grid-template-columns: 56px 56px minmax(0, 1fr); }
+.w8 .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
+
+.w9 .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
+.w9 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
+.w9 .c3 { grid-template-columns: 32px 32px minmax(0, 1fr); }
+.w9 .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
+
+.wA .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
+.wA .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
+.wA .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); }
+.wA .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
+
+.wB .c1 { grid-template-columns: 50px minmax(100px, 1fr); }
+.wB .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); }
+.wB .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); }
+.wB .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); }
+
+  </style>
+</head>
+<body>
+
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+
+<div class="w2" style="width:502px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w3" style="width:442px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w4" style="width:382px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w5" style="width:322px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w6" style="width:262px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w7" style="width:202px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w8" style="width:142px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="w9" style="width:82px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="wA" style="width:22px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div class="wB" style="width:2px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-001.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-001.html
new file mode 100644
index 0000000000..f925c2c5a4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-001.html
@@ -0,0 +1,141 @@
+<!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: fit-content() track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281320">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content">
+  <link rel="match" href="grid-track-fit-content-sizing-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:1px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-rows: auto auto;
+  position: relative;
+  border: 1px solid;
+}
+
+.c1 { grid-template-columns: fit-content(40%) minmax(100px, 1fr); }
+.c2 { grid: auto 10px / fit-content(40%) 0 minmax(100px, 1fr); }
+.c3 { grid: auto 10px / fit-content(40%) fit-content(40%) minmax(0px, 1fr); }
+.c4 { grid: auto 10px / fit-content(40%) 100px minmax(100px, 1fr); }
+.c5 { grid: auto 10px / fit-content(40%) minmax(0, 1fr) minmax(100px, 1fr); }
+.c6 { grid: auto 10px / fit-content(calc(1px - 99%)) minmax(0, 1fr) minmax(100px, 1fr); }
+.c7 { grid: auto 10px / none; grid-auto-columns: fit-content(40%); }
+
+span { line-height:0; grid-column:span 2; background: lime; }
+.c1 span { grid-column:span 1; }
+
+a {
+  display: inline-block;
+  width: 50px;
+  height: 1px;
+}
+
+y {
+  position: absolute;
+  left:0; right:0; top:0; bottom:0;
+  grid-area: 2/2/3/3;
+  height: 1px;
+  background: grey;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+
+<div style="width:502px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:442px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:382px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:322px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:262px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:202px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:142px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:82px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:22px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+<div style="width:2px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html
new file mode 100644
index 0000000000..f12ee1c32f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-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>CSS Grid Test: fit-content() track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  justify-content: start;
+  position: relative;
+  border: 1px solid;
+}
+
+.c1 { grid-template-columns: fit-content(40%) 25px minmax(100px, 1fr); }
+.c2 { grid-template-columns: fit-content(40%) 25px 0 25px minmax(100px, 1fr); }
+.c3 { grid-template-columns: fit-content(40%) 25px fit-content(40%) 25px minmax(0px, 1fr); }
+.c4 { grid-template-columns: fit-content(40%) 25px 100px 25px minmax(100px, 1fr); }
+.c5 { grid-template-columns: fit-content(40%) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); }
+.c6 { grid-template-columns: fit-content(calc(1px - 99%)) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); }
+.c7 { grid-template-columns: fit-content(40%) 25px fit-content(40%); }
+
+span {
+  grid-column: 1 / span 3;
+  grid-row: 2;
+  height: 2px;
+  background: lime;
+  min-width: 50px;
+}
+.c1 span { grid-column:1; }
+
+a {
+  display: inline-block;
+  width: 50px;
+  height: 1px;
+}
+
+y {
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 2px;
+    background: purple;
+    grid-column: 1 / 2;
+}
+y:nth-of-type(2n) { background: orange; grid-column: 3 / 4; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+
+<div style="width:502px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:442px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:382px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:322px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:262px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:202px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:142px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:82px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:22px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:2px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html
new file mode 100644
index 0000000000..14607bfd92
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html
@@ -0,0 +1,151 @@
+<!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: fit-content() track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content">
+  <link rel="match" href="grid-track-fit-content-sizing-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  grid-column-gap: 25px;
+  justify-content: start;
+  position: relative;
+  border: 1px solid;
+}
+
+.c1 { grid-template-columns: fit-content(40%) minmax(100px, 1fr); }
+.c2 { grid-template-columns: fit-content(40%) 0 minmax(100px, 1fr); }
+.c3 { grid-template-columns: fit-content(40%) fit-content(40%) minmax(0px, 1fr); }
+.c4 { grid-template-columns: fit-content(40%) 100px minmax(100px, 1fr); }
+.c5 { grid-template-columns: fit-content(40%) minmax(0, 1fr) minmax(100px, 1fr); }
+.c6 { grid-template-columns: fit-content(calc(1px - 99%)) minmax(0, 1fr) minmax(100px, 1fr); }
+.c7 { grid-template-columns: none; grid-auto-columns: fit-content(40%); }
+
+span {
+  grid-column: 1 / span 2;
+  grid-row: 2;
+  height: 2px;
+  background: lime;
+  min-width: 50px;
+}
+.c1 span { grid-column:1; }
+
+a {
+  display: inline-block;
+  width: 50px;
+  height: 1px;
+}
+
+y {
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 2px;
+    background: purple;
+    grid-column: 1 / 2;
+}
+y:nth-of-type(2n) { background: orange; grid-column: 2 / 3; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+
+<div style="width:502px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:442px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:382px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:322px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:262px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:202px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:142px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:82px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:22px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:2px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html
new file mode 100644
index 0000000000..fa3c89c3e9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html
@@ -0,0 +1,139 @@
+<!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: Distribute space beyond growth limits</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: block;
+ border: 1px solid;
+ width: 500px;
+}
+.grid div.c1 {
+ display: table-row;
+}
+.grid div {
+ display: table-cell;
+}
+
+.c1 { }
+x { display:block; width:396px; border:2px solid; }
+.c2 { background: grey; }
+.c3 { background: blue; }
+.h10 { height:10px; }
+  </style>
+</head>
+<body>
+
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x>1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x>1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x>1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2 h10"></td>
+  <td class="c3 h10"></td>
+</tr></table>
+</div>
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2 h10"></td>
+  <td class="c3 h10"></td>
+</tr></table>
+</div>
+<div class="grid t1">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:-webkit-max-content;width:-moz-max-content;width:max-content">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t2">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t2">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t2">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c2"></td>
+  <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t2">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
+</tr><tr>
+  <td class="c3 h10" colspan="2"></td>
+</tr></table>
+</div>
+<div class="grid t2">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:auto">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5&nbsp;</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+</tr></table>
+</div>
+<div class="grid t2">
+<table border="0" cellpadding="0" cellspacing="0"><tr>
+  <td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
+</tr><tr>
+  <td class="c2">&nbsp;</td>
+  <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+</tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html
new file mode 100644
index 0000000000..061be012e4
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html
@@ -0,0 +1,103 @@
+<!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: Distribute space beyond growth limits</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#distribute-extra-space">
+  <link rel="match" href="grid-track-intrinsic-sizing-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px solid;
+ width: 500px;
+ justify-content: start;
+ align-content: start;
+}
+.t1 {
+ grid-template-columns: minmax(max-content,200px) minmax(max-content,200px);
+}
+.t2 {
+ grid-template-columns: minmax(0,auto) minmax(max-content,auto);
+}
+
+.c1 { grid-column: span 2; border:2px solid; min-width:0; }
+.c2 { background: grey; min-height:10px; min-width:0; }
+.c3 { background: blue; min-width:0;}
+  </style>
+</head>
+<body>
+
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3">&nbsp;</div>
+</div>
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3"></div>
+</div>
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2"></div>
+  <div class="c3"></div>
+</div>
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3">&nbsp;</div>
+</div>
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3"></div>
+</div>
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
+  <div class="c2"></div>
+  <div class="c3"></div>
+</div>
+<div class="grid t1">
+  <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3">&nbsp;</div>
+</div>
+<div class="grid t2">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3">&nbsp;</div>
+</div>
+<div class="grid t2">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3"></div>
+</div>
+<div class="grid t2">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2"></div>
+  <div class="c3">&nbsp;</div>
+</div>
+<div class="grid t2">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2"></div>
+  <div class="c3"></div>
+</div>
+<div class="grid t2">
+  <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3">&nbsp;</div>
+</div>
+<div class="grid t2">
+  <span class="c1">1 2 3 4 5</span>
+  <div class="c2">&nbsp;</div>
+  <div class="c3">&nbsp;</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
new file mode 100644
index 0000000000..7fb00f1daf
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
@@ -0,0 +1,168 @@
+<!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: Intrinsic track sizing (w/o span:1)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ position: relative;
+ display: grid;
+ border: 1px dashed;
+ width: 500px;
+ grid-template-columns: auto;
+ padding-bottom:10px;
+ justify-content: start;
+ align-content: start;
+}
+
+.d1 {
+  position: absolute;
+  bottom: 0;
+  background: grey;
+}
+.g1 .d1 {
+  width: 52px;
+}
+.g2 .d1 {
+  width: 56px;
+}
+.g2f .d1 {
+  width: 69px;
+}
+.g3 .d1 {
+  width: 56px;
+}
+.g4 .d1 {
+  width: 96px;
+}
+.g4f .d1 {
+  width: 69px;
+}
+.g5 .d1 {
+  width: 96px;
+}
+.g6 .d1 {
+  width: 69px;
+}
+.g6f .d1 {
+  width: 69px;
+}
+.g7 .d1 {
+  width: 69px;
+}
+.g8 .t {
+  width: 196px;
+}
+.g8 .d1 {
+  width: 200px;
+}
+.g9 .d1 {
+  width: 69px;
+}
+.gA .d1 {
+  width: 93px;
+}
+.gB .d1 {
+  width: 93px;
+}
+.gC .d1 {
+  width: 93px;
+}
+.gD .d1 {
+  width: 93px;
+}
+
+.t { grid-column: span 1; border:2px solid; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+<div class="g2f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+<div class="g4f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+<div class="g6f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html
new file mode 100644
index 0000000000..8dd9e963bc
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html
@@ -0,0 +1,192 @@
+<!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: Intrinsic track sizing (w/o span:1)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
+  <link rel="match" href="grid-track-intrinsic-sizing-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px dashed;
+ width: 500px;
+ justify-content: start;
+ align-content: start;
+}
+
+.g1 {
+ grid-template-columns: minmax(0,auto)
+                        minmax(max-content,auto)
+                        minmax(max-content,max-content);
+}
+.g2 {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(min-content,auto)
+                        minmax(max-content,max-content);
+}
+.g2f {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(1fr,auto)
+                        minmax(max-content,max-content);
+}
+.g3 {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(max-content,max-content);
+}
+.g4 {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(min-content,max-content);
+}
+.g4f {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(1fr,max-content)
+                        minmax(min-content,max-content);
+}
+.g5 {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto);
+}
+.g6 {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto);
+}
+.g6f {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(1fr,auto);
+}
+.g7 {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,auto)
+                        minmax(min-content,auto);
+}
+.g8 {
+ grid-template-columns: minmax(auto,min-content)
+                        minmax(200px,min-content)
+                        minmax(min-content,min-content);
+}
+.g9 {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(auto,auto)
+                        minmax(auto,auto);
+}
+.gA {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(min-content,min-content)
+                        minmax(min-content,min-content);
+}
+.gB {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,min-content)
+                        minmax(min-content,min-content);
+}
+.gC {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,min-content)
+                        minmax(min-content,max-content);
+}
+.gD {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,max-content)
+                        minmax(min-content,max-content);
+}
+
+.t { grid-column: span 3; border:2px solid; }
+.c1 { grid-column: 1; }
+.d1 { grid-column: 1 / span 2; background: grey; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+<div class="g2f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+<div class="g4f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+<div class="g6f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
new file mode 100644
index 0000000000..bc52f4ca05
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
@@ -0,0 +1,228 @@
+<!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: Intrinsic track sizing (w/o span:1, with flex)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ position: relative;
+ display: grid;
+ border: 1px dashed;
+ width: 500px;
+ grid-template-columns: auto;
+ padding-bottom:10px;
+ justify-content: start;
+ align-content: start;
+}
+
+.d1 {
+  position: absolute;
+  bottom: 0;
+  background: grey;
+}
+.g1 .d1 {
+  width: 52px;
+}
+.g2 .d1 {
+  width: 56px;
+}
+.g2f .d1 {
+  width: 69px;
+}
+.g3 .d1 {
+  width: 56px;
+}
+.g4 .d1 {
+  width: 96px;
+}
+.g4f .d1 {
+  width: 104px;
+}
+.g5 .d1 {
+  width: 96px;
+}
+.g6 .d1 {
+  width: 69px;
+}
+.g6f .d1 {
+  width: 89px;
+}
+.g7 .d1 {
+  width: 69px;
+}
+.g8 .t {
+  width: 196px;
+}
+.g8 .d1 {
+  width: 200px;
+}
+.g9 .d1 {
+  width: 69px;
+}
+.gA .d1 {
+  width: 93px;
+}
+.gB .d1 {
+  width: 93px;
+}
+.gC .d1 {
+  width: 93px;
+}
+.gD .d1 {
+  width: 93px;
+}
+.d2 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: blue;
+}
+.g1 .d2 {
+  width: 448px;
+}
+.g2 .d2 {
+  width: 444px;
+}
+.g2f .d2 {
+  right: auto;
+  left: 69px;
+  width: 35px;
+}
+.g3 .d2 {
+  width: 444px;
+}
+.g4 .d2 {
+  width: 404px;
+}
+.g4f .d2 {
+  right: auto;
+  left: 69px;
+  width: 35px;
+}
+.g5 .d2 {
+  width: 404px;
+}
+.g6 .d2 {
+  width: 431px;
+}
+.g6f .d2 {
+  right: auto;
+  left: 69px;
+  width: 35px;
+}
+.g7 .d2 {
+  width: 431px;
+}
+.g8 .d2 {
+  width: 300px;
+}
+.g9 .d2 {
+  width: 431px;
+}
+.gA .d2 {
+  width: 407px;
+}
+.gB .d2 {
+  width: 407px;
+}
+.gC .d2 {
+  width: 407px;
+}
+.gD .d2 {
+  width: 407px;
+}
+
+.t { grid-column: span 1; border:2px solid; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+<div class="g2f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+<div class="g4f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+<div class="g6f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html
new file mode 100644
index 0000000000..bee7ef1dd7
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html
@@ -0,0 +1,208 @@
+<!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: Intrinsic track sizing (w/o span:1, with flex)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
+  <link rel="match" href="grid-track-intrinsic-sizing-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px dashed;
+ width: 500px;
+ justify-content: start;
+ align-content: start;
+}
+
+.g1 {
+ grid-template-columns: minmax(0,auto)
+                        minmax(max-content,auto)
+                        minmax(max-content,max-content)
+                        1fr;
+}
+.g2 {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(min-content,auto)
+                        minmax(max-content,max-content)
+                        1fr;
+}
+.g2f {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(1fr,auto)
+                        minmax(max-content,max-content)
+                        1fr;
+}
+.g3 {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(max-content,max-content)
+                        1fr;
+}
+.g4 {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(min-content,max-content)
+                        1fr;
+}
+.g4f {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(1fr,max-content)
+                        1fr;
+}
+.g5 {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto)
+                        1fr;
+}
+.g6 {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto)
+                        1fr;
+}
+.g6f {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(1fr,auto)
+                        1fr;
+}
+.g7 {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,auto)
+                        minmax(min-content,auto)
+                        1fr;
+}
+.g8 {
+ grid-template-columns: minmax(auto,min-content)
+                        minmax(200px,min-content)
+                        minmax(min-content,min-content)
+                        1fr;
+}
+.g9 {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(auto,auto)
+                        minmax(auto,auto)
+                        1fr;
+}
+.gA {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(min-content,min-content)
+                        minmax(min-content,min-content)
+                        1fr;
+}
+.gB {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,min-content)
+                        minmax(min-content,min-content)
+                        1fr;
+}
+.gC {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,min-content)
+                        minmax(min-content,max-content)
+                        1fr;
+}
+.gD {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        1fr;
+}
+
+.t { grid-column: span 3; border:2px solid; }
+.d1 { grid-column: 1 / span 2; background: grey; }
+.d3 { grid-column: 3 / span 2; background: blue; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+<div class="g2f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+<div class="g4f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+<div class="g6f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d3"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html
new file mode 100644
index 0000000000..fb9d870d00
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html
@@ -0,0 +1,251 @@
+<!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: Intrinsic track sizing (with span:1)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ position: relative;
+ display: grid;
+ border: 1px solid black;
+ width: 500px;
+ grid-template-columns: auto;
+ padding-bottom:10px;
+ justify-content: start;
+ align-content: start;
+}
+
+.d1 {
+  position: absolute;
+  bottom: 0;
+  background: grey;
+}
+.g1 .d1 {
+  width: 52px;
+}
+.g2 .d1 {
+  width: 56px;
+}
+.g2f .d1 {
+  left: 28px;
+  width: 28px;
+}
+.g3 .d1 {
+  left: 41px;
+  width: 2px;
+}
+.g4 .d1 {
+  left: 81px;
+  width: 2px;
+}
+.g4f .d1 {
+  left: 28px;
+  width: 28px;
+}
+.g5 .d1 {
+  left: 81px;
+  width: 2px;
+}
+.g6 .d1 {
+  left: 28px;
+  width: 28px;
+}
+.g6f .d1 {
+  left: 28px;
+  width: 28px;
+}
+.g7 .d1 {
+  left: 28px;
+  width: 28px;
+}
+.g8 .t {
+  width: 216px;
+}
+.g8 .d1 {
+  left:0;
+  width: 200px;
+}
+.g9 .d1 {
+  left: 28px;
+  width: 28px;
+}
+.gA .d1 {
+  left: 80px;
+  width: 2px;
+}
+.gB .d1 {
+  left: 0;
+  width: 82px;
+}
+.gC .d1 {
+  left: 0;
+  width: 82px;
+}
+.gD .d1 {
+  left: 0;
+  width: 82px;
+}
+.d2 {
+  position: absolute;
+  bottom: 0;
+  background: blue;
+}
+.g1 .d2 {
+  width: 104px;
+  left: 0;
+}
+.g2 .d2 {
+  width: 102px;
+  left: 2px;
+}
+.g2f .d2 {
+  width: 48px;
+  left: 56px;
+}
+.g3 .d2 {
+  width: 61px;
+  left: 43px;
+}
+.g4 .d2 {
+  width: 21px;
+  left: 83px;
+}
+.g4f .d2 {
+  width: 48px;
+  left: 56px;
+}
+.g5 .d2 {
+  width: 21px;
+  left: 83px;
+}
+.g6 .d2 {
+  width: 48px;
+  left: 56px;
+}
+.g6f .d2 {
+  width: 48px;
+  left: 56px;
+}
+.g7 .d2 {
+  width: 48px;
+  left: 56px;
+}
+.g8 .d2 {
+  width: 20px;
+  left: 200px;
+}
+.g9 .d2 {
+  width: 48px;
+  left: 56px;
+}
+.gA .d2 {
+  width: 22px;
+  left: 82px;
+}
+.gB .d2 {
+  width: 22px;
+  left: 82px;
+}
+.gC .d2 {
+  width: 22px;
+  left: 82px;
+}
+.gD .d2 {
+  width: 22px;
+  left: 82px;
+}
+
+.t { grid-column: span 1; border:2px solid; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+<div class="g2f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+<div class="g4f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+<div class="g6f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="d1"></div><div class="d2"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html
new file mode 100644
index 0000000000..cad2f31549
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html
@@ -0,0 +1,225 @@
+<!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: Intrinsic track sizing (with span:1)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
+  <link rel="match" href="grid-track-intrinsic-sizing-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ border: 1px solid black;
+ width: 500px;
+ justify-content: start;
+ align-content: start;
+}
+.float { width:auto; float:left; }
+.g1 {
+ grid-template-columns: minmax(0,auto)
+                        minmax(max-content,auto)
+                        minmax(max-content,max-content);
+}
+.g2 {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(min-content,auto)
+                        minmax(max-content,max-content);
+}
+.g2f {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(1fr,auto)
+                        minmax(max-content,max-content);
+}
+.g3 {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(max-content,max-content);
+}
+.g4 {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(min-content,max-content)
+                        minmax(min-content,max-content);
+}
+.g4f {
+ grid-template-columns: minmax(max-content,max-content)
+                        minmax(1fr,max-content)
+                        minmax(min-content,max-content);
+}
+.g5 {
+ grid-template-columns: minmax(max-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto);
+}
+.g6 {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto);
+}
+.g6f {
+ grid-template-columns: minmax(1fr,auto)
+                        minmax(min-content,max-content)
+                        minmax(min-content,auto);
+}
+.g7 {
+ grid-template-columns: minmax(min-content,auto)
+                        minmax(min-content,auto)
+                        minmax(min-content,auto);
+}
+.g8 {
+ grid-template-columns: minmax(auto,min-content)
+                        minmax(200px,min-content)
+                        minmax(min-content,min-content);
+}
+.g9 {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(auto,auto)
+                        minmax(auto,auto);
+}
+.gA {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(min-content,min-content)
+                        minmax(min-content,min-content);
+}
+.gB {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,min-content)
+                        minmax(min-content,min-content);
+}
+.gC {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,min-content)
+                        minmax(min-content,max-content);
+}
+.gD {
+ grid-template-columns: minmax(auto,auto)
+                        minmax(max-content,max-content)
+                        minmax(min-content,max-content);
+}
+
+.t { grid-column: span 3; border:2px solid; }
+.c1 { grid-column: 1; height:10px; }
+.c2 { grid-column: 2; background: grey; height:10px; }
+.c3 { grid-column: 3; background: blue; height:10px; }
+div { min-width:0; min-height:10px; }
+t { display:inline-block; width:20px; }
+
+  </style>
+</head>
+<body>
+
+<div class="g1 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g2 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+<div class="g2f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g3 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g4 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+<div class="g4f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g5 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g6 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+<div class="g6f grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g7 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g8 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="g9 grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="gA grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="gB grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="gC grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+<div class="gD grid">
+  <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
+  <div class="c1"></div>
+  <div class="c2"></div>
+  <div class="c3"><t>&nbsp;</t></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
new file mode 100644
index 0000000000..538b54cd3a
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.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>Reference: Percent track sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 3px solid;
+  grid-template-columns: 18px;
+  width: 30px;
+  grid-template-rows: 5px 10px;
+  margin-right: 20px;
+  grid-auto-rows: 10px;
+  align-content: start;
+  justify-content: start;
+}
+
+span {
+  background: grey;
+  min-width: 0;
+  min-height: 0;
+  line-height: 0;
+  align-self: start;
+  justify-self: start;
+}
+t {
+  display: inline-block;
+  width: 30px;
+  height: 5px;
+}
+x {
+  background: lime;
+  min-width: 0;
+  min-height: 0;
+}
+
+.tA {
+  grid-template-columns: 30px;
+  width: auto;
+}
+.tB {
+  grid-template-columns: 30px;
+  grid-template-rows: 0 10px; 
+}
+
+.t1 {
+  grid-template-columns: 28px;
+}
+.t3, .t4, .t8 { grid: auto 10px / auto; width: auto; }
+
+.t9 x { width: 18px }
+.t3 x, .t4 x, .t8 x, .tA x { width: 0 }
+.t5 x { width: 10px }
+.tB x { width: 18px }
+
+.sz {
+  grid-template-rows: 40px;
+  width: 100px;
+  height: 100px;
+}
+.sz.t1 { grid-template-rows: 50px; }
+.sz.t3, .sz.t4 { grid-template-rows: 0; }
+.sz.t5 { grid-template-rows: 10px; }
+.sz.t9 { grid-template-rows: 40px 10px; height:100px; }
+.sz.tA { grid: 0 0 / 0; }
+.sz.tB {
+  grid-template-columns: 60px;
+  grid-template-rows: 40px;
+}
+
+.sz x { width: 60px; }
+.sz.t1 x { width: 70px; }
+.sz.t3 x, .sz.t4 x, .sz.t8 x { width: 0 }
+.sz.t5 x { width: 10px }
+.sz.tA x { width: 160px }
+
+.tC {
+  grid-template-columns: 5px;
+  grid-template-rows: 5px;
+}
+.tD {
+  grid-template-columns: 0;
+  grid-template-rows: 0;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid t0"><span><t></t></span><x></x></div>
+<div class="grid t1"><span><t></t></span><x></x></div>
+<div class="grid t2"><span><t></t></span><x></x></div>
+<div class="grid t3"><span><t></t></span><x></x></div>
+<div class="grid t4"><span><t></t></span><x></x></div>
+<div class="grid t5"><span><t></t></span><x></x></div>
+<div class="grid t6"><span><t></t></span><x></x></div>
+<div class="grid t7"><span><t></t></span><x></x></div>
+<div class="grid t8"><span><t></t></span><x></x></div>
+<div class="grid t9"><span><t></t></span><x></x></div>
+<div class="grid tA"><span><t></t></span><x></x></div>
+<div class="grid tB"><span><t></t></span><x></x></div>
+
+<br clear="all">
+
+<div class="grid sz t0"><span><t></t></span><x></x></div>
+<div class="grid sz t1"><span><t></t></span><x></x></div>
+<div class="grid sz t2"><span><t></t></span><x></x></div>
+<div class="grid sz t3"><span><t></t></span><x></x></div>
+<div class="grid sz t4"><span><t></t></span><x></x></div>
+<div class="grid sz t5"><span><t></t></span><x></x></div>
+<div class="grid sz t6"><span><t></t></span><x></x></div>
+<div class="grid sz t7"><span><t></t></span><x></x></div>
+<div class="grid sz t8"><span><t></t></span><x></x></div>
+<div class="grid sz t9"><span><t></t></span><x></x></div>
+<div class="grid sz tA"><span><t></t></span><x></x></div>
+<div class="grid sz tB"><span><t></t></span><x></x></div>
+<div class="grid sz tC"><span><t></t></span><x style="height:10px; width:5px"></x></div>
+<div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div>
+<div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-percent-sizing-001.html b/layout/reftests/css-grid/grid-track-percent-sizing-001.html
new file mode 100644
index 0000000000..c0296afe44
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001.html
@@ -0,0 +1,140 @@
+<!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: Percent track sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-percentage">
+  <link rel="match" href="grid-track-percent-sizing-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 3px solid;
+  grid-template-columns: 60%;
+  grid-template-rows: 40%;
+  margin-right: 20px;
+  grid-auto-rows: 10px;
+  align-content: start;
+  justify-content: start;
+}
+.sz {
+  width: 100px;
+  height: 100px;
+}
+
+.t1 {
+  grid-template-columns: calc(10px + 60%);
+  grid-template-rows: calc(10px + 40%);
+}
+.t2 {
+  grid-template-columns: calc(60%);
+  grid-template-rows: calc(40%);
+}
+.t3 {
+  grid-template-columns: calc(0%);
+  grid-template-rows: calc(0%);
+}
+.t4 {
+  grid-template-columns: 0%;
+  grid-template-rows: 0%;
+}
+.t5 {
+  grid-template-columns: calc(10px + 0%);
+  grid-template-rows: calc(10px + 0%);
+}
+.t6 {
+  grid-template-columns: calc(0px + 60%);
+  grid-template-rows: calc(0px + 40%);
+}
+.t7 {
+  grid-template-columns: calc(0% + 60%);
+  grid-template-rows: calc(0% + 40%);
+}
+.t8 {
+  grid-template-columns: calc(0% + 0%);
+  grid-template-rows: calc(0% + 0%);
+}
+.t9 {
+  grid-template-columns: minmax(0, 60%);
+  grid-template-rows: minmax(0, 40%);
+}
+.tA {
+  grid-template-columns: calc(10px - 200%);
+  grid-template-rows: calc(10px - 99%);
+}
+.tB {
+  grid-template-columns: minmax(60%, 0);
+  grid-template-rows: minmax(40%, 0);
+}
+.tC {
+  grid-template-columns: calc(10px - 5%);
+  grid-template-rows: calc(10px - 5%);
+}
+.tD {
+  grid-template-columns: calc(10px - 40%);
+  grid-template-rows: calc(10px - 40%);
+}
+
+span {
+  background: grey;
+  min-width: 0;
+  min-height: 0;
+  line-height: 0;
+  align-self: start;
+  justify-self: start;
+}
+t {
+  display: inline-block;
+  width: 30px;
+  height: 5px;
+}
+x {
+  background: lime;
+  min-width: 0;
+  min-height: 0;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid"   ><span><t></t></span><x></x></div>
+<div class="grid t1"><span><t></t></span><x></x></div>
+<div class="grid t2"><span><t></t></span><x></x></div>
+<div class="grid t3"><span><t></t></span><x></x></div>
+<div class="grid t4"><span><t></t></span><x></x></div>
+<div class="grid t5"><span><t></t></span><x></x></div>
+<div class="grid t6"><span><t></t></span><x></x></div>
+<div class="grid t7"><span><t></t></span><x></x></div>
+<div class="grid t8"><span><t></t></span><x></x></div>
+<div class="grid t9"><span><t></t></span><x></x></div>
+<div class="grid tA"><span><t></t></span><x></x></div>
+<div class="grid tB"><span><t></t></span><x></x></div>
+
+<br clear="all">
+
+<div class="grid sz"   ><span><t></t></span><x></x></div>
+<div class="grid sz t1"><span><t></t></span><x></x></div>
+<div class="grid sz t2"><span><t></t></span><x></x></div>
+<div class="grid sz t3"><span><t></t></span><x></x></div>
+<div class="grid sz t4"><span><t></t></span><x></x></div>
+<div class="grid sz t5"><span><t></t></span><x></x></div>
+<div class="grid sz t6"><span><t></t></span><x></x></div>
+<div class="grid sz t7"><span><t></t></span><x></x></div>
+<div class="grid sz t8"><span><t></t></span><x></x></div>
+<div class="grid sz t9"><span><t></t></span><x></x></div>
+<div class="grid sz tA"><span><t></t></span><x></x></div>
+<div class="grid sz tB"><span><t></t></span><x></x></div>
+<div class="grid sz tC"><span><t></t></span><x></x></div>
+<div class="grid sz tD"><span><t></t></span><x style="grid-area:1/2;height:10px"></x></div>
+<div class="grid sz tD"><span><t></t></span><x style="grid-area:2/2;height:10px"></x></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-sizing-001-ref.html
new file mode 100644
index 0000000000..4922066e83
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-sizing-001-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+<meta charset="utf-8">
+<title>Test simple track sizing and grid item layout</title>
+<style>
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+span {
+  position: absolute;
+  border: 3px dashed;
+}
+span.bg {
+  position: absolute;
+  background: lime;
+  border: 0 none;
+}
+#item1 { top: 50px; left: 11px; width: 21px; height: 37px; }
+#item2 { top: 50px; left: 11px; width: 15px; height: 31px; }
+#item3 { top: 3px; left: 48px; width: 41px; height: 37px; }
+#item4 { top: 3px; left: 48px; width: 35px; height: 31px; }
+#item5 { top: 3px; left: 105px; width: 57px; height: 37px; }
+#item6 { top: 0px; left: 94px; width: 67px; height: 41px; }
+#item7 { top: 94px; left: 11px; width: 500px; height: 40px; }
+#item8 { top: 141px; left: 0px; width: 94px; height: 10px; }
+</style>
+</head>
+<body>
+<div class="grid">
+  <span id="item1" class="bg"></span>
+  <span id="item2">1</span>
+  <span id="item3" class="bg"></span>
+  <span id="item4">2</span>
+  <span id="item5" class="bg"></span>
+  <span id="item6">3</span>
+  <span id="item7" class="bg">4</span>
+  <span id="item8" class="bg">5</span>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-sizing-001.html b/layout/reftests/css-grid/grid-track-sizing-001.html
new file mode 100644
index 0000000000..9cd36835d8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-sizing-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+<meta charset="utf-8">
+<title>Test simple track sizing and grid item layout</title>
+<style>
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+span {
+  border: 3px dashed;
+  margin:3px 5px 7px 11px;
+}
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 37px 57px 73px;
+  grid-auto-rows: 47px;
+  grid-auto-columns: 53px;
+}
+span.bg {
+  background: lime;
+  border: 0 none;
+}
+</style>
+</head>
+<body>
+<div class="grid">
+  <span style="grid-column: 1; grid-row: 2;" class="bg"></span>
+  <span style="grid-column: 1; grid-row: 2;">1</span>
+  <span style="grid-column: 2; grid-row: 1;" class="bg"></span>
+  <span style="grid-column: 2; grid-row: 1;">2</span>
+  <span style="grid-column: 3; grid-row: 1;" class="bg"></span>
+  <span style="grid-column: 3; grid-row: 1; margin:0">3</span>
+  <span style="grid-column: 1 / span 2; margin-top:0; width:500px" class="bg">4</span>
+  <span style="grid-column: 1 / span 2; margin:0; height:10px;" class="bg">5</span>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-sizing-002-ref.html
new file mode 100644
index 0000000000..3db89b9867
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-sizing-002-ref.html
@@ -0,0 +1,243 @@
+<!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: freezing tracks in step 2.5 of the Track Sizing Algorithm</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1225368">
+  <style>
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  float: left;
+  grid-template-rows: 20px;
+  justify-items: start;
+  margin-right: 5px;
+}
+
+x {
+  display: block;
+  min-width: 0;
+  width: 30px;
+  height: 20px;
+  background: grey;
+}
+.grid div {
+  grid-column:1/span 2;
+  min-width: 0;
+  width: 100px;
+  height: 20px;
+  background: black;
+}
+div div:nth-child(2n+1) {
+  background: grey;
+}
+.grid.c3 div {
+  margin-right: 30px;
+}
+y { display: block; width: 130px; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid">
+  <x></x>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-auto-columns: minmax(0,auto)">
+  <x></x>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-auto-columns: minmax(0,auto)">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div></div>
+</div>
+
+<br clear=all>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<br clear=all>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div></div>
+  <y></y>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div></div>
+  <div></div>
+  <y></y>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <y></y>
+</div>
+
+<br clear=all>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <y></y>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="grid-row:2; grid-column:span 2"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div style="grid-column:span 2"></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="grid-row:2; grid-column:span 2; width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-track-sizing-002.html b/layout/reftests/css-grid/grid-track-sizing-002.html
new file mode 100644
index 0000000000..e09818fb20
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-sizing-002.html
@@ -0,0 +1,238 @@
+<!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: freezing tracks in step 2.5 of the Track Sizing Algorithm</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1225368">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
+  <link rel="match" href="grid-track-sizing-002-ref.html">
+  <style>
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  float: left;
+  grid-template-rows: 20px;
+  justify-items: start;
+  margin-right: 5px;
+}
+
+x {
+  min-width: 0;
+  width: 30px;
+  background: grey;
+}
+.grid div {
+  grid-column:1/span 2;
+  min-width: 0;
+  width: 100px;
+  height: 20px;
+  background: black;
+}
+div div:nth-child(2n+1) {
+  background: grey;
+}
+.grid.c3 div {
+  grid-column:1/span 3;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid">
+  <x></x>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-auto-columns: minmax(0,auto)">
+  <x></x>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-auto-columns: minmax(0,auto)">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div></div>
+</div>
+
+<br clear=all>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,auto) 0">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<br clear=all>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<br clear=all>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="grid-row:2; grid-column:span 2"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div style="grid-column:span 2"></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="grid-row:2; grid-column:span 2; width:80px"></div>
+  <div></div>
+</div>
+
+<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
+  <x></x>
+  <div style="width:80px"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-whitespace-handling-1-ref.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-1-ref.xhtml
new file mode 100644
index 0000000000..31ac18bda8
--- /dev/null
+++ b/layout/reftests/css-grid/grid-whitespace-handling-1-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case, with inline-blocks instead of grid/grid items,
+     with positioning done using margins.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; }
+      div.grid {
+        border: 1px dashed blue;
+        width: 200px;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+        display: inline-block;
+      }
+      img {
+        width: 40px;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="a" style="margin-left: 85px"/>
+    </div>
+
+    <div class="grid">
+      <div class="a" style="margin-left: 37.5px"
+           /><div class="b" style="margin-left: 75px"/>
+    </div>
+
+    <div class="grid">
+      <img src="support/solidblue.png" style="margin-left: 30px"
+           /><img src="support/solidblue.png" style="margin-left: 60px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/css-grid/grid-whitespace-handling-1a.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-1a.xhtml
new file mode 100644
index 0000000000..01b99a5b3e
--- /dev/null
+++ b/layout/reftests/css-grid/grid-whitespace-handling-1a.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we don't create anonymous grid items around
+     runs of inline content that are _purely_ whitespace.
+
+     The test uses "white-space: pre", to try to tempt us into honoring
+     that whitespace. (but we should resist that temptation).
+
+     The test also uses 'justify-content: space-around' to be sure we can
+     tell whether anonymous grid items are being created around the whitespace
+     (since they'd claim a share of the packing space if they were there).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Test that anonymous grid items aren't created for pure-whitespace inline content</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-grid/#grid-items"/>
+    <link rel="match" href="grid-whitespace-handling-1-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.grid {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: grid;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+      img { width: 40px; }
+    </style>
+  </head>
+  <body>
+    <!-- whitespace & tab after grid item -->
+    <div class="grid"><div class="a"/> 	</div>
+
+    <!-- 2 spaces before grid item -->
+    <div class="grid">  <div class="a"/><div class="b"/></div>
+
+    <!-- newline & whitespace between grid items  -->
+    <div class="grid"><img src="support/solidblue.png"/>
+      <img src="support/solidblue.png"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/css-grid/grid-whitespace-handling-1b.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-1b.xhtml
new file mode 100644
index 0000000000..cf881795c9
--- /dev/null
+++ b/layout/reftests/css-grid/grid-whitespace-handling-1b.xhtml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like the -1a variant, but with the whitespace removed between
+     grid items (since that whitespace should be ignored anyway, if we're
+     doing things right).
+-->
+<!-- XXXdholbert Does this testcase add value?
+    (Maybe it should be an alternate reference case.) -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Test that grid items are created correctly</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-grid/#grid-items"/>
+    <link rel="match" href="grid-whitespace-handling-1-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.grid {
+        border: 1px dashed blue;
+        width: 200px;
+        display: grid;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+      img { width: 40px; }
+    </style>
+  </head>
+  <body>
+    <div class="grid"><div class="a"/></div>
+
+    <div class="grid"><div class="a"/><div class="b"/></div>
+
+    <div class="grid"
+      ><img src="solidblue.png"
+     /><img src="solidblue.png"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml
new file mode 100644
index 0000000000..3c120522d0
--- /dev/null
+++ b/layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is the same as the testcase, but with an explicit <div>
+     around each run of content that we expect to turn into an anonymous
+     grid item (to ensure that the whitespace is included).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+    <style>
+      div.a, div.b, div.grid { height: 100px; }
+      div.grid {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: grid;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- spaces around inline content at the beginning of grid -->
+    <div class="grid"><div>  abc</div><div class="a"/></div>
+    <div class="grid"><div>abc   </div><div class="a"/></div>
+    <div class="grid"><div>  abc   </div><div class="a"/></div>
+
+    <!-- spaces around inline content at the end of grid -->
+    <div class="grid"><div class="a"/><div>  abc</div></div>
+    <div class="grid"><div class="a"/><div>abc   </div></div>
+    <div class="grid"><div class="a"/><div>  abc   </div></div>
+
+    <!-- whitespace around inline content in between grid items -->
+    <div class="grid"><div class="a"/><div>  abc</div><div class="b"/></div>
+    <div class="grid"><div class="a"/><div>abc   </div><div class="b"/></div>
+    <div class="grid"><div class="a"/><div>  abc   </div><div class="b"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/css-grid/grid-whitespace-handling-2.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-2.xhtml
new file mode 100644
index 0000000000..324ab30d44
--- /dev/null
+++ b/layout/reftests/css-grid/grid-whitespace-handling-2.xhtml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we preserve whitespace at the beginning & end of
+     anonymous grid items (using "white-space: pre" so that it actually
+     occupies space and affects the rendering).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Test that whitespace is preserved at the edges of anonymous grid items if 'white-space: pre' is set</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-grid/#grid-items"/>
+    <link rel="match" href="grid-whitespace-handling-2-ref.xhtml"/>
+    <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+    <style>
+      div { height: 100px; }
+      div.grid {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: grid;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- spaces around inline content at the beginning of grid -->
+    <div class="grid">  abc<div class="a"/></div>
+    <div class="grid">abc   <div class="a"/></div>
+    <div class="grid">  abc   <div class="a"/></div>
+
+    <!-- spaces around inline content at the end of grid -->
+    <div class="grid"><div class="a"/>  abc</div>
+    <div class="grid"><div class="a"/>abc   </div>
+    <div class="grid"><div class="a"/>  abc   </div>
+
+    <!-- whitespace around inline content in between grid items -->
+    <div class="grid"><div class="a"/>  abc<div class="b"/></div>
+    <div class="grid"><div class="a"/>abc   <div class="b"/></div>
+    <div class="grid"><div class="a"/>  abc   <div class="b"/></div>
+  </body>
+</html>
diff --git a/layout/reftests/css-grid/reftest-stylo.list b/layout/reftests/css-grid/reftest-stylo.list
new file mode 100644
index 0000000000..70fa86a741
--- /dev/null
+++ b/layout/reftests/css-grid/reftest-stylo.list
@@ -0,0 +1,233 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.grid.enabled,true)
+
+== grid-whitespace-handling-1a.xhtml grid-whitespace-handling-1a.xhtml
+== grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1b.xhtml
+== grid-whitespace-handling-2.xhtml grid-whitespace-handling-2.xhtml
+== grid-placement-definite-001.html grid-placement-definite-001.html
+== grid-placement-definite-002.html grid-placement-definite-002.html
+== grid-placement-definite-003.html grid-placement-definite-003.html
+== grid-placement-negative-lines-001.html grid-placement-negative-lines-001.html
+== grid-placement-auto-row-sparse-001.html grid-placement-auto-row-sparse-001.html
+== grid-placement-auto-row-dense-001.html grid-placement-auto-row-dense-001.html
+== grid-placement-auto-col-sparse-001.html grid-placement-auto-col-sparse-001.html
+== grid-placement-auto-col-dense-001.html grid-placement-auto-col-dense-001.html
+== grid-placement-implicit-named-areas-001.html grid-placement-implicit-named-areas-001.html
+== grid-placement-named-lines-001.html grid-placement-named-lines-001.html
+== grid-placement-named-lines-002.html grid-placement-named-lines-002.html
+== grid-placement-named-lines-003.html grid-placement-named-lines-003.html
+== grid-track-sizing-001.html grid-track-sizing-001.html
+== grid-track-sizing-002.html grid-track-sizing-002.html
+== grid-abspos-items-001.html grid-abspos-items-001.html
+== grid-abspos-items-002.html grid-abspos-items-002.html
+== grid-abspos-items-003.html grid-abspos-items-003.html
+== grid-abspos-items-004.html grid-abspos-items-004.html
+== grid-abspos-items-005.html grid-abspos-items-005.html
+== grid-abspos-items-006.html grid-abspos-items-006.html
+== grid-abspos-items-007.html grid-abspos-items-007.html
+== grid-abspos-items-008.html grid-abspos-items-008.html
+== grid-abspos-items-009.html grid-abspos-items-009.html
+skip == grid-abspos-items-010.html grid-abspos-items-010.html
+== grid-abspos-items-011.html grid-abspos-items-011.html
+== grid-abspos-items-012.html grid-abspos-items-012.html
+== grid-abspos-items-013.html grid-abspos-items-013.html
+== grid-abspos-items-014.html grid-abspos-items-014.html
+skip == grid-abspos-items-015.html grid-abspos-items-015.html
+== grid-order-abspos-items-001.html grid-order-abspos-items-001.html
+== grid-order-placement-auto-001.html grid-order-placement-auto-001.html
+fuzzy-if(skiaContent,1,200) == grid-order-placement-definite-001.html grid-order-placement-definite-001.html
+skip-if(Android) == grid-placement-definite-implicit-001.html grid-placement-definite-implicit-001.html
+== grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002.html
+skip-if(Android) fuzzy-if(winWidget,1,32) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001.html
+== grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001.html
+== rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001.html
+== rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001.html
+== vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001.html
+== vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001.html
+== grid-relpos-items-001.html grid-relpos-items-001.html
+== grid-item-sizing-percent-001.html grid-item-sizing-percent-001.html
+== grid-item-sizing-px-001.html grid-item-sizing-px-001.html
+== grid-item-dir-001.html grid-item-dir-001.html
+fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001.html
+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.html
+== grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001.html
+== grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002.html
+random == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001.html
+== grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001.html
+== grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002.html
+== grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003.html
+== grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004.html
+skip == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001.html
+== grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001.html
+== grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002.html
+== grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003.html
+== grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004.html
+== grid-track-percent-sizing-001.html grid-track-percent-sizing-001.html
+== grid-max-sizing-flex-001.html grid-max-sizing-flex-001.html
+== grid-max-sizing-flex-002.html grid-max-sizing-flex-002.html
+== grid-max-sizing-flex-003.html grid-max-sizing-flex-003.html
+== grid-max-sizing-flex-004.html grid-max-sizing-flex-004.html
+== grid-max-sizing-flex-005.html grid-max-sizing-flex-005.html
+== grid-max-sizing-flex-006.html grid-max-sizing-flex-006.html
+== grid-flex-min-sizing-001.html grid-flex-min-sizing-001.html
+== grid-flex-min-sizing-002.html grid-flex-min-sizing-002.html
+== grid-item-align-001.html grid-item-align-001.html
+skip == grid-item-align-002.html grid-item-align-002.html
+== grid-item-align-003.html grid-item-align-003.html
+== grid-item-justify-001.html grid-item-justify-001.html
+== grid-item-justify-002.html grid-item-justify-002.html
+== grid-item-stretch-001.html grid-item-stretch-001.html
+== grid-item-self-baseline-001.html grid-item-self-baseline-001.html
+skip-if(!gtkWidget) == grid-item-content-baseline-001.html grid-item-content-baseline-001.html
+# depends on exact Ahem baseline font metrics which seems to differ between platforms
+skip-if(!gtkWidget) == grid-item-content-baseline-002.html grid-item-content-baseline-002.html
+# ditto
+skip-if(!gtkWidget) == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001.html
+# ditto
+skip-if(!gtkWidget) == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002.html
+# ditto
+skip-if(!gtkWidget) == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003.html
+# ditto
+skip-if(!gtkWidget) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004.html
+# ditto
+== grid-align-content-001.html grid-align-content-001.html
+== grid-justify-content-001.html grid-justify-content-001.html
+skip-if(Android&&isDebugBuild) == grid-justify-content-002.html grid-justify-content-002.html
+# Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-justify-content-003.html grid-justify-content-003.html
+# Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-column-gap-001.html grid-column-gap-001.html
+# Bug 1245884 - slow
+== grid-column-gap-002.html grid-column-gap-002.html
+== grid-column-gap-003.html grid-column-gap-003.html
+== grid-column-gap-004.html grid-column-gap-004.html
+== grid-row-gap-001.html grid-row-gap-001.html
+skip-if(Android&&isDebugBuild) == grid-row-gap-002.html grid-row-gap-002.html
+# Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-row-gap-003.html grid-row-gap-003.html
+# Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004.html
+# Bug 1245884 - slow
+== grid-row-gap-005.html grid-row-gap-005.html
+== grid-container-overflow-001.html grid-container-overflow-001.html
+== grid-item-margin-left-auto-001.html grid-item-margin-left-auto-001.html
+== grid-item-margin-left-auto-002.html grid-item-margin-left-auto-002.html
+== grid-item-margin-left-auto-003.html grid-item-margin-left-auto-003.html
+skip == grid-item-margin-left-auto-004.html grid-item-margin-left-auto-004.html
+== grid-item-margin-left-right-auto-001.html grid-item-margin-left-right-auto-001.html
+skip == grid-item-margin-left-right-auto-002.html grid-item-margin-left-right-auto-002.html
+== grid-item-margin-left-right-auto-003.html grid-item-margin-left-right-auto-003.html
+== grid-item-margin-left-right-auto-004.html grid-item-margin-left-right-auto-004.html
+== grid-item-margin-right-auto-001.html grid-item-margin-right-auto-001.html
+== grid-item-margin-right-auto-002.html grid-item-margin-right-auto-002.html
+== grid-item-margin-right-auto-003.html grid-item-margin-right-auto-003.html
+== grid-item-margin-right-auto-004.html grid-item-margin-right-auto-004.html
+== grid-container-min-max-width-height-001.html grid-container-min-max-width-height-001.html
+== grid-clamping-001.html grid-clamping-001.html
+== grid-clamping-002.html grid-clamping-002.html
+== grid-repeat-auto-fill-fit-001.html grid-repeat-auto-fill-fit-001.html
+== grid-repeat-auto-fill-fit-002.html grid-repeat-auto-fill-fit-002.html
+== grid-repeat-auto-fill-fit-003.html grid-repeat-auto-fill-fit-003.html
+== grid-repeat-auto-fill-fit-004.html grid-repeat-auto-fill-fit-004.html
+== grid-repeat-auto-fill-fit-005.html grid-repeat-auto-fill-fit-005.html
+== grid-repeat-auto-fill-fit-006.html grid-repeat-auto-fill-fit-006.html
+== grid-repeat-auto-fill-fit-007.html grid-repeat-auto-fill-fit-007.html
+== grid-repeat-auto-fill-fit-008.html grid-repeat-auto-fill-fit-008.html
+== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009.html
+== grid-item-blockifying-001.html grid-item-blockifying-001.html
+== grid-fragmentation-001.html grid-fragmentation-001.html
+== grid-fragmentation-002.html grid-fragmentation-002.html
+== grid-fragmentation-003.html grid-fragmentation-003.html
+== grid-fragmentation-004.html grid-fragmentation-004.html
+skip == grid-fragmentation-005.html grid-fragmentation-005.html
+== grid-fragmentation-006.html grid-fragmentation-006.html
+== grid-fragmentation-007.html grid-fragmentation-007.html
+== grid-fragmentation-008.html grid-fragmentation-008.html
+== grid-fragmentation-009.html grid-fragmentation-009.html
+== grid-fragmentation-010.html grid-fragmentation-010.html
+== grid-fragmentation-011.html grid-fragmentation-011.html
+== grid-fragmentation-012.html grid-fragmentation-012.html
+== grid-fragmentation-013.html grid-fragmentation-013.html
+== grid-fragmentation-014.html grid-fragmentation-014.html
+asserts(0-10) == grid-fragmentation-015.html grid-fragmentation-015.html
+# bug 1144852 (due to vertical writing-mode)
+== grid-fragmentation-016.html grid-fragmentation-016.html
+== grid-fragmentation-017.html grid-fragmentation-017.html
+== grid-fragmentation-018.html grid-fragmentation-018.html
+== grid-fragmentation-019.html grid-fragmentation-019.html
+== grid-fragmentation-020.html grid-fragmentation-020.html
+== grid-fragmentation-021.html grid-fragmentation-021.html
+== grid-fragmentation-022.html grid-fragmentation-022.html
+== grid-fragmentation-023.html grid-fragmentation-023.html
+== grid-fragmentation-024.html grid-fragmentation-024.html
+== grid-fragmentation-025.html grid-fragmentation-025.html
+== grid-fragmentation-026.html grid-fragmentation-026.html
+== grid-fragmentation-027.html grid-fragmentation-027.html
+== grid-fragmentation-028.html grid-fragmentation-028.html
+== grid-fragmentation-029.html grid-fragmentation-029.html
+== grid-fragmentation-030.html grid-fragmentation-030.html
+== grid-fragmentation-031.html grid-fragmentation-031.html
+
+# Fragmentation tests that does dynamic content removal/insertions.
+# They should give the same result as the corresponding static test.
+== grid-fragmentation-dyn3-001.html grid-fragmentation-dyn3-001.html
+== grid-fragmentation-dyn4-001.html grid-fragmentation-dyn4-001.html
+== grid-fragmentation-dyn1-002.html grid-fragmentation-dyn1-002.html
+== grid-fragmentation-dyn3-002.html grid-fragmentation-dyn3-002.html
+skip == grid-fragmentation-dyn3-003.html grid-fragmentation-dyn3-003.html
+== grid-fragmentation-dyn4-004.html grid-fragmentation-dyn4-004.html
+== grid-fragmentation-dyn4-005.html grid-fragmentation-dyn4-005.html
+== grid-fragmentation-dyn5-005.html grid-fragmentation-dyn5-005.html
+== grid-fragmentation-dyn1-006.html grid-fragmentation-dyn1-006.html
+== grid-fragmentation-dyn3-007.html grid-fragmentation-dyn3-007.html
+== grid-fragmentation-dyn5-007.html grid-fragmentation-dyn5-007.html
+== grid-fragmentation-dyn5-008.html grid-fragmentation-dyn5-008.html
+== grid-fragmentation-dyn3-009.html grid-fragmentation-dyn3-009.html
+== grid-fragmentation-dyn3-009.html grid-fragmentation-dyn3-009.html
+== grid-fragmentation-dyn4-015.html grid-fragmentation-dyn4-015.html
+== grid-fragmentation-dyn1-015.html grid-fragmentation-dyn1-015.html
+== grid-fragmentation-dyn1-016.html grid-fragmentation-dyn1-016.html
+== grid-fragmentation-dyn5-016.html grid-fragmentation-dyn5-016.html
+== grid-fragmentation-dyn3-017.html grid-fragmentation-dyn3-017.html
+skip == grid-fragmentation-dyn2-018.html grid-fragmentation-dyn2-018.html
+== grid-fragmentation-dyn1-019.html grid-fragmentation-dyn1-019.html
+== grid-fragmentation-dyn2-019.html grid-fragmentation-dyn2-019.html
+== grid-fragmentation-dyn3-019.html grid-fragmentation-dyn3-019.html
+== grid-fragmentation-dyn4-019.html grid-fragmentation-dyn4-019.html
+== grid-fragmentation-dyn5-019.html grid-fragmentation-dyn5-019.html
+== grid-fragmentation-dyn1-020.html grid-fragmentation-dyn1-020.html
+== grid-fragmentation-dyn2-020.html grid-fragmentation-dyn2-020.html
+== grid-fragmentation-dyn1-021.html grid-fragmentation-dyn1-021.html
+# bug 1251799
+== grid-fragmentation-dyn2-021.html grid-fragmentation-dyn2-021.html
+== grid-fragmentation-dyn3-021.html grid-fragmentation-dyn3-021.html
+asserts(1-10) == grid-fragmentation-dyn4-021.html grid-fragmentation-dyn4-021.html
+# assertion related to bug 1251799 ?
+== grid-fragmentation-dyn5-021.html grid-fragmentation-dyn5-021.html
+== grid-fragmentation-dyn2-022.html grid-fragmentation-dyn2-022.html
+== grid-fragmentation-dyn1-023.html grid-fragmentation-dyn1-023.html
+== grid-fragmentation-dyn2-023.html grid-fragmentation-dyn2-023.html
+== grid-fragmentation-dyn3-023.html grid-fragmentation-dyn3-023.html
+== grid-fragmentation-dyn4-023.html grid-fragmentation-dyn4-023.html
+== grid-fragmentation-dyn5-023.html grid-fragmentation-dyn5-023.html
+== grid-fragmentation-dyn1-024.html grid-fragmentation-dyn1-024.html
+== grid-fragmentation-dyn2-025.html grid-fragmentation-dyn2-025.html
+== grid-fragmentation-dyn1-026.html grid-fragmentation-dyn1-026.html
+skip == grid-fragmentation-dyn2-026.html grid-fragmentation-dyn2-026.html
+== grid-fragmentation-dyn3-026.html grid-fragmentation-dyn3-026.html
+== grid-fragmentation-dyn4-026.html grid-fragmentation-dyn4-026.html
+== grid-fragmentation-dyn5-026.html grid-fragmentation-dyn5-026.html
+== grid-fragmentation-dyn1-027.html grid-fragmentation-dyn1-027.html
+== grid-fragmentation-dyn2-027.html grid-fragmentation-dyn2-027.html
+== grid-fragmentation-dyn3-027.html grid-fragmentation-dyn3-027.html
+== grid-fragmentation-dyn4-027.html grid-fragmentation-dyn4-027.html
+== grid-fragmentation-dyn5-027.html grid-fragmentation-dyn5-027.html
+skip == grid-fragmentation-dyn1-028.html grid-fragmentation-dyn1-028.html
+== grid-fragmentation-dyn2-028.html grid-fragmentation-dyn2-028.html
+== grid-fragmentation-dyn3-028.html grid-fragmentation-dyn3-028.html
+== grid-fragmentation-dyn4-028.html grid-fragmentation-dyn4-028.html
+== grid-fragmentation-dyn5-028.html grid-fragmentation-dyn5-028.html
+== grid-fragmentation-dyn1-029.html grid-fragmentation-dyn1-029.html
+== grid-fragmentation-dyn2-029.html grid-fragmentation-dyn2-029.html
+== grid-fragmentation-dyn2-030.html grid-fragmentation-dyn2-030.html
+== grid-fragmentation-dyn2-031.html grid-fragmentation-dyn2-031.html
diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list
new file mode 100644
index 0000000000..d85eefbd01
--- /dev/null
+++ b/layout/reftests/css-grid/reftest.list
@@ -0,0 +1,276 @@
+default-preferences pref(layout.css.grid.enabled,true)
+
+fails == grid-whitespace-handling-1a.xhtml grid-whitespace-handling-1-ref.xhtml
+fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
+== grid-whitespace-handling-2.xhtml  grid-whitespace-handling-2-ref.xhtml
+== grid-placement-definite-001.html grid-placement-definite-001-ref.html
+== grid-placement-definite-002.html grid-placement-definite-002-ref.html
+== grid-placement-definite-003.html grid-placement-definite-003-ref.html
+== grid-placement-negative-lines-001.html grid-placement-negative-lines-001-ref.html
+== grid-placement-auto-row-sparse-001.html grid-placement-auto-row-sparse-001-ref.html
+== grid-placement-auto-row-dense-001.html grid-placement-auto-row-dense-001-ref.html
+== grid-placement-auto-col-sparse-001.html grid-placement-auto-col-sparse-001-ref.html
+== grid-placement-auto-col-dense-001.html grid-placement-auto-col-dense-001-ref.html
+== grid-placement-implicit-named-areas-001.html grid-placement-implicit-named-areas-001-ref.html
+== grid-placement-named-lines-001.html grid-placement-named-lines-001-ref.html
+== grid-placement-named-lines-002.html grid-placement-named-lines-002-ref.html
+== grid-placement-named-lines-003.html grid-placement-named-lines-003-ref.html
+== grid-track-sizing-001.html grid-track-sizing-001-ref.html
+== grid-track-sizing-002.html grid-track-sizing-002-ref.html
+== grid-abspos-items-001.html grid-abspos-items-001-ref.html
+== grid-abspos-items-002.html grid-abspos-items-002-ref.html
+== grid-abspos-items-003.html grid-abspos-items-003-ref.html
+== grid-abspos-items-004.html grid-abspos-items-004-ref.html
+== grid-abspos-items-005.html grid-abspos-items-005-ref.html
+== grid-abspos-items-006.html grid-abspos-items-006-ref.html
+== grid-abspos-items-007.html grid-abspos-items-007-ref.html
+== grid-abspos-items-008.html grid-abspos-items-008-ref.html
+== grid-abspos-items-009.html grid-abspos-items-009-ref.html
+== grid-abspos-items-010.html grid-abspos-items-010-ref.html
+== grid-abspos-items-011.html grid-abspos-items-011-ref.html
+== grid-abspos-items-012.html grid-abspos-items-012-ref.html
+== grid-abspos-items-013.html grid-abspos-items-013-ref.html
+== grid-abspos-items-014.html grid-abspos-items-014-ref.html
+== grid-abspos-items-015.html grid-abspos-items-015-ref.html
+== grid-order-abspos-items-001.html grid-order-abspos-items-001-ref.html
+== grid-order-placement-auto-001.html grid-order-placement-auto-001-ref.html
+fuzzy-if(skiaContent,1,200) == grid-order-placement-definite-001.html grid-order-placement-definite-001-ref.html
+skip-if(Android) == grid-placement-definite-implicit-001.html grid-placement-definite-implicit-001-ref.html
+== grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002-ref.html
+skip-if(Android) fuzzy-if(winWidget,1,32) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
+== grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html
+== rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html
+== rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html
+== vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001-ref.html
+== vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001-ref.html
+== grid-relpos-items-001.html grid-relpos-items-001-ref.html
+== grid-item-sizing-percent-001.html grid-item-sizing-percent-001-ref.html
+== grid-item-sizing-percent-002.html grid-item-sizing-percent-002-ref.html
+== grid-item-sizing-percent-003.html grid-item-sizing-percent-003-ref.html
+== grid-item-sizing-percent-004.html grid-item-sizing-percent-004-ref.html
+== grid-item-sizing-px-001.html grid-item-sizing-percent-001-ref.html
+== grid-item-dir-001.html grid-item-dir-001-ref.html
+fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
+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
+== grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html
+== grid-max-sizing-flex-002.html grid-max-sizing-flex-002-ref.html
+== grid-max-sizing-flex-003.html grid-max-sizing-flex-003-ref.html
+== grid-max-sizing-flex-004.html grid-max-sizing-flex-004-ref.html
+== grid-max-sizing-flex-005.html grid-max-sizing-flex-005-ref.html
+== grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html
+== grid-max-sizing-flex-007.html grid-max-sizing-flex-007-ref.html
+== grid-max-sizing-flex-008.html grid-max-sizing-flex-008-ref.html
+== 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-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-intrinsic-size-normal-001.html grid-item-intrinsic-size-normal-001-ref.html
+== grid-item-intrinsic-size-normal-002.html grid-item-intrinsic-size-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
+skip-if(Android) == grid-item-button-001.html grid-item-button-001-ref.html
+== grid-item-table-stretch-001.html grid-item-table-stretch-001-ref.html
+== grid-item-table-stretch-002.html grid-item-table-stretch-002-ref.html
+== grid-item-table-stretch-003.html grid-item-table-stretch-003-ref.html
+== grid-item-table-stretch-004.html grid-item-table-stretch-004-ref.html
+== grid-item-fieldset-stretch-001.html grid-item-fieldset-stretch-001-ref.html
+skip-if(Android) == grid-item-video-stretch-001.html grid-item-video-stretch-001-ref.html # Huh, Android doesn't have webm support?
+== grid-item-input-stretch-001.html grid-item-input-stretch-001-ref.html
+== grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
+random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
+random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
+random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
+random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
+random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003-ref.html # ditto
+skip-if(!gtkWidget) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004-ref.html # ditto
+== grid-align-content-001.html grid-align-content-001-ref.html
+== grid-justify-content-001.html grid-justify-content-001-ref.html
+skip-if(Android&&isDebugBuild) == grid-justify-content-002.html grid-justify-content-002-ref.html # Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-justify-content-003.html grid-justify-content-003-ref.html # Bug 1245884 - slow
+skip-if(!gtkWidget) == grid-container-baselines-001.html grid-container-baselines-001-ref.html
+skip-if(!gtkWidget) == grid-container-baselines-002.html grid-container-baselines-002-ref.html
+skip-if(!gtkWidget) == grid-container-baselines-003.html grid-container-baselines-003-ref.html
+== grid-container-baselines-004.html grid-container-baselines-004-ref.html
+== grid-container-synthesized-baseline-001-ref.html grid-container-synthesized-baseline-001-ref.html
+skip-if(Android&&isDebugBuild) == grid-column-gap-001.html grid-column-gap-001-ref.html # Bug 1245884 - slow
+== grid-column-gap-002.html grid-column-gap-002-ref.html
+== grid-column-gap-003.html grid-column-gap-003-ref.html
+== grid-column-gap-004.html grid-column-gap-004-ref.html
+== grid-row-gap-001.html grid-row-gap-001-ref.html
+== grid-percent-grid-gap-001.html grid-percent-grid-gap-001-ref.html
+skip-if(Android&&isDebugBuild) == grid-row-gap-002.html grid-row-gap-002-ref.html # Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-row-gap-003.html grid-row-gap-003-ref.html # Bug 1245884 - slow
+skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004-ref.html # Bug 1245884 - slow
+== grid-row-gap-005.html grid-row-gap-005-ref.html
+== grid-container-overflow-001.html grid-container-overflow-001-ref.html
+== grid-item-margin-left-auto-001.html grid-item-margin-left-auto-001-ref.html
+== grid-item-margin-left-auto-002.html grid-item-margin-left-auto-002-ref.html
+== grid-item-margin-left-auto-003.html grid-item-margin-left-auto-003-ref.html
+== grid-item-margin-left-auto-004.html grid-item-margin-left-auto-004-ref.html
+== grid-item-margin-left-right-auto-001.html grid-item-margin-left-right-auto-001-ref.html
+== grid-item-margin-left-right-auto-002.html grid-item-margin-left-right-auto-002-ref.html
+== grid-item-margin-left-right-auto-003.html grid-item-margin-left-right-auto-003-ref.html
+== grid-item-margin-left-right-auto-004.html grid-item-margin-left-right-auto-004-ref.html
+== grid-item-margin-right-auto-001.html grid-item-margin-right-auto-001-ref.html
+== grid-item-margin-right-auto-002.html grid-item-margin-right-auto-002-ref.html
+== grid-item-margin-right-auto-003.html grid-item-margin-right-auto-003-ref.html
+== grid-item-margin-right-auto-004.html grid-item-margin-right-auto-004-ref.html
+== grid-container-min-max-width-height-001.html grid-container-min-max-width-height-001-ref.html
+== grid-clamping-001.html grid-clamping-001-ref.html
+== grid-clamping-002.html grid-clamping-002-ref.html
+== grid-repeat-auto-fill-fit-001.html grid-repeat-auto-fill-fit-001-ref.html
+== grid-repeat-auto-fill-fit-002.html grid-repeat-auto-fill-fit-002-ref.html
+== grid-repeat-auto-fill-fit-003.html grid-repeat-auto-fill-fit-003-ref.html
+== grid-repeat-auto-fill-fit-004.html grid-repeat-auto-fill-fit-004-ref.html
+== grid-repeat-auto-fill-fit-005.html grid-repeat-auto-fill-fit-005-ref.html
+== grid-repeat-auto-fill-fit-006.html grid-repeat-auto-fill-fit-006-ref.html
+== grid-repeat-auto-fill-fit-007.html grid-repeat-auto-fill-fit-007-ref.html
+== grid-repeat-auto-fill-fit-008.html grid-repeat-auto-fill-fit-008-ref.html
+== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html
+== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html
+== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html
+== grid-item-blockifying-001.html grid-item-blockifying-001-ref.html
+== grid-fragmentation-001.html grid-fragmentation-001-ref.html
+== grid-fragmentation-002.html grid-fragmentation-002-ref.html
+== grid-fragmentation-003.html grid-fragmentation-003-ref.html
+== grid-fragmentation-004.html grid-fragmentation-004-ref.html
+== grid-fragmentation-005.html grid-fragmentation-005-ref.html
+== grid-fragmentation-006.html grid-fragmentation-006-ref.html
+== grid-fragmentation-007.html grid-fragmentation-007-ref.html
+== grid-fragmentation-008.html grid-fragmentation-008-ref.html
+== grid-fragmentation-009.html grid-fragmentation-009-ref.html
+== grid-fragmentation-010.html grid-fragmentation-010-ref.html
+== grid-fragmentation-011.html grid-fragmentation-011-ref.html
+== grid-fragmentation-012.html grid-fragmentation-012-ref.html
+== grid-fragmentation-013.html grid-fragmentation-013-ref.html
+== grid-fragmentation-014.html grid-fragmentation-014-ref.html
+asserts(0-10) == grid-fragmentation-015.html grid-fragmentation-015-ref.html # bug 1144852 (due to vertical writing-mode)
+== grid-fragmentation-016.html grid-fragmentation-016-ref.html
+== grid-fragmentation-017.html grid-fragmentation-017-ref.html
+== grid-fragmentation-018.html grid-fragmentation-018-ref.html
+== grid-fragmentation-019.html grid-fragmentation-019-ref.html
+== grid-fragmentation-020.html grid-fragmentation-020-ref.html
+== grid-fragmentation-021.html grid-fragmentation-021-ref.html
+== grid-fragmentation-022.html grid-fragmentation-007-ref.html
+== grid-fragmentation-023.html grid-fragmentation-023-ref.html
+== grid-fragmentation-024.html grid-fragmentation-024-ref.html
+== grid-fragmentation-025.html grid-fragmentation-025-ref.html
+== grid-fragmentation-026.html grid-fragmentation-026-ref.html
+== grid-fragmentation-027.html grid-fragmentation-025-ref.html
+== grid-fragmentation-028.html grid-fragmentation-028-ref.html
+== grid-fragmentation-029.html grid-fragmentation-029-ref.html
+== grid-fragmentation-030.html grid-fragmentation-030-ref.html
+== grid-fragmentation-031.html grid-fragmentation-031-ref.html
+
+# Fragmentation tests that does dynamic content removal/insertions.
+# They should give the same result as the corresponding static test.
+== grid-fragmentation-dyn3-001.html grid-fragmentation-001-ref.html
+== grid-fragmentation-dyn4-001.html grid-fragmentation-001-ref.html
+== grid-fragmentation-dyn1-002.html grid-fragmentation-002-ref.html
+== grid-fragmentation-dyn3-002.html grid-fragmentation-002-ref.html
+== grid-fragmentation-dyn3-003.html grid-fragmentation-003-ref.html
+== grid-fragmentation-dyn4-004.html grid-fragmentation-004-ref.html
+== grid-fragmentation-dyn4-005.html grid-fragmentation-005-ref.html
+== grid-fragmentation-dyn5-005.html grid-fragmentation-005-ref.html
+== grid-fragmentation-dyn1-006.html grid-fragmentation-006-ref.html
+== grid-fragmentation-dyn3-007.html grid-fragmentation-007-ref.html
+== grid-fragmentation-dyn5-007.html grid-fragmentation-007-ref.html
+== grid-fragmentation-dyn5-008.html grid-fragmentation-008-ref.html
+== grid-fragmentation-dyn3-009.html grid-fragmentation-009-ref.html
+== grid-fragmentation-dyn3-009.html grid-fragmentation-009-ref.html
+== grid-fragmentation-dyn4-015.html grid-fragmentation-015-ref.html
+== grid-fragmentation-dyn1-015.html grid-fragmentation-015-ref.html
+== grid-fragmentation-dyn1-016.html grid-fragmentation-016-ref.html
+== grid-fragmentation-dyn5-016.html grid-fragmentation-016-ref.html
+== grid-fragmentation-dyn3-017.html grid-fragmentation-017-ref.html
+== grid-fragmentation-dyn2-018.html grid-fragmentation-018-ref.html
+== grid-fragmentation-dyn1-019.html grid-fragmentation-019-ref.html
+== grid-fragmentation-dyn2-019.html grid-fragmentation-019-ref.html
+== grid-fragmentation-dyn3-019.html grid-fragmentation-019-ref.html
+== grid-fragmentation-dyn4-019.html grid-fragmentation-019-ref.html
+== grid-fragmentation-dyn5-019.html grid-fragmentation-019-ref.html
+== grid-fragmentation-dyn1-020.html grid-fragmentation-020-ref.html
+== grid-fragmentation-dyn2-020.html grid-fragmentation-020-ref.html
+!= grid-fragmentation-dyn1-021.html grid-fragmentation-021-ref.html # bug 1251799
+== grid-fragmentation-dyn2-021.html grid-fragmentation-021-ref.html
+== grid-fragmentation-dyn3-021.html grid-fragmentation-021-ref.html
+asserts(1-10) == grid-fragmentation-dyn4-021.html grid-fragmentation-021-ref.html # assertion related to bug 1251799 ?
+== grid-fragmentation-dyn5-021.html grid-fragmentation-021-ref.html
+== grid-fragmentation-dyn2-022.html grid-fragmentation-007-ref.html
+== grid-fragmentation-dyn1-023.html grid-fragmentation-023-ref.html
+== grid-fragmentation-dyn2-023.html grid-fragmentation-023-ref.html
+== grid-fragmentation-dyn3-023.html grid-fragmentation-023-ref.html
+== grid-fragmentation-dyn4-023.html grid-fragmentation-023-ref.html
+== grid-fragmentation-dyn5-023.html grid-fragmentation-023-ref.html
+== grid-fragmentation-dyn1-024.html grid-fragmentation-024-ref.html
+== grid-fragmentation-dyn2-025.html grid-fragmentation-025-ref.html
+== grid-fragmentation-dyn1-026.html grid-fragmentation-026-ref.html
+== grid-fragmentation-dyn2-026.html grid-fragmentation-026-ref.html
+== grid-fragmentation-dyn3-026.html grid-fragmentation-026-ref.html
+== grid-fragmentation-dyn4-026.html grid-fragmentation-026-ref.html
+== grid-fragmentation-dyn5-026.html grid-fragmentation-026-ref.html
+== grid-fragmentation-dyn1-027.html grid-fragmentation-025-ref.html
+== grid-fragmentation-dyn2-027.html grid-fragmentation-025-ref.html
+== grid-fragmentation-dyn3-027.html grid-fragmentation-025-ref.html
+== grid-fragmentation-dyn4-027.html grid-fragmentation-025-ref.html
+== grid-fragmentation-dyn5-027.html grid-fragmentation-025-ref.html
+== grid-fragmentation-dyn1-028.html grid-fragmentation-028-ref.html
+== grid-fragmentation-dyn2-028.html grid-fragmentation-028-ref.html
+== grid-fragmentation-dyn3-028.html grid-fragmentation-028-ref.html
+== grid-fragmentation-dyn4-028.html grid-fragmentation-028-ref.html
+== grid-fragmentation-dyn5-028.html grid-fragmentation-028-ref.html
+== grid-fragmentation-dyn1-029.html grid-fragmentation-029-ref.html
+== grid-fragmentation-dyn2-029.html grid-fragmentation-029-ref.html
+== grid-fragmentation-dyn2-030.html grid-fragmentation-030-ref.html
+== grid-fragmentation-dyn2-031.html grid-fragmentation-031-ref.html
+== bug1306106.html bug1306106-ref.html
+== grid-percent-intrinsic-sizing-001.html grid-percent-intrinsic-sizing-001-ref.html
diff --git a/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html
new file mode 100644
index 0000000000..205e718f95
--- /dev/null
+++ b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html
@@ -0,0 +1,200 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  block-size: 60px;
+  border: 2px solid green;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+.test1 .a {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.test1 .b {
+  offset-block-start: 20px;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test1 .c {
+  offset-block-start: 0;
+  offset-inline-start: 80px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test1 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test1 .d2 {
+  offset-block-start: 0px;
+  offset-inline-start: 40px;
+}
+
+.test2 .a {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test2 .b {
+  offset-block-start: 20px;
+  offset-inline-start: 20px;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.test2 .c {
+  offset-block-start: 0;
+  offset-inline-start: 80px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test2 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test2 .d2 {
+  offset-block-start: 20px;
+  offset-inline-start: 40px;
+}
+
+.test3 .a {
+  offset-block-start: 0;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test3 .b {
+  offset-block-start: 40px;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test3 .c {
+  offset-block-start: 60px;
+  offset-inline-start: 0px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test3 .d { offset-block-start: 60px; offset-inline-start:60px; }
+.test3 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 60px;
+}
+.test3 .d2 {
+  offset-block-start: 80px;
+  offset-inline-start: 60px;
+}
+
+.test4 .c {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test4 .d { offset-block-start: 40px; }
+.test4 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test4 .d2 {
+  offset-block-start: 40px;
+  offset-inline-start: 20px;
+}
+
+.test5 .c {
+  offset-block-start: 20px;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test5 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 60px;
+}
+.test5 .d2 {
+  offset-block-start: 0px;
+  offset-inline-start: 20px;
+}
+
+.test6 { offset-inline-start: 0px; offset-block-start: 20px;}
+.test6d2 {
+  offset-block-start: 20px;
+  offset-inline-start: 140px;
+}
+.test6e {
+  offset-block-start: 20px;
+  offset-inline-start: 160px;
+}
+    </style>
+</head>
+<body dir=rtl>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="block-size:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html
new file mode 100644
index 0000000000..3fee0d1f4b
--- /dev/null
+++ b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  border: 2px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3;
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body dir=rtl>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html
new file mode 100644
index 0000000000..743b917efa
--- /dev/null
+++ b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid1, .grid2 {
+  block-size: 60px;
+  border: 2px solid green;
+  position: relative;
+}
+
+.grid2 {
+  border-width: 20px;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.a {
+  offset-inline-start: 40px;
+  offset-block-start: 0px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.b {
+  offset-inline-start: 20px;
+  offset-block-start: 40px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.c {
+  offset-inline-start: 80px;
+  offset-block-start: 40px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.d {
+  offset-inline-start: 0px;
+  offset-block-start: 0px;
+  inline-size: 20px;
+  block-size: 60px;
+}
+    </style>
+</head>
+<body dir=rtl>
+
+<div class=grid1>
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+</div>
+
+<div class=grid2>
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/rtl-grid-placement-definite-001.html b/layout/reftests/css-grid/rtl-grid-placement-definite-001.html
new file mode 100644
index 0000000000..4551915128
--- /dev/null
+++ b/layout/reftests/css-grid/rtl-grid-placement-definite-001.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+
+.grid1, .grid2 {
+  display: grid;
+  grid-template-areas:
+    '. . a a a .'
+    '. . a a a .'
+    '. b b . . .'
+    ;
+  border: 2px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: column dense;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+.grid2 {
+  border-width: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid black;
+}
+
+.a {
+  grid-area: a;
+}
+.b {
+  grid-column: 2 / span 3;
+  grid-row: b;
+}
+.c {
+  grid-column: span 3;
+}
+.d {
+  grid-row: span 3;
+}
+    </style>
+</head>
+<body dir=rtl>
+
+<div class=grid1>
+<span class=a>a</span>
+<span class=b>b</span>
+<span class=c>c</span>
+<span class=d>d</span>
+</div>
+
+<div class=grid2>
+<span class=a>a</span>
+<span class=b>b</span>
+<span class=c>c</span>
+<span class=d>d</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/support/ahem.css b/layout/reftests/css-grid/support/ahem.css
new file mode 100644
index 0000000000..5cea74d04f
--- /dev/null
+++ b/layout/reftests/css-grid/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(../../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/css-grid/support/colors-16x8.webm b/layout/reftests/css-grid/support/colors-16x8.webm
new file mode 100644
index 0000000000..701341fc2a
--- /dev/null
+++ b/layout/reftests/css-grid/support/colors-16x8.webm
diff --git a/layout/reftests/css-grid/support/dyn.js b/layout/reftests/css-grid/support/dyn.js
new file mode 100644
index 0000000000..816a6f9b61
--- /dev/null
+++ b/layout/reftests/css-grid/support/dyn.js
@@ -0,0 +1,127 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
+ * vim: sw=2 ts=2 sts=2 et filetype=javascript
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+function loadURL(url,callback) {
+  var xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState == 4 && xhttp.status == 200) {
+      callback(xhttp.responseText);
+    }
+  };
+  xhttp.open("GET", url, true);
+  xhttp.send();
+}
+
+function dyn1(selector) {
+  // get an array of elements matching |selector|
+  var elems = Array.prototype.slice.call(document.querySelectorAll(selector))
+
+  // remove the first item in each grid
+  var removed = elems.map(function(e) {
+    var child = e.children[0];
+    if (child) {
+      var next = child.nextSibling;
+      e.removeChild(child);
+      return [ e, child, next ];
+    } else {
+      return null;
+    }
+  });
+
+  document.body.style.display = 'block';
+  document.body.offsetHeight;
+
+  // insert the removed item
+  removed.map(function(a) {
+    if (a) {
+      a[0].insertBefore(a[1],a[2]);
+    }
+  });
+}
+
+function dyn2(selector) {
+  // get an array of elements matching |selector|
+  var elems = Array.prototype.slice.call(document.querySelectorAll(selector))
+
+  // inject a new first item in each grid
+  var inserted = elems.map(function(e) {
+    var child = document.createElement('span');
+    e.insertBefore(child, e.firstChild);
+    return [ e, child ];
+  });
+
+  document.body.style.display = 'block';
+  document.body.offsetHeight;
+
+  // remove the inserted item
+  inserted.map(function(a) {
+    a[0].removeChild(a[1]);
+  });
+}
+
+function dyn3(selector) {
+  // get an array of elements matching |selector|
+  var elems = Array.prototype.slice.call(document.querySelectorAll(selector))
+
+  // remove the second item in each grid
+  var removed = elems.map(function(e) {
+    var child = e.children[1];
+    if (child) {
+      var next = child.nextSibling;
+      e.removeChild(child);
+      return [ e, child, next ];
+    } else {
+      return null;
+    }
+  });
+
+  document.body.style.display = 'block';
+  document.body.offsetHeight;
+
+  // insert the removed items
+  removed.map(function(a) {
+    if (a) {
+      a[0].insertBefore(a[1],a[2]);
+    }
+  });
+}
+
+function dyn4(selector) {
+  dyn3(selector);
+  dyn2(selector);
+}
+
+function dyn5(selector) {
+  // get an array of elements matching |selector|
+  var elems = Array.prototype.slice.call(document.querySelectorAll(selector))
+
+  // inject 20 new items in each grid
+  var inserted = elems.map(function(e) {
+    var a = new Array;
+    for (var i = 0; i < 20; ++i) {
+      var child = document.createElement('span');
+      e.insertBefore(child, e.firstChild);
+      a.push(child);
+    }
+    return [ e, a ];
+  });
+
+  document.body.style.display = 'block';
+  document.body.offsetHeight;
+
+  // remove the inserted item
+  inserted.map(function(a) {
+    a[1].forEach(function(child) {
+      a[0].removeChild(child);
+    });
+  });
+}
+
+function dynamicTest(url, callback) {
+  document.body.style.display='';
+  document.body.offsetHeight;
+  loadURL(url,callback);
+}
diff --git a/layout/reftests/css-grid/support/lime-24x2.png b/layout/reftests/css-grid/support/lime-24x2.png
new file mode 100644
index 0000000000..b9ce5e2461
--- /dev/null
+++ b/layout/reftests/css-grid/support/lime-24x2.png
diff --git a/layout/reftests/css-grid/support/lime-25x1.png b/layout/reftests/css-grid/support/lime-25x1.png
new file mode 100644
index 0000000000..31e1c4087a
--- /dev/null
+++ b/layout/reftests/css-grid/support/lime-25x1.png
diff --git a/layout/reftests/css-grid/support/lime-2x24.png b/layout/reftests/css-grid/support/lime-2x24.png
new file mode 100644
index 0000000000..a1524d46b4
--- /dev/null
+++ b/layout/reftests/css-grid/support/lime-2x24.png
diff --git a/layout/reftests/css-grid/support/solidblue-20x32.png b/layout/reftests/css-grid/support/solidblue-20x32.png
new file mode 100644
index 0000000000..bba5504d98
--- /dev/null
+++ b/layout/reftests/css-grid/support/solidblue-20x32.png
diff --git a/layout/reftests/css-grid/support/solidblue.png b/layout/reftests/css-grid/support/solidblue.png
new file mode 100644
index 0000000000..a64b6a4255
--- /dev/null
+++ b/layout/reftests/css-grid/support/solidblue.png
diff --git a/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html
new file mode 100644
index 0000000000..bc90a09556
--- /dev/null
+++ b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html
@@ -0,0 +1,204 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+html {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+}
+
+.grid {
+  block-size: 60px;
+  border: 2px solid green;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+.test1 .a {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.test1 .b {
+  offset-block-start: 20px;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test1 .c {
+  offset-block-start: 0;
+  offset-inline-start: 80px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test1 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test1 .d2 {
+  offset-block-start: 0px;
+  offset-inline-start: 40px;
+}
+
+.test2 .a {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test2 .b {
+  offset-block-start: 20px;
+  offset-inline-start: 20px;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.test2 .c {
+  offset-block-start: 0;
+  offset-inline-start: 80px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test2 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test2 .d2 {
+  offset-block-start: 20px;
+  offset-inline-start: 40px;
+}
+
+.test3 .a {
+  offset-block-start: 0;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test3 .b {
+  offset-block-start: 40px;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test3 .c {
+  offset-block-start: 60px;
+  offset-inline-start: 0px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test3 .d { offset-block-start: 60px; offset-inline-start:60px; }
+.test3 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 60px;
+}
+.test3 .d2 {
+  offset-block-start: 80px;
+  offset-inline-start: 60px;
+}
+
+.test4 .c {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test4 .d { offset-block-start: 40px; }
+.test4 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test4 .d2 {
+  offset-block-start: 40px;
+  offset-inline-start: 20px;
+}
+
+.test5 .c {
+  offset-block-start: 20px;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test5 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 60px;
+}
+.test5 .d2 {
+  offset-block-start: 0px;
+  offset-inline-start: 20px;
+}
+
+.test6 { offset-inline-start: 0px; offset-block-start: 20px;}
+.test6d2 {
+  offset-block-start: 20px;
+  offset-inline-start: 140px;
+}
+.test6e {
+  offset-block-start: 20px;
+  offset-inline-start: 160px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="block-size:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001.html
new file mode 100644
index 0000000000..872d35d07f
--- /dev/null
+++ b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001.html
@@ -0,0 +1,142 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+html {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+}
+
+.grid {
+  display: grid;
+  border: 2px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3;
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html
new file mode 100644
index 0000000000..7d2fe1e9e7
--- /dev/null
+++ b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html
@@ -0,0 +1,222 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+html {
+  writing-mode: vertical-rl;
+  text-orientation: sideways-right;
+}
+
+.grid {
+  block-size: 60px;
+  border: 2px solid green;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+.test1 .a {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.test1 .b {
+  offset-block-start: 20px;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test1 .c {
+  offset-block-start: 0;
+  offset-inline-start: 80px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test1 .d {
+  offset-block-start: 0;
+  offset-inline-start: 0;
+}
+.test1 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0;
+}
+.test1 .d2 {
+  offset-block-start: 0;
+  offset-inline-start: 40px;
+}
+
+.test2 .a {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test2 .b {
+  offset-block-start: 20px;
+  offset-inline-start: 20px;
+  inline-size: 20px;
+  block-size: 20px;
+}
+.test2 .c {
+  offset-block-start: 0;
+  offset-inline-start: 80px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test2 .d {
+  offset-block-start: 0;
+  offset-inline-start: 0;
+}
+.test2 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0;
+}
+.test2 .d2 {
+  offset-block-start: 20px;
+  offset-inline-start: 40px;
+}
+
+.test3 .a {
+  offset-block-start: 0;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test3 .b {
+  offset-block-start: 40px;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test3 .c {
+  offset-block-start: 60px;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test3 .d { offset-block-start: 60px; offset-inline-start:60px; }
+.test3 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 60px;
+}
+.test3 .d2 {
+  offset-block-start: 80px;
+  offset-inline-start: 60px;
+}
+
+.test4 .c {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+  inline-size: 60px;
+  block-size: 40px;
+}
+.test4 .d {
+  offset-block-start: 40px;
+  offset-inline-start: 0;
+}
+.test4 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 0px;
+}
+.test4 .d2 {
+  offset-block-start: 40px;
+  offset-inline-start: 20px;
+}
+
+.test5 .c {
+  offset-block-start: 20px;
+  offset-inline-start: 0;
+  inline-size: 60px;
+  block-size: 20px;
+}
+.test5 .d {
+  offset-block-start: 0;
+  offset-inline-start: 0;
+}
+.test5 .e {
+  offset-block-start: 20px;
+  offset-inline-start: 60px;
+}
+.test5 .d2 {
+  offset-block-start: 0;
+  offset-inline-start: 20px;
+}
+
+.test6 {
+  offset-inline-start: 0;
+  offset-block-start: 20px;
+}
+.test6d2 {
+  offset-block-start: 20px;
+  offset-inline-start: 140px;
+}
+.test6e {
+  offset-block-start: 20px;
+  offset-inline-start: 160px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="block-size:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001.html
new file mode 100644
index 0000000000..51354b562e
--- /dev/null
+++ b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001.html
@@ -0,0 +1,142 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
+html {
+  writing-mode: vertical-rl;
+  text-orientation: sideways-right;
+}
+
+.grid {
+  display: grid;
+  border: 2px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+}
+.test3 .b {
+  grid-column: 2 / span 3;
+  grid-row: b;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+</body>
+</html>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/css-grid
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	uxp-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz