| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes anim { |
| 0% { background-color: red; } |
| 50% { left: 50px; background-color: green; } |
| 100% { background-color: red; } |
| } |
| |
| #target { |
| width: 100px; |
| height: 100px; |
| position: relative; |
| } |
| </style> |
| <div id="target"></div> |
| <script> |
| test(function() { |
| var rules = document.styleSheets[0].rules; |
| for (var i = 0; i < rules.length; i++) { |
| if (rules[i].type == CSSRule.KEYFRAMES_RULE) { |
| rules[i].appendRule('50% { left: 0px; }'); |
| |
| assert_equals(rules[i].cssRules.length, 4); |
| assert_equals(rules[i].cssRules[0].cssText, '0% { background-color: red; }'); |
| assert_equals(rules[i].cssRules[1].cssText, '50% { left: 50px; background-color: green; }'); |
| assert_equals(rules[i].cssRules[2].cssText, '100% { background-color: red; }'); |
| assert_equals(rules[i].cssRules[3].cssText, '50% { left: 0px; }'); |
| } |
| } |
| |
| target.style.animation = 'anim 2s -1s paused'; |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color'); |
| assert_equals(getComputedStyle(target).left, '0px', 'left offset'); |
| }, "Check that duplicate keyframe offsets are correctly merged"); |
| </script> |
