conditional-CSSGroupingRule.html (11114B)
1 <!DOCTYPE HTML> 2 <html lang=en> 3 <title>CSSGroupingRule Conditional Rules Test</title> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <link rel="help" href="http://www.w3.org/TR/css3-conditional/#the-cssgroupingrule-interface"> 8 <meta name="assert" content="requirements in definition of insertRule"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <style id="style"> 13 @media unsupported { /* tests need to work even if condition is false */ } 14 @supports (unsupported: value) { } 15 </style> 16 <div id=log></div> 17 <div id="test"></div> 18 <script> 19 20 var rules = document.getElementById("style").sheet.cssRules; 21 var rule_names = ["@media", "@supports"]; 22 var rule_types = [CSSRule.MEDIA_RULE, CSSRule.SUPPORTS_RULE] 23 var rule_nums = [4, 12] 24 25 for (let i = 0; i < 2; i++) { 26 var grouping_rule = rules[i]; 27 var rule_name = rule_names[i]; 28 29 test(function() { 30 assert_true(grouping_rule instanceof CSSGroupingRule, 31 rule_name + " instanceof CSSGroupingRule"); 32 }, 33 rule_name + " is CSSGroupingRule"); 34 35 test(function() { 36 assert_equals(grouping_rule.type, rule_types[i], 37 "Rule type of " + rule_name + " rule"); 38 assert_equals(grouping_rule.type, rule_nums[i], 39 "Rule number of " + rule_name + " rule"); 40 }, 41 rule_name + " rule type"); 42 43 test(function() { 44 assert_equals(grouping_rule.cssRules.length, 0, 45 "Starting cssRules.length of " + rule_name + " rule"); 46 }, 47 "Empty " + rule_name + " rule length"); 48 49 test(function() { 50 assert_throws_dom("HIERARCHY_REQUEST_ERR", 51 function() { 52 grouping_rule.insertRule("@import url(foo.css);", 0); 53 }, 54 "inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR"); 55 }, 56 "insertRule of @import into " + rule_name); 57 58 test(function() { 59 assert_throws_dom("INDEX_SIZE_ERR", 60 function() { 61 grouping_rule.insertRule("p { color: green }", 1); 62 }, 63 "inserting at a bad index throws INDEX_SIZE_ERR"); 64 }, 65 "insertRule into empty " + rule_name + " at bad index"); 66 67 test(function() { 68 grouping_rule.insertRule("p { color: green }", 0); 69 assert_equals(grouping_rule.cssRules.length, 1, 70 "Modified cssRules.length of " + rule_name + " rule"); 71 grouping_rule.insertRule("p { color: blue }", 1); 72 assert_equals(grouping_rule.cssRules.length, 2, 73 "Modified cssRules.length of " + rule_name + " rule"); 74 grouping_rule.insertRule("p { color: aqua }", 1); 75 assert_equals(grouping_rule.cssRules.length, 3, 76 "Modified cssRules.length of " + rule_name + " rule"); 77 assert_throws_dom("INDEX_SIZE_ERR", 78 function() { 79 grouping_rule.insertRule("p { color: green }", 4); 80 }, 81 "inserting at a bad index throws INDEX_SIZE_ERR"); 82 assert_equals(grouping_rule.cssRules.length, 3, 83 "Modified cssRules.length of " + rule_name + " rule"); 84 }, 85 "insertRule into " + rule_name + " updates length"); 86 87 test(function() { 88 while (grouping_rule.cssRules.length > 0) { 89 grouping_rule.deleteRule(0); 90 } 91 grouping_rule.insertRule("@media print {}", 0); 92 assert_equals(grouping_rule.cssRules.length, 1, 93 "Modified cssRules.length of " + rule_name + " rule"); 94 assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE, 95 "inserting syntactically correct media rule succeeds"); 96 }, 97 "insertRule of valid @media into " + rule_name); 98 99 test(function() { 100 while (grouping_rule.cssRules.length > 0) { 101 grouping_rule.deleteRule(0); 102 } 103 grouping_rule.insertRule("p { color: yellow }", 0); 104 assert_equals(grouping_rule.cssRules.length, 1, 105 "Modified cssRules.length of " + rule_name + " rule"); 106 assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE, 107 "inserting syntactically correct style rule succeeds"); 108 }, 109 "insertRule of valid style rule into " + rule_name); 110 111 test(function() { 112 while (grouping_rule.cssRules.length > 0) { 113 grouping_rule.deleteRule(0); 114 } 115 assert_throws_dom("SYNTAX_ERR", 116 function() { 117 grouping_rule.insertRule("@media bad syntax;", 0); 118 }, 119 "inserting syntactically invalid rule throws syntax error"); 120 assert_equals(grouping_rule.cssRules.length, 0, 121 "Modified cssRules.length of " + rule_name + " rule"); 122 }, 123 "insertRule of invalid @media into " + rule_name); 124 125 test(function() { 126 while (grouping_rule.cssRules.length > 0) { 127 grouping_rule.deleteRule(0); 128 } 129 assert_throws_dom("SYNTAX_ERR", 130 function() { 131 grouping_rule.insertRule("", 0); 132 }, 133 "inserting empty rule throws syntax error"); 134 assert_equals(grouping_rule.cssRules.length, 0, 135 "Modified cssRules.length of " + rule_name + " rule"); 136 }, 137 "insertRule of empty string into " + rule_name); 138 139 test(function() { 140 while (grouping_rule.cssRules.length > 0) { 141 grouping_rule.deleteRule(0); 142 } 143 assert_throws_dom("SYNTAX_ERR", 144 function() { 145 grouping_rule.insertRule("@media print {} foo", 0); 146 }, 147 "inserting rule with garbage afterwards throws syntax error"); 148 assert_equals(grouping_rule.cssRules.length, 0, 149 "Modified cssRules.length of " + rule_name + " rule"); 150 }, 151 "insertRule of valid @media rule followed by garbage into " + rule_name); 152 153 test(function() { 154 while (grouping_rule.cssRules.length > 0) { 155 grouping_rule.deleteRule(0); 156 } 157 assert_throws_dom("SYNTAX_ERR", 158 function() { 159 grouping_rule.insertRule("p { color: yellow } foo", 0); 160 }, 161 "inserting rule with garbage afterwards throws syntax error"); 162 assert_equals(grouping_rule.cssRules.length, 0, 163 "Modified cssRules.length of " + rule_name + " rule"); 164 }, 165 "insertRule of valid style rule followed by garbage into " + rule_name); 166 167 test(function() { 168 while (grouping_rule.cssRules.length > 0) { 169 grouping_rule.deleteRule(0); 170 } 171 assert_throws_dom("SYNTAX_ERR", 172 function() { 173 grouping_rule.insertRule("@media print {} @media print {}", 0); 174 }, 175 "inserting multiple rules throws syntax error"); 176 assert_equals(grouping_rule.cssRules.length, 0, 177 "Modified cssRules.length of " + rule_name + " rule"); 178 }, 179 "insertRule of mutiple valid @media into " + rule_name); 180 181 test(function() { 182 while (grouping_rule.cssRules.length > 0) { 183 grouping_rule.deleteRule(0); 184 } 185 assert_throws_dom("SYNTAX_ERR", 186 function() { 187 grouping_rule.insertRule("p { color: yellow } @media print {}", 0); 188 }, 189 "inserting multiple rules throws syntax error"); 190 assert_equals(grouping_rule.cssRules.length, 0, 191 "Modified cssRules.length of " + rule_name + " rule"); 192 }, 193 "insertRule of valid style rulle followed by valid @media into " + rule_name); 194 195 test(function() { 196 while (grouping_rule.cssRules.length > 0) { 197 grouping_rule.deleteRule(0); 198 } 199 assert_throws_dom("SYNTAX_ERR", 200 function() { 201 grouping_rule.insertRule("@media print {} p { color: yellow }", 0); 202 }, 203 "inserting multiple rules throws syntax error"); 204 assert_equals(grouping_rule.cssRules.length, 0, 205 "Modified cssRules.length of " + rule_name + " rule"); 206 }, 207 "insertRule of valid style rule followed by valid @media into " + rule_name); 208 209 test(function() { 210 while (grouping_rule.cssRules.length > 0) { 211 grouping_rule.deleteRule(0); 212 } 213 assert_throws_dom("SYNTAX_ERR", 214 function() { 215 grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0); 216 }, 217 "inserting multiple rules throws syntax error"); 218 assert_equals(grouping_rule.cssRules.length, 0, 219 "Modified cssRules.length of " + rule_name + " rule"); 220 }, 221 "insertRule of two valid style rules into " + rule_name); 222 223 test(function() { 224 while (grouping_rule.cssRules.length > 0) { 225 grouping_rule.deleteRule(0); 226 } 227 var res = grouping_rule.insertRule("p { color: green }", 0); 228 assert_equals(res, 0, "return value should be index"); 229 assert_equals(grouping_rule.cssRules.length, 1, 230 "Modified cssRules.length of " + rule_name + " rule"); 231 res = grouping_rule.insertRule("p { color: green }", 0); 232 assert_equals(res, 0, "return value should be index"); 233 assert_equals(grouping_rule.cssRules.length, 2, 234 "Modified cssRules.length of " + rule_name + " rule"); 235 res = grouping_rule.insertRule("p { color: green }", 2); 236 assert_equals(res, 2, "return value should be index"); 237 assert_equals(grouping_rule.cssRules.length, 3, 238 "Modified cssRules.length of " + rule_name + " rule"); 239 }, 240 "Return value of insertRule into " + rule_name); 241 } 242 </script> 243 </body> 244 </html>