| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <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> |
| </head> |
| <body> |
| <script> |
| description("Test the CSSOM of @keyframes.") |
| |
| 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]; |
| shouldBeEqualToString("keyframeRule.toString()", "[object CSSKeyframesRule]"); |
| shouldBe("keyframeRule.type", "7"); |
| shouldBeEqualToString("keyframeRule.name", "anim"); |
| shouldBeEqualToString("keyframeRule.findRule('from').cssText", "0% { left: 200px; }"); |
| shouldBeEqualToString("keyframeRule.findRule('to').cssText", "100% { left: 300px; }"); |
| keyframeRule.deleteRule("from"); |
| shouldBeNull("keyframeRule.findRule('from')"); |
| keyframeRule.appendRule("from { left: 200px; }"); |
| shouldBeEqualToString("keyframeRule.findRule('from').cssText", "0% { left: 200px; }"); |
| shouldBeEqualToString("keyframeRule.cssRules[0].toString()", "[object CSSKeyframeRule]"); |
| shouldBeEqualToString("keyframeRule.cssRules[0].cssText", "100% { left: 300px; }"); |
| shouldBeEqualToString("keyframeRule.cssRules[0].keyText", "100%"); |
| shouldBeEqualToString("keyframeRule.cssRules[0].style.cssText", "left: 300px;"); |
| shouldBeEqualToString("keyframeRule.cssRules[1].toString()", "[object CSSKeyframeRule]"); |
| shouldBeEqualToString("keyframeRule.cssRules[1].cssText", "0% { left: 200px; }"); |
| shouldBeEqualToString("keyframeRule.cssRules[1].keyText", "0%"); |
| shouldBeEqualToString("keyframeRule.cssRules[1].style.cssText", "left: 200px;"); |
| |
| shouldThrow("new CSSKeyframesRule().name", "'TypeError: Illegal constructor'"); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| </body> |
| </html> |
