LayoutTests/imported/mozilla/css-animations/test_animation-finished.html

   1 <!doctype html>
   2 <meta charset=utf-8>
   3 <script src="../../../resources/testharness.js"></script>
   4 <script src="../../../resources/testharnessreport.js"></script>
   5 <script src="../resources/testcommon.js"></script>
   6 <style>
   7 @keyframes abc {
   8   to { transform: translate(10px) }
   9 }
  10 @keyframes def {}
  11 </style>
  12 <body>
  13 <div id="log"></div>
  14 <script>
  15 'use strict';
  16
  17 const ANIM_PROP_VAL = 'abc 100s';
  18 const ANIM_DURATION = 100 * MS_PER_SEC;
  19
  20 promise_test(function(t) {
  21   var div = addDiv(t);
  22   // Set up pending animation
  23   div.style.animation = ANIM_PROP_VAL;
  24   var animation = div.getAnimations()[0];
  25   var previousFinishedPromise = animation.finished;
  26   // Set up listeners on finished promise
  27   var retPromise = animation.finished.then(function() {
  28     assert_unreached('finished promise is fulfilled');
  29   }).catch(function(err) {
  30     assert_equals(err.name, 'AbortError',
  31                   'finished promise is rejected with AbortError');
  32     assert_not_equals(animation.finished, previousFinishedPromise,
  33                       'Finished promise should change after the original is ' +
  34                       'rejected');
  35   });
  36
  37   // Now cancel the animation and flush styles
  38   div.style.animation = '';
  39   getComputedStyle(div).animation;
  40
  41   return retPromise;
  42 }, 'finished promise is rejected when an animation is cancelled by resetting ' +
  43    'the animation property');
  44
  45 promise_test(function(t) {
  46   var div = addDiv(t);
  47   // As before, but this time instead of removing all animations, simply update
  48   // the list of animations. At least for Firefox, updating is a different
  49   // code path.
  50
  51   // Set up pending animation
  52   div.style.animation = ANIM_PROP_VAL;
  53   var animation = div.getAnimations()[0];
  54   var previousFinishedPromise = animation.finished;
  55
  56   // Set up listeners on finished promise
  57   var retPromise = animation.finished.then(function() {
  58     assert_unreached('finished promise was fulfilled');
  59   }).catch(function(err) {
  60     assert_equals(err.name, 'AbortError',
  61                   'finished promise is rejected with AbortError');
  62     assert_not_equals(animation.finished, previousFinishedPromise,
  63                       'Finished promise should change after the original is ' +
  64                       'rejected');
  65   });
  66
  67   // Now update the animation and flush styles
  68   div.style.animation = 'def 100s';
  69   getComputedStyle(div).animation;
  70
  71   return retPromise;
  72 }, 'finished promise is rejected when an animation is cancelled by changing ' +
  73    'the animation property');
  74
  75 promise_test(function(t) {
  76   var div = addDiv(t);
  77   div.style.animation = ANIM_PROP_VAL;
  78   var animation = div.getAnimations()[0];
  79   var previousFinishedPromise = animation.finished;
  80   animation.currentTime = ANIM_DURATION;
  81   return animation.finished.then(function() {
  82     div.style.animationPlayState = 'running';
  83     return waitForAnimationFrames(2);
  84   }).then(function() {
  85     assert_equals(animation.finished, previousFinishedPromise,
  86                   'Should not replay when animation-play-state changes to ' +
  87                   '"running" on finished animation');
  88     assert_equals(animation.currentTime, ANIM_DURATION,
  89                   'currentTime should not change when animation-play-state ' +
  90                   'changes to "running" on finished animation');
  91   });
  92 }, 'Test finished promise changes when animationPlayState set to running');
  93
  94 </script>
  95 </body>