Bug 1107786 - part 4, [css-grid] Reftests for the CSS 'order' property on grid items.
authorMats Palmgren <mats@mozilla.com>
Thu, 26 Mar 2015 18:57:39 +0000
changeset 235987 fbbe7bf4392999f3817557d7ce83cf44d5638555
parent 235986 c2c20dfa58f642b911acbb4bdb81fa08c879503d
child 235988 3f5c7e485c60a9834c53c82178b733cdaadf9524
push id28488
push userryanvm@gmail.com
push dateFri, 27 Mar 2015 16:19:11 +0000
treeherdermozilla-central@44e454b5e93b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1107786
milestone39.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 1107786 - part 4, [css-grid] Reftests for the CSS 'order' property on grid items.
layout/reftests/css-grid/grid-order-abspos-items-001-ref.html
layout/reftests/css-grid/grid-order-abspos-items-001.html
layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
layout/reftests/css-grid/grid-order-placement-auto-001.html
layout/reftests/css-grid/grid-order-placement-definite-001-ref.html
layout/reftests/css-grid/grid-order-placement-definite-001.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-abspos-items-001-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 Test: Testing layout and painting of abs.pos. grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { z-index:4; left:74px; right:5px; background:lime; }
+.b { z-index:3; left:54px; right:5px; background:pink; }
+.c { z-index:2; left:34px; right:5px; background:yellow; }
+.d { z-index:1; left:14px; right:5px; background:silver; }
+.e { display:none; }
+
+.abs {
+  position: absolute;
+  top:3px; bottom:1px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.z-1 { z-index:-1; }
+.z1 { z-index:11; }
+.z1.b { z-index:12; }
+.z2 { z-index:13; }
+.z3 { z-index:14; }
+.z4 { z-index:15; }
+x { background:black; order:99; float:right; }
+f { float:left; }
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+.f2 span.e { z-index:-1; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs b">b</span>
+<span class="abs c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div style="order:2">
+  <span class="abs a">a</span>
+  <span class="abs b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs z1 b">b</span>
+<span class="abs z2 c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div style="order:2">
+  <span class="abs a">a</span>
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z1 c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs z2 c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z-1 d">FAIL<x>x</x></span>
+  <span class="abs z1 d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-abspos-items-001.html
@@ -0,0 +1,150 @@
+<!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 Test: Testing layout and painting of abs.pos. grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
+  <link rel="match" href="grid-order-abspos-items-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { order:4; grid-column-start:4; background:lime; }
+.b { order:3; grid-column-start:3; background:pink; }
+.c { order:2; grid-column-start:2; background:yellow; }
+.d { order:1; grid-column-start:1; background:silver; }
+.e { order:1; grid-column-start:1; background:red; }
+
+.abs {
+  position: absolute;
+  top:3px; left:1px; right:5px; bottom:1px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.z-1 { z-index:-1; }
+.z1 { z-index:1; }
+.z2 { z-index:2; }
+.z3 { z-index:3; }
+.z4 { z-index:4; }
+x { background:black; order:99; float:right; }
+f { float:left; }
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+.f2 span.e { z-index:-1; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs b">b</span>
+<span class="abs c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div style="order:2">
+  <span class="abs a">a</span>
+  <span class="abs b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+<div class="grid">
+<span class="abs a">a</span>
+<span class="abs z1 b">b</span>
+<span class="abs z2 c">c</span>
+<span class="abs e">FAIL<x>x</x></span>
+<span class="abs d">d<x>x</x></span>
+</div>
+
+<div class="grid">
+<div style="order:2">
+  <span class="abs a">a</span>
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z1 c">c</span>
+  <span class="abs e">FAIL<x>x</x></span>
+  <span class="abs d">d<x>x</x></span>
+</div>
+</div>
+
+<div class="grid">
+<div style="display:grid; order:2">
+<div style="order:2">
+  <span class="abs a">a</span>
+</div>
+<div style="order:1">
+  <span class="abs z2 c">c</span>
+</div>
+</div>
+<div style="display:grid; order:1">
+<div style="order:2">
+  <span class="abs z1 b">b</span>
+</div>
+<div style="order:1">
+  <span class="abs z-1 d">FAIL<x>x</x></span>
+  <span class="abs z1 d">d<x>x</x></span>
+</div>
+</div>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
@@ -0,0 +1,203 @@
+<!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 Test: Testing automatic placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <style type="text/css">
+.grid {
+  height: 60px;
+  border: 1px solid green;
+  position: relative;
+}
+
+span {
+  position: absolute;
+  background: lime;
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+.test1 .a {
+  top: 0;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test1 .b {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test1 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test1 .e {
+  top: 20px;
+  left: 0px;
+}
+.test1 .d2 {
+  top: 0px;
+  left: 40px;
+}
+
+.test2 .a {
+  top: 0;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test2 .b {
+  top: 20px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test2 .c {
+  top: 0;
+  left: 80px;
+  width: 60px;
+  height: 40px;
+}
+.test2 .e {
+  top: 20px;
+  left: 0px;
+}
+.test2 .d2 {
+  top: 20px;
+  left: 40px;
+}
+
+.test3 .a {
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 40px;
+}
+.test3 .b {
+  top: 40px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test3 .c {
+  top: 60px;
+  left: 0px;
+  width: 60px;
+  height: 40px;
+}
+.test3 .d { top: 0px; left:60px; }
+.test3 .e {
+  top: 20px;
+  left: 60px;
+}
+.test3 .d2 {
+  top: 40px;
+  left: 0px;
+}
+
+.test4 .c {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 40px;
+}
+.test4 .d { top: 0px; }
+.test4 .e {
+  top: 20px;
+  left: 0px;
+}
+.test4 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test5 .c {
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 20px;
+}
+.test5 .e {
+  top: 20px;
+  left: 0px;
+}
+.test5 .d2 {
+  top: 0px;
+  left: 20px;
+}
+
+.test6 { left: 0px; top: 20px;}
+.test6d2 {
+  top: 20px;
+  left: 140px;
+}
+.test6e {
+  top: 20px;
+  left: 160px;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3" style="height:100px">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d2">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6d2">D</span>
+<span class="test6e">e</span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-auto-001.html
@@ -0,0 +1,155 @@
+<!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 Test: Testing automatic placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
+  <link rel="match" href="grid-order-placement-auto-001-ref.html">
+  <style type="text/css">
+.grid {
+  display: grid;
+  border: 1px solid green;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-auto-flow: row;
+  grid-auto-columns: 20px;
+  grid-auto-rows: 20px;
+}
+
+span {
+  background: lime;
+  border: 1px solid;
+}
+
+.test1 .a {
+  grid-row: 1;
+  grid-column: 2 / span 1;
+}
+.test1 .b {
+  grid-row: 2;
+  grid-column: 2 / span 3;
+  order: 3;
+}
+.test1 .c, .test2 .c {
+  grid-row: 1 / span 2;
+  grid-column: auto / span 3;
+  order: 1;
+}
+
+.test2 .a {
+  grid-row: 1;
+  grid-column: 2 / span 3;
+  order: 3;
+}
+.test2 .b {
+  grid-row: 2;
+  grid-column: 2 / span 1;
+  order: 1;
+}
+
+.test3 {
+  grid-template-areas:
+    'a a a . '
+    'a a a . '
+    '. b b . '
+  ;
+}
+.test3 .a {
+  grid-area: a;
+  order: 5;
+}
+.test3 .b {
+  grid-column: 2 / span 3; 
+  grid-row: b;
+  order: 4;
+}
+.test3 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+  order: 3;
+}
+
+.test4 .c {
+  grid-row: auto / span 2;
+  grid-column: auto / span 3;
+  order: 3;
+}
+
+.test5 .c {
+  grid-row-start: 2;
+  grid-column: auto / span 3;
+  order: 2;
+}
+
+.test6 {
+  grid-row-start: 2;
+  grid-column: auto / span X;
+  order: 1;
+}
+
+.e {
+  grid-row-start: 2;
+  grid-column: auto / span 1;
+  order: 1;
+}
+    </style>
+</head>
+<body>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test2">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test3">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test4">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test5">
+<span class="c">c</span>
+<span class="d">d</span>
+<span class="d">D</span>
+<span class="e">e</span>
+</div>
+
+<div class="grid test1">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="test6">d</span>
+<span class="test6">D</span>
+<span class="e">e</span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html
@@ -0,0 +1,69 @@
+<!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 Test: Testing definite placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 11px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { left:73px; right:3px; background:lime; }
+.b { left:53px; right:3px; background:pink; }
+.c { left:33px; right:3px; background:yellow; }
+.d { left:13px; right:3px; background:silver; }
+
+span {
+  position:absolute;
+  border: 1px solid;
+  height: 18px;
+}
+
+x { background:black; order:99; float:right; }
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="d">d</span>
+<span class="c">c</span>
+<span class="b">b</span>
+<span class="a">a</span>
+</div>
+
+<div class="grid">
+<span class="d">d</span>
+<span class="c">c</span>
+<span class="b">b</span>
+<span class="a">a</span>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-order-placement-definite-001.html
@@ -0,0 +1,71 @@
+<!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 Test: Testing definite placement of grid items with 'order'</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
+  <link rel="match" href="grid-order-placement-definite-001-ref.html">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ grid-template-columns: 20px 20px 20px 20px;
+ grid-template-rows: 20px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 25px;
+}
+
+.a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime; }
+.b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink; }
+.c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow; }
+.d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver; }
+.e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red; }
+
+span {
+  border: 1px solid;
+}
+
+.f2 { background:white; }
+.f2 span { opacity: 0.5; }
+.f2 span.e { display:none; }
+  </style>
+</head>
+<body>
+
+<f>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="e"></span>
+<span class="d">d</span>
+</div>
+
+<div class="grid">
+<span class="e"></span>
+<span class="d">d</span>
+<span class="b">b</span>
+<span class="c">c</span>
+<span class="a">a</span>
+</div>
+
+</f>
+
+<script>
+  var f = document.querySelector('f');
+  var f2 = f.cloneNode(true);
+  f2.className = 'f2';
+  document.body.appendChild(f2);
+</script>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -7,8 +7,11 @@ fails == grid-whitespace-handling-1b.xht
 == grid-placement-definite-002.html grid-placement-definite-002-ref.html
 == grid-placement-auto-row-sparse-001.html grid-placement-auto-row-sparse-001-ref.html
 == grid-placement-auto-row-dense-001.html grid-placement-auto-row-dense-001-ref.html
 == grid-placement-auto-col-sparse-001.html grid-placement-auto-col-sparse-001-ref.html
 == grid-placement-auto-col-dense-001.html grid-placement-auto-col-dense-001-ref.html
 == grid-track-sizing-001.html grid-track-sizing-001-ref.html
 == grid-abspos-items-001.html grid-abspos-items-001-ref.html
 == grid-abspos-items-002.html grid-abspos-items-002-ref.html
+== grid-order-abspos-items-001.html grid-order-abspos-items-001-ref.html
+== grid-order-placement-auto-001.html grid-order-placement-auto-001-ref.html
+== grid-order-placement-definite-001.html grid-order-placement-definite-001-ref.html