Bug 1151243 part 5 - [css-grid] Reftests for abs. pos. static-position.
authorMats Palmgren <mats@mozilla.com>
Tue, 22 Dec 2015 23:03:16 +0100
changeset 277427 1849d8dd63612df9b67712d81201d5cae09253c0
parent 277426 4cf8b95e28d0036cd2f1263ff251c9e7ceae62ad
child 277428 089ed419e48eefaa21292f1f1dd4c742443fbff7
push id29822
push usercbook@mozilla.com
push dateWed, 23 Dec 2015 11:00:24 +0000
treeherdermozilla-central@35b211eaad1f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1151243
milestone46.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 1151243 part 5 - [css-grid] Reftests for abs. pos. static-position.
layout/reftests/css-grid/grid-abspos-items-014-ref.html
layout/reftests/css-grid/grid-abspos-items-014.html
layout/reftests/css-grid/grid-abspos-items-015-ref.html
layout/reftests/css-grid/grid-abspos-items-015.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-014-ref.html
@@ -0,0 +1,78 @@
+<!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: abs pos static position (grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 3px 51px 5px / 5px 33px 7px;
+  margin-right: 4px;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { top:17px; bottom:2px; background:lime; }
+abs2 { right:13px; left:3px; background:pink; }
+abs3 { right:5px; left:11px; top:9px; background:cyan; }
+abs4 { top:23px; bottom:1px; left:11px; background:yellow; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+x {
+  position: relative;
+  grid-area: 2 / 2 / 3 / 3;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(x = document.createElement("x"));
+    x.appendChild(document.createElement("abs1"));
+    x.appendChild(document.createElement("abs2"));
+    x.appendChild(document.createElement("abs3"));
+    x.appendChild(document.createElement("abs4"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-014.html
@@ -0,0 +1,80 @@
+<!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: abs pos static position (grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position">
+  <link rel="match" href="grid-abspos-items-014-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  grid-template: 3px 51px 5px / 5px 33px 7px;
+  margin-right: 4px;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { top:17px; bottom:2px; background:lime; }
+abs2 { right:13px; left:3px; background:pink; }
+abs3 { right:5px; left:11px; top:9px; background:cyan; }
+abs4 { top:23px; bottom:1px; left:11px; background:yellow; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+x {
+  grid-area: 2 / 2 / 3 / 3;
+  background: grey;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createElement("abs2"));
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    div.appendChild(document.createElement("x"));
+    document.body.appendChild(div)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-015-ref.html
@@ -0,0 +1,114 @@
+<!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: abs pos static position (ancestor of grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  position: relative;
+  display: grid;
+  padding: 1px 3px 5px 7px;
+  grid-template: 30px 51px 5px / 25px 33px 7px;
+  margin-right: 4px;
+  height: 100px;
+  width: 100px;
+}
+.wrap {
+  position: relative;
+  float: left;
+  padding: 3px 5px 7px 9px;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  writing-mode: vertical-lr; direction:rtl;
+  z-index:1;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { height:97px; top:-12px; left:-37px; background:lime; }
+abs2 { right:-18px; left:3px; background:pink; }
+abs3 { top: -20px; left:-35px; right:-26px; background:cyan; }
+abs4 { top:-6px; bottom:-53px; background:silver; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+.hr abs3 { left:-24px; right:-37px;  }
+.vl abs3, .vr abs3, .vrl abs3, .vlr abs3 { left:-30px; top:-14px; right:-49px; }
+.vr abs3, .vrl abs3 { left:-47px; right:-32px; }
+.vrl abs3 { top:-25px; }
+
+.hl abs2, .hr abs2 { top:-25px; }
+.hl abs2 { left:-43px; }
+.hr abs2 { left:-32px; right:-29px; }
+.vl abs2, .vr abs2, .vrl abs2, .vlr abs2 { left:-38px; right:-41px; }
+.vr abs2, .vrl abs2 { left:-55px; right:-24px; }
+.vrl abs2 { top:-16px; }
+
+.hr abs1 { left: 94px; }
+.vl abs1, .vr abs1, .vrl abs1, .vlr abs1 { top:-6px; left:-32px; }
+.vr abs1, .vrl abs1 { left:71px; }
+.vrl abs1 { top:-17px; }
+
+.hl abs4 { left:51px; }
+.hr abs4 { left:10px; }
+.vl abs4, .vr abs4, .vrl abs4, .vlr abs4 { top:0px; bottom:-41px; left:-25px; }
+.vr abs4, .vrl abs4 { left:68px; }
+.vrl abs4 { top:-11px; bottom:-29px; }
+
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+
+    div.appendChild(span = document.createElement("span"));
+    span.appendChild(document.createTextNode("A"));
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(span = document.createElement("span"));
+    span.appendChild(document.createTextNode("BC"));
+
+    div.appendChild(document.createElement("abs3"));
+    div.appendChild(document.createElement("abs4"));
+    var wrap = document.createElement("div");
+    wrap.className = "wrap ";
+    wrap.appendChild(div);
+    document.body.appendChild(wrap)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-015.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: abs pos static position (ancestor of grid container as abs.pos. CB)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position">
+  <link rel="match" href="grid-abspos-items-015-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+separator { clear:both; display:block; height:6px; }
+
+.grid {
+  display: grid;
+  padding: 1px 3px 5px 7px;
+  grid-template: 30px 51px 5px / 25px 33px 7px;
+  margin-right: 4px;
+  height: 100px;
+  width: 100px;
+}
+.wrap {
+  position: relative;
+  float: left;
+  padding: 3px 5px 7px 9px;
+  border-style: solid;
+  border-width: 1px 3px 5px 7px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  writing-mode: vertical-lr; direction:rtl;
+}
+
+abs1,abs2,abs3,abs4 {
+  grid-area: 2 / 2 / 3 / 3;
+  position: absolute;
+}
+abs1 { top:17px; bottom:2px; background:lime; }
+abs2 { right:13px; left:3px; background:pink; }
+abs3 { right:5px; left:11px; top:9px; background:cyan; }
+abs4 { top:23px; bottom:1px; background:silver; }
+abs1::before { content:"1";}
+abs2::before { content:"2";}
+abs3::before { content:"3";}
+abs4::before { content:"4";}
+
+x {
+  grid-area: 2 / 2 / 3 / 3;
+}
+y {
+  grid-area: 3 / 3;
+  display: block;
+}
+z {
+  grid-area: 1 / 3;
+  display: block;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+</style>
+</head>
+<body>
+
+<script>
+document.body.style.display="none";
+var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
+for (var i = 0; i < wm.length; ++i) {
+  for (var j = 0; j < wm.length; ++j) {
+    var div = document.createElement("div");
+    div.className = "grid " + wm[i];
+    div.appendChild(document.createTextNode("A"));
+    div.appendChild(document.createElement("abs1"));
+    div.appendChild(document.createTextNode("BC"));
+    div.appendChild(y = document.createElement("y"));
+    y.appendChild(document.createElement("abs3"));
+    div.appendChild(z = document.createElement("z"));
+    z.appendChild(document.createElement("abs4"));
+    var wrap = document.createElement("div");
+    wrap.className = "wrap ";
+    wrap.appendChild(div);
+    document.body.appendChild(wrap)
+  }
+  document.body.appendChild(document.createElement("separator"));
+}
+document.body.style.display="";
+</script>
+
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -25,16 +25,18 @@ fails == grid-whitespace-handling-1b.xht
 == grid-abspos-items-006.html grid-abspos-items-006-ref.html
 == grid-abspos-items-007.html grid-abspos-items-007-ref.html
 == grid-abspos-items-008.html grid-abspos-items-008-ref.html
 == grid-abspos-items-009.html grid-abspos-items-009-ref.html
 == grid-abspos-items-010.html grid-abspos-items-010-ref.html
 == grid-abspos-items-011.html grid-abspos-items-011-ref.html
 == grid-abspos-items-012.html grid-abspos-items-012-ref.html
 == grid-abspos-items-013.html grid-abspos-items-013-ref.html
+== grid-abspos-items-014.html grid-abspos-items-014-ref.html
+== grid-abspos-items-015.html grid-abspos-items-015-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
 skip-if(Android) == grid-placement-definite-implicit-001.html grid-placement-definite-implicit-001-ref.html
 == grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002-ref.html
 skip-if(Android) fuzzy-if(winWidget,1,32) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
 == grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html
 pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html