Bug 1223658 - Part 8: Reftests for checking stacking context of transform animations. r?birtles
This patch has below cases:
* CSS Transition
* opacity in delay phase
* transform in delay phase
* CSS Animation
* opacity in delay phase
* transform in delay phase
* Web Animation
* opacity in delay phase
* opacity:1 animation
* transform in delay phase
* transform:none animation
MozReview-Commit-ID: K9R30GB9b6y
--- a/dom/animation/test/chrome/test_running_on_compositor.html
+++ b/dom/animation/test/chrome/test_running_on_compositor.html
@@ -729,10 +729,33 @@ promise_test(function(t) {
}).then(function() {
assert_equals(animation.isRunningOnCompositor, omtaEnabled,
'Opacity animation reports that it is running on the compositor '
+ 'after changing the property from width property in the delay phase');
});
}, 'Dynamic change to a property runnable on the compositor ' +
'in the delay phase');
+promise_test(function(t) {
+ var animation =
+ addDivAndAnimate(t,
+ {},
+ { width: ['100px', '200px'] },
+ { duration: 100 * MS_PER_SEC, delay: 100 * MS_PER_SEC });
+
+ return animation.ready.then(function() {
+ assert_equals(animation.isRunningOnCompositor, false,
+ 'Width animation reports that it is not running on the compositor '
+ + 'in the delay phase');
+ // Changing to property runnable on the compositor.
+ animation.effect.setKeyframes(
+ { transform: ['translateX(0px)', 'translateX(0px)'] });
+ return waitForFrame();
+ }).then(function() {
+ assert_equals(animation.isRunningOnCompositor, omtaEnabled,
+ 'Transform animation reports that it is running on the compositor '
+ + 'after changing the property from width property in the delay phase');
+ });
+}, 'Dynamic change to a property runnable on the compositor ' +
+ 'in the delay phase');
+
</script>
</body>
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -7,15 +7,17 @@ fails != print-no-animations.html print-
== 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
test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-opacity-animation.html stacking-context-animation-ref.html
test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-transform-animation.html stacking-context-animation-ref.html
== stacking-context-opacity-1-animation.html stacking-context-animation-ref.html
== stacking-context-opacity-1-with-fill-forwards.html stacking-context-animation-ref.html
+== stacking-context-opacity-in-delay.html stacking-context-animation-ref.html
== stacking-context-paused-on-opacity-1.html stacking-context-animation-ref.html
== stacking-context-paused-on-transform-none.html stacking-context-animation-ref.html
+== stacking-context-transform-in-delay.html stacking-context-animation-ref.html
== stacking-context-transform-none-animation.html stacking-context-animation-ref.html
== stacking-context-transform-none-animation-on-svg.html stacking-context-animation-ref.html
== stacking-context-transform-none-animation-with-backface-visibility.html stacking-context-animation-ref.html
== stacking-context-transform-none-animation-with-preserve-3d.html stacking-context-animation-ref.html
== stacking-context-transform-none-with-fill-forwards.html stacking-context-animation-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-in-delay.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<title>Opacity animation creates a stacking context even if the animation is delay phase</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes opacity {
+ from { opacity: 0 }
+ to { opacity: 1 }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ animation: opacity 100s 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-in-delay.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Transform animation creates a stacking context even if the animation is delay phase</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes transform {
+ from { transform: translate(100px) }
+ to { transform: translate(200px) }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", function() {
+ var div = document.getElementById("test");
+ div.style.animation = "transform 100s 100s";
+ // We need to wait a frame to ensure the animation is painted in the delay
+ // phase. Note that 'animationstart' event is not fired during the delay
+ // phase.
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+});
+</script>
--- a/layout/reftests/css-transitions/reftest.list
+++ b/layout/reftests/css-transitions/reftest.list
@@ -1,4 +1,6 @@
== transitions-inline-already-wrapped-1.html transitions-inline-ref.html
== transitions-inline-already-wrapped-2.html transitions-inline-ref.html
== transitions-inline-rewrap-1.html transitions-inline-ref.html
== transitions-inline-rewrap-2.html transitions-inline-ref.html
+== stacking-context-opacity-in-delay.html stacking-context-transition-ref.html
+== stacking-context-transform-in-delay.html stacking-context-transition-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-opacity-in-delay.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Opacity transition creates a stacking context even if the transition is delay phase</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ transition: opacity 100s 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", function() {
+ var div = document.getElementById("test");
+ test.style.opacity = 0;
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transform-in-delay.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Transform animation creates a stacking context even if the transition is delay phase</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ transition: transform 100s 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", function() {
+ var div = document.getElementById("test");
+ test.style.transform = "translateX(0px)";
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transition-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1223658</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>
--- a/layout/reftests/web-animations/reftest.list
+++ b/layout/reftests/web-animations/reftest.list
@@ -1,10 +1,14 @@
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-opacity-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-1-animation.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html
test-pref(layers.offmainthreadcomposition.async-animations,false) test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
test-pref(layers.offmainthreadcomposition.async-animations,false) test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
test-pref(layers.offmainthreadcomposition.async-animations,false) test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-1-animation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Opacity animation creates a stacking context even if it only has 100% opacity in its keyframes</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ opacity: [1, 1] },
+ { duration: 100000 });
+ anim.ready.then(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-in-delay.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Opacity animation creates a stacking context even if the animation is delay phase</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ opacity: [0, 1] },
+ { delay: 100000, duration: 100000 });
+ anim.ready.then(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-in-delay.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Transform animation creates a stacking context even if the animation is delay phase</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ transform: ['translate(100px)', 'translate(200px)'] },
+ { delay: 100000, duration: 100000 });
+ anim.ready.then(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-none-animation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Transform animation 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;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ transform: ['none', 'none'] },
+ { duration: 100000 });
+ anim.ready.then(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>