Bug 1264607 part 2 - Reftests for grid track sizing involving percent.
authorMats Palmgren <mats@mozilla.com>
Sat, 16 Apr 2016 18:16:25 +0200
changeset 331406 6fbfa5372b24e58f2ed43b8e7633c6faa33f336c
parent 331405 cb17b758fee2b02e615599c7b2e33f7d02255612
child 331407 65c479a6077561d33f89ae8808bbcd3615c28176
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1264607
milestone48.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 1264607 part 2 - Reftests for grid track sizing involving percent.
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
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<!--
+     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; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 3px solid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  margin-right: 20px;
+  grid-auto-rows: 10px;
+}
+.sz {
+  width: 100px;
+  height: 100px;
+}
+
+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;
+}
+x {
+  background: lime;
+  min-width: 0;
+  min-height: 0;
+}
+
+.tA {
+  grid-template-columns: 30px;
+}
+.tB {
+  grid-template-columns: 0;
+  grid-template-rows: 0;
+}
+
+.t0 x, .t2 x, .t6 x, .t7 x, .t9 x { width: 18px }
+.t1 x { width: 28px }
+.t3 x, .t4 x, .t8 x { width: 0 }
+.t5 x { width: 10px }
+.tA x { width: 48px }
+
+.sz {
+  grid-template-rows: 40px;
+}
+.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.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 }
+.sz.t5 x { width: 10px }
+.sz.tA x { width: 160px }
+
+  </style>
+</head>
+<body>
+
+<div class="grid t0"><span><t></t></span><x></x></div>
+<div class="grid t1"><span><t></t></span><x></x></div>
+<div class="grid t2"><span><t></t></span><x></x></div>
+<div class="grid t3"><span><t></t></span><x></x></div>
+<div class="grid t4"><span><t></t></span><x></x></div>
+<div class="grid t5"><span><t></t></span><x></x></div>
+<div class="grid t6"><span><t></t></span><x></x></div>
+<div class="grid t7"><span><t></t></span><x></x></div>
+<div class="grid t8"><span><t></t></span><x></x></div>
+<div class="grid t9"><span><t></t></span><x></x></div>
+<div class="grid tA"><span><t></t></span><x></x></div>
+<div class="grid tB"><span><t></t></span><x></x></div>
+
+<br clear="all">
+
+<div class="grid sz t0"><span><t></t></span><x></x></div>
+<div class="grid sz t1"><span><t></t></span><x></x></div>
+<div class="grid sz t2"><span><t></t></span><x></x></div>
+<div class="grid sz t3"><span><t></t></span><x></x></div>
+<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>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-track-percent-sizing-001.html
@@ -0,0 +1,127 @@
+<!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: 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; }
+
+.grid {
+  display: grid;
+  float: left;
+  border: 3px solid;
+  grid-template-columns: 60%;
+  grid-template-rows: 40%;
+  margin-right: 20px;
+  grid-auto-rows: 10px;
+}
+.sz {
+  width: 100px;
+  height: 100px;
+}
+
+.t1 {
+  grid-template-columns: calc(10px + 60%);
+  grid-template-rows: calc(10px + 40%);
+}
+.t2 {
+  grid-template-columns: calc(60%);
+  grid-template-rows: calc(40%);
+}
+.t3 {
+  grid-template-columns: calc(0%);
+  grid-template-rows: calc(0%);
+}
+.t4 {
+  grid-template-columns: 0%;
+  grid-template-rows: 0%;
+}
+.t5 {
+  grid-template-columns: calc(10px + 0%);
+  grid-template-rows: calc(10px + 0%);
+}
+.t6 {
+  grid-template-columns: calc(0px + 60%);
+  grid-template-rows: calc(0px + 40%);
+}
+.t7 {
+  grid-template-columns: calc(0% + 60%);
+  grid-template-rows: calc(0% + 40%);
+}
+.t8 {
+  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%;
+}
+.tB {
+  grid-template-columns: minmax(60%, 0);
+  grid-template-rows: minmax(40%, 0);
+}
+
+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;
+}
+x {
+  background: lime;
+  min-width: 0;
+  min-height: 0;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid"   ><span><t></t></span><x></x></div>
+<div class="grid t1"><span><t></t></span><x></x></div>
+<div class="grid t2"><span><t></t></span><x></x></div>
+<div class="grid t3"><span><t></t></span><x></x></div>
+<div class="grid t4"><span><t></t></span><x></x></div>
+<div class="grid t5"><span><t></t></span><x></x></div>
+<div class="grid t6"><span><t></t></span><x></x></div>
+<div class="grid t7"><span><t></t></span><x></x></div>
+<div class="grid t8"><span><t></t></span><x></x></div>
+<div class="grid t9"><span><t></t></span><x></x></div>
+<div class="grid tA"><span><t></t></span><x></x></div>
+<div class="grid tB"><span><t></t></span><x></x></div>
+
+<br clear="all">
+
+<div class="grid sz"   ><span><t></t></span><x></x></div>
+<div class="grid sz t1"><span><t></t></span><x></x></div>
+<div class="grid sz t2"><span><t></t></span><x></x></div>
+<div class="grid sz t3"><span><t></t></span><x></x></div>
+<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>
+
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -56,16 +56,17 @@ fuzzy-if(winWidget,1,36) == grid-auto-mi
 == grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
 == grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
 == 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-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