1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_supports_rules.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,88 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=649740
1.8 +-->
1.9 +<head>
1.10 + <title>Test for Bug 649740</title>
1.11 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.13 + <style id="style">
1.14 + </style>
1.15 +</head>
1.16 +<body>
1.17 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=649740">Mozilla Bug 649740</a>
1.18 +<p id="display1"></p>
1.19 +<p id="display2"></p>
1.20 +<pre id="test">
1.21 +<script type="application/javascript">
1.22 +
1.23 +/** Test for Bug 649740 **/
1.24 +
1.25 +function condition(s) {
1.26 + return s.replace(/^@supports\s*/, '').replace(/ \s*{\s*}\s*$/, '');
1.27 +}
1.28 +
1.29 +var styleSheetText =
1.30 + "@supports(color: green){ }\n" +
1.31 + "@supports (color: green) { }\n" +
1.32 + "@supports ((color: green)) { }\n" +
1.33 + "@supports (color: green) and (color: blue) { }\n" +
1.34 + "@supports ( Font: 20px serif ! Important) { }";
1.35 +
1.36 +function runTest() {
1.37 + var style = document.getElementById("style");
1.38 + style.textContent = styleSheetText;
1.39 +
1.40 + var sheet = style.sheet;
1.41 +
1.42 + is(condition(sheet.cssRules[0].cssText), "(color: green)");
1.43 + is(condition(sheet.cssRules[1].cssText), "(color: green)");
1.44 + is(condition(sheet.cssRules[2].cssText), "((color: green))");
1.45 + is(condition(sheet.cssRules[3].cssText), "(color: green) and (color: blue)");
1.46 + is(condition(sheet.cssRules[4].cssText), "( Font: 20px serif ! Important)");
1.47 +
1.48 + var cs1 = getComputedStyle(document.getElementById("display1"), "");
1.49 + var cs2 = getComputedStyle(document.getElementById("display2"), "");
1.50 + function check_balanced_condition(condition, expected_match) {
1.51 + style.textContent = "#display1, #display2 { text-decoration: overline }\n" +
1.52 + "@supports " + condition + "{\n" +
1.53 + " #display1 { text-decoration: line-through }\n" +
1.54 + "}\n" +
1.55 + "#display2 { text-decoration: underline }\n";
1.56 + is(cs1.textDecoration,
1.57 + expected_match ? "line-through" : "overline",
1.58 + "@supports condition \"" + condition + "\" should " +
1.59 + (expected_match ? "" : "NOT ") + "match");
1.60 + is(cs2.textDecoration, "underline",
1.61 + "@supports condition \"" + condition + "\" should be balanced");
1.62 + }
1.63 +
1.64 + check_balanced_condition("not (color: green)", false);
1.65 + check_balanced_condition("not (colour: green)", true);
1.66 + check_balanced_condition("not(color: green)", false);
1.67 + check_balanced_condition("not(colour: green)", false);
1.68 + check_balanced_condition("not/* */(color: green)", false);
1.69 + check_balanced_condition("not/* */(colour: green)", false);
1.70 + check_balanced_condition("not /* */ (color: green)", false);
1.71 + check_balanced_condition("not /* */ (colour: green)", true);
1.72 + check_balanced_condition("(color: green) and (color: blue)", true);
1.73 + check_balanced_condition("(color: green) /* */ /* */ and /* */ /* */ (color: blue)", true);
1.74 + check_balanced_condition("(color: green) and(color: blue)", false);
1.75 + check_balanced_condition("(color: green) and/* */(color: blue)", false);
1.76 + check_balanced_condition("(color: green)and (color: blue)", false);
1.77 + check_balanced_condition("(color: green) or (color: blue)", true);
1.78 + check_balanced_condition("(color: green) /* */ /* */ or /* */ /* */ (color: blue)", true);
1.79 + check_balanced_condition("(color: green) or(color: blue)", false);
1.80 + check_balanced_condition("(color: green) or/* */(color: blue)", false);
1.81 + check_balanced_condition("(color: green)or (color: blue)", false);
1.82 +
1.83 + SimpleTest.finish();
1.84 +}
1.85 +
1.86 +SimpleTest.waitForExplicitFinish();
1.87 +SpecialPowers.pushPrefEnv({ "set": [["layout.css.supports-rule.enabled", true]] }, runTest);
1.88 +</script>
1.89 +</pre>
1.90 +</body>
1.91 +</html>
