Bug 1453568 - Make sure there is no new animation events as expected. r?birtles
MozReview-Commit-ID: Enpx04GnElf
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -39,16 +39,27 @@ function AnimationEventHandler(target) {
}
AnimationEventHandler.prototype.clear = function() {
this.animationstart = undefined;
this.animationiteration = undefined;
this.animationend = undefined;
this.animationcancel = undefined;
}
+function assert_no_animation_event_received(animationEventHandler) {
+ assert_equals(animationEventHandler.animationstart, undefined,
+ 'animationstart event should not be receoved');
+ assert_equals(animationEventHandler.animationiteration, undefined,
+ 'animationiteration event should not be receoved');
+ assert_equals(animationEventHandler.animationend, undefined,
+ 'animationend event should not be receoved');
+ assert_equals(animationEventHandler.animationcancel, undefined,
+ 'animationcancel event should not be receoved');
+}
+
function setupAnimation(t, animationStyle) {
const div = addDiv(t, { style: 'animation: ' + animationStyle });
// Note that this AnimationEventHandler should be created before EventWatcher
// to capture all events in the handler prior to the EventWatcher since
// testharness.js proceeds when the EventWatcher received watching events.
const handler = new AnimationEventHandler(div);
const watcher = new EventWatcher(t, div, [ 'animationstart',
'animationiteration',
@@ -254,80 +265,101 @@ promise_test(async t => {
// Seek to before
animation.currentTime = 100 * MS_PER_SEC - 1;
const animationEndEvent = await watcher.wait_for('animationend');
assert_equals(animationEndEvent.elapsedTime, 0);
assert_equals(animation.playState, 'running'); // delay
}, 'Negative playbackRate sanity test(Before -> Active -> Before)');
promise_test(async t => {
- const { animation, watcher } = setupAnimation(t, 'anim 100s');
+ const { animation, watcher, div, handler } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
// Make idle
animation.cancel();
await watcher.wait_for('animationcancel');
+
+ handler.clear();
+
animation.cancel();
+
// Then wait a couple of frames and check that no event was dispatched.
await waitForAnimationFrames(2);
+
+ assert_no_animation_event_received(handler);
}, 'Call Animation.cancel after cancelling animation.');
promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
// Make idle
animation.cancel();
animation.play();
await watcher.wait_for([ 'animationcancel', 'animationstart' ]);
}, 'Restart animation after cancelling animation immediately.');
promise_test(async t => {
- const { animation, watcher } = setupAnimation(t, 'anim 100s');
+ const { animation, watcher, div, handler } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
// Make idle
animation.cancel();
animation.play();
animation.cancel();
await watcher.wait_for('animationcancel');
+
+ handler.clear();
+
// Then wait a couple of frames and check that no event was dispatched.
await waitForAnimationFrames(2);
+
+ assert_no_animation_event_received(handler);
}, 'Call Animation.cancel after restarting animation immediately.');
promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
// Make idle
animation.timeline = null;
await watcher.wait_for('animationcancel');
animation.timeline = document.timeline;
animation.play();
await watcher.wait_for('animationstart');
}, 'Set timeline and play transition after clearing the timeline.');
promise_test(async t => {
- const { animation, watcher } = setupAnimation(t, 'anim 100s');
+ const { animation, watcher, div, handler } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
// Make idle
animation.cancel();
await watcher.wait_for('animationcancel');
+
+ handler.clear();
+
animation.effect = null;
// Then wait a couple of frames and check that no event was dispatched.
await waitForAnimationFrames(2);
+
+ assert_no_animation_event_received(handler);
}, 'Set null target effect after cancelling the animation.');
promise_test(async t => {
- const { animation, watcher } = setupAnimation(t, 'anim 100s');
+ const { animation, watcher, div, handler } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
animation.effect = null;
await watcher.wait_for('animationend');
+
+ handler.clear();
+
animation.cancel();
// Then wait a couple of frames and check that no event was dispatched.
await waitForAnimationFrames(2);
+
+ assert_no_animation_event_received(handler);
}, 'Cancel the animation after clearing the target effect.');
</script>
</body>
</html>
--- a/dom/animation/test/css-transitions/test_event-dispatch.html
+++ b/dom/animation/test/css-transitions/test_event-dispatch.html
@@ -34,16 +34,27 @@ function TransitionEventHandler(target)
TransitionEventHandler.prototype.clear = function() {
this.transitionrun = undefined;
this.transitionstart = undefined;
this.transitionend = undefined;
this.transitioncancel = undefined;
};
+function assert_no_transition_event_received(transitionEventHandler) {
+ assert_equals(transitionEventHandler.transitionrun, undefined,
+ 'transitionrun event should not be receoved');
+ assert_equals(transitionEventHandler.transitionstart, undefined,
+ 'transitionstart event should not be receoved');
+ assert_equals(transitionEventHandler.transitionend, undefined,
+ 'transitionend event should not be receoved');
+ assert_equals(transitionEventHandler.transitioncancel, undefined,
+ 'transitioncancel event should not be receoved');
+}
+
function setupTransition(t, transitionStyle) {
const div = addDiv(t, { style: 'transition: ' + transitionStyle });
// Note that this TransitionEventHandler should be created before EventWatcher
// to capture all events in the handler prior to the EventWatcher since
// testharness.js proceeds when the EventWatcher received watching events.
const handler = new TransitionEventHandler(div);
const watcher = new EventWatcher(t, div, [ 'transitionrun',
'transitionstart',
@@ -318,55 +329,70 @@ promise_test(async t => {
// Seek to After phase.
transition.finish();
const event = await watcher.wait_for('transitionend');
assert_equals(event.elapsedTime, 50.0);
}, 'Calculating the interval start and end time with negative end delay.');
promise_test(async t => {
- const { transition, watcher, div } =
+ const { transition, watcher, div, handler } =
setupTransition(t, 'margin-left 100s 100s');
await watcher.wait_for('transitionrun');
// Make idle
div.style.display = 'none';
flushComputedStyle(div);
await watcher.wait_for('transitioncancel');
+
+ handler.clear();
+
transition.cancel();
// Then wait a couple of frames and check that no event was dispatched
await waitForAnimationFrames(2);
+
+ assert_no_transition_event_received(handler);
}, 'Call Animation.cancel after cancelling transition.');
promise_test(async t => {
- const { transition, watcher, div } =
+ const { transition, watcher, div, handler } =
setupTransition(t, 'margin-left 100s 100s');
await watcher.wait_for('transitionrun');
// Make idle
div.style.display = 'none';
flushComputedStyle(div);
transition.play();
await watcher.wait_for('transitioncancel');
+
+ handler.clear();
+
await waitForAnimationFrames(2);
+
+ assert_no_transition_event_received(handler);
}, 'Restart transition after cancelling transition immediately');
promise_test(async t => {
- const { transition, watcher, div } =
+ const { transition, watcher, div, handler } =
setupTransition(t, 'margin-left 100s 100s');
await watcher.wait_for('transitionrun');
// Make idle
div.style.display = 'none';
flushComputedStyle(div);
transition.play();
transition.cancel();
await watcher.wait_for('transitioncancel');
+
+ handler.clear();
+
// Then wait a couple of frames and check that no event was dispatched
await waitForAnimationFrames(2);
+
+ assert_no_transition_event_received(handler);
}, 'Call Animation.cancel after restarting transition immediately');
promise_test(async t => {
const { transition, watcher } =
setupTransition(t, 'margin-left 100s');
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
// Make idle
@@ -374,37 +400,47 @@ promise_test(async t => {
await watcher.wait_for('transitioncancel');
transition.timeline = document.timeline;
transition.play();
await watcher.wait_for(['transitionrun', 'transitionstart']);
}, 'Set timeline and play transition after clear the timeline');
promise_test(async t => {
- const { transition, watcher, div } =
+ const { transition, watcher, div, handler } =
setupTransition(t, 'margin-left 100s');
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
transition.cancel();
await watcher.wait_for('transitioncancel');
+
+ handler.clear();
+
// Make After phase
transition.effect = null;
// Then wait a couple of frames and check that no event was dispatched
await waitForAnimationFrames(2);
+
+ assert_no_transition_event_received(handler);
}, 'Set null target effect after cancel the transition');
promise_test(async t => {
- const { transition, watcher, div } =
+ const { transition, watcher, div, handler } =
setupTransition(t, 'margin-left 100s');
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
transition.effect = null;
await watcher.wait_for('transitionend');
+
+ handler.clear();
+
transition.cancel();
// Then wait a couple of frames and check that no event was dispatched
await waitForAnimationFrames(2);
+
+ assert_no_transition_event_received(handler);
}, 'Cancel the transition after clearing the target effect');
</script>
</body>
</html>