Bug 1187851 patch 1 - Tests for making dynamic changes to filter and perspective change fixed position containing block for descendants. r=roc
authorL. David Baron <dbaron@dbaron.org>
Mon, 03 Aug 2015 20:18:00 -0700
changeset 287686 144378d2a7cefeab1c5fa1b070382720a9ee3057
parent 287685 28708429fd23ee20953fd6741f0933eac20e477e
child 287687 7bb53182d1bc2d9f7886de9d6f95c0035765957b
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs1187851
milestone42.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 1187851 patch 1 - Tests for making dynamic changes to filter and perspective change fixed position containing block for descendants. r=roc As expected, without the patch in patch 4, the filter and perspective tests fail, but the added transform test passes. All the tests pass locally with patch 4.
layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1-ref.html
layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1a.html
layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1b.html
layout/reftests/w3c-css/submitted/filters/reftest.list
layout/reftests/w3c-css/submitted/reftest.list
layout/reftests/w3c-css/submitted/transforms/containing-block-dynamic-1-ref.html
layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1a.html
layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1b.html
layout/reftests/w3c-css/submitted/transforms/reftest.list
layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1a.html
layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1b.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.fxtf.org/filters/#FilterProperty">
+<link rel="help" href="http://www.w3.org/2015/02/10-fx-minutes.html#action02">
+<link rel="match" href="filter-containing-block-dynamic-1-ref.html">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changefilter {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changefilter" style="filter: blur(4px)">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changefilter = document.getElementById("changefilter");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changefilter.style.filter = "";
+  </script>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.fxtf.org/filters/#FilterProperty">
+<link rel="help" href="http://www.w3.org/2015/02/10-fx-minutes.html#action02">
+<link rel="match" href="filter-containing-block-dynamic-1-ref.html">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changefilter {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changefilter">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changefilter = document.getElementById("changefilter");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changefilter.style.filter = "blur(0px)";
+  </script>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/reftest.list
@@ -0,0 +1,2 @@
+fails == filter-containing-block-dynamic-1a.html filter-containing-block-dynamic-1-ref.html # bug 1187851
+fails == filter-containing-block-dynamic-1b.html filter-containing-block-dynamic-1-ref.html # bug 1187851
--- a/layout/reftests/w3c-css/submitted/reftest.list
+++ b/layout/reftests/w3c-css/submitted/reftest.list
@@ -14,16 +14,19 @@ include css21/reftest.list
 # include animations/reftest.list
 
 # Backgrounds and Borders Level 3
 # include background3/reftest.list
 
 # Conditional Rules Level 3
 include conditional3/reftest.list
 
+# Filter Effects Module
+include filters/reftest.list
+
 # Flexible Box Layout Module
 include flexbox/reftest.list
 
 # Fonts Level 3
 include fonts3/reftest.list
 
 # Image Values and Replaced Content Level 3
 include images3/reftest.list
@@ -48,17 +51,17 @@ include ruby/reftest.list
 
 # Text Level 3
 include text3/reftest.list
 
 # Text Decoration Level 3
 include text-decor-3/reftest.list
 
 # Transforms
-# include transforms/reftest.list
+include transforms/reftest.list
 
 # Transitions
 # include transitions/reftest.list
 
 # User Interface Level 3
 include ui3/reftest.list
 
 # Values and Units Level 3
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/containing-block-dynamic-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#perspective-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changeperspective {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changeperspective" style="perspective: 1000px">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changeperspective = document.getElementById("changeperspective");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changeperspective.style.perspective = "";
+  </script>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#perspective-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changeperspective {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changeperspective">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changeperspective = document.getElementById("changeperspective");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changeperspective.style.perspective = "1000px";
+  </script>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/reftest.list
@@ -0,0 +1,4 @@
+== transform-containing-block-dynamic-1a.html containing-block-dynamic-1-ref.html
+== transform-containing-block-dynamic-1b.html containing-block-dynamic-1-ref.html
+fails == perspective-containing-block-dynamic-1a.html containing-block-dynamic-1-ref.html # bug 1187851
+fails == perspective-containing-block-dynamic-1b.html containing-block-dynamic-1-ref.html # bug 1187851
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1a.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.">
+<meta name="assert" content="The object acts as a containing block for fixed positioned descendants."
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changetransform {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changetransform" style="transform: translateX(4px)">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changetransform = document.getElementById("changetransform");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changetransform.style.transform = "";
+  </script>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1b.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="http://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.">
+<meta name="assert" content="The object acts as a containing block for fixed positioned descendants."
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changetransform {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changetransform">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changetransform = document.getElementById("changetransform");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changetransform.style.transform = "translateX(0px)";
+  </script>
+</body>