layout/style/test/test_supports_rules.html@7e26c7da4463
layout/style/test/test_supports_rules.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=649740
5 -->
6 <head>
7 <title>Test for Bug 649740</title>
8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
10 <style id="style">
11 </style>
12 </head>
13 <body>
14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=649740">Mozilla Bug 649740</a>
15 <p id="display1"></p>
16 <p id="display2"></p>
17 <pre id="test">
18 <script type="application/javascript">
20 /** Test for Bug 649740 **/
22 function condition(s) {
23 return s.replace(/^@supports\s*/, '').replace(/ \s*{\s*}\s*$/, '');
24 }
26 var styleSheetText =
27 "@supports(color: green){ }\n" +
28 "@supports (color: green) { }\n" +
29 "@supports ((color: green)) { }\n" +
30 "@supports (color: green) and (color: blue) { }\n" +
31 "@supports ( Font: 20px serif ! Important) { }";
33 function runTest() {
34 var style = document.getElementById("style");
35 style.textContent = styleSheetText;
37 var sheet = style.sheet;
39 is(condition(sheet.cssRules[0].cssText), "(color: green)");
40 is(condition(sheet.cssRules[1].cssText), "(color: green)");
41 is(condition(sheet.cssRules[2].cssText), "((color: green))");
42 is(condition(sheet.cssRules[3].cssText), "(color: green) and (color: blue)");
43 is(condition(sheet.cssRules[4].cssText), "( Font: 20px serif ! Important)");
45 var cs1 = getComputedStyle(document.getElementById("display1"), "");
46 var cs2 = getComputedStyle(document.getElementById("display2"), "");
47 function check_balanced_condition(condition, expected_match) {
48 style.textContent = "#display1, #display2 { text-decoration: overline }\n" +
49 "@supports " + condition + "{\n" +
50 " #display1 { text-decoration: line-through }\n" +
51 "}\n" +
52 "#display2 { text-decoration: underline }\n";
53 is(cs1.textDecoration,
54 expected_match ? "line-through" : "overline",
55 "@supports condition \"" + condition + "\" should " +
56 (expected_match ? "" : "NOT ") + "match");
57 is(cs2.textDecoration, "underline",
58 "@supports condition \"" + condition + "\" should be balanced");
59 }
61 check_balanced_condition("not (color: green)", false);
62 check_balanced_condition("not (colour: green)", true);
63 check_balanced_condition("not(color: green)", false);
64 check_balanced_condition("not(colour: green)", false);
65 check_balanced_condition("not/* */(color: green)", false);
66 check_balanced_condition("not/* */(colour: green)", false);
67 check_balanced_condition("not /* */ (color: green)", false);
68 check_balanced_condition("not /* */ (colour: green)", true);
69 check_balanced_condition("(color: green) and (color: blue)", true);
70 check_balanced_condition("(color: green) /* */ /* */ and /* */ /* */ (color: blue)", true);
71 check_balanced_condition("(color: green) and(color: blue)", false);
72 check_balanced_condition("(color: green) and/* */(color: blue)", false);
73 check_balanced_condition("(color: green)and (color: blue)", false);
74 check_balanced_condition("(color: green) or (color: blue)", true);
75 check_balanced_condition("(color: green) /* */ /* */ or /* */ /* */ (color: blue)", true);
76 check_balanced_condition("(color: green) or(color: blue)", false);
77 check_balanced_condition("(color: green) or/* */(color: blue)", false);
78 check_balanced_condition("(color: green)or (color: blue)", false);
80 SimpleTest.finish();
81 }
83 SimpleTest.waitForExplicitFinish();
84 SpecialPowers.pushPrefEnv({ "set": [["layout.css.supports-rule.enabled", true]] }, runTest);
85 </script>
86 </pre>
87 </body>
88 </html>
