OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/testharness.js"></script> | 2 <script src="../../resources/testharness.js"></script> |
3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../../resources/testharnessreport.js"></script> |
4 <style> | 4 <style> |
5 @keyframes anim { | 5 @keyframes anim { |
6 from { left: 0px; } | 6 from { left: 0px; } |
7 50% { left: 400px; animation-timing-function: ease-in; } | 7 50% { left: 400px; animation-timing-function: ease-in; } |
8 to { left: 500px; } | 8 to { left: 500px; } |
9 } | 9 } |
10 | 10 |
11 #target { | 11 #target { |
12 animation: anim 10s paused; | 12 animation: anim 10s paused; |
13 position: absolute; | 13 position: absolute; |
(...skipping 27 matching lines...) Expand all Loading... |
41 | 41 |
42 target.style.animationDelay = '-6s'; // Transitioning between 50% and 100%,
but timing functions on 100% are ignored | 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'); | 43 assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); |
44 target.style.animationTimingFunction = 'linear'; | 44 target.style.animationTimingFunction = 'linear'; |
45 assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); | 45 assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); |
46 target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)'; | 46 target.style.animationTimingFunction = 'cubic-bezier(0, 0.5, 0.2, 1)'; |
47 assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); | 47 assert_equals(parseInt(getComputedStyle(target).left), 406, 'left offset'); |
48 | 48 |
49 }, "Check that changes in the animation timing function are reflected immediat
ely"); | 49 }, "Check that changes in the animation timing function are reflected immediat
ely"); |
50 </script> | 50 </script> |
OLD | NEW |