|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <head> |
|
4 <title>CSS Variables Allowed Syntax</title> |
|
5 <link rel="author" title="L. David Baron" href="http://dbaron.org/"> |
|
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 <style id="style"> |
|
12 @media print {} |
|
13 </style> |
|
14 <script id="metadata_cache">/* |
|
15 { |
|
16 "rule_type": {}, |
|
17 "rule_length": {}, |
|
18 "insert_import_throws": {}, |
|
19 "insert_index_throws1": {}, |
|
20 "insert_index_throws2": {}, |
|
21 "insert_media_succeed": {}, |
|
22 "insert_style_succeed": {}, |
|
23 "insert_bad_media_throw": {}, |
|
24 "insert_empty_throw": {}, |
|
25 "insert_garbage_after_media_throw": {}, |
|
26 "insert_garbage_after_style_throw": {}, |
|
27 "insert_two_media_throw": {}, |
|
28 "insert_style_media_throw": {}, |
|
29 "insert_media_style_throw": {}, |
|
30 "insert_two_style_throw": {}, |
|
31 "insert_retval": {} |
|
32 } |
|
33 */</script> |
|
34 </head> |
|
35 <body onload="run()"> |
|
36 <div id=log></div> |
|
37 <div id="test"></div> |
|
38 <script> |
|
39 |
|
40 var sheet = document.getElementById("style").sheet; |
|
41 |
|
42 var grouping_rule = sheet.cssRules[0]; |
|
43 |
|
44 test(function() { |
|
45 assert_equals(grouping_rule.type, CSSRule.MEDIA_RULE, |
|
46 "Rule type of @media rule"); |
|
47 }, |
|
48 "rule_type"); |
|
49 |
|
50 test(function() { |
|
51 assert_equals(grouping_rule.cssRules.length, 0, |
|
52 "Starting cssRules.length of @media rule"); |
|
53 }, |
|
54 "rule_length"); |
|
55 |
|
56 test(function() { |
|
57 assert_throws("HIERARCHY_REQUEST_ERR", |
|
58 function() { |
|
59 grouping_rule.insertRule("@import url(foo.css);", 0); |
|
60 }, |
|
61 "inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR"); |
|
62 }, |
|
63 "insert_import_throws"); |
|
64 |
|
65 test(function() { |
|
66 assert_throws("INDEX_SIZE_ERR", |
|
67 function() { |
|
68 grouping_rule.insertRule("p { color: green }", 1); |
|
69 }, |
|
70 "inserting at a bad index throws INDEX_SIZE_ERR"); |
|
71 }, |
|
72 "insert_index_throws1"); |
|
73 test(function() { |
|
74 grouping_rule.insertRule("p { color: green }", 0); |
|
75 assert_equals(grouping_rule.cssRules.length, 1, |
|
76 "Modified cssRules.length of @media rule"); |
|
77 grouping_rule.insertRule("p { color: blue }", 1); |
|
78 assert_equals(grouping_rule.cssRules.length, 2, |
|
79 "Modified cssRules.length of @media rule"); |
|
80 grouping_rule.insertRule("p { color: aqua }", 1); |
|
81 assert_equals(grouping_rule.cssRules.length, 3, |
|
82 "Modified cssRules.length of @media rule"); |
|
83 assert_throws("INDEX_SIZE_ERR", |
|
84 function() { |
|
85 grouping_rule.insertRule("p { color: green }", 4); |
|
86 }, |
|
87 "inserting at a bad index throws INDEX_SIZE_ERR"); |
|
88 assert_equals(grouping_rule.cssRules.length, 3, |
|
89 "Modified cssRules.length of @media rule"); |
|
90 }, |
|
91 "insert_index_throws2"); |
|
92 |
|
93 test(function() { |
|
94 while (grouping_rule.cssRules.length > 0) { |
|
95 grouping_rule.deleteRule(0); |
|
96 } |
|
97 grouping_rule.insertRule("@media print {}", 0); |
|
98 assert_equals(grouping_rule.cssRules.length, 1, |
|
99 "Modified cssRules.length of @media rule"); |
|
100 assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE, |
|
101 "inserting syntactically correct media rule succeeds"); |
|
102 }, |
|
103 "insert_media_succeed"); |
|
104 test(function() { |
|
105 while (grouping_rule.cssRules.length > 0) { |
|
106 grouping_rule.deleteRule(0); |
|
107 } |
|
108 grouping_rule.insertRule("p { color: yellow }", 0); |
|
109 assert_equals(grouping_rule.cssRules.length, 1, |
|
110 "Modified cssRules.length of @media rule"); |
|
111 assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE, |
|
112 "inserting syntactically correct style rule succeeds"); |
|
113 }, |
|
114 "insert_style_succeed"); |
|
115 test(function() { |
|
116 while (grouping_rule.cssRules.length > 0) { |
|
117 grouping_rule.deleteRule(0); |
|
118 } |
|
119 assert_throws("SYNTAX_ERR", |
|
120 function() { |
|
121 grouping_rule.insertRule("@media bad syntax;", 0); |
|
122 }, |
|
123 "inserting syntactically invalid rule throws syntax error"); |
|
124 assert_equals(grouping_rule.cssRules.length, 0, |
|
125 "Modified cssRules.length of @media rule"); |
|
126 }, |
|
127 "insert_bad_media_throw"); |
|
128 test(function() { |
|
129 while (grouping_rule.cssRules.length > 0) { |
|
130 grouping_rule.deleteRule(0); |
|
131 } |
|
132 assert_throws("SYNTAX_ERR", |
|
133 function() { |
|
134 grouping_rule.insertRule("", 0); |
|
135 }, |
|
136 "inserting empty rule throws syntax error"); |
|
137 assert_equals(grouping_rule.cssRules.length, 0, |
|
138 "Modified cssRules.length of @media rule"); |
|
139 }, |
|
140 "insert_empty_throw"); |
|
141 test(function() { |
|
142 while (grouping_rule.cssRules.length > 0) { |
|
143 grouping_rule.deleteRule(0); |
|
144 } |
|
145 assert_throws("SYNTAX_ERR", |
|
146 function() { |
|
147 grouping_rule.insertRule("@media print {} foo", 0); |
|
148 }, |
|
149 "inserting rule with garbage afterwards throws syntax error"); |
|
150 assert_equals(grouping_rule.cssRules.length, 0, |
|
151 "Modified cssRules.length of @media rule"); |
|
152 }, |
|
153 "insert_garbage_after_media_throw"); |
|
154 test(function() { |
|
155 while (grouping_rule.cssRules.length > 0) { |
|
156 grouping_rule.deleteRule(0); |
|
157 } |
|
158 assert_throws("SYNTAX_ERR", |
|
159 function() { |
|
160 grouping_rule.insertRule("p { color: yellow } foo", 0); |
|
161 }, |
|
162 "inserting rule with garbage afterwards throws syntax error"); |
|
163 assert_equals(grouping_rule.cssRules.length, 0, |
|
164 "Modified cssRules.length of @media rule"); |
|
165 }, |
|
166 "insert_garbage_after_style_throw"); |
|
167 test(function() { |
|
168 while (grouping_rule.cssRules.length > 0) { |
|
169 grouping_rule.deleteRule(0); |
|
170 } |
|
171 assert_throws("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 @media rule"); |
|
178 }, |
|
179 "insert_two_media_throw"); |
|
180 test(function() { |
|
181 while (grouping_rule.cssRules.length > 0) { |
|
182 grouping_rule.deleteRule(0); |
|
183 } |
|
184 assert_throws("SYNTAX_ERR", |
|
185 function() { |
|
186 grouping_rule.insertRule("p { color: yellow } @media print {}", 0); |
|
187 }, |
|
188 "inserting multiple rules throws syntax error"); |
|
189 assert_equals(grouping_rule.cssRules.length, 0, |
|
190 "Modified cssRules.length of @media rule"); |
|
191 }, |
|
192 "insert_style_media_throw"); |
|
193 test(function() { |
|
194 while (grouping_rule.cssRules.length > 0) { |
|
195 grouping_rule.deleteRule(0); |
|
196 } |
|
197 assert_throws("SYNTAX_ERR", |
|
198 function() { |
|
199 grouping_rule.insertRule("@media print {} p { color: yellow }", 0); |
|
200 }, |
|
201 "inserting multiple rules throws syntax error"); |
|
202 assert_equals(grouping_rule.cssRules.length, 0, |
|
203 "Modified cssRules.length of @media rule"); |
|
204 }, |
|
205 "insert_media_style_throw"); |
|
206 test(function() { |
|
207 while (grouping_rule.cssRules.length > 0) { |
|
208 grouping_rule.deleteRule(0); |
|
209 } |
|
210 assert_throws("SYNTAX_ERR", |
|
211 function() { |
|
212 grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0); |
|
213 }, |
|
214 "inserting multiple rules throws syntax error"); |
|
215 assert_equals(grouping_rule.cssRules.length, 0, |
|
216 "Modified cssRules.length of @media rule"); |
|
217 }, |
|
218 "insert_two_style_throw"); |
|
219 |
|
220 test(function() { |
|
221 while (grouping_rule.cssRules.length > 0) { |
|
222 grouping_rule.deleteRule(0); |
|
223 } |
|
224 var res = grouping_rule.insertRule("p { color: green }", 0); |
|
225 assert_equals(res, 0, "return value should be index"); |
|
226 assert_equals(grouping_rule.cssRules.length, 1, |
|
227 "Modified cssRules.length of @media rule"); |
|
228 res = grouping_rule.insertRule("p { color: green }", 0); |
|
229 assert_equals(res, 0, "return value should be index"); |
|
230 assert_equals(grouping_rule.cssRules.length, 2, |
|
231 "Modified cssRules.length of @media rule"); |
|
232 res = grouping_rule.insertRule("p { color: green }", 2); |
|
233 assert_equals(res, 2, "return value should be index"); |
|
234 assert_equals(grouping_rule.cssRules.length, 3, |
|
235 "Modified cssRules.length of @media rule"); |
|
236 }, |
|
237 "insert_retval"); |
|
238 |
|
239 |
|
240 </script> |
|
241 </body> |
|
242 </html> |
|
243 |