Issue #1233 - Part 2: Update Reftests

List of relevant patches applied:

1425599 part 15 - [css-grid] Test reference fixes + more tests.

1373678 Part 3: Add line number checks to test_grid_implicit.html.

1416350 - Part 3: Add test to verify line numbers of grids with leading implicit tracks.

1416350 - Part 4: Add a reftest of repeat:auto-fit grids with leading implicit tracks.

1417711 - [css-grid] An abs.pos. grid container child that only covers removed 'auto-fit' tracks should not span to the end padding edge.

1416350 - Part 5: Correct the expected results for grids that have leading implicit tracks.

1418727 part 3 - [css-grid] Reftest updates.

15 files changed, 696 insertions, 138 deletions

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
index eda06249b..da30a8b89 100644
--- 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
@@ -17,9 +17,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
  clear:left;
 }
 
-.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
+.c1 { 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; }
+.c3 { width:10px; margin: 2px 18px 1px 71px; }
 
 span {
   display: block;
@@ -52,21 +52,22 @@ x { display:inline-block; width:10px; height:18px; }
 <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="c1" style="width:374px; 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="c1" style="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="c1" style="width:507px; 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>
@@ -74,13 +75,13 @@ x { display:inline-block; width:10px; height:18px; }
 <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>
+<span class="c3" style="margin-left:131px;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>
+<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
 </div>
 
 
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
index 23ca12e7b..eeb4e407f 100644
--- 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
@@ -21,9 +21,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
  clear:left;
 }
 
-.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
+.c1 { 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; }
+.c3 { width:10px; margin: 2px 18px 1px 71px; }
 
 span {
   display: block;
@@ -56,21 +56,22 @@ x { display:inline-block; width:10px; height:18px; }
 <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="c1" style="width:374px; 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="c1" style="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="c1" style="width:507px; 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>
@@ -78,13 +79,13 @@ x { display:inline-block; width:10px; height:18px; }
 <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>
+<span class="c3" style="margin-left:131px;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>
+<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
 </div></div>
 
 
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
index d9af7e43c..d811447ff 100644
--- a/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
+++ b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
@@ -127,10 +127,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
 }
 
 .gF {
- grid-template-columns: 22px
-                        1px
-                        1px
-                        auto;
+ grid-template-columns: 2px
+                        20px
+                        2px
+                        0;
 }
 
 
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
index 6446c0ee6..b0ac02bf5 100644
--- a/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
@@ -51,8 +51,8 @@ x { display:inline-block; height:10px; width:18px; }
 <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>
+<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:18px;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:18px;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>
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
index 79ac94548..ab07edd5f 100644
--- 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
@@ -129,55 +129,55 @@ float { float:left; margin-right:20px; }
 <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 c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><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 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><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><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><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 c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><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 t2 x4"><x></x><x></x><x></x><a></a><b></b><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><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><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 t1 x3"><x></x><x></x><a></a><b></b><f></f><x></x></div>
+<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><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>
+<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><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 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
+<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><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 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
+<div class="grid c2 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
+<div class="grid c3 t2 x2"><x></x><a></a><b></b><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 t1 x1"><a></a><b></b><f></f><x></x></div>
+<div class="grid c2 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x1"><a></a><b></b><c></c><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 t2 x1"><a></a><b></b><f></f><x></x></div>
+<div class="grid c2 t2 x1"><a></a><b></b><f></f><x></x></div>
+<div class="grid c3 t2 x1"><a></a><b></b><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 t1 x1 p1"><a></a><b></b><f></f></div>
+<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
+<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><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>
+<div class="grid c1 t2 x0 p1"><a></a><b></b><f></f></div>
+<div class="grid c2 t2 x0 p1"><a></a><b></b><f></f></div>
+<div class="grid c3 t2 x0 p1"><a></a><b></b><f></f></div>
 </float>
 
 </body>
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
index 5f3cebf6a..fd073a072 100644
--- 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
@@ -146,7 +146,7 @@ float { float:left; margin-right:20px; }
 <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 c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><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>
 
@@ -154,23 +154,23 @@ float { float:left; margin-right:20px; }
 <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 c1 t1 x3"><x></x><x></x><a></a><b></b><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>
+<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><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 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
+<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
+<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><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 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
+<div class="grid c2 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
+<div class="grid c3 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
 </float>
 
 </body>
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
index 96f606682..028d9e209 100644
--- 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
@@ -139,8 +139,7 @@ float { float:left; margin-right:20px; }
 
 .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 e { width:20px; }
 .t1.c3.x2 c { width:20px; right:auto;}
 
 .t2.x5 e { left:23px; width:60px; }
@@ -159,35 +158,35 @@ float { float:left; margin-right:20px; }
 <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 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><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><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><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 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><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><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><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>
+<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><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><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><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 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><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><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:107px"></a><b></b><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>
+<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><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><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><d></d><e></e><f></f><x></x></div>
 </float>
 
 </body>
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
index e821c8d0e..300be60ca 100644
--- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html
@@ -156,32 +156,32 @@ function testGridTemplateColumns(elem, expected) {
   }
 }
 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",
+"3px [a b] 0px [c b] 20px [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] 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 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",
+"[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] 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",
+"3px [a b] 0px [c b] 20px [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] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
+"3px [a b] 0px [c b] 20px [c 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] 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"
+"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [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]",
+"3px [a b] 0px [c b] 20px [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] 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]",
+"3px [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] 0px [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]",
+"3px [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] 0px [c b] 20px [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] 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]",
+"3px [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] 0px [c b] 20px [c b] 0px [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] 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"
+"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px"
 ];
 function runTest() {
  var t1 = document.querySelectorAll('.t1');
@@ -195,7 +195,7 @@ function runTest() {
 
  document.documentElement.className='';
 }
-document.addEventListener('MozReftestInvalidate', runTest, false);
+document.addEventListener('MozReftestInvalidate', runTest);
 
 </script>
 
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html
new file mode 100644
index 000000000..04963b45f
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.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>Reference: repeat(auto-fit) with removed tracks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
+}
+
+.container {
+  width: 200px;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid: 10px / repeat(5, 30px);
+  grid-auto-columns: 2px;
+  background: lightgrey;
+  margin-bottom: 4px;
+  grid-gap: 5px;
+}
+.distribute {
+  grid-gap: 0;
+  align-content: space-around;
+}
+
+span {
+  background: blue;
+  height: 10px;
+}
+
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  grid-column-end: span 1;
+  background: pink;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1 / 2" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1 / 2" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1 / 3" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1 / 2" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1 / auto" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1 / 2" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1 / 2" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1 / 3" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1 / 2" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1 / auto" class="abs"></span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html
new file mode 100644
index 000000000..7ed0843af
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.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: repeat(auto-fit) with removed tracks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-012-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
+}
+
+.container {
+  width: 200px;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid: 10px / repeat(auto-fit, 30px);
+  grid-auto-columns: 2px;
+  background: lightgrey;
+  margin-bottom: 4px;
+  grid-gap: 5px;
+}
+.distribute {
+  grid-gap: 0;
+  align-content: space-around;
+}
+
+span {
+  background: blue;
+  height: 10px;
+}
+
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  grid-column-end: span 1;
+  background: pink;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 4 / 5" class="abs"></span>
+<span style="grid-column: 3"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 4 / 5" class="abs"></span>
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 1 / 5" class="abs"></span>
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 2 / 5" class="abs"></span>
+<span style="grid-column: 2"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 2 / 5" class="abs"></span>
+<span style="grid-column: 2 / 4"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 2 / 5" class="abs"></span>
+<span style="grid-column: 4 / 5"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 2 / 5" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid">
+<span style="grid-column: 2 / 10" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 4 / 5" class="abs"></span>
+<span style="grid-column: 3"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 4 / 5" class="abs"></span>
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 1 / 5" class="abs"></span>
+<span style="grid-column: 1"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 2 / 5" class="abs"></span>
+<span style="grid-column: 2"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 2 / 5" class="abs"></span>
+<span style="grid-column: 2 / 4"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 2 / 5" class="abs"></span>
+<span style="grid-column: 4 / 5"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 2 / 5" class="abs"></span>
+</div>
+</div>
+
+<div class="container">
+<div class="grid distribute">
+<span style="grid-column: 2 / 10" class="abs"></span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html
new file mode 100644
index 000000000..9b8267f88
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-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>CSS Grid Test Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title>
+<style type="text/css">
+body {
+  margin: 10px;
+  font-size: 10px;
+}
+.wrapper {
+  display: grid;
+  width: 600px;
+  background-color: #f00;
+}
+.wrapper > * {
+  background-color: #444;
+  color: #fff;
+}
+
+.templateFit {
+  grid-template-columns: 10px 10px repeat(auto-fill, 40px);
+}
+.templateFixedFit {
+  grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px);
+}
+.templateFitFixed {
+  grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px;
+}
+.templateFixedFitFixed {
+  grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px;
+}
+
+z {
+  grid-column: 1;
+}
+z::after {
+  content: "Z";
+}
+
+y {
+  grid-column: auto;
+}
+y::after {
+  content: "Y";
+}
+
+
+b {
+  grid-column: 3;
+}
+b::after {
+  content: "B";
+}
+
+c {
+  grid-column: 4;
+}
+c::after {
+  content: "C";
+}
+
+d {
+  grid-column: 5;
+}
+d::after {
+  content: "D";
+}
+
+e {
+  grid-column: 6;
+}
+e::after {
+  content: "E";
+}
+
+f {
+  grid-column: 7;
+}
+f::after {
+  content: "F";
+}
+
+</style>
+</head>
+<body>
+
+<div class="wrapper templateFit"><z></z><b></b><y></y></div>
+<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div>
+<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
+
+<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
+<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div>
+<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
+
+<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
+<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
+<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
+
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html
new file mode 100644
index 000000000..5a9c05d73
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.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>CSS Grid Test: test placement in repeat auto-fit grids with leading implicit tracks</title>
+<link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+<link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html">
+<style type="text/css">
+body {
+  margin: 10px;
+  font-size: 10px;
+}
+.wrapper {
+  display: grid;
+  width: 600px;
+  background-color: #f00;
+  grid-auto-columns: 10px;
+  grid-auto-flow: row;
+}
+.wrapper > * {
+  background-color: #444;
+  color: #fff;
+}
+
+.relative {
+  position: relative;
+}
+
+.absposchild {
+  z-index: -1;
+  position: absolute;
+  grid-column-end: span 1;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+}
+
+.templateFit {
+  grid-template-columns: repeat(auto-fit, 40px);
+}
+.templateFixedFit {
+  grid-template-columns: 20px repeat(auto-fit, 40px);
+}
+.templateFitFixed {
+  grid-template-columns: repeat(auto-fit, 40px) 40px;
+}
+.templateFixedFitFixed {
+  grid-template-columns: 20px repeat(auto-fit, 40px) 40px;
+}
+
+z {
+  grid-column: -18;
+}
+z::after {
+  content: "Z";
+}
+
+y {
+  grid-column: auto;
+}
+y::after {
+  content: "Y";
+}
+
+
+b {
+  grid-column: 3;
+}
+b::after {
+  content: "B";
+}
+
+c {
+  grid-column: 5;
+}
+c::after {
+  content: "C";
+}
+
+d {
+  grid-column: 7;
+}
+d::after {
+  content: "D";
+}
+
+e {
+  grid-column: 9;
+}
+e::after {
+  content: "E";
+}
+
+f {
+  grid-column: 11;
+}
+f::after {
+  content: "F";
+}
+
+</style>
+</head>
+<body>
+
+<div class="wrapper templateFit"><z></z><b></b><y></y></div>
+<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
+<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
+
+<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
+<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
+<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
+
+<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
+<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
+<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
+
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
+<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
+<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
+<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></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
index 7fb00f1da..23dc42b69 100644
--- a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
@@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   background: grey;
 }
 .g1 .d1 {
-  width: 52px;
+  width: 0px;
 }
 .g2 .d1 {
-  width: 56px;
+  width: 0px;
 }
 .g2f .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g3 .d1 {
-  width: 56px;
+  width: 0px;
 }
 .g4 .d1 {
-  width: 96px;
+  width: 80px;
 }
 .g4f .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g5 .d1 {
-  width: 96px;
+  width: 80px;
 }
 .g6 .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g6f .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g7 .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g8 .t {
   width: 196px;
@@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   width: 200px;
 }
 .g9 .d1 {
-  width: 69px;
+  width: 0px;
 }
 .gA .d1 {
-  width: 93px;
+  width: 80px;
 }
 .gB .d1 {
-  width: 93px;
+  width: 80px;
 }
 .gC .d1 {
-  width: 93px;
+  width: 80px;
 }
 .gD .d1 {
-  width: 93px;
+  width: 80px;
 }
 
 .t { grid-column: span 1; border:2px solid; }
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
index bc52f4ca0..01739578c 100644
--- a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
@@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   background: grey;
 }
 .g1 .d1 {
-  width: 52px;
+  width: 0px;
 }
 .g2 .d1 {
-  width: 56px;
+  width: 0px;
 }
 .g2f .d1 {
   width: 69px;
 }
 .g3 .d1 {
-  width: 56px;
+  width: 0px;
 }
 .g4 .d1 {
-  width: 96px;
+  width: 80px;
 }
 .g4f .d1 {
   width: 104px;
 }
 .g5 .d1 {
-  width: 96px;
+  width: 80px;
 }
 .g6 .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g6f .d1 {
   width: 89px;
 }
 .g7 .d1 {
-  width: 69px;
+  width: 0px;
 }
 .g8 .t {
   width: 196px;
@@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   width: 200px;
 }
 .g9 .d1 {
-  width: 69px;
+  width: 0px;
 }
 .gA .d1 {
-  width: 93px;
+  width: 80px;
 }
 .gB .d1 {
-  width: 93px;
+  width: 80px;
 }
 .gC .d1 {
-  width: 93px;
+  width: 80px;
 }
 .gD .d1 {
-  width: 93px;
+  width: 80px;
 }
 .d2 {
   position: absolute;
@@ -84,10 +84,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   background: blue;
 }
 .g1 .d2 {
-  width: 448px;
+  width: 500px;
 }
 .g2 .d2 {
-  width: 444px;
+  width: 500px;
 }
 .g2f .d2 {
   right: auto;
@@ -95,10 +95,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   width: 35px;
 }
 .g3 .d2 {
-  width: 444px;
+  width: 500px;
 }
 .g4 .d2 {
-  width: 404px;
+  width: 420px;
 }
 .g4f .d2 {
   right: auto;
@@ -106,10 +106,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   width: 35px;
 }
 .g5 .d2 {
-  width: 404px;
+  width: 420px;
 }
 .g6 .d2 {
-  width: 431px;
+  width: 500px;
 }
 .g6f .d2 {
   right: auto;
@@ -117,25 +117,25 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
   width: 35px;
 }
 .g7 .d2 {
-  width: 431px;
+  width: 500px;
 }
 .g8 .d2 {
   width: 300px;
 }
 .g9 .d2 {
-  width: 431px;
+  width: 500px;
 }
 .gA .d2 {
-  width: 407px;
+  width: 420px;
 }
 .gB .d2 {
-  width: 407px;
+  width: 420px;
 }
 .gC .d2 {
-  width: 407px;
+  width: 420px;
 }
 .gD .d2 {
-  width: 407px;
+  width: 420px;
 }
 
 .t { grid-column: span 1; border:2px solid; }
diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list
index 3087ca49b..7c5e6be51 100644
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -112,9 +112,9 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
 == 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-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976
 == 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-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976
 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
 == grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
 == grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
@@ -184,6 +184,8 @@ skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004-ref.htm
 == 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-repeat-auto-fill-fit-012.html grid-repeat-auto-fill-fit-012-ref.html
+== grid-repeat-auto-fill-fit-013.html grid-repeat-auto-fill-fit-013-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