Bug 1314664 part 5 - [css-grid] Tweak reftests. a=jcristau
authorMats Palmgren <mats@mozilla.com>
Tue, 20 Dec 2016 23:56:34 +0100
changeset 353160 a80f31823e23976f46297823e23251f2e2c6f8c4
parent 353159 3043bcf55783def4c64b3328dba326a9b2599d44
child 353161 b0c105fc360fa893453ef47dfe61814f7efa15e7
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-esr52@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjcristau
bugs1314664
milestone52.0a2
Bug 1314664 part 5 - [css-grid] Tweak reftests. a=jcristau
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-002-ref.html
layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
layout/reftests/css-grid/reftest.list
--- a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html
@@ -11,133 +11,65 @@
   <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;
+  margin: 3px;
 }
 
 span {
-  min-width: 10px;
   background: grey;
 }
+.c > span { width: 10px; }
+.r > span { height: 10px; }
+
 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; }
+.c { grid-auto-rows: 5px; }
+.c.p1   { grid-template-columns: 1px; width: 10px; }
+.c.p1a  { grid-template-columns: minmax(10%,auto); }
+.c.p2   { grid-template-columns: 10% 10%; grid-gap: 20%; }
+.c.p2a  { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+.c.c0  { grid-template-columns: 0; }
 
-.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; }
+.r { grid-auto-columns: 5px; grid-auto-flow: column; }
+.r.p1   { grid-template-rows: 10%; }
+.r.p1a  { grid-template-rows: minmax(10%,auto); }
+.r.p2   { grid-template-rows: 10% 10%; grid-gap: 20%; }
+.r.p2a  { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+.r.r0   { grid-template-rows: 0; }
 
-.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="c p1"><span></span><x></x></div>
+<div class="c c0"><x></x></div>
+<div class="c p1a"><span></span><x></x></div>
+<div class="c c0"><x></x></div>
 
-<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="c p2"><span></span><span></span><x></x></div>
+<div class="c c0"><x></x></div>
+<div class="c p2a"><span></span><span></span><x></x></div>
+<div class="c c0"><x></x></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="r p1"><span></span><x></x></div>
+<div class="r r0"><x></x></div>
+<div class="r p1a"><span></span><x></x></div>
+<div class="r r0"><x></x></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>
+<div class="r p2"><span></span><span></span><x></x></div>
+<div class="r r0"><x></x></div>
+<div class="r p2a"><span></span><span></span><x></x></div>
+<div class="r r0"><x></x></div>
 
 </body>
 </html>
--- a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
@@ -12,99 +12,62 @@
   <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;
   place-content: start start;
+  margin: 3px;
 }
 
 span {
-  min-width: 10px;
   background: grey;
 }
+.c > span { width: 10px; }
+.r > span { height: 10px; }
+
 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); }
+.c { grid-auto-rows: 5px; }
+.c.p1   { grid-template-columns: 10%; }
+.c.p1a  { grid-template-columns: minmax(10%,auto); }
+.c.p2   { grid-template-columns: 10% 10%; grid-gap: 20%; }
+.c.p2a  { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
+
+.r { grid-auto-columns: 5px; grid-auto-flow: column; }
+.r.p1   { grid-template-rows: 10%; }
+.r.p1a  { grid-template-rows: minmax(10%,auto); }
+.r.p2   { grid-template-rows: 10% 10%; grid-gap: 20%; }
+.r.p2a  { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
 
   </style>
 </head>
 <body>
 
-<!-- Note that some of the min-width cases below SHOULD overflow. -->
+<div class="c p1"><span></span><x></x></div>
+<div class="c p1"><x></x></div>
+<div class="c p1a"><span></span><x></x></div>
+<div class="c p1a"><x></x></div>
 
-<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="c p2"><span></span><span></span><x></x></div>
+<div class="c p2"><x></x><x></x></div>
+<div class="c p2a"><span></span><span></span><x></x></div>
+<div class="c p2a"><x></x><x></x></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="r p1"><span></span><x></x></div>
+<div class="r p1"><x></x></div>
+<div class="r p1a"><span></span><x></x></div>
+<div class="r p1a"><x></x></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>
+<div class="r p2"><span></span><span></span><x></x></div>
+<div class="r p2"><x></x><x></x></div>
+<div class="r p2a"><span></span><span></span><x></x></div>
+<div class="r p2a"><x></x><x></x></div>
 
 </body>
 </html>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-002-ref.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!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>
deleted file mode 100644
--- a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-002.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!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-002-ref.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
@@ -78,17 +78,17 @@ x:last-child {
 
 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];
+  grid-template-rows: [a] 10px repeat(4, [b] minmax(0,auto) [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>
--- a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
@@ -9,19 +9,19 @@
   <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:1px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: grid;
   float: left;
   border: 3px solid;
-  grid-template-columns: calc((30px / 0.4) * 0.6);
-  width: calc(30px / 0.4);
-  grid-template-rows: calc(((15px / 0.6) * 0.4)) 10px;
+  grid-template-columns: 18px;
+  width: 30px;
+  grid-template-rows: 5px 10px;
   margin-right: 20px;
   grid-auto-rows: 10px;
   align-content: start;
   justify-content: start;
 }
 
 span {
   background: grey;
@@ -43,32 +43,28 @@ x {
 }
 
 .tA {
   grid-template-columns: 30px;
   width: auto;
 }
 .tB {
   grid-template-columns: 30px;
-  grid-template-rows: calc(10px / 0.6 - 10px) 10px; 
+  grid-template-rows: 0 10px; 
 }
 
-.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);
+  grid-template-columns: 28px;
 }
 .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 }
-.tB x { width: 45px }
+.tB x { width: 18px }
 
 .sz {
   grid-template-rows: 40px;
   width: 100px;
   height: 100px;
 }
 .sz.t1 { grid-template-rows: 50px; }
 .sz.t3, .sz.t4 { grid-template-rows: 0; }
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -265,9 +265,8 @@ asserts(1-10) == grid-fragmentation-dyn4
 == 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