Bug 1107783 - part 2, [css-grid] Reftest for basic placement and layout of abs.pos. grid items.
authorMats Palmgren <mats@mozilla.com>
Thu, 26 Mar 2015 18:57:39 +0000
changeset 264820 a55d25db977892b42460a17ce3a305a385ba3d86
parent 264819 791f8195e4dd341022ae79f0f8f264ef26a33050
child 264821 13f447b5f8c2d960551fd855670ea77a5733fff9
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1107783
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 1107783 - part 2, [css-grid] Reftest for basic placement and layout of abs.pos. grid items.
layout/reftests/css-grid/grid-abspos-items-001-ref.html
layout/reftests/css-grid/grid-abspos-items-001.html
layout/reftests/css-grid/grid-abspos-items-002-ref.html
layout/reftests/css-grid/grid-abspos-items-002.html
layout/reftests/css-grid/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-001-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>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ border: 0 dashed blue;
+ border-width: 7px 11px 13px 17px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 100px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:17px; }
+
+.a {
+  position: absolute;
+  left: 13px; top: 51px;
+  height: 32px; width: 44px;
+}
+
+.abs {
+  position: absolute;
+  opacity: 0.7;
+  width: 21px;
+  height: 15px;
+}
+.b {
+  left: 1px; top: 3px; bottom: 1px;
+  width: 28px; height: auto;
+}
+.c {
+  right: 5px; bottom: 1px;
+  width: 53px; height: 37px;
+}
+.d {
+  left: 1px; top: 37px;
+  width: 5px; height: 11px;
+}
+.e {
+  right: 5px; bottom: 1px;
+  width: 53px; height: 71px;
+}
+.f {
+  right: 5px; top: 3px;
+  width: 53px; height: 11px;
+}
+.g {
+  left: 14px; top: 37px;
+  width: 38px; height: 11px;
+}
+.h {
+  top:3px; left:1px; right:5px; bottom:1px;
+  width:auto; height:auto;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b abs">b</span>
+<span class="c abs">c</span>
+<span class="d abs">d</span>
+<span class="e abs">e</span>
+<span class="f abs">f</span>
+<span class="g abs">g</span>
+</div>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b abs">b</span>
+<span class="c abs" style="height:20px">c</span>
+<span class="d abs">d</span>
+<span class="e abs">e</span>
+<span class="f abs">f</span>
+<span class="g abs">g</span>
+</div>
+
+<div class="grid zero-size">
+<span class="b abs">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
+<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
+<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
+<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px; border-width:0;">
+<span class="abs" style="right:24px; top:3px; height:11px; width:0px;">b</span>
+<span class="abs" style="left:1px; bottom:42px; height:0px; width:5px;">c</span>
+<span class="abs" style="right:24px; bottom:42px; height:0px; width:0px;">d</span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-001.html
@@ -0,0 +1,118 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-001-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ position: relative;
+ border: 0 dashed blue;
+ border-width: 7px 11px 13px 17px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 100px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:auto; }
+
+.a {
+  grid-column: 1 / 3; 
+  grid-row:    3 / 5;
+}
+
+.abs {
+  position: absolute;
+  top:3px; left:1px; right:5px; bottom:1px;
+  opacity: 0.7;
+}
+.b {
+  grid-column:  auto / 2;
+  grid-row:     auto / auto; 
+}
+.c {
+  grid-column:  9 / auto;  /* 9 is outside the grid */
+  grid-row:     9 / auto;  /* 9 is outside the grid */
+}
+.d {
+  grid-column:  auto / 1;
+  grid-row:     2 / 1;
+}
+.e {
+  grid-column:  4 / auto;
+  grid-row:     3 / auto;
+}
+.f {
+  grid-column:  4 / auto;
+  grid-row:     auto / 1;
+}
+.g {
+  grid-column:  1 / 3;
+  grid-row:     2 / 3;
+}
+.h {
+  grid-column:  auto / auto;
+  grid-row:     auto / auto; 
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b abs">b</span>
+<span class="c abs">c</span>
+<span class="d abs">d</span>
+<span class="e abs">e</span>
+<span class="f abs">f</span>
+<span class="g abs">g</span>
+</div>
+
+<div class="grid">
+<span class="a">a</span>
+<div><span class="b abs">b</span></div>
+<x><span class="c abs">c</span></x>
+<span class="d abs">d</span>
+<div><span class="e abs">e</span></div>
+<span class="f abs">f</span>
+<x><span class="g abs">g</span></x>
+</div>
+
+<div class="grid zero-size">
+<span class="b abs">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
+<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
+<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span>
+<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
+</div>
+
+<div class="grid" style="width:0px; height:0px; border-width:0;">
+<span class="abs" style="grid-column-start:2; grid-row-end:1;">b</span>
+<span class="abs" style="grid-column-end:1; grid-row-start:2;">c</span>
+<span class="abs" style="grid-column-start:2; grid-row-start:2;">d</span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-002-ref.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ /*display: grid;*/
+ position: relative;
+ top:2px; left:1px;
+ border: 0 dashed blue;
+ border-width: 7px 11px 13px 17px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 100px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:17px; }
+
+.a {
+  position: absolute;
+  left: 13px; top: 51px;
+  height: 32px; width: 44px;
+}
+
+.abs {
+  position: absolute;
+  opacity: 0.7;
+  width: 21px;
+  height: 15px;
+}
+.b {
+  left: 1px; top: 3px; bottom: 1px;
+  width: 28px; height: auto;
+}
+.c {
+  right: 5px; bottom: 1px;
+  width: 53px; height: 37px;
+}
+.d {
+  left: 1px; top: 37px;
+  width: 5px; height: 11px;
+}
+.e {
+  right: 5px; bottom: 1px;
+  width: 53px; height: 71px;
+}
+.f {
+  right: 5px; top: 3px;
+  width: 53px; height: 11px;
+}
+.g {
+  left: 14px; top: 37px;
+  width: 38px; height: 11px;
+}
+.h {
+  top:3px; left:1px; right:5px; bottom:1px;
+  width:auto; height:auto;
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b abs">b</span>
+<span class="c abs">c</span>
+<span class="d abs">d</span>
+<span class="e abs">e</span>
+<span class="f abs">f</span>
+<span class="g abs">g</span>
+</div>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b abs">b</span>
+<span class="c abs" style="height:20px">c</span>
+<span class="d abs">d</span>
+<span class="e abs">e</span>
+<span class="f abs">f</span>
+<span class="g abs">g</span>
+</div>
+
+<div class="grid zero-size">
+<span class="b abs">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
+<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
+<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
+<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-abspos-items-002.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
+  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-items-002-ref.html">
+  <meta charset="utf-8">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+.grid {
+ display: grid;
+ transform: translate(1px,2px);
+ border: 0 dashed blue;
+ border-width: 7px 11px 13px 17px;
+ grid-auto-flow: row;
+ grid-auto-columns: 23px;
+ grid-auto-rows: 17px;
+ padding: 17px 7px 11px 13px;
+ width: 100px;
+ height: 100px;
+}
+.zero-size { width:0; height:0; }
+.auto-size { width:auto; height:auto; }
+
+.a {
+  grid-column: 1 / 3; 
+  grid-row:    3 / 5;
+}
+
+.abs {
+  position: fixed;
+  top:3px; left:1px; right:5px; bottom:1px;
+  opacity: 0.7;
+}
+.b {
+  grid-column:  auto / 2;
+  grid-row:     auto / auto; 
+}
+.c {
+  grid-column:  9 / auto;  /* 9 is outside the grid */
+  grid-row:     9 / auto;  /* 9 is outside the grid */
+}
+.d {
+  grid-column:  auto / 1;
+  grid-row:     2 / 1;
+}
+.e {
+  grid-column:  4 / auto;
+  grid-row:     3 / auto;
+}
+.f {
+  grid-column:  4 / auto;
+  grid-row:     auto / 1;
+}
+.g {
+  grid-column:  1 / 3;
+  grid-row:     2 / 3;
+}
+.h {
+  grid-column:  auto / auto;
+  grid-row:     auto / auto; 
+}
+span {
+  background: lime;
+  border: 1px solid;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<span class="a">a</span>
+<span class="b abs">b</span>
+<span class="c abs">c</span>
+<span class="d abs">d</span>
+<span class="e abs">e</span>
+<span class="f abs">f</span>
+<span class="g abs">g</span>
+</div>
+
+<div class="grid">
+<span class="a">a</span>
+<div><span class="b abs">b</span></div>
+<x><span class="c abs">c</span></x>
+<span class="d abs">d</span>
+<div><span class="e abs">e</span></div>
+<span class="f abs">f</span>
+<x><span class="g abs">g</span></x>
+</div>
+
+<div class="grid zero-size">
+<span class="b abs">b</span>
+</div>
+
+<div class="grid auto-size">
+<span class="h abs">h</span>
+</div>
+
+<div class="grid" style="width:43px; height:53px">
+<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
+<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
+<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span>
+<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
+</div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -5,8 +5,10 @@ fails == grid-whitespace-handling-1b.xht
 == grid-whitespace-handling-2.xhtml  grid-whitespace-handling-2-ref.xhtml
 == grid-placement-definite-001.html grid-placement-definite-001-ref.html
 == 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