Bug 1330380 part 3 - Add more reftests using percentages in various properties.
authorMats Palmgren <mats@mozilla.com>
Sat, 14 Jan 2017 01:05:53 +0100
changeset 374451 442504607f46283553062da3135f56b7718145ba
parent 374450 12789bb38582c97d158d8d1adbae9d44318bc408
child 374452 4dc794806128e77d96d05cc730533953466e594f
push id6996
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 20:48:21 +0000
treeherdermozilla-beta@d89512dab048 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1330380
milestone53.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 1330380 part 3 - Add more reftests using percentages in various properties.
layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html
layout/reftests/css-grid/grid-item-sizing-percent-002.html
layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html
layout/reftests/css-grid/grid-item-sizing-percent-003.html
layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html
layout/reftests/css-grid/grid-item-sizing-percent-004.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+}
+.c1 {
+  width: 60px;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 25px; }
+.minw .item { min-width: 25px; }
+.maxw .c1.item { max-width: 75px; }
+.minw .c1.item { min-width: 75px; }
+.maxw .c2.item { max-width: 75px; }
+.minw .c2.item { min-width: 75px; }
+
+.p { padding:3px 5px 10% 10px; }
+.c1.p, .c2.p { padding:3px 5px 10% 30px; }
+.m { margin:3px 5px 10% 5px; }
+.c1.m, .c2.m { margin:3px 5px 10% 15px; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(8px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(11px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-002.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-002-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 50%; }
+.minw .item { min-width: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<script>
+var grids = [].slice.call(document.querySelectorAll('.grid'));
+grids.forEach((grid) => {
+  console.log(window.getComputedStyle(grid).gridTemplateRows);
+});
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 25px; }
+.minw .item { min-width: 25px; }
+.maxw .c1.item { max-width: 75px; }
+.minw .c1.item { min-width: 75px; }
+.maxw .c2.item { max-width: 75px; }
+.minw .c2.item { min-width: 75px; }
+
+.p { padding:3px 5px 10% 10px; }
+.c1.p, .c2.p { padding:3px 5px 10% 30px; }
+.m { margin:3px 5px 10% 5px; }
+.c1.m, .c2.m { margin:3px 5px 10% 15px; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/0.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-003.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-003-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: grid;
+  position: relative;
+  float: left;
+  background-color: grey;
+  grid-template-columns: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-width: 50%; }
+.minw .item { min-width: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<script>
+var grids = [].slice.call(document.querySelectorAll('.grid'));
+grids.forEach((grid) => {
+  console.log(window.getComputedStyle(grid).gridTemplateRows);
+});
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background-color: grey;
+  grid-template-rows: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 90px;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-height: 50%; }
+.minw .item { min-height: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(43.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(51.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid" style="grid-template-columns:calc(35px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(57.15px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(46px/.7)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(46px/.7)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-sizing-percent-004.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing grid item percent sizes</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
+  <link rel="match" href="grid-item-sizing-percent-004-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+* { vertical-align:top; line-height:4px; }
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background-color: grey;
+  grid-template-rows: 50px 100px;
+  justify-items: start;
+  align-items: start;
+  clear: both;
+}
+
+.item {
+  background: pink;
+  grid-area: 1 / 1 / 2 / 2;
+  background-clip: content-box;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  writing-mode: vertical-rl;
+}
+.c1 {
+  width: 40%;
+  height: 60%;
+  grid-area: 1 / 1 / 3 / 3;
+}
+.c2 {
+  grid-area: 1 / 1 / 3 / 3;
+}
+.pbox {
+  box-sizing: border-box;
+}
+
+.maxw .item { max-height: 50%; }
+.minw .item { min-height: 50%; }
+
+.p { padding:3px 5px 10% 20%; }
+.m { margin:3px 5px 10% 10%; }
+.b { border:solid black; }
+
+x { display:inline-block; width:10px; height:4px; background: silver; }
+
+a {
+  grid-area: 1 / 1 / 2 / 2;
+  width:100%; height:100%;
+  background: blue;
+}
+</style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<br clear="all">
+
+<div style="float:left" class="maxw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<div style="float:left" class="minw">
+<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
+</div>
+
+<script>
+var grids = [].slice.call(document.querySelectorAll('.grid'));
+grids.forEach((grid) => {
+  console.log(window.getComputedStyle(grid).gridTemplateColumns);
+});
+</script>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -40,16 +40,19 @@ skip-if(Android) == grid-placement-defin
 skip-if(Android) fuzzy-if(winWidget,1,32) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
 == grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html
 == rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html
 == rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html
 == vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001-ref.html
 == vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001-ref.html
 == grid-relpos-items-001.html grid-relpos-items-001-ref.html
 == grid-item-sizing-percent-001.html grid-item-sizing-percent-001-ref.html
+== grid-item-sizing-percent-002.html grid-item-sizing-percent-002-ref.html
+== grid-item-sizing-percent-003.html grid-item-sizing-percent-003-ref.html
+== grid-item-sizing-percent-004.html grid-item-sizing-percent-004-ref.html
 == grid-item-sizing-px-001.html grid-item-sizing-percent-001-ref.html
 == grid-item-dir-001.html grid-item-dir-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
 fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
 == grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
 == grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002-ref.html
 fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
 == grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html