| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <meta charset=utf8> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| @supports (width: 0) { |
| s { width: 0; } |
| @supports (width: 1) { |
| s { color: #000; } |
| @import url("../fast/cssom/resources/import.css"); |
| @charset "UTF-8"; |
| @namespace ""; |
| } |
| } |
| |
| @supports (( ( padding: 0) and (display: none)) or (display: rainbow)) { |
| dfn { width:0; } |
| |
| @supports (width: 0) { |
| br { height:0; } |
| } |
| |
| /* Rules with syntax errors should be ignored. */ |
| @supports (display: none); |
| @supports (display: none)) ; |
| @supports; |
| @supports ; |
| @supports (display: none)) {} |
| @supports (display: )) {} |
| @supports ((display: none) and {} |
| @supports (display: none) {} |
| ); |
| @supports ((display: none) and ; |
| @supports (display: none) {} |
| ); |
| |
| ol { display:none; } |
| } |
| |
| @media all { |
| @supports ( padding: 0) { |
| @page :left { top: 0 } |
| } |
| } |
| |
| @supports (border: black) and (padding: 0) and (width: 0) { |
| dfn { width:0; } |
| } |
| </style> |
| </head> |
| <body> |
| <script> |
| description("Test CSSSupportRule."); |
| |
| |
| shouldBeDefined("CSSRule.SUPPORTS_RULE"); |
| |
| evalAndLog("rules = document.styleSheets[1].cssRules"); |
| shouldEvaluateTo("rules.length", 4); |
| shouldBe("rules[0].type", "CSSRule.SUPPORTS_RULE"); |
| shouldEvaluateTo("rules[0].cssRules.length", 2); |
| shouldBe("rules[0].cssRules[0].type", "CSSRule.STYLE_RULE"); |
| shouldBe("rules[0].cssRules[1].type", "CSSRule.SUPPORTS_RULE"); |
| shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 1); |
| shouldBe("rules[0].cssRules[1].cssRules[0].type", "CSSRule.STYLE_RULE"); |
| shouldBeEqualToString("rules[0].conditionText", "(width: 0)"); |
| shouldBeEqualToString("rules[0].cssText", |
| "@supports (width: 0) {\n" + |
| " s { width: 0px; }\n" + |
| " @supports (width: 1) {\n" + |
| " s { color: rgb(0, 0, 0); }\n" + |
| "}\n" + |
| "}"); |
| |
| debug("\nInserting and deleting rules."); |
| evalAndLog("rules[0].insertRule('@media all { #s { width: 0px; } }', 2)"); |
| shouldEvaluateTo("rules[0].cssRules.length", 3); |
| shouldBe("rules[0].cssRules[2].type", "CSSRule.MEDIA_RULE"); |
| evalAndLog("rules[0].deleteRule(2)"); |
| shouldEvaluateTo("rules[0].cssRules.length", 2); |
| |
| evalAndLog("rules[0].cssRules[1].insertRule('@supports (display: rainbow) {}', 1)"); |
| shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 2); |
| shouldBe("rules[0].cssRules[1].cssRules[1].type", "CSSRule.SUPPORTS_RULE"); |
| evalAndLog("rules[0].cssRules[1].deleteRule(1)"); |
| shouldEvaluateTo("rules[0].cssRules.length", 2); |
| |
| debug("\n@charset, @namespace, @import rules are not allowed inside @supports.") |
| shouldThrow("rules[0].insertRule('@charset \"UTF-8\"', 2)"); |
| shouldThrow("rules[0].insertRule('@namespace \"\"', 2)"); |
| shouldThrow("rules[0].insertRule('@import url(\"../fast/cssom/resources/import.css\")', 2)"); |
| |
| |
| debug("\nWhitespace and formatting should be preserved within the condition, whitespace outside the condition should be trimmed."); |
| shouldBeEqualToString("rules[1].conditionText", "(( ( padding: 0) and (display: none)) or (display: rainbow))"); |
| |
| |
| debug("\n@supports rule nested inside a media rule."); |
| shouldBe("rules[2].type", "CSSRule.MEDIA_RULE"); |
| shouldEvaluateTo("rules[2].cssRules.length", 1); |
| shouldBe("rules[2].cssRules[0].type", "CSSRule.SUPPORTS_RULE"); |
| shouldBeEqualToString("rules[2].cssRules[0].conditionText", "( padding: 0)"); |
| shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 1); |
| shouldBe("rules[2].cssRules[0].cssRules[0].type", "CSSRule.PAGE_RULE"); |
| shouldBeEqualToString("rules[2].cssText", |
| "@media all { \n" + |
| " @supports ( padding: 0) {\n" + |
| " @page :left { top: 0px; }\n" + |
| "}\n" + |
| "}"); |
| |
| |
| debug("\nNo extra parens should be added to the conditionText."); |
| shouldBeEqualToString("rules[3].conditionText", "(border: black) and (padding: 0) and (width: 0)"); |
| |
| |
| debug("\nDeleting a top-level rule should work correctly."); |
| evalAndLog("document.styleSheets[1].deleteRule(3)"); |
| shouldEvaluateTo("rules.length", 3); |
| shouldBe("rules[0].type", "CSSRule.SUPPORTS_RULE"); |
| shouldEvaluateTo("rules[0].cssRules.length", 2); |
| shouldBe("rules[0].cssRules[0].type", "CSSRule.STYLE_RULE"); |
| shouldBe("rules[0].cssRules[1].type", "CSSRule.SUPPORTS_RULE"); |
| shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 1); |
| shouldBe("rules[0].cssRules[1].cssRules[0].type", "CSSRule.STYLE_RULE"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
| |
