Bug 1299133 - [css-grid] fit-content() with grid-gap reftests.
authorMats Palmgren <mats@mozilla.com>
Mon, 12 Sep 2016 23:13:09 +0200
changeset 357132 132d071458b764474fab603c2b2f9ac9c1119417
parent 357131 29473298207503f040a5d405982338d67db3ff32
child 357133 87ffc1af99e060f60bb01b6432b938b8009ec89e
push id1324
push usermtabara@mozilla.com
push dateMon, 16 Jan 2017 13:07:44 +0000
treeherdermozilla-release@a01c49833940 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1299133
milestone51.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 1299133 - [css-grid] fit-content() with grid-gap reftests.
layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html
layout/reftests/css-grid/grid-track-fit-content-sizing-002.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html
@@ -0,0 +1,148 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: fit-content() track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  justify-content: start;
+  position: relative;
+  border: 1px solid;
+}
+
+.c1 { grid-template-columns: fit-content(40%) 25px minmax(100px, 1fr); }
+.c2 { grid-template-columns: fit-content(40%) 25px 0 25px minmax(100px, 1fr); }
+.c3 { grid-template-columns: fit-content(40%) 25px fit-content(40%) 25px minmax(0px, 1fr); }
+.c4 { grid-template-columns: fit-content(40%) 25px 100px 25px minmax(100px, 1fr); }
+.c5 { grid-template-columns: fit-content(40%) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); }
+.c6 { grid-template-columns: fit-content(calc(1px - 99%)) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); }
+.c7 { grid-template-columns: fit-content(40%) 25px fit-content(40%); }
+
+span {
+  grid-column: 1 / span 3;
+  grid-row: 2;
+  height: 2px;
+  background: lime;
+  min-width: 50px;
+}
+.c1 span { grid-column:1; }
+
+a {
+  display: inline-block;
+  width: 50px;
+  height: 1px;
+}
+
+y {
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 2px;
+    background: purple;
+    grid-column: 1 / 2;
+}
+y:nth-of-type(2n) { background: orange; grid-column: 3 / 4; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+
+<div style="width:502px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:442px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:382px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:322px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:262px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:202px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:142px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:82px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:22px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:2px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html
@@ -0,0 +1,151 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: fit-content() track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content">
+  <link rel="match" href="grid-track-fit-content-sizing-002-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-auto-rows: 5px;
+  grid-column-gap: 25px;
+  justify-content: start;
+  position: relative;
+  border: 1px solid;
+}
+
+.c1 { grid-template-columns: fit-content(40%) minmax(100px, 1fr); }
+.c2 { grid-template-columns: fit-content(40%) 0 minmax(100px, 1fr); }
+.c3 { grid-template-columns: fit-content(40%) fit-content(40%) minmax(0px, 1fr); }
+.c4 { grid-template-columns: fit-content(40%) 100px minmax(100px, 1fr); }
+.c5 { grid-template-columns: fit-content(40%) minmax(0, 1fr) minmax(100px, 1fr); }
+.c6 { grid-template-columns: fit-content(calc(1px - 99%)) minmax(0, 1fr) minmax(100px, 1fr); }
+.c7 { grid-template-columns: none; grid-auto-columns: fit-content(40%); }
+
+span {
+  grid-column: 1 / span 2;
+  grid-row: 2;
+  height: 2px;
+  background: lime;
+  min-width: 50px;
+}
+.c1 span { grid-column:1; }
+
+a {
+  display: inline-block;
+  width: 50px;
+  height: 1px;
+}
+
+y {
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 2px;
+    background: purple;
+    grid-column: 1 / 2;
+}
+y:nth-of-type(2n) { background: orange; grid-column: 2 / 3; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+
+<div style="width:502px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:442px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:382px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:322px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:262px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:202px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:142px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:82px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:22px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+<div style="width:2px">
+<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -58,16 +58,17 @@ fuzzy-if(winWidget,1,36) == grid-auto-mi
 == grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html
 == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html
 == grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
 == grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
 == grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html
 == grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html
 == grid-track-percent-sizing-001.html grid-track-percent-sizing-001-ref.html
 == grid-track-fit-content-sizing-001.html grid-track-fit-content-sizing-001-ref.html
+== grid-track-fit-content-sizing-002.html grid-track-fit-content-sizing-002-ref.html
 == grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html
 == grid-max-sizing-flex-002.html grid-max-sizing-flex-002-ref.html
 == grid-max-sizing-flex-003.html grid-max-sizing-flex-003-ref.html
 == grid-max-sizing-flex-004.html grid-max-sizing-flex-004-ref.html
 == grid-max-sizing-flex-005.html grid-max-sizing-flex-005-ref.html
 == grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html
 == grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html
 == grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html