Bug 1176621 part 2 - [css-grid] Tests for flex track sizing.
authorMats Palmgren <mats@mozilla.com>
Fri, 04 Sep 2015 22:06:58 +0200
changeset 261127 52c05b4b2f46f89be0beb7fe285c88bb3c99b7ed
parent 261126 dbfbfa04bbc399fd627a704082eb656f6e9cb05a
child 261128 26547d95274db0aca74f4a8120d30cfb4a50efa4
push id29336
push usercbook@mozilla.com
push dateMon, 07 Sep 2015 10:01:38 +0000
treeherdermozilla-central@5fe9ed3edd68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1176621
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 1176621 part 2 - [css-grid] Tests for flex track sizing.
layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html
layout/reftests/css-grid/grid-max-sizing-flex-001.html
layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html
layout/reftests/css-grid/grid-max-sizing-flex-002.html
layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html
layout/reftests/css-grid/grid-max-sizing-flex-003.html
layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
layout/reftests/css-grid/grid-max-sizing-flex-004.html
layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html
layout/reftests/css-grid/grid-max-sizing-flex-005.html
layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html
layout/reftests/css-grid/grid-max-sizing-flex-006.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: block;
+  border: dashed blue;
+  float: left;
+  clear: left;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
+.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
+
+span {
+  display: block;
+  float: left;
+  clear: left;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:46px"><x></x></span>
+<span class="r1" style="margin-left:41px; width:82px"><x></x></span>
+<span class="c3" style="margin-left:77px; "><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+<span class="r1" style="width:73px"><x></x></span>
+</div>
+<div class="grid" style="">
+<span class="c1" style="width:410px"><x></x></span>
+<span class="r1" style="margin-left:41px; width:446px"><x></x></span>
+<span class="c3" style="margin-left:441px;"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="width:224px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+</div>
+
+<div class="grid" style="">
+<span class="c1" style="width:510px"><x></x></span>
+<span class="r1" style="margin-left:41px; width:546px"><x></x></span>
+<span class="c3" style="margin-left:541px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:114px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:222px; width:83px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="margin-left:114px; width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3" style="margin-left:222px; width:83px"><x></x></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-001.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(0,1fr);
+  border: dashed blue;
+  float: left;
+  clear: left;
+}
+
+.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></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+<span class="r1" style="min-width:30px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="width:300px"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: dashed blue;
+  clear: left;
+}
+
+.c1 { grid-column: 1 / span 2; min-width:40px; margin-top:1px; }
+.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
+.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 2px 5px 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; width:10px; height:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1" style="width:371px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:371px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:371px"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+<span class="r1" style="margin-left:204px;"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:505px"><x></x></span>
+<span class="r1" style="margin-left:136px;"><x></x></span>
+<span class="c3" style="margin-left:536px; width:106px"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="width:224px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:572px"><x></x></span>
+<span class="r1" style="margin-left:103px;"><x></x></span>
+<span class="c3" style="margin-left:603px; width:72px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
+<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
+</div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-columns: minmax(0,1fr);
+  border: dashed blue;
+}
+
+.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></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid" style="width:500px;">
+<span class="c1" style="min-width:20px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+<span class="r1" style="min-width:30px"><x></x></span>
+<span class="r1" style="min-width:10px"><x></x></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px"><x></x></span>
+<span class="r1" style="width:300px"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: 3px dashed blue;
+  width: 794px;
+}
+
+.c1 { min-height:40px; margin-top:1px; }
+.r1 { min-height:70px; margin-top:38px; }
+.c3 { min-height:0; margin-top:138px; }
+
+.gc1 { grid-row: 1 / span 2; min-height:40px; }
+.gr1 { grid-row: 2 / span 3; min-height:70px; }
+.gc3 { grid-row: 3 / span 1; min-height:0; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-height: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+td {
+  vertical-align:top;
+}
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="height:43px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;margin-left:5px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="display:inline-block; margin-left:5px; height:43px"><x>&nbsp;</x></span>
+<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:27px;"><x>&nbsp;</x></span>
+<tr><td><span class="c3" style="margin-left:5px; margin-top:-52px; height:17px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="height:44px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid" style="height:100px;">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="height:40px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:26px; min-height:65px;"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:26px; min-height:65px"><x>&nbsp;</x></span>
+<td><span class="r1" style="margin-top:26px; min-height:65px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+<div class="grid">
+<table cellpadding="0" cellspacing="0"><tr>
+<td><span class="c1" style="display:inline-block; margin-left:5px; height:40px"><x>&nbsp;</x></span>
+<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:28px;"><x>&nbsp;</x></span>
+<tr><td><span class="c3" style="margin-left:5px; margin-top:-53px; height:17px"><x>&nbsp;</x></span>
+</tr></table>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-003.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-003-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-rows: minmax(0,1fr);
+  border: 3px dashed blue;
+}
+
+.c1 { grid-row: 1 / span 2; min-height:40px; }
+.r1 { grid-row: 2 / span 3; min-height:70px; }
+.c3 { grid-row: 3 / span 1; min-height:0; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-height: 1px 3px 5px 7px;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+<span class="r1"><x></x></span>
+</div>
+
+<div class="grid" style="height:100px;">
+<span class="c1" style="min-height:20px"><x></x></span>
+<span class="r1" style="min-height:10px"><x></x></span>
+<span class="r1" style="min-height:30px"><x></x></span>
+<span class="r1" style="min-height:10px"><x></x></span>
+</div>
+
+<div class="grid">
+<span class="c1" style="height:30px; border-sizing:border-box"><x></x></span>
+<span class="r1" style="height:40px; border-sizing:border-box"><x></x></span>
+<span class="c3"><x></x></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: block;
+  border: 3px dashed blue;
+  margin-bottom:20px;
+  float: left;
+  clear: left;
+  position:relative;
+}
+
+.c1 { min-height:20px; min-width:10px;  }
+.c2 { min-height:20px; min-width:10px; }
+.c3 { min-height:0;    min-width:20px; }
+.r1 { min-height:10px;  }
+.x1 { min-height:10px; min-width:0px; border-style:none; }
+
+span {
+  display: block;
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid flex" style="width:0;height:0;"></div>
+<div class="grid flex" style="width:1px;height:1px;"></div>
+<div class="grid mm" style="width:0;height:0;"></div>
+<div class="grid mm" style="width:1px;height:1px;"></div>
+<div class="grid zero" style="width:0;height:0;"></div>
+<div class="grid zero" style="width:1px;height:1px;"></div>
+<!-- TODO: fails due to broken align:stretch
+<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2" style="position:relative;top:0px;width:0;min-height:0;height:1px;min-width:0;border-width:0 0 0 10px;z-index:1;"><x></x></span></div>
+
+<div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div>
+-->
+
+<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
+<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
+<!-- TODO: fails due to broken align:stretch
+<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div>
+<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div>
+-->
+
+<div class="grid flex">
+<span class="c1 r1"><x></x></span>
+</div>
+
+<div class="grid flex10">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.010px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.020px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.040px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.15px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.18px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:0.19px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:1px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:2px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:3px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:4px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:5px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:6px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:7px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:8px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:9px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:10px; clear:none;">
+<span class="x1"></span></div>
+
+<div class="grid flex10" style="width:11px; clear:none;">
+<span class="x1"></span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-004.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing">
+  <link rel="match" href="grid-max-sizing-flex-004-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  border: 3px dashed blue;
+  margin-bottom:20px;
+  float: left;
+  clear: left;
+}
+.flex {
+  grid-auto-rows: minmax(0,1fr);
+  grid-auto-columns: minmax(0,1fr);
+}
+.flex10 {
+  grid-auto-rows: minmax(0,1fr);
+  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
+                         minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
+                         minmax(0,1fr) minmax(0,1fr);
+}
+.mm {
+  grid-auto-rows: minmax(min-content,max-content);
+  grid-auto-columns: minmax(min-content,max-content);
+}
+.zero {
+  grid-auto-rows: minmax(0,0);
+  grid-auto-columns: minmax(0,0);
+}
+
+.c1 { grid-column: 1 / span 2; min-height:10px; min-width:0px;  }
+.c2 { grid-column: 2 / span 3; min-height:20px; min-width:10px; }
+.c3 { grid-column: 3 / span 1; min-height:0;    min-width:20px; }
+.r1 { grid-row: 1; }
+.x1 { grid-row: 1; min-height:10px; min-width:0px; border-style:none; }
+
+span {
+  background: gray;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  justify-self: flex-start;
+}
+
+x { display:inline-block; height:10px; width:18px; }
+  </style>
+</head>
+<body>
+
+<div class="grid flex" style="width:0;height:0;"></div>
+<div class="grid flex" style="width:1px;height:1px;"></div>
+<div class="grid mm" style="width:0;height:0;"></div>
+<div class="grid mm" style="width:1px;height:1px;"></div>
+<div class="grid zero" style="width:0;height:0;"></div>
+<div class="grid zero" style="width:1px;height:1px;"></div>
+
+<!-- TODO: fails due to broken align:stretch
+<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<div class="grid flex" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+-->
+<div class="grid mm" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<div class="grid mm" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<!-- TODO: fails due to broken align:stretch
+<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
+-->
+
+<div class="grid flex">
+<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
+<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
+</div>
+
+<div class="grid flex10">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.010px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.020px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.040px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.15px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.18px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:0.19px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:1px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:2px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:3px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:4px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:5px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:6px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:7px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:8px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:9px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:10px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+<div class="grid flex10" style="width:11px; clear:none;">
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-rows: 12px;
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-column: 1 / span 2; }
+.r1 { grid-column: 2 / span 3; }
+.c3 { grid-column: 3 / span 1; }
+
+span {
+  min-height:8px;
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid-template-columns: 80px 160px 240px 160px 80px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 72px 144px 216px 144px 72px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 400px 320px 0 0 0;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 0 400px 0 0 322px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: 0 0 0 0 722px;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<!-- test some extreme flex values: -->
+
+<div class="grid" style="grid-template-columns: minmax(10px,0fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,1fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:794px; grid-template-columns: minmax(10px,1fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-005.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-005-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+body { width: 800px; }
+.grid {
+  display: grid;
+  grid-auto-rows: minmax(0,1fr);
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-column: 1 / span 2; min-height:8px; }
+.r1 { grid-column: 2 / span 3; }
+.c3 { grid-column: 3 / span 1; }
+
+span {
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(320px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(400px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(322px,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(722px,1fr) ;">
+<span class="c1"></span>
+<span class="r1"></span>
+<span class="c3"></span>
+</div>
+
+<!-- test some extreme flex values: -->
+
+<div class="grid" style="grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:auto; grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:auto; grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);">
+<span class="c1"></span>
+</div>
+
+<div class="grid" style="width:auto; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
+<span class="c1"></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: 40px;
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-row: 1 / span 2; }
+.c2 { grid-row: 2 / span 3; }
+.c3 { grid-row: 3 / span 1; }
+
+span {
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  min-height: 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</body>
+<head>
+
+<div class="grid" style="grid-template-rows: 3px 6px 9px 6px 3px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 0.9px 1.8px 2.7px 1.8px 0.9px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-max-sizing-flex-006.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Testing track flex max-sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
+  <link rel="match" href="grid-max-sizing-flex-006-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-columns: 40px;
+  border: 3px dashed blue;
+  width: 720px;
+}
+
+.c1 { grid-row: 1 / span 2; }
+.c2 { grid-row: 2 / span 3; }
+.c3 { grid-row: 3 / span 1; }
+
+span {
+  background: gray;
+  padding: 1px 3px;
+  margin: 1px 5px;
+  min-height: 5px;
+  justify-self: flex-start;
+}
+
+  </style>
+</body>
+<head>
+
+<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(18px,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;">
+<span class="c1"></span>
+<span class="c2"></span>
+<span class="c3"></span>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -28,8 +28,14 @@ pref(layout.css.vertical-text.enabled,tr
 == 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
+== grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html
+== grid-max-sizing-flex-002.html grid-max-sizing-flex-002-ref.html
+== grid-max-sizing-flex-003.html grid-max-sizing-flex-003-ref.html
+== grid-max-sizing-flex-004.html grid-max-sizing-flex-004-ref.html
+== grid-max-sizing-flex-005.html grid-max-sizing-flex-005-ref.html
+== grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html