layout/style/test/test_parse_rule.html@7e26c7da4463
layout/style/test/test_parse_rule.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
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();
17 window.onload=function(){
19 var base;
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.
27 var testset = [
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}",
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;}",
74 // string tokenization as error token, not EOF (bug 311566 comment 70)
75 "#a { color: green; foo: { \"bar\n;color: red}",
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; }",
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}",
120 // CSS2.1 section 4.1.9
121 "/* This is a CSS comment. */" + base,
122 base + "/* #a {color: red} */",
123 "/*********** /*/" + base,
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 },
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}",
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: ""},
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'}",
177 base + "#a:: before {content: 'FAIL'}",
178 base + "#a ::before {content: 'FAIL'}",
179 "#a::before {content: 'This is \\a",
181 ], prop: "content", pseudo: "::before"
182 },
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 },
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 },
205 ];
207 var curTest = -1;
208 var curSubTest = 0;
210 var styleElement = document.getElementsByTagName("style")[0];
211 var divElement = document.getElementById("a");
212 var frame = document.getElementsByTagName("iframe")[0];
214 var canonical;
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 };
249 doTests();
251 };
253 </script>
