Bug 1176621 part 2 - [css-grid] Tests for flex track sizing.
☠☠ backed out by 8524348fce8a ☠ ☠
authorMats Palmgren <mats@mozilla.com>
Fri, 04 Sep 2015 22:06:58 +0200
changeset 293636 89affe972ce30a648748964a0cd4ac1fe83b0b14
parent 293635 d5260ff7a1466eee057195b68bfd24d74d95283d
child 293637 ec2be536711657a1e8de37cac984c1d065ba4a87
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)
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