Bug 1302541 part 6 - [css-grid] Add more reftests for percentage track sizes and grid-gaps.
authorMats Palmgren <mats@mozilla.com>
Wed, 19 Oct 2016 04:20:49 +0200
changeset 318467 aff267eaa3b4ab8f25bf7b75acdfdffd46d863d2
parent 318466 50173aed1530ae1ca75739f8eada9b6ff36511a2
child 318468 48001c1d5dc4f78dc72b4fa0175d3c52662353dd
push id82944
push usermpalmgren@mozilla.com
push dateWed, 19 Oct 2016 02:20:58 +0000
treeherdermozilla-inbound@aff267eaa3b4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1302541
milestone52.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 1302541 part 6 - [css-grid] Add more reftests for percentage track sizes and grid-gaps.
layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
layout/reftests/css-grid/grid-percent-grid-gap-001.html
layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html
layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
layout/reftests/css-grid/grid-percent-intrinsic-sizing-002-ref.html
layout/reftests/css-grid/grid-percent-intrinsic-sizing-002.html
layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html
layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html
layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html
layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
layout/reftests/css-grid/grid-track-percent-sizing-001.html
layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
+++ b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
@@ -31,17 +31,17 @@ html,body {
 }
 
 span:nth-of-type(1) { background: magenta; }
 span:nth-of-type(2) { background: cyan; }
 span:nth-of-type(3) { background: yellow; }
 span:nth-of-type(4) { background: lime; }
 
 x {
-  display: inline-block;
+  display: block;
   width: 20px;
   height: 30px;
 }
 
 br { clear: both; }
     </style>
 </head>
 <body>
@@ -59,21 +59,31 @@ br { clear: both; }
 <div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px">
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
+<div class="float">
+<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
 <div class="inline-grid">
-<div class="grid" style="grid: min-content 20% min-content / min-content 20% min-content">
-  <span><x></x></span><z></z><span><x></x></span>
-  <z></z><z></z><z></z>
-  <span><x></x></span><z></z><span><x></x></span>
+<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
 </div>
 </div>
 
 <br>
 
 <div style="width:320px;height:200px">
 <div class="grid percentgap" style="height:120px; grid-column-gap:64px">
   <span><x></x></span>
@@ -126,10 +136,19 @@ br { clear: both; }
 <div class="grid calcgap" style="height:120px; grid-gap:0">
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
+<div class="float" style="margin-top:-50px">
+<div class="grid" style="min-width:300%; grid-gap:15px 15px">
+  <span><x></x></span>
+  <span style="margin-left:31px; width:30px"><x></x></span>
+  <span><x></x></span>
+  <span style="margin-left:31px; width:30px"><x></x></span>
+</div>
+</div>
+
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-percent-grid-gap-001.html
+++ b/layout/reftests/css-grid/grid-percent-grid-gap-001.html
@@ -38,17 +38,17 @@ html,body {
 }
 
 span:nth-of-type(1) { background: magenta; }
 span:nth-of-type(2) { background: cyan; }
 span:nth-of-type(3) { background: yellow; }
 span:nth-of-type(4) { background: lime; }
 
 x {
-  display: inline-block;
+  display: block;
   width: 20px;
   height: 30px;
 }
 
 br { clear: both; }
     </style>
 </head>
 <body>
@@ -66,21 +66,31 @@ br { clear: both; }
 <div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px">
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
+<div class="float">
+<div class="grid percentgap cfill" style="max-width:800%">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
 <div class="inline-grid">
-<div class="grid" style="grid: min-content 20% min-content / min-content 20% min-content">
-  <span><x></x></span><z></z><span><x></x></span>
-  <z></z><z></z><z></z>
-  <span><x></x></span><z></z><span><x></x></span>
+<div class="grid percentgap" style="align-self:start; justify-self:start">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
 </div>
 </div>
 
 <br>
 
 <div style="width:320px;height:200px">
 <div class="grid percentgap" style="height:120px">
   <span><x></x></span>
@@ -133,10 +143,19 @@ br { clear: both; }
 <div class="grid calcgap" style="height:120px; grid-gap:calc(32px - 30%)">
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
+<div class="float" style="margin-top:-50px">
+<div class="grid percentgap cfill" style="min-width:300%">
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+  <span><x></x></span>
+</div>
+</div>
+
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html
@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <style type="text/css">
+  <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  float: left;
+  grid-template-columns: auto auto;
+  grid-template-rows: 5px;
+  height: 5px;
+  border: 1px solid;
+  clear: left;
+  align-content: start;
+  justify-content: start;
+}
+
+span {
+  min-width: 10px;
+  background: grey;
+}
+span:nth-child(2) { background:lime; }
+x { background: blue; }
+x:nth-child(2) { background:pink; }
+
+.g10  { grid-gap:10%; }
+.p1   { grid-template-columns: 10px; width: calc(10px / 0.9); }
+.p1a  { grid-template-columns: 10px; width: calc(10px / 0.9); }
+.p10  { grid-template-columns: 10px 10px; width: calc(10px / 0.8); }
+.p10a { grid-template-columns: calc((20px / 0.5) * 0.4) calc((20px / 0.5) * 0.1); width: calc(20px / 0.5); }
+.p10b { grid-template-columns: calc((110px / 0.6) * 0.4) 100px; width: calc(110px / 0.6); }
+.g10.p10b { grid-template-columns: calc((110px / 0.5) * 0.4) 100px; width: calc(110px / 0.5);  }
+.p10c { grid-template-columns: calc((110px / 0.6) * 0.2) 100px calc((110px / 0.6) * 0.2); width: calc(110px / 0.6); }
+.g10.p10c { grid-template-columns: calc((110px / 0.4) * 0.2) 100px calc((110px / 0.4) * 0.2); width: calc(110px / 0.4); }
+.c10  { grid-template-columns: 62.5px 62.5px; }
+.g10.c10  { grid-template-columns: 64.2833px 64.2833px; }
+.c10120  { grid-template-columns: calc(((170px / 0.8) * 0.1) + 50px) calc(((170px / 0.8) * 0.1) + 50px); width: calc(170px / 0.8); }
+.g10.c10120 { grid-template-columns: calc(((170px / 0.7) * 0.1) + 50px) calc(((170px / 0.7) * 0.1) + 50px); width: calc(170px / 0.7); }
+.c10a { grid-template-columns: calc(((170px / 0.8) * 0.1) + 50px) calc(((170px / 0.8) * 0.1) + 50px); width: calc(170px / 0.8); }
+.g10.c10a { grid-template-columns: calc(((170px / 0.7) * 0.1) + 50px) calc(((170px / 0.7) * 0.1) + 50px); width: calc(170px / 0.7); }
+.c10b { grid-template-columns: calc(50px - (170px * 0.1)) calc(50px - (170px * 0.1)); width: 170px; }
+
+.p1x   { grid-template-columns: 0; }
+.p1ax  { grid-template-columns: 0; }
+.p10x  { grid-template-columns: auto auto; }
+.p10ax { grid-template-columns: calc((10px / 0.5) * 0.4) calc((10px / 0.5) * 0.1); width: calc(10px / 0.5); }
+.g10.p10 { width: calc(10px / 0.7); }
+.g10.p10a  { grid-template-columns: calc((20px / 0.4) * 0.4) calc((20px / 0.4) * 0.1); width: calc(20px / 0.4); }
+.g10.p10ax { grid-template-columns: calc((10px / 0.4) * 0.4) calc((10px / 0.4) * 0.1); width: calc(10px / 0.4);  }
+.p10axx{ grid-template-columns: auto auto; }
+.p10bx { grid-template-columns: calc((110px / 0.6) * 0.4) 100px; width: calc(110px / 0.6); }
+.p10bx120 { grid-template-columns: calc((100px / 0.6) * 0.4) 100px; width: calc(100px / 0.6); }
+.g10.p10bx { grid-template-columns: calc((110px / 0.5) * 0.4) 100px; width: calc(110px / 0.5); }
+.g10.p10bx1 { grid-template-columns: calc((100px / 0.5) * 0.4) 100px; width: calc(100px / 0.5); }
+.p10bxx{ grid-template-columns: 66.66667px 100px; }
+.g10.p10bxx{ grid-template-columns: 80px 100px; }
+.p10cx { grid-template-columns: calc((110px / 0.6) * 0.2) 100px calc((110px / 0.6) * 0.2); width: calc(110px / 0.6); }
+.g10.p10cx { grid-template-columns: calc((110px / 0.4) * 0.2) 100px calc((110px / 0.4) * 0.2); width: calc(110px / 0.4); }
+.c10x  { grid-template-columns: 62.5px 62.5px; }
+.g10.c10xx  { grid-template-columns: 64.2833px 64.2833px; }
+.g10.c10x  { grid-template-columns: 64.2833px 64.2833px; }
+.c10xx { grid-template-columns: 62.5px 62.5px; }
+.c10ax { grid-template-columns: calc(((170px / 0.8) * 0.1) + 50px) calc(((170px / 0.8) * 0.1) + 50px) ; width: calc(170px / 0.8); }
+.g10.c10ax { grid-template-columns: calc(((170px / 0.7) * 0.1) + 50px) calc(((170px / 0.7) * 0.1) + 50px) ; width: calc(170px / 0.7); }
+.c10bx { grid-template-columns: calc(50px - (170px * 0.1)) calc(50px - (170px * 0.1)); width: 170px; }
+
+.gneg { grid-gap: 0; grid-template-columns: 10px 10px; width:0; }
+.gneg.c10a { grid-template-columns: 50px 50px; }
+.gneg.p10b { grid-template-columns: 8px 100px; width: 20px; }
+  </style>
+</head>
+<body>
+
+<!-- Note that some of the min-width cases below SHOULD overflow. -->
+
+<div class="p1"><span></span></div>
+<div class="p1x"><x></x></div>
+<div class="p10"><span></span></div>
+<div class="p10x"><x></x></div>
+<div class="p1a"><span></span></div>
+<div class="p1ax"><x></x></div>
+<div class="p10a"><span></span><span></span></div>
+<div class="p10ax"><x></x><span></span></div>
+<div class="p10axx"><x></x><x></x></div>
+<div class="p10b"><span></span><span></span></div>
+<div class="p10bx"><span></span><x></x></div>
+<div class="p10bxx"><x></x><x></x></div>
+<div class="p10b"><span></span><span style="min-width:80px"></span></div>
+<div class="p10bx120"><x></x><span style="min-width:120px"></span></div>
+<div class="p10c"><span></span><span></span></div>
+<div class="p10cx"><span></span><x></x></div>
+<div class="c10"><span></span><span></span></div>
+<div class="c10xx"><x></x><x></x></div>
+<div class="c10120"><span></span><span style="min-width:120px"></span></div>
+<div class="c10x"><x></x><span></span></div>
+<div class="c10a"><span></span><span style="min-width:120px"></span></div>
+<div class="c10ax"><x></x><span style="min-width:120px"></span></div>
+<div class="c10b"><span></span><span style="min-width:120px"></span></div>
+<div class="c10bx"><x></x><span style="min-width:120px"></span></div>
+
+
+<div class="g10"><span></span><span></span></div>
+<div class="g10 p1"><span></span></div>
+<div class="g10 p1x"><x></x></div>
+<div class="g10 p10"><span></span></div>
+<div class="g10 p10x"><x></x></div>
+<div class="g10 p1a"><span></span></div>
+<div class="g10 p1ax"><x></x></div>
+<div class="g10 p10a"><span></span><span></span></div>
+<div class="g10 p10ax"><x></x><span></span></div>
+<div class="g10 p10axx"><x></x><x></x></div>
+<div class="g10 p10bx"><span></span><span></span></div>
+<div class="g10 p10bx"><span></span><x></x></div>
+<div class="g10 p10bxx"><x></x><x></x></div>
+<div class="g10 p10b"><span></span><span style="min-width:80px"></span></div>
+<div class="g10 p10bx1"><x></x><span style="min-width:120px"></span></div>
+<div class="g10 p10c"><span></span><span></span></div>
+<div class="g10 p10cx"><span></span><x></x></div>
+<div class="g10 c10"><span></span><span></span></div>
+<div class="g10 c10xx"><x></x><x></x></div>
+<div class="g10 c10120"><span></span><span style="min-width:120px"></span></div>
+<div class="g10 c10x"><x></x><span></span></div>
+<div class="g10 c10a"><span></span><span style="min-width:120px"></span></div>
+<div class="g10 c10ax"><x></x><span style="min-width:120px"></span></div>
+<div class="g10 c10b"><span></span><span style="min-width:120px"></span></div>
+<div class="g10 c10bx"><x></x><span style="min-width:120px"></span></div>
+
+<div class="gneg"><span></span><span></span></div>
+<div class="gneg c10a"><span></span><span></span></div>
+<div class="gneg p10b"><span></span><span></span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <style type="text/css">
+  <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
+  <link rel="match" href="grid-percent-intrinsic-sizing-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  float: left;
+  grid-template-columns: auto auto;
+  grid-template-rows: 5px;
+  height: 5px;
+  border: 1px solid;
+  clear: left;
+  align-content: start;
+  justify-content: start;
+}
+
+span {
+  min-width: 10px;
+  background: grey;
+}
+span:nth-child(2) { background:lime; }
+x { background: blue; }
+x:nth-child(2) { background:pink; }
+
+.g10  { grid-gap:10%; }
+.gneg { grid-gap: calc(10% - 100px); }
+.p1   { grid-template-columns: 10%; }
+.p1a  { grid-template-columns: minmax(10%,auto); }
+.p10  { grid-template-columns: 10% 10%; }
+.p10a { grid-template-columns: minmax(40%,auto) minmax(10%,auto); }
+.p10b { grid-template-columns: minmax(40%,auto) 100px; }
+.p10c { grid-template-columns: minmax(20%,auto) 100px minmax(20%,auto) ; }
+.c10  { grid-template-columns: calc(50px + 10%) calc(50px + 10%); }
+.c10a { grid-template-columns: minmax(calc(50px + 10%), auto) minmax(calc(50px + 10%), auto); }
+.c10b { grid-template-columns: minmax(calc(50px - 10%), auto) minmax(calc(50px - 10%), auto); }
+
+  </style>
+</head>
+<body>
+
+<!-- Note that some of the min-width cases below SHOULD overflow. -->
+
+<div class="p1"><span></span></div>
+<div class="p1"><x></x></div>
+<div class="p10"><span></span></div>
+<div class="p10"><x></x></div>
+<div class="p1a"><span></span></div>
+<div class="p1a"><x></x></div>
+<div class="p10a"><span></span><span></span></div>
+<div class="p10a"><x></x><span></span></div>
+<div class="p10a"><x></x><x></x></div>
+<div class="p10b"><span></span><span></span></div>
+<div class="p10b"><span></span><x></x></div>
+<div class="p10b"><x></x><x></x></div>
+<div class="p10b"><span></span><span style="min-width:80px"></span></div>
+<div class="p10b"><x></x><span style="min-width:120px"></span></div>
+<div class="p10c"><span></span><span></span></div>
+<div class="p10c"><span></span><x></x></div>
+<div class="c10"><span></span><span></span></div>
+<div class="c10"><x></x><x></x></div>
+<div class="c10"><span></span><span style="min-width:120px"></span></div>
+<div class="c10"><x></x><span></span></div>
+<div class="c10a"><span></span><span style="min-width:120px"></span></div>
+<div class="c10a"><x></x><span style="min-width:120px"></span></div>
+<div class="c10b"><span></span><span style="min-width:120px"></span></div>
+<div class="c10b"><x></x><span style="min-width:120px"></span></div>
+
+<div class="g10"><span></span><span></span></div>
+<div class="g10 p1"><span></span></div>
+<div class="g10 p1"><x></x></div>
+<div class="g10 p10"><span></span></div>
+<div class="g10 p10"><x></x></div>
+<div class="g10 p1a"><span></span></div>
+<div class="g10 p1a"><x></x></div>
+<div class="g10 p10a"><span></span><span></span></div>
+<div class="g10 p10a"><x></x><span></span></div>
+<div class="g10 p10a"><x></x><x></x></div>
+<div class="g10 p10b"><span></span><span></span></div>
+<div class="g10 p10b"><span></span><x></x></div>
+<div class="g10 p10b"><x></x><x></x></div>
+<div class="g10 p10b"><span></span><span style="min-width:80px"></span></div>
+<div class="g10 p10b"><x></x><span style="min-width:120px"></span></div>
+<div class="g10 p10c"><span></span><span></span></div>
+<div class="g10 p10c"><span></span><x></x></div>
+<div class="g10 c10"><span></span><span></span></div>
+<div class="g10 c10"><x></x><x></x></div>
+<div class="g10 c10"><span></span><span style="min-width:120px"></span></div>
+<div class="g10 c10"><x></x><span></span></div>
+<div class="g10 c10a"><span></span><span style="min-width:120px"></span></div>
+<div class="g10 c10a"><x></x><span style="min-width:120px"></span></div>
+<div class="g10 c10b"><span></span><span style="min-width:120px"></span></div>
+<div class="g10 c10b"><x></x><span style="min-width:120px"></span></div>
+
+<div class="gneg"><span></span><span></span></div>
+<div class="gneg c10a"><span></span><span></span></div>
+<div class="gneg p10b"><span></span><span></span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-002-ref.html
@@ -0,0 +1,142 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <style type="text/css">
+  <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  float: left;
+  grid-template-rows: auto auto;
+  grid-template-columns: 5px;
+  width: 5px;
+  border: 1px solid;
+  align-content: start;
+  justify-content: start;
+}
+
+span {
+  min-height: 10px;
+  background: grey;
+}
+span:nth-child(2) { background:lime; }
+x { background: blue; }
+x:nth-child(2) { background:pink; }
+
+.g10  { grid-gap:10%; }
+.p1   { grid-template-rows: 10px; height: calc(10px / 0.9); }
+.p1a  { grid-template-rows: 10px; height: calc(10px / 0.9); }
+.p10  { grid-template-rows: 10px 10px; height: calc(10px / 0.8); }
+.p10a { grid-template-rows: calc((20px / 0.5) * 0.4) calc((20px / 0.5) * 0.1); height: calc(20px / 0.5); }
+.p10b { grid-template-rows: calc((110px / 0.6) * 0.4) 100px; height: calc(110px / 0.6); }
+.g10.p10b { grid-template-rows: calc((110px / 0.5) * 0.4) 100px; height: calc(110px / 0.5);  }
+.p10c { grid-template-rows: calc((110px / 0.6) * 0.2) 100px calc((110px / 0.6) * 0.2); height: calc(110px / 0.6); }
+.g10.p10c { grid-template-rows: calc((110px / 0.4) * 0.2) 100px calc((110px / 0.4) * 0.2); height: calc(110px / 0.4); }
+.c10  { grid-template-rows: 62.5px 62.5px; }
+.g10.c10  { grid-template-rows: 64.2833px 64.2833px; }
+.c10120  { grid-template-rows: calc(((170px / 0.8) * 0.1) + 50px) calc(((170px / 0.8) * 0.1) + 50px); height: calc(170px / 0.8); }
+.g10.c10120 { grid-template-rows: calc(((170px / 0.7) * 0.1) + 50px) calc(((170px / 0.7) * 0.1) + 50px); height: calc(170px / 0.7); }
+.c10a { grid-template-rows: calc(((170px / 0.8) * 0.1) + 50px) calc(((170px / 0.8) * 0.1) + 50px); height: calc(170px / 0.8); }
+.g10.c10a { grid-template-rows: calc(((170px / 0.7) * 0.1) + 50px) calc(((170px / 0.7) * 0.1) + 50px); height: calc(170px / 0.7); }
+.c10b { grid-template-rows: calc(50px - (170px * 0.1)) calc(50px - (170px * 0.1)); height: 170px; }
+
+.p1x   { grid-template-rows: 0; }
+.p1ax  { grid-template-rows: 0; }
+.p10x  { grid-template-rows: auto auto; }
+.p10ax { grid-template-rows: calc((10px / 0.5) * 0.4) calc((10px / 0.5) * 0.1); height: calc(10px / 0.5); }
+.g10.p10 { height: calc(10px / 0.7); }
+.g10.p10a  { grid-template-rows: calc((20px / 0.4) * 0.4) calc((20px / 0.4) * 0.1); height: calc(20px / 0.4); }
+.g10.p10ax { grid-template-rows: calc((10px / 0.4) * 0.4) calc((10px / 0.4) * 0.1); height: calc(10px / 0.4);  }
+.p10axx{ grid-template-rows: auto auto; }
+.p10bx { grid-template-rows: calc((110px / 0.6) * 0.4) 100px; height: calc(110px / 0.6); }
+.p10bx120 { grid-template-rows: calc((100px / 0.6) * 0.4) 100px; height: calc(100px / 0.6); }
+.g10.p10bx { grid-template-rows: calc((110px / 0.5) * 0.4) 100px; height: calc(110px / 0.5); }
+.g10.p10bx1 { grid-template-rows: calc((100px / 0.5) * 0.4) 100px; height: calc(100px / 0.5); }
+.p10bxx{ grid-template-rows: 66.66667px 100px; }
+.g10.p10bxx{ grid-template-rows: 80px 100px; }
+.p10cx { grid-template-rows: calc((110px / 0.6) * 0.2) 100px calc((110px / 0.6) * 0.2); height: calc(110px / 0.6); }
+.g10.p10cx { grid-template-rows: calc((110px / 0.4) * 0.2) 100px calc((110px / 0.4) * 0.2); height: calc(110px / 0.4); }
+.c10x  { grid-template-rows: 62.5px 62.5px; }
+.g10.c10xx  { grid-template-rows: 64.2833px 64.2833px; }
+.g10.c10x  { grid-template-rows: 64.2833px 64.2833px; }
+.c10xx { grid-template-rows: 62.5px 62.5px; }
+.c10ax { grid-template-rows: calc(((170px / 0.8) * 0.1) + 50px) calc(((170px / 0.8) * 0.1) + 50px) ; height: calc(170px / 0.8); }
+.g10.c10ax { grid-template-rows: calc(((170px / 0.7) * 0.1) + 50px) calc(((170px / 0.7) * 0.1) + 50px) ; height: calc(170px / 0.7); }
+.c10bx { grid-template-rows: calc(50px - (170px * 0.1)) calc(50px - (170px * 0.1)); height: 170px; }
+
+.gneg { grid-gap: 0; grid-template-rows: 10px 10px; height:0; }
+.gneg.c10a { grid-template-rows: 50px 50px; }
+.gneg.p10b { grid-template-rows: 8px 100px; height: 20px; }
+  </style>
+</head>
+<body>
+
+<!-- Note that some of the min-height cases below SHOULD overflow. -->
+
+<div class="p1"><span></span></div>
+<div class="p1x"><x></x></div>
+<div class="p10"><span></span></div>
+<div class="p10x"><x></x></div>
+<div class="p1a"><span></span></div>
+<div class="p1ax"><x></x></div>
+<div class="p10a"><span></span><span></span></div>
+<div class="p10ax"><x></x><span></span></div>
+<div class="p10axx"><x></x><x></x></div>
+<div class="p10b"><span></span><span></span></div>
+<div class="p10bx"><span></span><x></x></div>
+<div class="p10bxx"><x></x><x></x></div>
+<div class="p10b"><span></span><span style="min-height:80px"></span></div>
+<div class="p10bx120"><x></x><span style="min-height:120px"></span></div>
+<div class="p10c"><span></span><span></span></div>
+<div class="p10cx"><span></span><x></x></div>
+<div class="c10"><span></span><span></span></div>
+<div class="c10xx"><x></x><x></x></div>
+<div class="c10120"><span></span><span style="min-height:120px"></span></div>
+<div class="c10x"><x></x><span></span></div>
+<div class="c10a"><span></span><span style="min-height:120px"></span></div>
+<div class="c10ax"><x></x><span style="min-height:120px"></span></div>
+<div class="c10b"><span></span><span style="min-height:120px"></span></div>
+<div class="c10bx"><x></x><span style="min-height:120px"></span></div>
+
+
+<div class="g10"><span></span><span></span></div>
+<div class="g10 p1"><span></span></div>
+<div class="g10 p1x"><x></x></div>
+<div class="g10 p10"><span></span></div>
+<div class="g10 p10x"><x></x></div>
+<div class="g10 p1a"><span></span></div>
+<div class="g10 p1ax"><x></x></div>
+<div class="g10 p10a"><span></span><span></span></div>
+<div class="g10 p10ax"><x></x><span></span></div>
+<div class="g10 p10axx"><x></x><x></x></div>
+<div class="g10 p10bx"><span></span><span></span></div>
+<div class="g10 p10bx"><span></span><x></x></div>
+<div class="g10 p10bxx"><x></x><x></x></div>
+<div class="g10 p10b"><span></span><span style="min-height:80px"></span></div>
+<div class="g10 p10bx1"><x></x><span style="min-height:120px"></span></div>
+<div class="g10 p10c"><span></span><span></span></div>
+<div class="g10 p10cx"><span></span><x></x></div>
+<div class="g10 c10"><span></span><span></span></div>
+<div class="g10 c10xx"><x></x><x></x></div>
+<div class="g10 c10120"><span></span><span style="min-height:120px"></span></div>
+<div class="g10 c10x"><x></x><span></span></div>
+<div class="g10 c10a"><span></span><span style="min-height:120px"></span></div>
+<div class="g10 c10ax"><x></x><span style="min-height:120px"></span></div>
+<div class="g10 c10b"><span></span><span style="min-height:120px"></span></div>
+<div class="g10 c10bx"><x></x><span style="min-height:120px"></span></div>
+
+<div class="gneg"><span></span><span></span></div>
+<div class="gneg c10a"><span></span><span></span></div>
+<div class="gneg p10b"><span></span><span></span></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-002.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <style type="text/css">
+  <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
+  <link rel="match" href="grid-percent-intrinsic-sizing-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  float: left;
+  grid-template-rows: auto auto;
+  grid-template-columns: 5px;
+  width: 5px;
+  border: 1px solid;
+  align-content: start;
+  justify-content: start;
+}
+
+span {
+  min-height: 10px;
+  background: grey;
+}
+span:nth-child(2) { background:lime; }
+x { background: blue; }
+x:nth-child(2) { background:pink; }
+
+.g10  { grid-gap:10%; }
+.gneg { grid-gap: calc(10% - 100px); }
+.p1   { grid-template-rows: 10%; }
+.p1a  { grid-template-rows: minmax(10%,auto); }
+.p10  { grid-template-rows: 10% 10%; }
+.p10a { grid-template-rows: minmax(40%,auto) minmax(10%,auto); }
+.p10b { grid-template-rows: minmax(40%,auto) 100px; }
+.p10c { grid-template-rows: minmax(20%,auto) 100px minmax(20%,auto) ; }
+.c10  { grid-template-rows: calc(50px + 10%) calc(50px + 10%); }
+.c10a { grid-template-rows: minmax(calc(50px + 10%), auto) minmax(calc(50px + 10%), auto); }
+.c10b { grid-template-rows: minmax(calc(50px - 10%), auto) minmax(calc(50px - 10%), auto); }
+
+  </style>
+</head>
+<body>
+
+<!-- Note that some of the min-height cases below SHOULD overflow. -->
+
+<div class="p1"><span></span></div>
+<div class="p1"><x></x></div>
+<div class="p10"><span></span></div>
+<div class="p10"><x></x></div>
+<div class="p1a"><span></span></div>
+<div class="p1a"><x></x></div>
+<div class="p10a"><span></span><span></span></div>
+<div class="p10a"><x></x><span></span></div>
+<div class="p10a"><x></x><x></x></div>
+<div class="p10b"><span></span><span></span></div>
+<div class="p10b"><span></span><x></x></div>
+<div class="p10b"><x></x><x></x></div>
+<div class="p10b"><span></span><span style="min-height:80px"></span></div>
+<div class="p10b"><x></x><span style="min-height:120px"></span></div>
+<div class="p10c"><span></span><span></span></div>
+<div class="p10c"><span></span><x></x></div>
+<div class="c10"><span></span><span></span></div>
+<div class="c10"><x></x><x></x></div>
+<div class="c10"><span></span><span style="min-height:120px"></span></div>
+<div class="c10"><x></x><span></span></div>
+<div class="c10a"><span></span><span style="min-height:120px"></span></div>
+<div class="c10a"><x></x><span style="min-height:120px"></span></div>
+<div class="c10b"><span></span><span style="min-height:120px"></span></div>
+<div class="c10b"><x></x><span style="min-height:120px"></span></div>
+
+<div class="g10"><span></span><span></span></div>
+<div class="g10 p1"><span></span></div>
+<div class="g10 p1"><x></x></div>
+<div class="g10 p10"><span></span></div>
+<div class="g10 p10"><x></x></div>
+<div class="g10 p1a"><span></span></div>
+<div class="g10 p1a"><x></x></div>
+<div class="g10 p10a"><span></span><span></span></div>
+<div class="g10 p10a"><x></x><span></span></div>
+<div class="g10 p10a"><x></x><x></x></div>
+<div class="g10 p10b"><span></span><span></span></div>
+<div class="g10 p10b"><span></span><x></x></div>
+<div class="g10 p10b"><x></x><x></x></div>
+<div class="g10 p10b"><span></span><span style="min-height:80px"></span></div>
+<div class="g10 p10b"><x></x><span style="min-height:120px"></span></div>
+<div class="g10 p10c"><span></span><span></span></div>
+<div class="g10 p10c"><span></span><x></x></div>
+<div class="g10 c10"><span></span><span></span></div>
+<div class="g10 c10"><x></x><x></x></div>
+<div class="g10 c10"><span></span><span style="min-height:120px"></span></div>
+<div class="g10 c10"><x></x><span></span></div>
+<div class="g10 c10a"><span></span><span style="min-height:120px"></span></div>
+<div class="g10 c10a"><x></x><span style="min-height:120px"></span></div>
+<div class="g10 c10b"><span></span><span style="min-height:120px"></span></div>
+<div class="g10 c10b"><x></x><span style="min-height:120px"></span></div>
+
+<div class="gneg"><span></span><span></span></div>
+<div class="gneg c10a"><span></span><span></span></div>
+<div class="gneg p10b"><span></span><span></span></div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html
@@ -33,19 +33,21 @@ fit .r3 { grid-template-columns: [a] rep
 .w40 { width: 40px; }
 .w42 { width: 42px; }
 .w64 { width: 64px; }
 .w20 { width: 20px; }
 .w80 { width: 80px; }
 .w90 { width: 90px; }
 .mw100 { min-width: 100px; }
 .mw50 { min-width: 50px; }
+.mw42 { min-width: 42px; }
 .mw80 { min-width: 80px; }
 .xw100 { max-width: 100px; }
 .xw50 { max-width: 50px; }
+.xw42 { max-width: 42px; }
 .xw80 { max-width: 80px; }
 .pw10 { width: 10%; }
 .pxw10 { max-width: 10%; }
 .pmw10 { min-width: 10%; }
 .cw10 { width: calc(50px + 10%); }
 .cxw10 { max-width: calc(50px + 10%); }
 .cmw10 { min-width: calc(50px - 10%); }
 .float { float: left; }
@@ -89,16 +91,20 @@ fill,fit {
 .r2.c0 { grid-template-columns:  30px [e];}
 .r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
 .r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
 
 .r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 .r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; }
 .r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 
+.zero-progress {
+  grid-column-gap: calc(10px - 1%);
+  grid-template-columns: [a] 10px repeat(3, [b] 0 [c]) [d];
+}
 </style>
 </head>
 <body>
 
 <fill>
 
 <div class="grid r1 c18"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
@@ -110,16 +116,19 @@ fill,fit {
 <div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 mw80 float c4"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 mw50 float c4"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 mw100 w50 float c4"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w42 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw42 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw42 float c2"><x></x><x></x><a></a><b></b><x></x></div>
 
 <br clear="all">
 
 <div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 c2 w42 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div>
@@ -242,13 +251,25 @@ fill,fit {
 <div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
 
 <br clear="all">
 <br clear="all">
 
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
 </fit>
 
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html
@@ -28,16 +28,19 @@ html,body {
 .r3 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
 fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
 fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 
 .w100 { width: 100px; }
 .w50 { width: 50px; }
 .w80 { width: 80px; }
+.w42 { width: 42px; }
+.xw42 { max-width: 42px; }
+.mw42 { min-width: 42px; }
 .mw100 { min-width: 100px; }
 .mw50 { min-width: 50px; }
 .mw80 { min-width: 80px; }
 .xw100 { max-width: 100px; }
 .xw50 { max-width: 50px; }
 .xw80 { max-width: 80px; }
 .pw10 { width: 10%; }
 .pxw10 { max-width: 10%; }
@@ -70,16 +73,21 @@ x:first-child {
 x:last-child {
   background: blue;
 }
 
 fill,fit {
   float: left;
   width: 400px;
 }
+
+.zero-progress {
+  grid-column-gap: calc(10px - 1%);
+  grid-template-columns: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d];
+}
 </style>
 </head>
 <body>
 
 <fill>
 
 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
@@ -91,16 +99,19 @@ fill,fit {
 <div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w42 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw42 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw42 float"><x></x><x></x><a></a><b></b><x></x></div>
 
 <br clear="all">
 
 <div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div>
@@ -219,13 +230,25 @@ fill,fit {
 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
 
 <br clear="all">
 <br clear="all">
 
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
 </fit>
 
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
@@ -75,16 +75,25 @@ x:first-child {
 x:last-child {
   background: blue;
 }
 
 fill,fit {
   float: left;
   height: 400px;
 }
+
+.zero-progress {
+  grid-row-gap: calc(10px - 1%);
+  grid-template-rows: [a] 10px repeat(1, [b] 0 [c]) [d];
+}
+.w50.zero-progress {
+  grid-row-gap: calc(10px - 1%);
+  grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
+}
 </style>
 </head>
 <body>
 
 <fill>
 
 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
@@ -178,13 +187,25 @@ fill,fit {
 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
 
 <br clear="all">
 <br clear="all">
 
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
 </fit>
 
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html
@@ -67,16 +67,21 @@ x:first-child {
 x:last-child {
   background: blue;
 }
 
 fill,fit {
   float: left;
   height: 400px;
 }
+
+.zero-progress {
+  grid-row-gap: calc(10px - 1%);
+  grid-template-rows: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d];
+}
 </style>
 </head>
 <body>
 
 <fill>
 
 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
@@ -170,13 +175,25 @@ fill,fit {
 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
 
 <br clear="all">
 <br clear="all">
 
+<div style="float:left">
+  <div class="grid xw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid w50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+  <div class="grid mw50 zero-progress">
+    <x></x><x></x><a></a><b></b><x></x>
+  </div>
+</div>
+
 </fit>
 
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
@@ -3,72 +3,83 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html><head>
   <meta charset="utf-8">
   <title>Reference: Percent track sizes</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607">
   <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:32px; padding:0; margin:0; }
+body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: grid;
   float: left;
   border: 3px solid;
-  grid-template-columns: auto;
-  grid-template-rows: auto;
+  grid-template-columns: calc((30px / 0.4) * 0.6);
+  width: calc(30px / 0.4);
+  grid-template-rows: calc(((15px / 0.6) * 0.4)) 10px;
   margin-right: 20px;
   grid-auto-rows: 10px;
-}
-.sz {
-  width: 100px;
-  height: 100px;
+  align-content: start;
+  justify-content: start;
 }
 
 span {
   background: grey;
   min-width: 0;
   min-height: 0;
   line-height: 0;
   align-self: start;
   justify-self: start;
 }
 t {
   display: inline-block;
   width: 30px;
-  height: 10px;
+  height: 5px;
 }
 x {
   background: lime;
   min-width: 0;
   min-height: 0;
 }
 
 .tA {
   grid-template-columns: 30px;
+  width: auto;
 }
 .tB {
   grid-template-columns: 30px;
-  grid-template-rows: 0;
+  grid-template-rows: calc(10px / 0.6 - 10px) 10px; 
 }
 
-.t0 x, .t2 x, .t6 x, .t7 x, .t9 x, .tB x { width: 18px }
-.t1 x { width: 28px }
-.t3 x, .t4 x, .t8 x { width: 0 }
+.t0, .t2, .t6, .t7 { height: calc(15px / 0.6); }
+.t1 {
+  grid-template-rows: calc(20px / 0.6 - 10px) 10px;
+  grid-template-columns: calc(((30px / 0.4) * 0.6) + 10px);
+}
+.t3, .t4, .t8 { grid: auto 10px / auto; width: auto; }
+.t5 { width: 30px; height: 20px; }
+.t9 { width: 30px; grid-template-rows: 5px 10px; }
+
+.t9 x { width: 18px }
+.t3 x, .t4 x, .t8 x, .tA x { width: 0 }
 .t5 x { width: 10px }
-.tA x { width: 48px }
+.tB x { width: 45px }
 
 .sz {
   grid-template-rows: 40px;
+  width: 100px;
+  height: 100px;
 }
 .sz.t1 { grid-template-rows: 50px; }
 .sz.t3, .sz.t4 { grid-template-rows: 0; }
 .sz.t5 { grid-template-rows: 10px; }
-.sz.tA { grid-template-rows: 140px; }
+.sz.t9 { grid-template-rows: 40px 10px; height:100px; }
+.sz.tA { grid: 0 0 / 0; }
 .sz.tB {
   grid-template-columns: 60px;
   grid-template-rows: 40px;
 }
 
 .sz x { width: 60px; }
 .sz.t1 x { width: 70px; }
 .sz.t3 x, .sz.t4 x, .sz.t8 x { width: 0 }
@@ -109,14 +120,14 @@ x {
 <div class="grid sz t4"><span><t></t></span><x></x></div>
 <div class="grid sz t5"><span><t></t></span><x></x></div>
 <div class="grid sz t6"><span><t></t></span><x></x></div>
 <div class="grid sz t7"><span><t></t></span><x></x></div>
 <div class="grid sz t8"><span><t></t></span><x></x></div>
 <div class="grid sz t9"><span><t></t></span><x></x></div>
 <div class="grid sz tA"><span><t></t></span><x></x></div>
 <div class="grid sz tB"><span><t></t></span><x></x></div>
-<div class="grid sz tC"><span><t></t></span><x style="grid-area:2/1;height:10px; width:5px"></x></div>
-<div class="grid sz tD"><span><t></t></span><x style="grid-area:1/1;height:10px; width:100px"></x></div>
-<div class="grid sz tD"><span><t></t></span><x style="grid-area:1/1;height:10px; width:100px"></x></div>
+<div class="grid sz tC"><span><t></t></span><x style="height:10px; width:5px"></x></div>
+<div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div>
+<div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-track-percent-sizing-001.html
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001.html
@@ -5,26 +5,28 @@
 -->
 <html><head>
   <meta charset="utf-8">
   <title>CSS Grid Test: Percent track sizes</title>
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607">
   <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-percentage">
   <link rel="match" href="grid-track-percent-sizing-001-ref.html">
   <style type="text/css">
-body,html { color:black; background:white; font-family:monospace; font-size:32px; padding:0; margin:0; }
+body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: grid;
   float: left;
   border: 3px solid;
   grid-template-columns: 60%;
   grid-template-rows: 40%;
   margin-right: 20px;
   grid-auto-rows: 10px;
+  align-content: start;
+  justify-content: start;
 }
 .sz {
   width: 100px;
   height: 100px;
 }
 
 .t1 {
   grid-template-columns: calc(10px + 60%);
@@ -58,45 +60,44 @@ body,html { color:black; background:whit
   grid-template-columns: calc(0% + 0%);
   grid-template-rows: calc(0% + 0%);
 }
 .t9 {
   grid-template-columns: minmax(0, 60%);
   grid-template-rows: minmax(0, 40%);
 }
 .tA {
-  grid-template-columns: 160%;
-  grid-template-rows: 140%;
+  grid-template-columns: calc(10px - 200%);
+  grid-template-rows: calc(10px - 99%);
 }
 .tB {
   grid-template-columns: minmax(60%, 0);
   grid-template-rows: minmax(40%, 0);
 }
 .tC {
   grid-template-columns: calc(10px - 5%);
   grid-template-rows: calc(10px - 5%);
 }
 .tD {
   grid-template-columns: calc(10px - 40%);
   grid-template-rows: calc(10px - 40%);
 }
 
-
 span {
   background: grey;
   min-width: 0;
   min-height: 0;
   line-height: 0;
   align-self: start;
   justify-self: start;
 }
 t {
   display: inline-block;
   width: 30px;
-  height: 10px;
+  height: 5px;
 }
 x {
   background: lime;
   min-width: 0;
   min-height: 0;
 }
 
   </style>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -222,8 +222,10 @@ asserts(1-10) == grid-fragmentation-dyn4
 == grid-fragmentation-dyn3-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn4-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn5-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn1-029.html grid-fragmentation-029-ref.html
 == grid-fragmentation-dyn2-029.html grid-fragmentation-029-ref.html
 == grid-fragmentation-dyn2-030.html grid-fragmentation-030-ref.html
 == grid-fragmentation-dyn2-031.html grid-fragmentation-031-ref.html
 == bug1306106.html bug1306106-ref.html
+== grid-percent-intrinsic-sizing-001.html grid-percent-intrinsic-sizing-001-ref.html
+== grid-percent-intrinsic-sizing-002.html grid-percent-intrinsic-sizing-002-ref.html