| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #box { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: blue; |
| animation-name: anim; |
| animation-duration: 1s; |
| animation-delay: -0.5s; |
| animation-play-state: paused; |
| animation-timing-function: linear; |
| } |
| |
| @keyframes anim { |
| from { left: 100px; } |
| to { left: 200px; } |
| } |
| </style> |
| <div id="box"></div> |
| <script> |
| function findKeyframesRule(rule) { |
| var ss = document.styleSheets; |
| for (var i = 0; i < ss.length; ++i) { |
| for (var j = 0; j < ss[i].cssRules.length; ++j) { |
| if (ss[i].cssRules[j].type == CSSRule.KEYFRAMES_RULE && |
| ss[i].cssRules[j].name == rule) { |
| return ss[i].cssRules[j]; |
| } |
| } |
| } |
| |
| return null; |
| } |
| |
| test(function() { |
| var box = document.getElementById('box'); |
| |
| // The left property should be animating initially. |
| assert_equals(getComputedStyle(box).left, '150px', 'left'); |
| |
| // A forced style-recalc aborts the previous animation. |
| box.style.animationName = "none"; |
| assert_equals(getComputedStyle(box).left, '0px', 'left'); |
| |
| // Change keyframes. |
| var keyframes = findKeyframesRule("anim"); |
| keyframes.deleteRule("0%"); |
| keyframes.deleteRule("100%"); |
| keyframes.appendRule("0% { top: 50px; }"); |
| keyframes.appendRule("100% { top: 150px; }"); |
| box.style.webkitAnimationName = "anim"; |
| |
| // The left property should reset and top should be animating. |
| assert_equals(getComputedStyle(box).left, '0px', 'left'); |
| assert_equals(getComputedStyle(box).top, '100px', 'top'); |
| }, "Check that changes to keyframe rules take effect"); |
| </script> |
