Bug 1453568 - Make sure there is no new animation events as expected. r?birtles draft
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Tue, 17 Apr 2018 08:29:02 +0900
changeset 783346 8f03db3db2ed66e570a5450b914787a921ec3330
parent 783345 ad337754a0a7a8ed14cc7abe3f5e95cb7b37e2b9
child 783347 822a9c0f680e07227609b9d6824afb1d2547e1ce
push id106674
push userhikezoe@mozilla.com
push dateTue, 17 Apr 2018 01:36:18 +0000
reviewersbirtles
bugs1453568
milestone61.0a1
Bug 1453568 - Make sure there is no new animation events as expected. r?birtles MozReview-Commit-ID: Enpx04GnElf
dom/animation/test/css-animations/test_event-dispatch.html
dom/animation/test/css-transitions/test_event-dispatch.html
--- 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>