Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | <html> |
2 | <head> | |
3 | <script type="text/javascript" src="../MochiKit/MockDOM.js"></script> | |
4 | <script type="text/javascript" src="../MochiKit/Base.js"></script> | |
5 | <script type="text/javascript" src="../MochiKit/Iter.js"></script> | |
6 | <script type="text/javascript" src="../MochiKit/DOM.js"></script> | |
7 | <script type="text/javascript" src="../MochiKit/Style.js"></script> | |
8 | <script type="text/javascript" src="../MochiKit/Selector.js"></script> | |
9 | <script type="text/javascript" src="SimpleTest/SimpleTest.js"></script> | |
10 | <link rel="stylesheet" type="text/css" href="SimpleTest/test.css"> | |
11 | <style type="text/css"> | |
12 | p, #sequence { | |
13 | display: none; | |
14 | } | |
15 | </style> | |
16 | </head> | |
17 | <body> | |
18 | <p>Test originally from <a href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a>.</p> | |
19 | ||
20 | <p>Here are some links in a normal paragraph: <a href="http://www.google.com/" title="Google!">Google</a>, <a href="http://groups.google.com/">Google Groups</a>. This link has <code>class="blog"</code>: <a href="http://diveintomark.org/" class="blog" fakeattribute="bla">diveintomark</a></p> | |
21 | <div id="foo"> | |
22 | <p>Everything inside the red border is inside a div with <code>id="foo"</code>.</p> | |
23 | <p>This is a normal link: <a href="http://www.yahoo.com/">Yahoo</a></p> | |
24 | ||
25 | <a style="display: none" href="http://www.example.com/outsidep">This a is not inside a p</a> | |
26 | ||
27 | <p>This link has <code>class="blog"</code>: <a href="http://simon.incutio.com/" class="blog">Simon Willison's Weblog</a></p> | |
28 | <p>This <span><a href="http://www.example.com/insidespan">link</a></span> is inside a span, not directly child of p</p> | |
29 | <p lang="en-us">Nonninn</p> | |
30 | <p lang="is-IS">Sniðugt</p> | |
31 | <p> | |
32 | <input type="button" name="enabled" value="enabled" id="enabled"> | |
33 | <input type="button" name="disabled" value="disabled" id="disabled" disabled="1" /> | |
34 | <input type="checkbox" name="checked" value="checked" id="checked" checked="1" /> | |
35 | </p> | |
36 | </div> | |
37 | ||
38 | <div id="sequence"> | |
39 | <a href="http://www.example.com/link1">Link 1</a> | |
40 | <a href="http://www.example.com/link2">Link 2</a> | |
41 | <a href="http://www.example.com/link3">Link 3</a> | |
42 | <a href="http://www.example.com/link4">Link 4</a> | |
43 | <p>Something else</p> | |
44 | <a href="http://www.example.com/link5">Link 5</a> | |
45 | <a href="http://www.example.com/link6">Link 6</a> | |
46 | <a href="http://www.example.com/link7">Link 7</a> | |
47 | <a href="http://www.example.com/link8">Link 8</a> | |
48 | </div> | |
49 | ||
50 | <div id="multiclass" class="multiple classnames here"></div> | |
51 | <pre id="test"> | |
52 | <script type="text/javascript"> | |
53 | try { | |
54 | ||
55 | var testExpected = function (res, exp, lbl) { | |
56 | for (var i=0; i < res.length; i ++) { | |
57 | is( res[i].href, exp[i], lbl + ' (' + i + ')'); | |
58 | } | |
59 | }; | |
60 | ||
61 | var expected = ['http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector', | |
62 | 'http://www.google.com/', | |
63 | 'http://groups.google.com/', | |
64 | 'http://diveintomark.org/', | |
65 | 'http://www.yahoo.com/', | |
66 | 'http://www.example.com/outsidep', | |
67 | 'http://simon.incutio.com/', | |
68 | 'http://www.example.com/insidespan', | |
69 | 'http://www.example.com/link1', | |
70 | 'http://www.example.com/link2', | |
71 | 'http://www.example.com/link3', | |
72 | 'http://www.example.com/link4', | |
73 | 'http://www.example.com/link5', | |
74 | 'http://www.example.com/link6', | |
75 | 'http://www.example.com/link7', | |
76 | 'http://www.example.com/link8']; | |
77 | var results = $$('a'); | |
78 | testExpected(results, expected, "'a' selector"); | |
79 | ||
80 | expected = ['http://diveintomark.org/', 'http://simon.incutio.com/']; | |
81 | results = $$('p a.blog'); | |
82 | testExpected(results, expected, "'p a.blog' selector"); | |
83 | ||
84 | expected = ['http://www.yahoo.com/', | |
85 | 'http://www.example.com/outsidep', | |
86 | 'http://simon.incutio.com/', | |
87 | 'http://www.example.com/insidespan', | |
88 | 'http://www.example.com/link1', | |
89 | 'http://www.example.com/link2', | |
90 | 'http://www.example.com/link3', | |
91 | 'http://www.example.com/link4', | |
92 | 'http://www.example.com/link5', | |
93 | 'http://www.example.com/link6', | |
94 | 'http://www.example.com/link7', | |
95 | 'http://www.example.com/link8']; | |
96 | results = $$('div a'); | |
97 | testExpected(results, expected, "'div a' selector"); | |
98 | ||
99 | expected = ['http://www.yahoo.com/', | |
100 | 'http://www.example.com/outsidep', | |
101 | 'http://simon.incutio.com/', | |
102 | 'http://www.example.com/insidespan']; | |
103 | results = $$('div#foo a'); | |
104 | testExpected(results, expected, "'div#foo a' selector"); | |
105 | ||
106 | expected = ['http://simon.incutio.com/', | |
107 | 'http://www.example.com/insidespan']; | |
108 | results = $$('#foo a.blog'); | |
109 | testExpected(results, expected, "'#foo a.blog' selector"); | |
110 | ||
111 | expected = ['http://diveintomark.org/', | |
112 | 'http://simon.incutio.com/', | |
113 | 'http://www.example.com/insidespan']; | |
114 | results = $$('.blog'); | |
115 | testExpected(results, expected, "'.blog' selector"); | |
116 | ||
117 | expected = ['http://www.google.com/', | |
118 | 'http://www.yahoo.com/', | |
119 | 'http://www.example.com/outsidep', | |
120 | 'http://www.example.com/insidespan', | |
121 | 'http://www.example.com/link1', | |
122 | 'http://www.example.com/link2', | |
123 | 'http://www.example.com/link3', | |
124 | 'http://www.example.com/link4', | |
125 | 'http://www.example.com/link5', | |
126 | 'http://www.example.com/link6', | |
127 | 'http://www.example.com/link7', | |
128 | 'http://www.example.com/link8']; | |
129 | results = $$('a[href^="http://www"]'); | |
130 | testExpected(results, expected, "'a[href^=http://www]' selector"); | |
131 | ||
132 | expected = ['http://diveintomark.org/']; | |
133 | results = $$('a[href$="org/"]'); | |
134 | testExpected(results, expected, "'a[href$=org/]' selector"); | |
135 | ||
136 | expected = ['http://www.google.com/', | |
137 | 'http://groups.google.com/']; | |
138 | results = $$('a[href*="google"]'); | |
139 | testExpected(results, expected, "'a[href*=google]' selector"); | |
140 | ||
141 | expected = ['http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector']; | |
142 | results = $$('a[rel="bookmark"]'); | |
143 | testExpected(results, expected, "'a[rel=bookmark]' selector"); | |
144 | ||
145 | expected = ['http://diveintomark.org/']; | |
146 | results = $$('a[fakeattribute]'); | |
147 | testExpected(results, expected, "'a[fakeattribute]' selector"); | |
148 | ||
149 | /* This doesn't work in IE due to silly DOM implementation | |
150 | expected = ['http://www.google.com/']; | |
151 | results = $$('a[title]'); | |
152 | testExpected(results, expected, "'a[title]' selector"); | |
153 | */ | |
154 | ||
155 | results = $$('p[lang|="en"]'); | |
156 | is( results[0].firstChild.nodeValue, 'Nonninn', "'p[lang|=en]' selector"); | |
157 | ||
158 | expected = ['http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector', | |
159 | 'http://www.google.com/', | |
160 | 'http://groups.google.com/', | |
161 | 'http://diveintomark.org/', | |
162 | 'http://www.yahoo.com/', | |
163 | 'http://simon.incutio.com/', | |
164 | 'http://www.example.com/insidespan']; | |
165 | results = $$('p > a'); | |
166 | testExpected(results, expected, "'p > a' selector"); | |
167 | ||
168 | expected = ['http://www.example.com/insidespan']; | |
169 | results = $$('span > a'); | |
170 | testExpected(results, expected, "'span > a' selector"); | |
171 | ||
172 | expected = ['http://groups.google.com/', | |
173 | 'http://www.example.com/link2', | |
174 | 'http://www.example.com/link3', | |
175 | 'http://www.example.com/link4', | |
176 | 'http://www.example.com/link6', | |
177 | 'http://www.example.com/link7', | |
178 | 'http://www.example.com/link8']; | |
179 | results = $$('a + a'); | |
180 | testExpected(results, expected, "'a + a' selector"); | |
181 | ||
182 | expected = ['http://www.example.com/link1', | |
183 | 'http://www.example.com/link3', | |
184 | 'http://www.example.com/link6', | |
185 | 'http://www.example.com/link8']; | |
186 | results = $$('#sequence a:nth-child(odd)'); | |
187 | testExpected(results, expected, "'#sequence a:nth-child(odd)' selector"); | |
188 | ||
189 | expected = ['http://www.example.com/link1', | |
190 | 'http://www.example.com/link3', | |
191 | 'http://www.example.com/link5', | |
192 | 'http://www.example.com/link7']; | |
193 | results = $$('#sequence a:nth-of-type(odd)'); | |
194 | testExpected(results, expected, "'#sequence a:nth-of-type(odd)' selector"); | |
195 | ||
196 | expected = ['http://www.example.com/link1', | |
197 | 'http://www.example.com/link4', | |
198 | 'http://www.example.com/link7']; | |
199 | results = $$('#sequence a:nth-of-type(3n+1)'); | |
200 | testExpected(results, expected, "'#sequence a:nth-of-type(3n+1)' selector"); | |
201 | ||
202 | expected = ['http://www.example.com/link5']; | |
203 | results = $$('#sequence a:nth-child(6)'); | |
204 | testExpected(results, expected, "'#sequence a:nth-child(6)' selector"); | |
205 | ||
206 | expected = ['http://www.example.com/link5']; | |
207 | results = $$('#sequence a:nth-of-type(5)'); | |
208 | testExpected(results, expected, "'#sequence a:nth-of-type(5)' selector"); | |
209 | ||
210 | expected = [$('enabled'), $('checked')]; | |
211 | results = $$('body :enabled'); | |
212 | for (var i=0; i < results.length; i ++) { | |
213 | is( results[i], expected[i], "'body :enabled" + ' (' + i + ')'); | |
214 | } | |
215 | ||
216 | expected = [$('disabled')]; | |
217 | results = $$('body :disabled'); | |
218 | for (var i=0; i < results.length; i ++) { | |
219 | is( results[i], expected[i], "'body :disabled" + ' (' + i + ')'); | |
220 | } | |
221 | ||
222 | expected = [$('checked')]; | |
223 | results = $$('body :checked'); | |
224 | for (var i=0; i < results.length; i ++) { | |
225 | is( results[i], expected[i], "'body :checked" + ' (' + i + ')'); | |
226 | } | |
227 | ||
228 | expected = document.getElementsByTagName('p'); | |
229 | results = $$('a[href$=outsidep] ~ *'); | |
230 | for (var i=0; i < results.length; i ++) { | |
231 | is( results[i], expected[i+4], "'a[href$=outsidep] ~ *' selector" + ' (' + i + ')'); | |
232 | } | |
233 | ||
234 | expected = [document.documentElement]; | |
235 | results = $$(':root'); | |
236 | for (var i=0; i < results.length; i ++) { | |
237 | is( results[i], expected[i], "':root' selector" + ' (' + i + ')'); | |
238 | } | |
239 | ||
240 | expected = [$('multiclass')]; | |
241 | results = $$('[class~=classnames]'); | |
242 | for (var i=0; i < results.length; i ++) { | |
243 | is( results[i], expected[i], "'~=' attribute test" + ' (' + i + ')'); | |
244 | } | |
245 | ||
246 | var doc = MochiKit.MockDOM.createDocument(); | |
247 | appendChildNodes(doc.body, A({"href": "http://www.example.com/insideAnotherDocument"}, "Inside a document")); | |
248 | withDocument(doc, function(){ | |
249 | is( $$(":root")[0], doc, ":root on a different document" ); | |
250 | is( $$("a")[0], doc.body.firstChild, "a inside a different document" ); | |
251 | }); | |
252 | ||
253 | ok( true, "test suite finished!"); | |
254 | ||
255 | ||
256 | } catch (err) { | |
257 | ||
258 | var s = "test suite failure!\n"; | |
259 | var o = {}; | |
260 | var k = null; | |
261 | for (k in err) { | |
262 | // ensure unique keys?! | |
263 | if (!o[k]) { | |
264 | s += k + ": " + err[k] + "\n"; | |
265 | o[k] = err[k]; | |
266 | } | |
267 | } | |
268 | ok ( false, s ); | |
269 | ||
270 | } | |
271 | </script> | |
272 | </pre> | |
273 | </body> | |
274 | </html> |