Bug 1302648 part 9 - Add test of setting target effect of CSS Animations. r?birtles
MozReview-Commit-ID: 6MVVFY4uJC4
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/css-animations/file_setting-effect.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src='../testcommon.js'></script>
+<style>
+ @keyframes anim {
+ from {
+ margin-left: 0px;
+ }
+ to {
+ margin-left: 100px;
+ }
+ }
+</style>
+<body>
+<script>
+'use strict';
+
+promise_test(function(t) {
+ var div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ var watcher = new EventWatcher(t, div, [ 'animationend',
+ 'animationcancel' ]);
+ var animation = div.getAnimations()[0];
+ return animation.ready.then(function() {
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = null;
+ assert_equals(animation.playState, 'finished');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
+ return watcher.wait_for('animationend');
+ });
+}, 'Setting a null effect on a running animation fires an animationend event');
+
+promise_test(function(t) {
+ var div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ var animation = div.getAnimations()[0];
+ return animation.ready.then(function() {
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 100 * MS_PER_SEC);
+ assert_equals(animation.playState, 'running');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
+ assert_equals(getComputedStyle(div).left, '50px');
+ });
+}, 'Replacing an animation\'s effect with an effect that targets a different ' +
+ 'property should update both properties');
+
+promise_test(function(t) {
+ var div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ var animation = div.getAnimations()[0];
+ return animation.ready.then(function() {
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 20 * MS_PER_SEC);
+ assert_equals(animation.playState, 'finished');
+ });
+}, 'Replacing an animation\'s effect with a shorter one that should have ' +
+ 'already finished, the animation finishes immediately');
+
+promise_test(function(t) {
+ var div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ var animation = div.getAnimations()[0];
+ assert_equals(animation.playState, 'pending');
+
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 100 * MS_PER_SEC);
+ assert_equals(animation.playState, 'pending');
+
+ return animation.ready.then(function() {
+ assert_equals(animation.playState, 'running');
+ });
+}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
+ 'the pending state');
+
+promise_test(function(t) {
+ var div1 = addDiv(t);
+ var div2 = addDiv(t);
+
+ var watcher1 = new EventWatcher(t, div1, 'animationstart');
+ // Watch |div2| as well to ensure it does *not* get events.
+ var watcher2 = new EventWatcher(t, div2, 'animationstart');
+
+ div1.style.animation = 'anim 100s';
+
+ var animation = div1.getAnimations()[0];
+ animation.effect = new KeyframeEffect(div2,
+ { left: [ '0px', '100px' ] },
+ 100 * MS_PER_SEC);
+
+ return watcher1.wait_for('animationstart').then(function() {
+ assert_equals(animation.effect.target, div2);
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ return waitForAnimationFrames(2);
+ });
+}, 'The event is dispatched at the original element even after setting an ' +
+ 'effect with a different target element');
+
+promise_test(function(t) {
+ var div = addDiv(t);
+ var watcher = new EventWatcher(t, div, [ 'animationstart',
+ 'animationend',
+ 'animationcancel' ]);
+ div.style.animation = 'anim 100s';
+ var animation = div.getAnimations()[0];
+ animation.finish();
+
+ return watcher.wait_for([ 'animationstart',
+ 'animationend' ]).then(function(evt) {
+ // Set a longer effect
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px', '100px' ] },
+ 200 * MS_PER_SEC);
+ return watcher.wait_for('animationstart');
+ });
+}, 'After replacing a finished animation\'s effect with a longer one ' +
+ 'it fires an animationstart event');
+
+done();
+</script>
+</body>new file mode 100644
--- /dev/null
+++ b/dom/animation/test/css-animations/test_setting-effect.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<div id='log'></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+ { 'set': [['dom.animations-api.core.enabled', true]]},
+ function() {
+ window.open('file_setting-effect.html');
+ });
+</script>--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -18,16 +18,17 @@ support-files =
css-animations/file_cssanimation-animationname.html
css-animations/file_document-get-animations.html
css-animations/file_effect-target.html
css-animations/file_element-get-animations.html
css-animations/file_event-dispatch.html
css-animations/file_event-order.html
css-animations/file_keyframeeffect-getkeyframes.html
css-animations/file_pseudoElement-get-animations.html
+ css-animations/file_setting-effect.html
css-transitions/file_animation-cancel.html
css-transitions/file_animation-computed-timing.html
css-transitions/file_animation-currenttime.html
css-transitions/file_animation-finished.html
css-transitions/file_animation-pausing.html
css-transitions/file_animation-ready.html
css-transitions/file_animation-starttime.html
css-transitions/file_csstransition-transitionproperty.html
@@ -75,16 +76,17 @@ support-files =
[css-animations/test_cssanimation-animationname.html]
[css-animations/test_document-get-animations.html]
[css-animations/test_effect-target.html]
[css-animations/test_element-get-animations.html]
[css-animations/test_event-dispatch.html]
[css-animations/test_event-order.html]
[css-animations/test_keyframeeffect-getkeyframes.html]
[css-animations/test_pseudoElement-get-animations.html]
+[css-animations/test_setting-effect.html]
[css-transitions/test_animation-cancel.html]
[css-transitions/test_animation-computed-timing.html]
[css-transitions/test_animation-currenttime.html]
[css-transitions/test_animation-finished.html]
[css-transitions/test_animation-pausing.html]
[css-transitions/test_animation-ready.html]
[css-transitions/test_animation-starttime.html]
[css-transitions/test_csstransition-transitionproperty.html]
