Bug 1453568 - Rewrite css-animations/test_event-dispatch.html with async/await. r?birtles draft
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Tue, 17 Apr 2018 08:28:55 +0900
changeset 783344 dfcc193e8bb4051a0fe90d63ecc12b4fd371e9bc
parent 783343 228b21c96667102bdc5a3f7d83195e497abcc901
child 783345 ad337754a0a7a8ed14cc7abe3f5e95cb7b37e2b9
push id106674
push userhikezoe@mozilla.com
push dateTue, 17 Apr 2018 01:36:18 +0000
reviewersbirtles
bugs1453568
milestone61.0a1
Bug 1453568 - Rewrite css-animations/test_event-dispatch.html with async/await. r?birtles MozReview-Commit-ID: JOzcsmKbCVR
dom/animation/test/css-animations/test_event-dispatch.html
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -54,327 +54,280 @@ function setupAnimation(t, animationStyl
                                            'animationiteration',
                                            'animationend',
                                            'animationcancel' ]);
   const animation = div.getAnimations()[0];
 
   return { animation, watcher, div, handler };
 }
 
-promise_test(t => {
+promise_test(async t => {
   // Add 1ms delay to ensure that the delay is not included in the elapsedTime.
   const { animation, watcher } = setupAnimation(t, 'anim 100s 1ms');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    assert_equals(evt.elapsedTime, 0.0);
-  });
+  const event = await watcher.wait_for('animationstart');
+  assert_equals(event.elapsedTime, 0.0);
 }, 'Idle -> Active');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div, handler } = setupAnimation(t, 'anim 100s');
 
   // Seek to After phase.
   animation.finish();
-  return watcher.wait_for([ 'animationstart',
-                            'animationend' ]).then(() => {
-    assert_equals(handler.animationstart, 0.0);
-    assert_equals(handler.animationend, 100);
-  });
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+  assert_equals(handler.animationstart, 0.0);
+  assert_equals(handler.animationend, 100);
 }, 'Idle -> After');
 
-promise_test(t => {
-  const { animation, watcher } =
-    setupAnimation(t, 'anim 100s 100s paused');
+promise_test(async t => {
+  const { animation, watcher } = setupAnimation(t, 'anim 100s 100s paused');
 
-  return animation.ready.then(() => {
-    // Seek to Active phase.
-    animation.currentTime = 100 * MS_PER_SEC;
-    return watcher.wait_for('animationstart');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 0.0);
-  });
+  await animation.ready;
+  // Seek to Active phase.
+  animation.currentTime = 100 * MS_PER_SEC;
+  const event = await watcher.wait_for('animationstart');
+
+  assert_equals(event.elapsedTime, 0.0);
 }, 'Before -> Active');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div, handler } =
     setupAnimation(t, 'anim 100s 100s paused');
 
-  return animation.ready.then(() => {
-    // Seek to After phase.
-    animation.finish();
-    return watcher.wait_for([ 'animationstart', 'animationend' ]);
-  }).then(evt => {
-    assert_equals(handler.animationstart, 0.0);
-    assert_equals(handler.animationend, 100.0);
-  });
+  await animation.ready;
+  // Seek to After phase.
+  animation.finish();
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+
+  assert_equals(handler.animationstart, 0.0);
+  assert_equals(handler.animationend, 100.0);
 }, 'Before -> After');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div } = setupAnimation(t, 'anim 100s paused');
 
-  return watcher.wait_for('animationstart').then(evt => {
+  await watcher.wait_for('animationstart');
     // Make idle
-    div.style.display = 'none';
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 0.0);
-  });
+  div.style.display = 'none';
+  const event = await watcher.wait_for('animationcancel');
+
+  assert_equals(event.elapsedTime, 0.0);
 }, 'Active -> Idle, display: none');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    animation.currentTime = 100.0;
-    // Make idle
-    animation.timeline = null;
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    assert_time_equals_literal(evt.elapsedTime, 0.1);
-  });
+  await watcher.wait_for('animationstart');
+  animation.currentTime = 100.0;
+  // Make idle
+  animation.timeline = null;
+  const event = await watcher.wait_for('animationcancel');
+
+  assert_time_equals_literal(event.elapsedTime, 0.1);
 }, 'Active -> Idle, setting Animation.timeline = null');
 
-promise_test(t => {
+promise_test(async t => {
   // we should NOT pause animation since calling cancel synchronously.
   const { animation, watcher, div } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    animation.currentTime = 50.0;
-    animation.cancel();
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    assert_time_equals_literal(evt.elapsedTime, 0.05);
-  });
+  await watcher.wait_for('animationstart');
+  animation.currentTime = 50.0;
+  animation.cancel();
+  const event = await watcher.wait_for('animationcancel');
+  assert_time_equals_literal(event.elapsedTime, 0.05);
 }, 'Active -> Idle, calling Animation.cancel()');
 
-promise_test(t => {
-  const { animation, watcher } =
-    setupAnimation(t, 'anim 100s 100s paused');
+promise_test(async t => {
+  const { animation, watcher } = setupAnimation(t, 'anim 100s 100s paused');
 
   // Seek to Active phase.
   animation.currentTime = 100 * MS_PER_SEC;
-  return watcher.wait_for('animationstart').then(() => {
-    // Seek to Before phase.
-    animation.currentTime = 0;
-    return watcher.wait_for('animationend');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 0.0);
-  });
+  await watcher.wait_for('animationstart');
+  // Seek to Before phase.
+  animation.currentTime = 0;
+  const event = await watcher.wait_for('animationend');
+  assert_equals(event.elapsedTime, 0.0);
 }, 'Active -> Before');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s paused');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    // Seek to After phase.
-    animation.finish();
-    return watcher.wait_for('animationend');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 100.0);
-  });
+  await watcher.wait_for('animationstart');
+  // Seek to After phase.
+  animation.finish();
+  const event = await watcher.wait_for('animationend');
+
+  assert_equals(event.elapsedTime, 100.0);
 }, 'Active -> After');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div, handler } =
     setupAnimation(t, 'anim 100s 100s paused');
 
   // Seek to After phase.
   animation.finish();
-  return watcher.wait_for([ 'animationstart',
-                            'animationend' ]).then(() => {
-    // Seek to Before phase.
-    animation.currentTime = 0;
-    handler.clear();
-    return watcher.wait_for([ 'animationstart', 'animationend' ]);
-  }).then(() => {
-    assert_equals(handler.animationstart, 100.0);
-    assert_equals(handler.animationend, 0.0);
-  });
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+  // Seek to Before phase.
+  animation.currentTime = 0;
+  handler.clear();
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+  assert_equals(handler.animationstart, 100.0);
+  assert_equals(handler.animationend, 0.0);
 }, 'After -> Before');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div } =
     setupAnimation(t, 'anim 100s 100s paused');
 
   // Seek to After phase.
   animation.finish();
-  return watcher.wait_for([ 'animationstart',
-                            'animationend' ]).then(() => {
-    // Seek to Active phase.
-    animation.currentTime = 100 * MS_PER_SEC;
-    return watcher.wait_for('animationstart');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 100.0);
-  });
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+  // Seek to Active phase.
+  animation.currentTime = 100 * MS_PER_SEC;
+  const event = await watcher.wait_for('animationstart');
+  assert_equals(event.elapsedTime, 100.0);
 }, 'After -> Active');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher, div }
     = setupAnimation(t, 'anim 100s 100s 3 paused');
 
-  return animation.ready.then(() => {
-    // Seek to iteration 0 (no animationiteration event should be dispatched)
-    animation.currentTime = 100 * MS_PER_SEC;
-    return watcher.wait_for('animationstart');
-  }).then(evt => {
-    // Seek to iteration 2
-    animation.currentTime = 300 * MS_PER_SEC;
-    return watcher.wait_for('animationiteration');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 200);
-    // Seek to After phase (no animationiteration event should be dispatched)
-    animation.currentTime = 400 * MS_PER_SEC;
-    return watcher.wait_for('animationend');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 300);
-  });
+  await animation.ready;
+  // Seek to iteration 0 (no animationiteration event should be dispatched)
+  animation.currentTime = 100 * MS_PER_SEC;
+  await watcher.wait_for('animationstart');
+
+  // Seek to iteration 2
+  animation.currentTime = 300 * MS_PER_SEC;
+  const animationIterationEvent = await watcher.wait_for('animationiteration');
+  assert_equals(animationIterationEvent.elapsedTime, 200);
+  // Seek to After phase (no animationiteration event should be dispatched)
+  animation.currentTime = 400 * MS_PER_SEC;
+  const animationEndEvent = await watcher.wait_for('animationend');
+  assert_equals(animationEndEvent.elapsedTime, 300);
 }, 'Active -> Active (forwards)');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s 100s 3');
 
   // Seek to After phase.
   animation.finish();
-  return watcher.wait_for([ 'animationstart',
-                            'animationend' ]).then(() => {
-    // Seek to iteration 2 (no animationiteration event should be dispatched)
-    animation.pause();
-    animation.currentTime = 300 * MS_PER_SEC;
-    return watcher.wait_for('animationstart');
-  }).then(() => {
-    // Seek to mid of iteration 0 phase.
-    animation.currentTime = 200 * MS_PER_SEC;
-    return watcher.wait_for('animationiteration');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 200.0);
-    // Seek to before phase (no animationiteration event should be dispatched)
-    animation.currentTime = 0;
-    return watcher.wait_for('animationend');
-  });
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+  // Seek to iteration 2 (no animationiteration event should be dispatched)
+  animation.pause();
+  animation.currentTime = 300 * MS_PER_SEC;
+  await watcher.wait_for('animationstart');
+  // Seek to mid of iteration 0 phase.
+  animation.currentTime = 200 * MS_PER_SEC;
+  const event = await watcher.wait_for('animationiteration');
+  assert_equals(event.elapsedTime, 200.0);
+  // Seek to before phase (no animationiteration event should be dispatched)
+  animation.currentTime = 0;
+  await watcher.wait_for('animationend');
 }, 'Active -> Active (backwards)');
 
-promise_test(t => {
-  const { animation, watcher, div } =
-    setupAnimation(t, 'anim 100s paused');
-  return watcher.wait_for('animationstart').then(evt => {
-    // Seek to Idle phase.
-    div.style.display = 'none';
-    flushComputedStyle(div);
+promise_test(async t => {
+  const { animation, watcher, div } = setupAnimation(t, 'anim 100s paused');
+  await watcher.wait_for('animationstart');
 
-    return watcher.wait_for('animationcancel');
-  }).then(() => {
-    // Restart this animation.
-    div.style.display = '';
-    return watcher.wait_for('animationstart');
-  });
+  // Seek to Idle phase.
+  div.style.display = 'none';
+  flushComputedStyle(div);
+
+  await watcher.wait_for('animationcancel');
+  // Restart this animation.
+  div.style.display = '';
+  await watcher.wait_for('animationstart');
 }, 'Active -> Idle -> Active: animationstart is fired by restarting animation');
 
-promise_test(t => {
-  const { animation, watcher } =
-    setupAnimation(t, 'anim 100s 100s 2 paused');
+promise_test(async t => {
+  const { animation, watcher } = setupAnimation(t, 'anim 100s 100s 2 paused');
 
   // Make After.
   animation.finish();
-  return watcher.wait_for([ 'animationstart',
-                            'animationend' ]).then(evt => {
-    animation.playbackRate = -1;
-    return watcher.wait_for('animationstart');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 200);
-    // Seek to 1st iteration
-    animation.currentTime = 200 * MS_PER_SEC - 1;
-    return watcher.wait_for('animationiteration');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 100);
-    // Seek to before
-    animation.currentTime = 100 * MS_PER_SEC - 1;
-    return watcher.wait_for('animationend');
-  }).then(evt => {
-    assert_equals(evt.elapsedTime, 0);
-    assert_equals(animation.playState, 'running'); // delay
-  });
+  await watcher.wait_for([ 'animationstart', 'animationend' ]);
+  animation.playbackRate = -1;
+  const animationStartEvent = await watcher.wait_for('animationstart');
+  assert_equals(animationStartEvent.elapsedTime, 200);
+  // Seek to 1st iteration
+  animation.currentTime = 200 * MS_PER_SEC - 1;
+  const animationIterationEvent = await watcher.wait_for('animationiteration');
+  assert_equals(animationIterationEvent.elapsedTime, 100);
+  // 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(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    // Make idle
-    animation.cancel();
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    animation.cancel();
-    // Then wait a couple of frames and check that no event was dispatched.
-    return waitForAnimationFrames(2);
-  });
+  await watcher.wait_for('animationstart');
+  // Make idle
+  animation.cancel();
+  await watcher.wait_for('animationcancel');
+  animation.cancel();
+  // Then wait a couple of frames and check that no event was dispatched.
+  await waitForAnimationFrames(2);
 }, 'Call Animation.cancel after cancelling animation.');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    // Make idle
-    animation.cancel();
-    animation.play();
-    return watcher.wait_for([ 'animationcancel',
-                              'animationstart' ]);
-  });
+  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(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    // Make idle
-    animation.cancel();
-    animation.play();
-    animation.cancel();
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    // Then wait a couple of frames and check that no event was dispatched.
-    return waitForAnimationFrames(2);
-  });
+  await watcher.wait_for('animationstart');
+  // Make idle
+  animation.cancel();
+  animation.play();
+  animation.cancel();
+  await watcher.wait_for('animationcancel');
+  // Then wait a couple of frames and check that no event was dispatched.
+  await waitForAnimationFrames(2);
 }, 'Call Animation.cancel after restarting animation immediately.');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    // Make idle
-    animation.timeline = null;
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    animation.timeline = document.timeline;
-    animation.play();
-    return watcher.wait_for('animationstart');
-  });
+  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(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    // Make idle
-    animation.cancel();
-    return watcher.wait_for('animationcancel');
-  }).then(evt => {
-    animation.effect = null;
-    // Then wait a couple of frames and check that no event was dispatched.
-    return waitForAnimationFrames(2);
-  });
+  await watcher.wait_for('animationstart');
+  // Make idle
+  animation.cancel();
+  await watcher.wait_for('animationcancel');
+  animation.effect = null;
+  // Then wait a couple of frames and check that no event was dispatched.
+  await waitForAnimationFrames(2);
 }, 'Set null target effect after cancelling the animation.');
 
-promise_test(t => {
+promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
-  return watcher.wait_for('animationstart').then(evt => {
-    animation.effect = null;
-    return watcher.wait_for('animationend');
-  }).then(evt => {
-    animation.cancel();
-    // Then wait a couple of frames and check that no event was dispatched.
-    return waitForAnimationFrames(2);
-  });
+  await watcher.wait_for('animationstart');
+  animation.effect = null;
+  await watcher.wait_for('animationend');
+  animation.cancel();
+  // Then wait a couple of frames and check that no event was dispatched.
+  await waitForAnimationFrames(2);
 }, 'Cancel the animation after clearing the target effect.');
 
 </script>
 </body>
 </html>