001.html (8731B)
1 <!doctype html> 2 <title>CSS Test (Conditional Rules): @supports rules OM support</title> 3 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 4 <link rel="author" href="http://opera.com" title="Opera Software ASA"> 5 <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 <style> 9 @supports (padding: 0) { 10 dfn { width:0; } 11 @supports (width: 0) { 12 br { height:0; } 13 } 14 ol { display:none; } 15 } 16 @media all { 17 @supports (padding: 0) { 18 @keyframes foo { 19 0% { top: 0; left: 0; } 20 100% { top: 100px; left: 100px; } 21 } 22 } 23 } 24 @supports (border: black) and (padding: 0) and (width: 0) { 25 dfn { width:0; } 26 } 27 @supports (border: black) or (padding: 0) or (width: 0) { 28 dfn { width:0; } 29 } 30 </style> 31 <script> 32 /** 33 * Asserts tha the two strings are equal, after normalizing whitespace 34 * 35 * If the serialization of whitespace and identation ever becomes 36 * specified to a sufficient degree of presition, this should be 37 * replaced by a strict textual comparison with assert_equals. 38 */ 39 function assert_equals_normalized(a, b) { 40 var normal_a = a.replace(/\s+/g, " "); 41 var normal_b = b.replace(/\s+/g, " "); 42 assert_equals(normal_a, normal_b); 43 } 44 test(function(){ 45 var base_rule = document.styleSheets[0].cssRules[0]; 46 var child_rule = base_rule.cssRules[1]; 47 assert_equals_normalized(base_rule.cssText, 48 "@supports (padding: 0) {\n" 49 +" dfn { width: 0px; }\n" 50 +" @supports (width: 0) {\n" 51 +" br { height: 0px; }\n" 52 +" }\n" 53 +" ol { display: none; }\n" 54 +"}"); 55 assert_equals_normalized(child_rule.cssText, 56 "@supports (width: 0) {\n" 57 +" br { height: 0px; }\n" 58 +"}"); 59 }, "nested @supports serialize properly"); 60 61 test(function(){ 62 var base_rule = document.styleSheets[0].cssRules[1]; 63 var child_rule = base_rule.cssRules[0]; 64 var grand_child_rule = child_rule.cssRules[0]; 65 assert_equals_normalized(base_rule.cssText, 66 "@media all {\n" 67 +" @supports (padding: 0) {\n" 68 +" @keyframes foo {\n" 69 +" 0% { top: 0px; left: 0px; }\n" 70 +" 100% { top: 100px; left: 100px; }\n" 71 +" }\n" 72 +" }\n" 73 +"}"); 74 assert_equals_normalized(child_rule.cssText, 75 "@supports (padding: 0) {\n" 76 +" @keyframes foo {\n" 77 +" 0% { top: 0px; left: 0px; }\n" 78 +" 100% { top: 100px; left: 100px; }\n" 79 +" }\n" 80 +"}"); 81 assert_equals_normalized(grand_child_rule.cssText, 82 "@keyframes foo {\n" 83 +" 0% { top: 0px; left: 0px; }\n" 84 +" 100% { top: 100px; left: 100px; }\n" 85 +"}"); 86 }, "@keyframes nested in @supports serialize properly"); 87 88 test(function(){ 89 var rules = document.styleSheets[0].cssRules; 90 assert_equals(rules.length, 4); 91 assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE); 92 assert_equals(rules[1].type, CSSRule.MEDIA_RULE); 93 assert_equals(rules[0].cssRules.length, 3); 94 assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE); 95 assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE); 96 assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE); 97 98 assert_equals(rules[0].cssRules[1].cssRules.length, 1); 99 assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE); 100 101 assert_equals(rules[1].cssRules.length, 1); 102 assert_equals(rules[1].cssRules[0].type, CSSRule.SUPPORTS_RULE); 103 assert_equals(rules[1].cssRules[0].cssRules.length, 1); 104 assert_equals(rules[1].cssRules[0].cssRules[0].type, CSSRule.KEYFRAMES_RULE); 105 106 assert_equals(rules[2].cssRules.length, 1); 107 assert_equals(rules[2].cssRules[0].type, CSSRule.STYLE_RULE); 108 109 assert_equals(rules[3].cssRules.length, 1); 110 assert_equals(rules[3].cssRules[0].type, CSSRule.STYLE_RULE); 111 }, "The style sheet structure is properly represented"); 112 113 test(function(){ 114 document.styleSheets[0].deleteRule(1); 115 116 var rules = document.styleSheets[0].cssRules; 117 assert_equals(rules.length, 3); 118 assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE); 119 assert_equals(rules[0].cssRules.length, 3); 120 assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE); 121 assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE); 122 assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE); 123 124 assert_equals(rules[0].cssRules[1].cssRules.length, 1); 125 assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE); 126 }, "Deleting the top level of a nested structue works"); 127 128 test(function(){ 129 var rules = document.styleSheets[0].cssRules; 130 131 rules[0].cssRules[1].insertRule("img { visibility:hidden; }", 0); 132 133 assert_equals(rules.length, 3); 134 assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE); 135 assert_equals(rules[0].cssRules.length, 3); 136 assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE); 137 assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE); 138 assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE); 139 140 assert_equals(rules[0].cssRules[1].cssRules.length, 2); 141 assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE); 142 assert_equals(rules[0].cssRules[1].cssRules[0].cssText, "img { visibility: hidden; }"); 143 assert_equals(rules[0].cssRules[1].cssRules[1].type, CSSRule.STYLE_RULE); 144 assert_equals(rules[0].cssRules[1].cssRules[1].cssText, "br { height: 0px; }"); 145 }, "Rule insertion works in nested @supports rules"); 146 147 test(function(){ 148 var rules = document.styleSheets[0].cssRules; 149 150 rules[0].insertRule("@supports (left: 42px) { #foo { color:green; } }", 1); 151 152 assert_equals(rules.length, 3); 153 assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE); 154 assert_equals(rules[0].cssRules.length, 4); 155 assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE); 156 assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE); 157 assert_equals(rules[0].cssRules[2].type, CSSRule.SUPPORTS_RULE); 158 assert_equals(rules[0].cssRules[3].type, CSSRule.STYLE_RULE); 159 160 assert_equals(rules[0].cssRules[1].cssRules.length, 1); 161 assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE); 162 assert_equals(rules[0].cssRules[1].cssRules[0].cssText, "#foo { color: green; }"); 163 164 assert_equals(rules[0].cssRules[2].cssRules.length, 2); 165 assert_equals(rules[0].cssRules[2].cssRules[0].type, CSSRule.STYLE_RULE); 166 assert_equals(rules[0].cssRules[2].cssRules[0].cssText, "img { visibility: hidden; }"); 167 assert_equals(rules[0].cssRules[2].cssRules[1].type, CSSRule.STYLE_RULE); 168 assert_equals(rules[0].cssRules[2].cssRules[1].cssText, "br { height: 0px; }"); 169 }, "Insertion @supports rules into another @supports rule works"); 170 171 test(function(){ 172 var rules = document.styleSheets[0].cssRules; 173 174 rules[0].deleteRule(2); 175 176 assert_equals(rules.length, 3); 177 assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE); 178 assert_equals(rules[0].cssRules.length, 3); 179 assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE); 180 assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE); 181 assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE); 182 183 assert_equals(rules[0].cssRules[1].cssRules.length, 1); 184 assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE); 185 assert_equals(rules[0].cssRules[1].cssRules[0].cssText, "#foo { color: green; }"); 186 }, "Deletion of a nested @supports rule works"); 187 188 test(function(){ 189 var rules = document.styleSheets[0].cssRules; 190 191 rules[0].insertRule("@font-face { font-familly: foo; src: url('http://www.example.com/foo'; }", 0); 192 193 assert_equals(rules.length, 3); 194 assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE); 195 assert_equals(rules[0].cssRules.length, 4); 196 assert_equals(rules[0].cssRules[0].type, CSSRule.FONT_FACE_RULE); 197 }, "Inserting @font-face inside @supports works"); 198 199 test(function(){ 200 var rule = document.styleSheets[0].cssRules[1]; 201 assert_equals_normalized(rule.cssText, 202 "@supports (border: black) and (padding: 0) and (width: 0) {\n" 203 +" dfn { width: 0px; }\n" 204 +"}"); 205 }, "'and' arguments in @supports serialize in the correct order and with extra parentheses"); 206 test(function(){ 207 var rule = document.styleSheets[0].cssRules[2]; 208 assert_equals_normalized(rule.cssText, 209 "@supports (border: black) or (padding: 0) or (width: 0) {\n" 210 +" dfn { width: 0px; }\n" 211 +"}"); 212 }, "'or' arguments in @supports serialize in the correct order and with extra parentheses"); 213 </script> 214 215 <div id=log></div>