Bug 1273042 - Part 3: Reftest for checking transform:none animations create a stacking context. r?birtles
This patch has two test cases one if for CSS animations and one is for web animations.
For CSS animations test cases:
@keyframes {
from, to { transform: none; }
}
For web animtions test cases, the target element is appended after animate().
MozReview-Commit-ID: Gy1sY41jV7G
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -3,8 +3,9 @@
fails == print-no-animations.html print-no-animations-ref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-print tests
fails != print-no-animations.html print-no-animations-notref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-print tests
== animate-opacity.html animate-opacity-ref.html
== animate-preserves3d.html animate-preserves3d-ref.html
== in-visibility-hidden-animation.html in-visibility-hidden-animation-ref.html
== in-visibility-hidden-animation-pseudo-element.html in-visibility-hidden-animation-pseudo-element-ref.html
== partially-out-of-view-animation.html partially-out-of-view-animation-ref.html
== animate-display-table-opacity.html animate-display-table-opacity-ref.html
+== stacking-context-transform-none-animation.html stacking-context-transform-animation-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-animation-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+ z-index: -1;
+}
+#test {
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-animation.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>Transform animation creates a stacking context even though it has only 'transform:none' keyframes</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes TransformNone {
+ from, to { transform: none }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ animation: TransformNone 100s infinite;
+}
+</style>
+<span></span>
+<div id="test"></div>
--- a/layout/reftests/web-animations/reftest.list
+++ b/layout/reftests/web-animations/reftest.list
@@ -1,2 +1,3 @@
test-pref(dom.animations-api.core.enabled,true) == 1246046-1.html green-box.html
test-pref(dom.animations-api.core.enabled,true) == 1267937-1.html 1267937-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-animation-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+ z-index: -1;
+}
+#test {
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Transform animation whose target is not initially associated with any document creates a stacking context even if it has only 'transform:none' in its keyframe</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<script>
+ var div = document.createElement("div")
+ var anim = div.animate({ transform: ['none', 'none'] },
+ { duration: 100000 });
+ document.body.appendChild(div);
+ anim.ready.then(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>