third_party/WebKit/LayoutTests/animations/timing-functions-update-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 { left: 0px; }
   7     50% { left: 400px; animation-timing-function: ease-in; }
   8     to { left: 500px; }
   9   }
  10
  11   #target {
  12     animation: anim 10s paused;
  13     position: absolute;
  14   }
  15 </style>
  16 <div id="target"></div>
  17 <script>
  18   test(function() {
  19     target.offsetTop;
  20     assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset');
  21     target.style.animationTimingFunction = 'ease-out'; // Should not change anything as we're on the first frame
  22     assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset');
  23
  24     target.style.animationDelay = '-1s';
  25     assert_equals(parseInt(getComputedStyle(target).left), 123, 'left offset');
  26     target.style.animationTimingFunction = 'linear';
  27     assert_equals(parseInt(getComputedStyle(target).left), 80, 'left offset');
  28     target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)';
  29     assert_equals(parseInt(getComputedStyle(target).left), 275, 'left offset');
  30     target.style.animationTimingFunction = 'ease-out';
  31     assert_equals(parseInt(getComputedStyle(target).left), 123, 'left offset');
  32
  33     target.style.animationDelay = '-4s';
  34     assert_equals(parseInt(getComputedStyle(target).left), 375, 'left offset');
  35     target.style.animationTimingFunction = 'linear';
  36     assert_equals(parseInt(getComputedStyle(target).left), 320, 'left offset');
  37     target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)';
  38     assert_equals(parseInt(getComputedStyle(target).left), 395, 'left offset');
  39     target.style.animationTimingFunction = 'ease-out';
  40     assert_equals(parseInt(getComputedStyle(target).left), 375, 'left offset');
  41
  42     target.style.animationDelay = '-6s'; // Transitioning between 50% and 100%, but timing functions on 100% are ignored
  43     assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset');
  44     target.style.animationTimingFunction = 'linear';
  45     assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset');
  46     target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)';
  47     assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset');
  48
  49   }, "Check that changes in the animation timing function are reflected immediately");
  50 </script>