third_party/WebKit/LayoutTests/animations/timing-properties-update-paused-animation.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <style>
   5   @keyframes anim {
   6     from { background-color: blue; }
   7     to { background-color: red; }
   8   }
   9
  10   #target {
  11     animation: anim 20s -10s infinite linear paused;
  12     width: 100px;
  13     height: 100px;
  14     position: relative;
  15     background-color: green;
  16   }
  17 </style>
  18 <div id="target"></div>
  19 <script>
  20   var test1 = async_test("Changing animation duration to current elapsed time should trigger an AnimationIteration event");
  21   target.addEventListener('animationend', function(event) {
  22     assert_equals(event.elapsedTime, 1, 'elapsed time');
  23     test1.done();
  24   });
  25
  26   test(function() {
  27     target.offsetTop;
  28     target.style.animationIterationCount = 'infinite';
  29     target.style.animationDuration = '4s';
  30     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(128, 0, 128)', 'background color');
  31
  32     target.style.animationDirection = 'alternate';
  33     target.style.animationDuration = '10s';
  34     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(255, 0, 0)', 'background color');
  35
  36     target.style.animationIterationCount = '2';
  37     target.style.animationPlayState = 'running';
  38     assert_not_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
  39
  40     target.style.animationPlayState = 'paused';
  41     target.style.animationIterationCount = '1';
  42     target.style.animationDuration = '1s';
  43     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
  44
  45   }, "Check that changes in the animation timing properties are reflected immediately");
  46 </script>