third_party/WebKit/LayoutTests/animations/animation-delay-updates-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 paused linear;
  12     width: 100px;
  13     height: 100px;
  14     position: relative;
  15     background-color: green;
  16   }
  17 </style>
  18 <div id="target"></div>
  19 <script>
  20   test(function() {
  21     target.offsetTop;
  22     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
  23     target.style.animationDelay = '0s'; // Animation should start
  24     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)', 'background color');
  25
  26     target.style.animationDelay = '-10s'; // Animation should be halfway between blue and red
  27     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(128, 0, 128)', 'background color');
  28
  29   }, "Check that changes to animation delay only applies before the animation has started");
  30 </script>