| 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 |