| <!doctype html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes anim { |
| 0% { left: 0px; } |
| 20% { left: 500px; } |
| 100% { left: 100px; } |
| } |
| |
| #target1 { |
| animation: anim 10s -3s linear paused; |
| left: 0px; |
| } |
| |
| #target2 { |
| animation: anim 10s -6s linear paused; |
| left: 100px; |
| } |
| </style> |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <script> |
| test(function() { |
| assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset'); |
| |
| var sheet = document.styleSheets[0]; |
| var rules = sheet.rules; |
| var keyframes = rules[0]; |
| keyframes.appendRule('50% { left: 500px; }'); |
| keyframes.deleteRule('20%'); |
| |
| assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset'); |
| |
| var newKeyframeRuleIndex = sheet.rules.length; |
| sheet.insertRule('@keyframes anim { 0% { left: 0px; } 100% { left: 300px; } }', newKeyframeRuleIndex); // Should override 'anim' |
| |
| assert_equals(parseInt(getComputedStyle(target1).left), 90, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset'); |
| |
| sheet.deleteRule(newKeyframeRuleIndex); // Should revert to original 'anim' |
| |
| assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset'); |
| |
| newStyle = document.createElement('style'); |
| newStyle.appendChild(document.createTextNode('@keyframes anim { 0% { left: 100px; } 100% { left: 400px; } }')); |
| document.head.appendChild(newStyle); |
| |
| assert_equals(parseInt(getComputedStyle(target1).left), 190, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 280, 'left offset'); |
| |
| newStyle.innerHTML = '@keyframes anim { 0% { left: 200px; } 100% { left: 400px; } }'; |
| |
| assert_equals(parseInt(getComputedStyle(target1).left), 260, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 320, 'left offset'); |
| |
| document.head.removeChild(newStyle); // Should revert to original 'anim' with 50% { left: 500px; } replacing 20%. |
| |
| assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset'); |
| |
| }, "Check that changes to animation via CSSOM update it accordingly"); |
| </script> |
