133 lines
4.9 KiB
HTML
133 lines
4.9 KiB
HTML
<!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>
|
|
|