[Web Animations] Update WPT tests and move them to imported/w3c/web-platform-tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / web-animations / timing-model / animations / updating-the-finished-state.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
-<title>Tests for updating the finished state of an animation</title>
-<link rel="help" href="https://w3c.github.io/web-animations/#updating-the-finished-state">
+<title>Updating the finished state</title>
+<link rel="help" href="https://drafts.csswg.org/web-animations/#updating-the-finished-state">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 // (Also the start time is resolved and there is pending task)
 
 // Did seek = false
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
 
   // Here and in the following tests we wait until ready resolves as
   // otherwise we don't have a resolved start time. We test the case
   // where the start time is unresolved in a subsequent test.
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     // Seek to 1ms before the target end and then wait 1ms
     anim.currentTime = 100 * MS_PER_SEC - 1;
     return waitForAnimationFramesWithDelay(1);
-  }).then(function() {
+  }).then(() => {
     assert_equals(anim.currentTime, 100 * MS_PER_SEC,
                   'Hold time is set to target end clamping current time');
   });
 }, 'Updating the finished state when playing past end');
 
 // Did seek = true
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
-  return anim.ready.then(function() {
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  return anim.ready.then(() => {
     anim.currentTime = 200 * MS_PER_SEC;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, 200 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
@@ -59,12 +59,12 @@ promise_test(function(t) {
 // (on the subsequent tick the hold time will be set to the same value anyway).
 
 // Did seek = true
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
-  return anim.ready.then(function() {
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  return anim.ready.then(() => {
     anim.currentTime = 100 * MS_PER_SEC;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, 100 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
@@ -75,29 +75,29 @@ promise_test(function(t) {
 // (Also the start time is resolved and there is pending task)
 
 // Did seek = false
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   anim.play(); // Make sure animation is not initially finished
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     // Seek to 1ms before 0 and then wait 1ms
     anim.currentTime = 1;
     return waitForAnimationFramesWithDelay(1);
-  }).then(function() {
+  }).then(() => {
     assert_equals(anim.currentTime, 0 * MS_PER_SEC,
                   'Hold time is set to zero clamping current time');
   });
 }, 'Updating the finished state when playing in reverse past zero');
 
 // Did seek = true
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   anim.play();
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = -100 * MS_PER_SEC;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, -100 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
@@ -107,14 +107,14 @@ promise_test(function(t) {
 // it doesn't really matter.
 
 // Did seek = true
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
   anim.play();
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = 0;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, 0 * MS_PER_SEC,
                   'Hold time is set so current time should NOT change');
   });
@@ -126,38 +126,38 @@ promise_test(function(t) {
 // (Also the start time is resolved and there is pending task)
 
 // Did seek = false; playback rate > 0
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
 
   // We want to test that the hold time is cleared so first we need to
   // put the animation in a state where the hold time is set.
   anim.finish();
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     assert_equals(anim.currentTime, 100 * MS_PER_SEC,
                   'Hold time is initially set');
     // Then extend the duration so that the hold time is cleared and on
     // the next tick the current time will increase.
     anim.effect.timing.duration *= 2;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_greater_than(anim.currentTime, 100 * MS_PER_SEC,
                         'Hold time is not set so current time should increase');
   });
 }, 'Updating the finished state when playing before end');
 
 // Did seek = true; playback rate > 0
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.finish();
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = 50 * MS_PER_SEC;
     // When did seek = true, updating the finished state: (i) updates
     // the animation's start time and (ii) clears the hold time.
     // We can test both by checking that the currentTime is initially
     // updated and then increases.
     assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_greater_than(anim.currentTime, 50 * MS_PER_SEC,
                         'Hold time is not set so current time should increase');
   });
@@ -177,14 +177,14 @@ promise_test(function(t) {
 // will set did seek = true).
 
 // Did seek = true; playback rate < 0
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = -1;
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = 50 * MS_PER_SEC;
     assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_less_than(anim.currentTime, 50 * MS_PER_SEC,
                      'Hold time is not set so current time should decrease');
   });
@@ -193,13 +193,13 @@ promise_test(function(t) {
 // CASE 4: playback rate == 0
 
 // current time < 0
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = 0;
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = -100 * MS_PER_SEC;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, -100 * MS_PER_SEC,
                   'Hold time should not be cleared so current time should'
                   + ' NOT change');
@@ -208,13 +208,13 @@ promise_test(function(t) {
    + ' current time is less than zero');
 
 // current time < target end
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = 0;
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = 50 * MS_PER_SEC;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, 50 * MS_PER_SEC,
                   'Hold time should not be cleared so current time should'
                   + ' NOT change');
@@ -223,13 +223,13 @@ promise_test(function(t) {
    + ' current time is less than end');
 
 // current time > target end
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.playbackRate = 0;
-  return anim.ready.then(function() {
+  return anim.ready.then(() => {
     anim.currentTime = 200 * MS_PER_SEC;
-    return waitForAnimationFrames(1);
-  }).then(function() {
+    return waitForNextFrame();
+  }).then(() => {
     assert_equals(anim.currentTime, 200 * MS_PER_SEC,
                   'Hold time should not be cleared so current time should'
                   + ' NOT change');
@@ -239,8 +239,8 @@ promise_test(function(t) {
 
 // CASE 5: current time unresolved
 
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   // Trigger a change that will cause the "update the finished state"
   // procedure to run.
@@ -251,7 +251,7 @@ promise_test(function(t) {
   // change to timing, but just in case an implementation defers that, let's
   // wait a frame and check that the hold time / start time has still not been
   // updated.
-  return waitForAnimationFrames(1).then(function() {
+  return waitForAnimationFrames(1).then(() => {
     assert_equals(anim.currentTime, null,
                   'The animation hold time / start time should not be updated');
   });
@@ -259,8 +259,8 @@ promise_test(function(t) {
 
 // CASE 6: has a pending task
 
-test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   anim.currentTime = 75 * MS_PER_SEC;
   anim.play();
@@ -278,8 +278,8 @@ test(function(t) {
 // CASE 7: start time unresolved
 
 // Did seek = false
-promise_test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+promise_test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   // Make it so that only the start time is unresolved (to avoid overlapping
   // with the test case where current time is unresolved)
@@ -287,7 +287,7 @@ promise_test(function(t) {
   // Trigger a change that will cause the "update the finished state"
   // procedure to run (did seek = false).
   anim.effect.timing.duration = 200 * MS_PER_SEC;
-  return waitForAnimationFrames(1).then(function() {
+  return waitForAnimationFrames(1).then(() => {
     assert_equals(anim.currentTime, 150 * MS_PER_SEC,
                   'The animation hold time should not be updated');
     assert_equals(anim.startTime, null,
@@ -297,8 +297,8 @@ promise_test(function(t) {
    + ' did seek = false');
 
 // Did seek = true
-test(function(t) {
-  var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+test(t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   anim.cancel();
   anim.currentTime = 150 * MS_PER_SEC;
   // Trigger a change that will cause the "update the finished state"
@@ -318,14 +318,14 @@ test(function(t) {
 // --------------------------------------------------------------------
 
 function waitForFinishEventAndPromise(animation) {
-  var eventPromise = new Promise(function(resolve) {
-    animation.onfinish = function() { resolve(); }
+  const eventPromise = new Promise(resolve => {
+    animation.onfinish = resolve;
   });
   return Promise.all([eventPromise, animation.finished]);
 }
 
-promise_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
+promise_test(t => {
+  const animation = createDiv(t).animate(null, 1);
   animation.onfinish =
     t.unreached_func('Seeking to finish should not fire finish event');
   animation.finished.then(
@@ -337,27 +337,27 @@ promise_test(function(t) {
 }, 'Finish notification steps don\'t run when the animation seeks to finish'
    + ' and then seeks back again');
 
-promise_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  return animation.ready.then(function() {
+promise_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  return animation.ready.then(() => {
     return waitForFinishEventAndPromise(animation);
   });
 }, 'Finish notification steps run when the animation completes normally');
 
-promise_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  return animation.ready.then(function() {
+promise_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  return animation.ready.then(() => {
     animation.currentTime = 10;
     return waitForFinishEventAndPromise(animation);
   });
 }, 'Finish notification steps run when the animation seeks past finish');
 
-promise_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  return animation.ready.then(function() {
+promise_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  return animation.ready.then(() => {
     // Register for notifications now since once we seek away from being
     // finished the 'finished' promise will be replaced.
-    var finishNotificationSteps = waitForFinishEventAndPromise(animation);
+    const finishNotificationSteps = waitForFinishEventAndPromise(animation);
     animation.finish();
     animation.currentTime = 0;
     animation.pause();
@@ -366,41 +366,41 @@ promise_test(function(t) {
 }, 'Finish notification steps run when the animation completes with .finish(),'
    + ' even if we then seek away');
 
-promise_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  var initialFinishedPromise = animation.finished;
+promise_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  const initialFinishedPromise = animation.finished;
 
-  return animation.finished.then(function(target) {
+  return animation.finished.then(target => {
     animation.currentTime = 0;
     assert_not_equals(initialFinishedPromise, animation.finished);
   });
 }, 'Animation finished promise is replaced after seeking back to start');
 
-promise_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  var initialFinishedPromise = animation.finished;
+promise_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  const initialFinishedPromise = animation.finished;
 
-  return animation.finished.then(function(target) {
+  return animation.finished.then(target => {
     animation.play();
     assert_not_equals(initialFinishedPromise, animation.finished);
   });
 }, 'Animation finished promise is replaced after replaying from start');
 
-async_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  animation.onfinish = function(event) {
+async_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  animation.onfinish = event => {
     animation.currentTime = 0;
-    animation.onfinish = function(event) {
+    animation.onfinish = event => {
       t.done();
     };
   };
 }, 'Animation finish event is fired again after seeking back to start');
 
-async_test(function(t) {
-  var animation = createDiv(t).animate(null, 1);
-  animation.onfinish = function(event) {
+async_test(t => {
+  const animation = createDiv(t).animate(null, 1);
+  animation.onfinish = event => {
     animation.play();
-    animation.onfinish = function(event) {
+    animation.onfinish = event => {
       t.done();
     };
   };