| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes anim { |
| from { left: 0px; } |
| 50% { left: 400px; animation-timing-function: ease-in; } |
| to { left: 500px; } |
| } |
| |
| #target { |
| animation: anim 10s paused; |
| position: absolute; |
| } |
| </style> |
| <div id="target"></div> |
| <script> |
| test(function() { |
| target.offsetTop; |
| assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset'); |
| target.style.animationTimingFunction = 'ease-out'; // Should not change anything as we're on the first frame |
| assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset'); |
| |
| target.style.animationDelay = '-1s'; |
| assert_equals(parseInt(getComputedStyle(target).left), 123, 'left offset'); |
| target.style.animationTimingFunction = 'linear'; |
| assert_equals(parseInt(getComputedStyle(target).left), 80, 'left offset'); |
| target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)'; |
| assert_equals(parseInt(getComputedStyle(target).left), 275, 'left offset'); |
| target.style.animationTimingFunction = 'ease-out'; |
| assert_equals(parseInt(getComputedStyle(target).left), 123, 'left offset'); |
| |
| target.style.animationDelay = '-4s'; |
| assert_equals(parseInt(getComputedStyle(target).left), 375, 'left offset'); |
| target.style.animationTimingFunction = 'linear'; |
| assert_equals(parseInt(getComputedStyle(target).left), 320, 'left offset'); |
| target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)'; |
| assert_equals(parseInt(getComputedStyle(target).left), 395, 'left offset'); |
| target.style.animationTimingFunction = 'ease-out'; |
| assert_equals(parseInt(getComputedStyle(target).left), 375, 'left offset'); |
| |
| target.style.animationDelay = '-6s'; // Transitioning between 50% and 100%, but timing functions on 100% are ignored |
| assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); |
| target.style.animationTimingFunction = 'linear'; |
| assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); |
| target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)'; |
| assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); |
| |
| }, "Check that changes in the animation timing function are reflected immediately"); |
| </script> |
