| <!DOCTYPE html> |
| <style type="text/css" media="screen"> |
| #test { |
| position: absolute; |
| left: 0; |
| top: 100px; |
| height: 100px; |
| width: 100px; |
| background-color: blue; |
| animation-duration: 1s; |
| animation-timing-function: linear; |
| animation-name: anim; |
| animation-fill-mode: forwards; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| async_test(t => { |
| window.addEventListener("load", t.step_func_done(() => { |
| var testContainer = document.createElement("div"); |
| document.body.appendChild(testContainer); |
| |
| testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>'; |
| |
| e = document.getElementById('test'); |
| var lastSheet = document.styleSheets[document.styleSheets.length - 1]; |
| lastSheet.insertRule("@keyframes anim { from { left: 200px; } to { left: 300px;} }", lastSheet.cssRules.length); |
| |
| var keyframeRule = lastSheet.cssRules[lastSheet.cssRules.length - 1]; |
| assert_equals(keyframeRule.toString(), "[object CSSKeyframesRule]"); |
| assert_equals(keyframeRule.type, 7); |
| assert_equals(keyframeRule.name, "anim"); |
| assert_equals(keyframeRule.findRule('from').cssText, "0% { left: 200px; }"); |
| assert_equals(keyframeRule.findRule('to').cssText, "100% { left: 300px; }"); |
| keyframeRule.deleteRule("from"); |
| assert_equals(keyframeRule.findRule('from'), null); |
| keyframeRule.appendRule("from { left: 200px; }"); |
| assert_equals(keyframeRule.findRule('from').cssText, "0% { left: 200px; }"); |
| assert_equals(keyframeRule.cssRules[0].toString(), "[object CSSKeyframeRule]"); |
| assert_equals(keyframeRule.cssRules[0].cssText, "100% { left: 300px; }"); |
| assert_equals(keyframeRule.cssRules[0].keyText, "100%"); |
| assert_equals(keyframeRule.cssRules[0].style.cssText, "left: 300px;"); |
| assert_equals(keyframeRule.cssRules[1].toString(), "[object CSSKeyframeRule]"); |
| assert_equals(keyframeRule.cssRules[1].cssText, "0% { left: 200px; }"); |
| assert_equals(keyframeRule.cssRules[1].keyText, "0%"); |
| assert_equals(keyframeRule.cssRules[1].style.cssText, "left: 200px;"); |
| |
| try { |
| new CSSKeyframesRule().name; |
| } catch (e) { |
| assert_equals(e.message, "Illegal constructor"); |
| } |
| |
| document.body.removeChild(testContainer); |
| })); |
| }, "Test the CSSOM of @keyframes"); |
| </script> |
