|
1 <!DOCTYPE html> |
|
2 <html lang=en> |
|
3 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
|
4 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
|
5 <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
6 <body> |
|
7 <iframe></iframe> |
|
8 <!-- Note that the following style and div elements are duplicates |
|
9 of the ones written into the iframe; they are here for convienience |
|
10 in resolving the "standard" computed value for a given specification |
|
11 --> |
|
12 <style></style> |
|
13 <div id=a class='a b c' title='zxcv weeqweqeweasd a '></div> |
|
14 <script> |
|
15 SimpleTest.waitForExplicitFinish(); |
|
16 |
|
17 window.onload=function(){ |
|
18 |
|
19 var base; |
|
20 |
|
21 // A short note about escaping: all of the strings in this test go through |
|
22 // Javascript unescaping before getting passed to CSS. This means that |
|
23 // sequences like "\n" refer to a newline, a single backslash is written "\\", |
|
24 // a CSS escape sequence is something like "\\A", and some quotes must be |
|
25 // escaped. |
|
26 |
|
27 var testset = [ |
|
28 |
|
29 // Color tests |
|
30 // Generic property for testing |
|
31 { base : base = "div {color:green}", |
|
32 tests : [ |
|
33 // My misc tests |
|
34 "<!--#a {color:green}", |
|
35 base + "<!-#a {color:red}", |
|
36 base + "#a<!--{color:red}", |
|
37 "-->#a{color:green}", |
|
38 base + "--#a {color:red}", |
|
39 base + "--aasdf, #a {color:green}", |
|
40 base + "-0aasdf, #a {color:red}", |
|
41 "-asdf, #a {color:green}", |
|
42 base + "#a {color: rgb\n(255, 0, 0)}", |
|
43 "#a {font: \"Arial\n;color:green}", |
|
44 "#a {color: @charset{}\"\\\n'\"url(\na\na); color:green}", |
|
45 "#a\r{color:green}", |
|
46 "#a\n{color:green}", |
|
47 "#a\t{color:green}", |
|
48 "@threedee maroon url('asdf\n) ra('asdf\n); " + base, |
|
49 "@threedee {maroon url('asdf\n) ra('asdf\n);} " + base, |
|
50 "div[title='zxcv weeqweqeweasd\\D\\A a']{color:green}", |
|
51 "div[title~='weeqweqeweasd']{color:green}", |
|
52 base + "#a\\\n{color:red}", |
|
53 base + "#a\v{color:red}", |
|
54 |
|
55 // CSS1 section 7.1 |
|
56 "#a {color: green; rotation: 70deg;}", |
|
57 "#a {color: green;} #a{color:invalidValue;}", |
|
58 base + "#a {color: \"red\"}", |
|
59 base + "@three-dee {\n @background-lighting {\n azimuth: 30deg;\n elevation: 190deg;\n }\n #a { color: red }\n }", |
|
60 "#a {COLOR: GREEN}", |
|
61 base + "#a:wait {color: red}", |
|
62 "#a:lang(en) {color: green}", |
|
63 "#a:lang(\nen\r\t ) {color: green}", |
|
64 base + "div ! em, #a {color: red}", |
|
65 base + "//asdf.zxcv,\n#a {color: red}", |
|
66 "#a {rotation-code: \"}\"; color: green;}", |
|
67 "#a {rotation-code: \"\\\"}\\\"\"; color: green;}", |
|
68 "#a {rotation-code: '}'; color: green;}", |
|
69 "#a {rotation-code: '\\'}\\''; color: green;}", |
|
70 "#a {\n type-display: @threedee {rotation-code: '}';};\n color: green;\n }", |
|
71 base + "p {text-indent: 0.5in;} color: maroon #a {color: red;}", |
|
72 base + "p {text-indent: 0.5in;} color: maroon; #a {color: red;}", |
|
73 |
|
74 // string tokenization as error token, not EOF (bug 311566 comment 70) |
|
75 "#a { color: green; foo: { \"bar\n;color: red}", |
|
76 |
|
77 // CSS 2.1 section 4.1.3 |
|
78 "@MediA All {#a {ColOR :RgB(\t0,\r128,\n0 ) } };", |
|
79 base + "\\#a{color:red;}", |
|
80 base + "#a\\{color:red;\\}", |
|
81 base + "#a{color\\:red;}", |
|
82 base + "#a{color:red\\;}", |
|
83 "#a {c\\o\\l\\o\\r:\\g\\ree\\n}", |
|
84 "#a{ co\\00006Cor: gr\\000065en; }", |
|
85 "#a{ co\\4C or: gr\\000045en; }", |
|
86 ".IdE6n-3t0_6, #a { color: green }", |
|
87 "#IdE6n-3t0_6, #a { color: green }", |
|
88 "._ident, #a { color: green }", |
|
89 "#_ident, #a { color: green }", |
|
90 ".-ident, .a { color: green; }", // Testsuite has incorrect version |
|
91 "#怀ident, .a { color: green }", |
|
92 "#iden怀t怀, .a { color: green }", |
|
93 "#\\6000ident, .a { color: green }", |
|
94 "#iden\\6000t\\6000, .a { color: green }", |
|
95 ".怀ident, .a { color: green }", |
|
96 ".iden怀t怀, .a { color: green }", |
|
97 ".\\6000ident, .a { color: green }", |
|
98 ".iden\\6000t\\6000, .a { color: green }", |
|
99 base + "#6ident, #a {color: red }", |
|
100 ".id4ent6, .a { color: green }", |
|
101 "#\\ident, .a { color: green; }", |
|
102 "#ide\\n\\t, .a { color: green; }", |
|
103 ".\\6ident, .a { color: green; }", |
|
104 ".\\--ident, .a { color: green; }", |
|
105 |
|
106 // CSS2.1 section 4.1.5 and 4.2 |
|
107 "@import 'data:text/css,%23a{color:green}';", |
|
108 "@import \"data:text/css,%23a{color:green}\";", |
|
109 "@import url(data:text/css,%23a{color:green});", |
|
110 "@import 'data:text/css,%23a{color:green}' screen;", |
|
111 base + "@import 'data:text/css,%23a{color:red}' blahblahblah;", |
|
112 "@import 'data:text/css,%23a{color:green}'", |
|
113 "@import 'data:text/css,%23a{color:green}", |
|
114 "@foo {}" + base, |
|
115 "@foo bar {}" + base, |
|
116 "@foo; " + base, |
|
117 "@foo bar baz; " + base, |
|
118 base + "@foo {}; #a {color: red}", |
|
119 |
|
120 // CSS2.1 section 4.1.9 |
|
121 "/* This is a CSS comment. */" + base, |
|
122 base + "/* #a {color: red} */", |
|
123 "/*********** /*/" + base, |
|
124 |
|
125 // CSS2.1 section 4.3.6 |
|
126 base + "#a {color: rgb(255, 0, 0%)}", |
|
127 base + "#a {color: rgb(100%, 0, 0)}", |
|
128 base + "#a {color: rgb(255.0, 0, 0)}", |
|
129 "#a {color: rgb(0, 128, 0)}", |
|
130 "#a {color: rgb(0%, 50%, 0%)}", |
|
131 "#a {color: rgb(0%, 49.999999999999%, 0%)}", |
|
132 ], prop: "color", pseudo: "" |
|
133 }, |
|
134 |
|
135 // Border tests |
|
136 // For testing lengths |
|
137 { base : base = "#a {border-style:solid}", |
|
138 tests : [ |
|
139 // CSS1 section 7.1 |
|
140 base + "#a {border-width: funny}", |
|
141 base + "#a {border-width: 50zu}", |
|
142 base + "#a {border-width: px}", |
|
143 |
|
144 // Number/unit parsing |
|
145 base + "#a {border-width: 0.px}", |
|
146 base + "#a {border-width: ..0px}", |
|
147 base + "#a {border-width: 0..0px}", |
|
148 base + "#a {border-width: 0.}", |
|
149 base + "#a {border-width: ..0}", |
|
150 base + "#a {border-width: 0..0}", |
|
151 base + "#a {border-width: 0; border-width: .0px medium}", |
|
152 base + "#a {border-width: 0; border-width: .0 medium}", |
|
153 base + "#a {border-width: 0; border-width: 0.0px medium}", |
|
154 ], prop: "borderRightWidth", pseudo: ""}, |
|
155 |
|
156 // Content tests |
|
157 // Tests for strings and pseudos |
|
158 {base : base = ".a::before {content: 'This is \\a'}", |
|
159 tests : [ |
|
160 // CSS 2.1 section 4.1.3 |
|
161 "#a::before {content: 'This is \\a '}", |
|
162 "#a::before {content: 'This is \\A '}", |
|
163 "#a::before {content: 'This is \\0000a '}", |
|
164 "#a::before {content: 'This is \\00000a '}", |
|
165 "#a::before {content: 'This is \\\n\\00000a '}", |
|
166 "#a::before {content: 'This is \\\015\012\\00000a '}", |
|
167 "#a::before {content: 'This is \\\015\\00000a '}", |
|
168 "#a::before {content: 'This is \\\f\\00000a '}", |
|
169 "#a::before {content: 'This is\\20\f\\a'}", |
|
170 "#a::before {content: 'This is\\20\r\\a'}", |
|
171 "#a::before {content: 'This is\\20\n\\a'}", |
|
172 "#a::before {content: 'This is\\20\r\n\\a'}", |
|
173 base + "#a::before {content: 'FAIL \f\\a'}", |
|
174 base + "#a::before {content: 'FAIL \\\n\r\\a'}", |
|
175 "#a:before {content: 'This is \\a'}", |
|
176 |
|
177 base + "#a:: before {content: 'FAIL'}", |
|
178 base + "#a ::before {content: 'FAIL'}", |
|
179 "#a::before {content: 'This is \\a", |
|
180 |
|
181 ], prop: "content", pseudo: "::before" |
|
182 }, |
|
183 |
|
184 // Background color tests |
|
185 // For basic URL parsing sanity checks |
|
186 { base : base = "div {background: blue}", |
|
187 tests : [ |
|
188 "#a {background: url() blue}", |
|
189 "#a {background: url(怀) blue}", |
|
190 ], prop: "backgroundColor", pseudo: "" |
|
191 }, |
|
192 |
|
193 // A one-off test I couldn't come up with a better way to do |
|
194 { base : base = "div {border-style: dotted}", |
|
195 tests : [ |
|
196 // Sanity-check to make sure this test will work |
|
197 // This test requires a color name that starts with a "-" |
|
198 base + "#a {border: dotted 0 -moz-menuhover}", |
|
199 // The actual test: check that 0-moz-menuhover get parsed as an unknown dimension |
|
200 // rather than a separate identifier |
|
201 base + "#a {border: solid 0-moz-menuhover}", |
|
202 ], prop: "borderLeftStyle", pseudo: "" |
|
203 }, |
|
204 |
|
205 ]; |
|
206 |
|
207 var curTest = -1; |
|
208 var curSubTest = 0; |
|
209 |
|
210 var styleElement = document.getElementsByTagName("style")[0]; |
|
211 var divElement = document.getElementById("a"); |
|
212 var frame = document.getElementsByTagName("iframe")[0]; |
|
213 |
|
214 var canonical; |
|
215 |
|
216 var doTests = function() { |
|
217 if (curTest >= 0) { |
|
218 var curElement = frame.contentDocument.getElementsByTagName("div")[0]; |
|
219 var curStyle = frame.contentDocument.defaultView.getComputedStyle(curElement, testset[curTest].pseudo); |
|
220 if (testset[curTest].todo && testset[curTest].todo[testset[curTest].tests[curSubTest]]) { |
|
221 todo_is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]); |
|
222 } else { |
|
223 is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]); |
|
224 } |
|
225 curSubTest++; |
|
226 } |
|
227 if (curTest == -1 || curSubTest >= testset[curTest].tests.length) { |
|
228 curTest++; |
|
229 curSubTest = 0; |
|
230 } |
|
231 if (!(curTest < testset.length)) { |
|
232 SimpleTest.finish(); |
|
233 return; |
|
234 } |
|
235 if (curSubTest == 0) { |
|
236 styleElement.textContent = ""; |
|
237 var base = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop]; |
|
238 styleElement.textContent = testset[curTest].base; |
|
239 canonical = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop]; |
|
240 styleElement.textContent = ""; |
|
241 isnot(base, canonical, "Sanity check for rule: " + testset[curTest].base); |
|
242 } |
|
243 frame.contentDocument.open(); |
|
244 frame.contentDocument.write("<html lang=en><style>" + testset[curTest].tests[curSubTest] + "</style><div id=a class='a b c' title='zxcv weeqweqeweasd a'></div>"); |
|
245 frame.contentWindow.onload = function(){setTimeout(doTests, 0);}; |
|
246 frame.contentDocument.close(); |
|
247 }; |
|
248 |
|
249 doTests(); |
|
250 |
|
251 }; |
|
252 |
|
253 </script> |