test_supports_rules.html (3558B)
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 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"> 19 20 /** Test for Bug 649740 */ 21 22 function condition(s) { 23 return s.replace(/^@supports\s*/, '').replace(/ \s*{\s*}\s*$/, ''); 24 } 25 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) { }"; 32 33 function runTest() { 34 var style = document.getElementById("style"); 35 style.textContent = styleSheetText; 36 37 var sheet = style.sheet; 38 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)"); 44 45 var cs1 = getComputedStyle(document.getElementById("display1"), ""); 46 var cs2 = getComputedStyle(document.getElementById("display2"), ""); 47 function check_balanced_condition(condition_inner, expected_match) { 48 style.textContent = "#display1, #display2 { text-decoration: overline }\n" + 49 "@supports " + condition_inner + "{\n" + 50 " #display1 { text-decoration: line-through }\n" + 51 "}\n" + 52 "#display2 { text-decoration: underline }\n"; 53 is(cs1.textDecorationLine, 54 expected_match ? "line-through" : "overline", 55 "@supports condition \"" + condition_inner + "\" should " + 56 (expected_match ? "" : "NOT ") + "match"); 57 is(cs2.textDecorationLine, "underline", 58 "@supports condition \"" + condition_inner + "\" should be balanced"); 59 } 60 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)", true); 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)", true); 73 check_balanced_condition("(color: green)and (color: blue)", true); 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)", true); 78 check_balanced_condition("(color: green)or (color: blue)", true); 79 80 SimpleTest.finish(); 81 } 82 83 SimpleTest.waitForExplicitFinish(); 84 runTest(); 85 </script> 86 </pre> 87 </body> 88 </html>