Bug 1151212 part 4 - [css-grid] Tests for intrinsic track sizing and intrinsic grid container sizing (bug 1174574).
authorMats Palmgren <mats@mozilla.com>
Fri, 04 Sep 2015 22:06:58 +0200
changeset 293725 dbfbfa04bbc399fd627a704082eb656f6e9cb05a
parent 293724 37eb43b1d82ea3460d562a4ac4d0d9a2af20ae6c
child 293726 52c05b4b2f46f89be0beb7fe285c88bb3c99b7ed
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1151212, 1174574
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1151212 part 4 - [css-grid] Tests for intrinsic track sizing and intrinsic grid container sizing (bug 1174574).
layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html
layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html
layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html
layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html
layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html
layout/reftests/css-grid/grid-min-max-content-sizing-001.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html
layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /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>
new file mode 100644
--- /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;
+}
+
+.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: flex-start;
+}
+
+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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.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">
+  <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;
+  justify-self: flex-start;
+}
+
+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>
new file mode 100644
--- /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>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">
+  <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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html
@@ -0,0 +1,101 @@
+<!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;
+}
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-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>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;
+}
+
+.d1 {
+  position: absolute;
+  bottom: 0;
+  background: grey;
+}
+.g1 .d1 {
+  width: 52px;
+}
+.g2 .d1 {
+  width: 56px;
+}
+.g2f .d1 {
+  width: 52px;
+}
+.g3 .d1 {
+  width: 56px;
+}
+.g4 .d1 {
+  width: 96px;
+}
+.g4f .d1 {
+  width: 92px;
+}
+.g5 .d1 {
+  width: 96px;
+}
+.g6 .d1 {
+  width: 69px;
+}
+.g6f .d1 {
+  width: 77px;
+}
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html
@@ -0,0 +1,190 @@
+<!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;
+}
+
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
@@ -0,0 +1,220 @@
+<!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;
+}
+
+.d1 {
+  position: absolute;
+  bottom: 0;
+  background: grey;
+}
+.g1 .d1 {
+  width: 52px;
+}
+.g2 .d1 {
+  width: 56px;
+}
+.g2f .d1 {
+  width: 56px;
+}
+.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 {
+  width: 448px;
+}
+.g3 .d2 {
+  width: 444px;
+}
+.g4 .d2 {
+  width: 404px;
+}
+.g4f .d2 {
+  width: 396px;
+}
+.g5 .d2 {
+  width: 404px;
+}
+.g6 .d2 {
+  width: 431px;
+}
+.g6f .d2 {
+  width: 423px;
+}
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html
@@ -0,0 +1,206 @@
+<!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;
+}
+
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html
@@ -0,0 +1,247 @@
+<!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;
+}
+
+.d1 {
+  position: absolute;
+  bottom: 0;
+  background: grey;
+}
+.g1 .d1 {
+  width: 52px;
+}
+.g2 .d1 {
+  width: 56px;
+}
+.g2f .d1 {
+  width: 52px;
+}
+.g3 .d1 {
+  left: 41px;
+  width: 2px;
+}
+.g4 .d1 {
+  left: 81px;
+  width: 2px;
+}
+.g4f .d1 {
+  left: 83px;
+  width: 0px;
+}
+.g5 .d1 {
+  left: 81px;
+  width: 2px;
+}
+.g6 .d1 {
+  left: 28px;
+  width: 28px;
+}
+.g6f .d1 {
+  left: 27px;
+  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: 104px;
+}
+.g3 .d2 {
+  width: 61px;
+  left: 43px;
+}
+.g4 .d2 {
+  width: 21px;
+  left: 83px;
+}
+.g4f .d2 {
+  width: 22px;
+  left: 82px;
+}
+.g5 .d2 {
+  width: 21px;
+  left: 83px;
+}
+.g6 .d2 {
+  width: 48px;
+  left: 56px;
+}
+.g6f .d2 {
+  width: 49px;
+  left: 55px;
+}
+.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html
@@ -0,0 +1,223 @@
+<!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;
+}
+.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>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -21,8 +21,15 @@ skip-if(Android) == grid-placement-defin
 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
 pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == 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-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-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