Bug 1380258 - Test case for restarting CSS animation on pseudo element once after the pseudo element was re-generated. r?birtles
This test fails without the first patch in this series.
MozReview-Commit-ID: A22aFPnklqj
--- a/dom/animation/test/mozilla/file_hide_and_show.html
+++ b/dom/animation/test/mozilla/file_hide_and_show.html
@@ -3,16 +3,21 @@
<script src="../testcommon.js"></script>
<style>
@keyframes move {
100% {
transform: translateX(100px);
}
}
+div.pseudo::before {
+ animation: move 0.01s;
+ content: 'content';
+}
+
</style>
<body>
<script>
'use strict';
test(function(t) {
var div = addDiv(t, { style: 'animation: move 100s infinite' });
assert_equals(div.getAnimations().length, 1,
@@ -152,11 +157,40 @@ test(function(t) {
'animations again');
assert_not_equals(div.getAnimations()[0], animation,
'Restarted animation is a newly-generated animation');
}, 'CSS Animation which has already finished starts playing when its parent ' +
'element is shown from "display:none" state');
+promise_test(function(t) {
+ var div = addDiv(t, { 'class': 'pseudo' });
+ var eventWatcher = new EventWatcher(t, div, 'animationend');
+
+ assert_equals(document.getAnimations().length, 1,
+ 'CSS animation on pseudo element');
+
+ return eventWatcher.wait_for('animationend').then(function() {
+ assert_equals(document.getAnimations().length, 0,
+ 'No CSS animation on pseudo element after the animation ' +
+ 'finished');
+
+ // Remove the class which generated this pseudo element.
+ div.classList.remove('pseudo');
+
+ // We need to wait for two frames to process re-framing.
+ // The callback of 'animationend' is processed just before rAF callbacks,
+ // and rAF callbacks are processed before re-framing process, so waiting for
+ // one rAF callback is not sufficient.
+ return waitForAnimationFrames(2);
+ }).then(function() {
+ // Add the class again to re-generate pseudo element.
+ div.classList.add('pseudo');
+ assert_equals(document.getAnimations().length, 1,
+ 'A new CSS animation on pseudo element');
+ });
+}, 'CSS animation on pseudo element restarts after the pseudo element that ' +
+ 'had a finished CSS animation is re-generated');
+
done();
</script>
</body>