Bug 1227099 - [css-grid] Additional reftests for 'grid-row-gap'.
authorMats Palmgren <mats@mozilla.com>
Sat, 28 Nov 2015 21:37:44 +0100
changeset 308710 9c21587f680ed0fb4b39cd936efba0d5496a5046
parent 308709 fe6ef46be0b15a16a39e04233bbee4b748a3b3c8
child 308711 607f76dd78e71325a3fc72e22caee050cfb8eb98
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1227099
milestone45.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 1227099 - [css-grid] Additional reftests for 'grid-row-gap'.
layout/reftests/css-grid/grid-row-gap-002-ref.html
layout/reftests/css-grid/grid-row-gap-002.html
layout/reftests/css-grid/grid-row-gap-003-ref.html
layout/reftests/css-grid/grid-row-gap-003.html
layout/reftests/css-grid/grid-row-gap-004-ref.html
layout/reftests/css-grid/grid-row-gap-004.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-002-ref.html
@@ -0,0 +1,120 @@
+<!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: 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; width:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "center",
+   "center",
+   "start",
+   "end safe",
+   "start",
+   "center",
+   "end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.height = heights[w]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numRows = parseInt(rows[c]);
+          var gapRows = numRows==0 ? 0 : (numRows-1);
+          numRows += gapRows*parseInt(gaps[g]);
+          span.style.gridRow = "1 / span " + numRows;
+          for (var x = 0; x < numRows; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && rows[c] == 1) { // The 'end safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'end';
+          }
+          if (j == 7 && rows[c] == 1) { // The 'center safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (rows[c] == 1) {
+              if (heights[w] == 0) {
+                if (grid.style.alignContent != 'end') {
+                  grid.style.alignContent = 'start';
+                }
+              } else {
+                grid.style.alignContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-002.html
@@ -0,0 +1,97 @@
+<!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: 'grid-row-gap'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-002-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; width:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end true",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start true",
+   "end true",
+   "center true",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          if (heights[w] != "auto")
+            grid.style.height = heights[w]+"px";
+          grid.style.gridRowGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          span.style.gridRow = "1 / span " + rows[c];
+          grid.appendChild(span);
+          for (var x = 0; x < rows[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-003-ref.html
@@ -0,0 +1,122 @@
+<!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: 'grid-row-gap' sideways-lr</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-lr;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; height:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "center",
+   "center",
+   "start",
+   "end safe",
+   "start",
+   "center",
+   "end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.width = heights[w]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numRows = parseInt(rows[c]);
+          var gapRows = numRows==0 ? 0 : (numRows-1);
+          numRows += gapRows*parseInt(gaps[g]);
+          span.style.gridRow = "1 / span " + numRows;
+          for (var x = 0; x < numRows; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && rows[c] == 1) { // The 'end safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'end';
+          }
+          if (j == 7 && rows[c] == 1) { // The 'center safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (rows[c] == 1) {
+              if (heights[w] == 0) {
+                if (grid.style.alignContent != 'end') {
+                  grid.style.alignContent = 'start';
+                }
+              } else {
+                grid.style.alignContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-003.html
@@ -0,0 +1,99 @@
+<!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: 'grid-row-gap' sideways-lr</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-003-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-lr;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end true",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start true",
+   "end true",
+   "center true",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          if (heights[w] != "auto")
+            grid.style.width = heights[w]+"px";
+          grid.style.gridRowGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          span.style.gridRow = "1 / span " + rows[c];
+          grid.appendChild(span);
+          for (var x = 0; x < rows[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-004-ref.html
@@ -0,0 +1,118 @@
+<!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: 'grid-row-gap' sideways-rl</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-rl;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+.grid .gap { background:transparent; }
+
+x { background: lime; height:7px; }
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "start",
+   "start",
+   "start",
+   "end",
+   "center",
+   "start",
+   "end",
+   "start",
+   "end safe",
+   "center",
+   "center",
+   "start",
+   "end safe",
+   "start",
+   "center",
+   "end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          grid.style.width = heights[w]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          grid.appendChild(span);
+          var numRows = parseInt(rows[c]);
+          var gapRows = numRows==0 ? 0 : (numRows-1);
+          numRows += gapRows*parseInt(gaps[g]);
+          span.style.gridRow = "1 / span " + numRows;
+          for (var x = 0; x < numRows; ++x) {
+            var item = document.createElement('x');
+            if (x % (1+(parseInt(gaps[g]))) != 0)
+              item.className = "gap";
+            grid.appendChild(item);
+          }
+          if (j < 5) { // The stretch tests.
+            if (c == 1)
+              grid.style.background = 'pink'
+          }
+          if (j == 6 && rows[c] == 1) { // The 'end safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'end';
+          }
+          if (j == 7 && rows[c] == 1) { // The 'center safe' tests.
+            if (heights[w] != 0) grid.style.alignContent = 'center';
+          }
+          if (j > 15) { // The space-around and space-evenly tests.
+            if (rows[c] == 1) {
+              if (heights[w] != 0) {
+                grid.style.alignContent = 'center';
+              }
+            }
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-row-gap-004.html
@@ -0,0 +1,99 @@
+<!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: 'grid-row-gap' sideways-rl</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
+  <link rel="match" href="grid-row-gap-004-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: minmax(1px,auto);
+  grid-template-columns: 0px 7px;
+  border: 2px solid black;
+  float: left;
+  writing-mode: sideways-rl;
+  margin-right:16px
+}
+
+.grid :last-child { background:grey; }
+.grid :nth-child(2) { background:pink; }
+
+x { background: lime; height:7px; }
+
+  </style>
+</head>
+<body>
+
+<script>
+document.body.style.display = "none";
+var align = [
+   "stretch",
+   "stretch end",
+   "stretch center",
+   "stretch end safe",
+   "stretch end true",
+   "start safe",
+   "end safe",
+   "center safe",
+   "start true",
+   "end true",
+   "center true",
+   "space-between",
+   "space-between end",
+   "space-between start",
+   "space-between end safe",
+   "space-around",
+   "space-around center",
+   "space-around right",
+   "space-around right safe",
+   "space-around left",
+   "space-evenly",
+   "space-evenly end",
+];
+var rows = [ "0", "1", "2", "3", "8", "9" ];
+var heights = [ "auto", "0", "1", "5", "6" ];
+var gaps = [ "1", "2" ];
+for (var j = 0; j < align.length; ++j) {
+  // document.body.appendChild(document.createTextNode(align[j])); // for debugging
+  var chunk = document.createElement('div');
+  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
+  for (var c = 0; c < rows.length; ++c) {
+    for (var w = 0; w < heights.length; ++w) {
+      // set this to true if you want to see all tests
+      var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
+      if (run_test) {
+        for (var g = 0; g < gaps.length; ++g) {
+          var grid = document.createElement('div');
+          if (heights[w] != "auto")
+            grid.style.width = heights[w]+"px";
+          grid.style.gridRowGap = gaps[g]+"px";
+          grid.className = "grid";
+          grid.style.alignContent = align[j];
+          var span = document.createElement('span');
+          span.style.gridRow = "1 / span " + rows[c];
+          grid.appendChild(span);
+          for (var x = 0; x < rows[c]; ++x) {
+            grid.appendChild(document.createElement('x'));
+          }
+          chunk.appendChild(grid);
+        }
+      }
+    }
+  }
+  document.body.appendChild(chunk);
+}
+document.body.style.display = "";
+</script>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -68,9 +68,12 @@ fuzzy-if(winWidget,1,36) == grid-auto-mi
 == grid-item-stretch-001.html grid-item-stretch-001-ref.html
 == grid-align-content-001.html grid-align-content-001-ref.html
 == grid-justify-content-001.html grid-justify-content-001-ref.html
 == grid-justify-content-002.html grid-justify-content-002-ref.html
 == grid-justify-content-003.html grid-justify-content-003-ref.html
 == grid-column-gap-001.html grid-column-gap-001-ref.html
 == grid-column-gap-002.html grid-column-gap-002-ref.html
 == grid-column-gap-003.html grid-column-gap-003-ref.html
-== grid-row-gap-001-ref.html grid-row-gap-001-ref.html
+== grid-row-gap-001.html grid-row-gap-001-ref.html
+== grid-row-gap-002.html grid-row-gap-002-ref.html
+== grid-row-gap-003.html grid-row-gap-003-ref.html
+== grid-row-gap-004.html grid-row-gap-004-ref.html