| <!doctype html> |
| <html> |
| <head> |
| <script src="resources/polyfill.js"></script> |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div id="host">This div is a shadow host.</div> |
| </body> |
| <script> |
| description("Test whether CSSHostRule API works correctly or not."); |
| var host = document.getElementById('host'); |
| var shadowRoot = host.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = '<style id="style1">@host {}</style><div>Shadow Text</div>'; |
| |
| debug("Before inserting a border rule into @host @-rules:"); |
| shouldBe("getComputedStyle(host).borderColor", '"rgb(0, 0, 0)"'); |
| |
| var styleSheet = shadowRoot.getElementById('style1').sheet; |
| var hostRule = styleSheet.cssRules[0]; |
| shouldBe("hostRule.cssRules.length", '0'); |
| shouldBe("hostRule.type", '1001'); |
| |
| debug("After inserting a border rule with an id selector into @host @-rules:"); |
| hostRule.insertRule("#host { border-color: green; }", hostRule.cssRules.length); |
| shouldBe("getComputedStyle(host).borderColor", '"rgb(0, 128, 0)"'); |
| shouldBe("hostRule.cssRules.length", '1'); |
| shouldBe("hostRule.cssText", '"@host { \\n #host { border-color: green; }\\n}"'); |
| shouldBe("hostRule.cssRules[0].cssText", '"#host { border-color: green; }"'); |
| |
| debug("After inserting a border rule with a tag selector into @host @-rules:"); |
| hostRule.insertRule("div { border-color: blue; }", hostRule.cssRules.length); |
| shouldBe("getComputedStyle(host).borderColor", '"rgb(0, 128, 0)"'); |
| shouldBe("hostRule.cssRules.length", '2'); |
| shouldBe("hostRule.cssText", '"@host { \\n #host { border-color: green; }\\n div { border-color: blue; }\\n}"'); |
| shouldBe("hostRule.cssRules[0].cssText", '"#host { border-color: green; }"'); |
| shouldBe("hostRule.cssRules[1].cssText", '"div { border-color: blue; }"'); |
| |
| debug("After deleting the border rule with an id selector from @host @-rules:"); |
| hostRule.deleteRule(0); |
| shouldBe("getComputedStyle(host).borderColor", '"rgb(0, 0, 255)"'); |
| shouldBe("hostRule.cssRules.length", '1'); |
| shouldBe("hostRule.cssText", '"@host { \\n div { border-color: blue; }\\n}"'); |
| shouldBe("hostRule.cssRules[0].cssText", '"div { border-color: blue; }"'); |
| |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </html> |
