Bug 1405319 part 2 - Reftests.
authorMats Palmgren <mats@mozilla.com>
Thu, 09 Nov 2017 03:00:47 +0100
changeset 390878 64d402a152c1ac57fd3100b4500187386363ae2b
parent 390877 d441a4991106f20aa328c9299a3e63d3bfa7d8c3
child 390879 f91e74cdcf4c4b98b27ae39f4423a9fb1a926d91
push id32849
push userarchaeopteryx@coole-files.de
push dateThu, 09 Nov 2017 09:53:32 +0000
treeherdermozilla-central@d16b52f5d195 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1405319
milestone58.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 1405319 part 2 - Reftests. MozReview-Commit-ID: 49ntwW5qoFr
layout/reftests/css-grid/grid-item-align-dynamic-pos-001-ref.html
layout/reftests/css-grid/grid-item-align-dynamic-pos-001.html
layout/reftests/css-grid/grid-item-align-dynamic-pos-002-ref.html
layout/reftests/css-grid/grid-item-align-dynamic-pos-002.html
layout/reftests/css-grid/grid-item-align-dynamic-pos-003-ref.html
layout/reftests/css-grid/grid-item-align-dynamic-pos-003.html
layout/reftests/css-grid/reftest.list
layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html
layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html
layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
layout/reftests/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:center</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background: lightgrey;
+  grid: 50px 50px / 50px 50px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: center;
+  left: 20px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div id="item">X</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Grid Test: dynamic change .left on abs.pos. item w. align-self:center</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="grid-item-align-dynamic-pos-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background: lightgrey;
+  grid: 50px 50px / 50px 50px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: center;
+  left: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div id="item">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-002-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background: lightgrey;
+  grid: 50px 50px / 50px 50px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: end;
+  left: 20px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div id="item">X</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Grid Test: dynamic change .left on abs.pos. item w. align-self:end</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="grid-item-align-dynamic-pos-002-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  background: lightgrey;
+  grid: 50px 50px / 50px 50px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: end;
+  left: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div id="item">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-003-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background: lightgrey;
+  grid: 50px 50px / 50px 50px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: start;
+  left: 20px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="align-self: start; font-size:32pt">X</div>
+  <div id="item" style="grid-area:2/2">X</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Grid Test: dynamic change .left on abs.pos. item w. align-self:start</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="grid-item-align-dynamic-pos-003-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  position: relative;
+  background: lightgrey;
+  grid: 50px 50px / 50px 50px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: start;
+  left: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="align-self: start; font-size:32pt">X</div>
+  <div id="item" style="grid-area:2/2">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -273,10 +273,14 @@ asserts(0-10) == grid-fragmentation-015.
 == grid-fragmentation-dyn2-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn3-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn4-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn5-028.html grid-fragmentation-028-ref.html
 == grid-fragmentation-dyn1-029.html grid-fragmentation-029-ref.html
 == grid-fragmentation-dyn2-029.html grid-fragmentation-029-ref.html
 == grid-fragmentation-dyn2-030.html grid-fragmentation-030-ref.html
 == grid-fragmentation-dyn2-031.html grid-fragmentation-031-ref.html
+
 == bug1306106.html bug1306106-ref.html
 == grid-percent-intrinsic-sizing-001.html grid-percent-intrinsic-sizing-001-ref.html
+== grid-item-align-dynamic-pos-001.html grid-item-align-dynamic-pos-001-ref.html
+== grid-item-align-dynamic-pos-002.html grid-item-align-dynamic-pos-002-ref.html
+== grid-item-align-dynamic-pos-003.html grid-item-align-dynamic-pos-003-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:center</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  position: relative;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: relative;
+  align-self: center;
+  left: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:center</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="flexbox-item-align-self-dynamic-pos-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  position: relative;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: center;
+  left: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  position: relative;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: relative;
+  align-self: end;
+  left: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:end</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="flexbox-item-align-self-dynamic-pos-002-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: end;
+  left: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -14,16 +14,18 @@ include pagination/reftest.list
 
 # Tests for cross-axis alignment (align-self / align-items properties)
 fails == flexbox-align-self-baseline-horiz-2.xhtml  flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
 # This one fails on windows R (but not Ru, strangely) and GTK.
 # On Windows R and GTK, the single-line <label> flex item has a different
 # background size in test vs. ref
 fuzzy-if(cocoaWidget,1,2) random-if(winWidget||gtkWidget) skip-if(Android) == flexbox-align-self-baseline-horiz-3.xhtml  flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate the random-if. The skip-if(Android) is because checkbox/radio appearance:none doesn't work as expected.
 == flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
+== flexbox-item-align-self-dynamic-pos-001.html flexbox-item-align-self-dynamic-pos-001-ref.html
+== flexbox-item-align-self-dynamic-pos-002.html flexbox-item-align-self-dynamic-pos-002-ref.html
 
 # Tests for box-sizing on flex containers and flex items.
 == flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html
 == flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1-ref.html
 == flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1-ref.html
 == flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1-ref.html
 == flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1-ref.html
 == flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1-ref.html