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 #box { | 5 #box { |
6 position: relative; | 6 position: relative; |
7 height: 100px; | 7 height: 100px; |
8 width: 100px; | 8 width: 100px; |
9 background-color: blue; | 9 background-color: blue; |
10 animation-name: anim; | 10 animation-name: anim; |
(...skipping 25 matching lines...) Expand all Loading... |
36 } | 36 } |
37 | 37 |
38 test(function() { | 38 test(function() { |
39 var box = document.getElementById('box'); | 39 var box = document.getElementById('box'); |
40 | 40 |
41 // The left property should be animating initially. | 41 // The left property should be animating initially. |
42 assert_equals(getComputedStyle(box).left, '150px', 'left'); | 42 assert_equals(getComputedStyle(box).left, '150px', 'left'); |
43 | 43 |
44 // A forced style-recalc aborts the previous animation. | 44 // A forced style-recalc aborts the previous animation. |
45 box.style.animationName = "none"; | 45 box.style.animationName = "none"; |
46 assert_equals(getComputedStyle(box).left, 'auto', 'left'); | 46 assert_equals(getComputedStyle(box).left, '0px', 'left'); |
47 | 47 |
48 // Change keyframes. | 48 // Change keyframes. |
49 var keyframes = findKeyframesRule("anim"); | 49 var keyframes = findKeyframesRule("anim"); |
50 keyframes.deleteRule("0%"); | 50 keyframes.deleteRule("0%"); |
51 keyframes.deleteRule("100%"); | 51 keyframes.deleteRule("100%"); |
52 keyframes.appendRule("0% { top: 50px; }"); | 52 keyframes.appendRule("0% { top: 50px; }"); |
53 keyframes.appendRule("100% { top: 150px; }"); | 53 keyframes.appendRule("100% { top: 150px; }"); |
54 box.style.webkitAnimationName = "anim"; | 54 box.style.webkitAnimationName = "anim"; |
55 | 55 |
56 // The left property should reset to auto and top should be animating. | 56 // The left property should reset and top should be animating. |
57 assert_equals(getComputedStyle(box).left, 'auto', 'left'); | 57 assert_equals(getComputedStyle(box).left, '0px', 'left'); |
58 assert_equals(getComputedStyle(box).top, '100px', 'top'); | 58 assert_equals(getComputedStyle(box).top, '100px', 'top'); |
59 }, "Check that changes to keyframe rules take effect"); | 59 }, "Check that changes to keyframe rules take effect"); |
60 </script> | 60 </script> |
OLD | NEW |