third_party/WebKit/LayoutTests/web-animations-api/timed-item.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <body>
   6     <div id='e'></div>
   7 </body>
   8
   9 <script>
  10 var element = document.getElementById('e');
  11 var keyframes = [{opacity: '1', offset: 0}, {opacity: '0', offset: 1}];
  12
  13 test(function() {
  14     var keyframeEffect = new KeyframeEffect(element, keyframes);
  15     assert_equals(keyframeEffect.computedTiming.localTime, null);
  16     assert_equals(keyframeEffect.computedTiming.currentIteration, null);
  17 }, 'localTime and currentIteration are null when the KeyframeEffect is not associated with an Animation');
  18
  19 test(function() {
  20     var animation = element.animate(keyframes, {fill: 'both', duration: 2000, iterations: 3});
  21     var keyframeEffect = animation.effect;
  22     animation.currentTime = -1000;
  23     assert_equals(keyframeEffect.computedTiming.localTime, -1000, 'localTime');
  24     assert_equals(keyframeEffect.computedTiming.currentIteration, 0);
  25     animation.currentTime = 1000;
  26     assert_equals(keyframeEffect.computedTiming.localTime, 1000);
  27     assert_equals(keyframeEffect.computedTiming.currentIteration, 0);
  28     animation.currentTime = 5000;
  29     assert_equals(keyframeEffect.computedTiming.localTime, 5000);
  30     assert_equals(keyframeEffect.computedTiming.currentIteration, 2);
  31     animation.currentTime = 7000;
  32     assert_equals(keyframeEffect.computedTiming.localTime, 7000);
  33     assert_equals(keyframeEffect.computedTiming.currentIteration, 2);
  34 }, 'TimedItem.localTime and TimedItem.currentIteration return reasonable values when an keyframeEffect is in effect');
  35
  36 test(function() {
  37     var animation = element.animate(keyframes);
  38     var keyframeEffect = animation.effect;
  39     animation.currentTime = -1;
  40     assert_equals(keyframeEffect.computedTiming.currentIteration, null);
  41     animation.currentTime = 1;
  42     assert_equals(keyframeEffect.computedTiming.currentIteration, null);
  43 }, 'TimedItem.currentIteration is null when keyframeEffect is not in effect');
  44
  45 test(function() {
  46     var keyframeEffect = new KeyframeEffect(element, keyframes, 2);
  47     assert_equals(keyframeEffect.computedTiming.startTime, 0);
  48     assert_equals(keyframeEffect.computedTiming.endTime, 2);
  49     assert_equals(keyframeEffect.computedTiming.duration, 2);
  50     assert_equals(keyframeEffect.computedTiming.activeDuration, 2);
  51 }, 'TimedItem startTime, endTime, duration, activeDuration are sensible for a simple keyframeEffect');
  52
  53 test(function() {
  54   var keyframeEffect = new KeyframeEffect(element, keyframes, {duration: 3, iterations: 4, delay: 5});
  55   assert_equals(keyframeEffect.computedTiming.startTime, 0);
  56   assert_equals(keyframeEffect.computedTiming.endTime, 17);
  57   assert_equals(keyframeEffect.computedTiming.duration, 3);
  58   assert_equals(keyframeEffect.computedTiming.activeDuration, 12);
  59 }, 'TimedItem startTime, endTime, duration, activeDuration are sensible for keyframeEffects with delays and iterations');
  60
  61 test(function() {
  62   var keyframeEffect = new KeyframeEffect(element, keyframes, {delay: 1});
  63   assert_equals(keyframeEffect.computedTiming.duration, 0);
  64 }, 'TimedItem duration is calculated when no duration is specified');
  65
  66 test(function() {
  67   var timing = new KeyframeEffect(element, keyframes).timing;
  68   for (var attr of ['delay', 'endDelay', 'iterationStart', 'playbackRate']) {
  69     assert_throws(new TypeError, function() { timing[attr] = NaN; }, attr);
  70     assert_throws(new TypeError, function() { timing[attr] = Infinity; }, attr);
  71   }
  72 }, 'Restricted double attributes on the Timing interface throws for non-finite values.');
  73
  74 </script>