1<!DOCTYPE html>
2<html
3 id="html"
4 lang="en"
5 xmlns="http://www.w3.org/1999/xhtml"
6 xmlns:ns1="http://www.example.org/ns"
7>
8 <head id="head">
9 <title id="title">
10 Selectors-API Test Suite: HTML with Selectors Level 2 using
11 TestHarness: Test Document
12 </title>
13
14 <!-- Links for :link and :visited pseudo-class test -->
15 <link id="pseudo-link-link1" href="" />
16 <link id="pseudo-link-link2" href="http://example.org/" />
17 <link id="pseudo-link-link3" />
18 </head>
19
20 <body id="body">
21 <div id="root">
22 <div id="target"></div>
23
24 <div id="universal">
25 <p id="universal-p1">
26 Universal selector tests inside element with
27 <code id="universal-code1">id="universal"</code>.
28 </p>
29 <hr id="universal-hr1" />
30 <pre
31 id="universal-pre1"
32 >Some preformatted text with some <span id="universal-span1">embedded code</span></pre>
33 <p id="universal-p2">
34 This is a normal link:
35 <a id="universal-a1" href="http://www.w3.org/">W3C</a>
36 </p>
37 <address id="universal-address1">
38 Some more nested elements
39 <code id="universal-code2"
40 ><a href="#" id="universal-a2">code hyperlink</a></code
41 >
42 </address>
43 </div>
44
45 <div id="attr-presence">
46 <div
47 class="attr-presence-div1"
48 id="attr-presence-div1"
49 align="center"
50 ></div>
51 <div
52 class="attr-presence-div2"
53 id="attr-presence-div2"
54 align=""
55 ></div>
56 <div
57 class="attr-presence-div3"
58 id="attr-presence-div3"
59 valign="center"
60 ></div>
61 <div
62 class="attr-presence-div4"
63 id="attr-presence-div4"
64 alignv="center"
65 ></div>
66 <p id="attr-presence-p1">
67 <a id="attr-presence-a1" title=""></a
68 ><span
69 id="attr-presence-span1"
70 TITLE="attr-presence-span1"
71 ></span>
72 </p>
73 <pre id="attr-presence-pre1" data-attr-presence="pre1"></pre>
74 <blockquote
75 id="attr-presence-blockquote1"
76 data-attr-presence="blockquote1"
77 ></blockquote>
78 <ul id="attr-presence-ul1" data-中文=""></ul>
79
80 <select id="attr-presence-select1">
81 <option id="attr-presence-select1-option1">A</option>
82 <option id="attr-presence-select1-option2">B</option>
83 <option id="attr-presence-select1-option3">C</option>
84 <option id="attr-presence-select1-option4">D</option>
85 </select>
86 <select id="attr-presence-select2">
87 <option id="attr-presence-select2-option1">A</option>
88 <option id="attr-presence-select2-option2">B</option>
89 <option id="attr-presence-select2-option3">C</option>
90 <option
91 id="attr-presence-select2-option4"
92 selected="selected"
93 >D</option
94 >
95 </select>
96 <select id="attr-presence-select3" multiple="multiple">
97 <option id="attr-presence-select3-option1">A</option>
98 <option id="attr-presence-select3-option2" selected=""
99 >B</option
100 >
101 <option
102 id="attr-presence-select3-option3"
103 selected="selected"
104 >C</option
105 >
106 <option id="attr-presence-select3-option4">D</option>
107 </select>
108 </div>
109
110 <div id="attr-value">
111 <div id="attr-value-div1" align="center"></div>
112 <div id="attr-value-div2" align=""></div>
113 <div id="attr-value-div3" data-attr-value="é"></div>
114 <div id="attr-value-div4" data-attr-value_foo="é"></div>
115
116 <form id="attr-value-form1">
117 <input id="attr-value-input1" type="text" />
118 <input id="attr-value-input2" type="password" />
119 <input id="attr-value-input3" type="hidden" />
120 <input id="attr-value-input4" type="radio" />
121 <input id="attr-value-input5" type="checkbox" />
122 <input id="attr-value-input6" type="radio" />
123 <input id="attr-value-input7" type="text" />
124 <input id="attr-value-input8" type="hidden" />
125 <input id="attr-value-input9" type="radio" />
126 </form>
127
128 <div id="attr-value-div5" data-attr-value="中文"></div>
129 </div>
130
131 <div id="attr-whitespace">
132 <div id="attr-whitespace-div1" class="foo div1 bar"></div>
133 <div id="attr-whitespace-div2" class=""></div>
134 <div id="attr-whitespace-div3" class="foo div3 bar"></div>
135
136 <div
137 id="attr-whitespace-div4"
138 data-attr-whitespace="foo é bar"
139 ></div>
140 <div
141 id="attr-whitespace-div5"
142 data-attr-whitespace_foo="é foo"
143 ></div>
144
145 <a id="attr-whitespace-a1" rel="next bookmark"></a>
146 <a id="attr-whitespace-a2" rel="tag nofollow"></a>
147 <a id="attr-whitespace-a3" rel="tag bookmark"></a>
148 <a id="attr-whitespace-a4" rel="book mark"></a>
149 <!-- Intentional space in "book mark" -->
150 <a id="attr-whitespace-a5" rel="nofollow"></a>
151 <a id="attr-whitespace-a6" rev="bookmark nofollow"></a>
152 <a
153 id="attr-whitespace-a7"
154 rel="prev next tag alternate nofollow author help icon noreferrer prefetch search stylesheet tag"
155 ></a>
156
157 <p id="attr-whitespace-p1" title="Chinese 中文 characters"></p>
158 </div>
159
160 <div id="attr-hyphen">
161 <div id="attr-hyphen-div1"></div>
162 <div id="attr-hyphen-div2" lang="fr"></div>
163 <div id="attr-hyphen-div3" lang="en-AU"></div>
164 <div id="attr-hyphen-div4" lang="es"></div>
165 </div>
166
167 <div id="attr-begins">
168 <a id="attr-begins-a1" href="http://www.example.org"></a>
169 <a id="attr-begins-a2" href="http://example.org/"></a>
170 <a id="attr-begins-a3" href="http://www.example.com/"></a>
171
172 <div id="attr-begins-div1" lang="fr"></div>
173 <div id="attr-begins-div2" lang="en-AU"></div>
174 <div id="attr-begins-div3" lang="es"></div>
175 <div id="attr-begins-div4" lang="en-US"></div>
176 <div id="attr-begins-div5" lang="en"></div>
177
178 <p id="attr-begins-p1" class=" apple"></p>
179 <!-- Intentional space in class value " apple". -->
180 </div>
181
182 <div id="attr-ends">
183 <a id="attr-ends-a1" href="http://www.example.org"></a>
184 <a id="attr-ends-a2" href="http://example.org/"></a>
185 <a id="attr-ends-a3" href="http://www.example.org"></a>
186
187 <div id="attr-ends-div1" lang="fr"></div>
188 <div id="attr-ends-div2" lang="de-CH"></div>
189 <div id="attr-ends-div3" lang="es"></div>
190 <div id="attr-ends-div4" lang="fr-CH"></div>
191
192 <p id="attr-ends-p1" class="apple "></p>
193 <!-- Intentional space in class value "apple ". -->
194 </div>
195
196 <div id="attr-contains">
197 <a id="attr-contains-a1" href="http://www.example.org"></a>
198 <a id="attr-contains-a2" href="http://example.org/"></a>
199 <a id="attr-contains-a3" href="http://www.example.com/"></a>
200
201 <div id="attr-contains-div1" lang="fr"></div>
202 <div id="attr-contains-div2" lang="en-AU"></div>
203 <div id="attr-contains-div3" lang="de-CH"></div>
204 <div id="attr-contains-div4" lang="es"></div>
205 <div id="attr-contains-div5" lang="fr-CH"></div>
206 <div id="attr-contains-div6" lang="en-US"></div>
207
208 <p id="attr-contains-p1" class=" apple banana orange "></p>
209 </div>
210
211 <div id="pseudo-nth">
212 <table id="pseudo-nth-table1">
213 <tr id="pseudo-nth-tr1">
214 <td id="pseudo-nth-td1"></td>
215 <td id="pseudo-nth-td2"></td>
216 <td id="pseudo-nth-td3"></td>
217 <td id="pseudo-nth-td4"></td>
218 <td id="pseudo-nth--td5"></td>
219 <td id="pseudo-nth-td6"></td>
220 </tr>
221 <tr id="pseudo-nth-tr2">
222 <td id="pseudo-nth-td7"></td>
223 <td id="pseudo-nth-td8"></td>
224 <td id="pseudo-nth-td9"></td>
225 <td id="pseudo-nth-td10"></td>
226 <td id="pseudo-nth-td11"></td>
227 <td id="pseudo-nth-td12"></td>
228 </tr>
229 <tr id="pseudo-nth-tr3">
230 <td id="pseudo-nth-td13"></td>
231 <td id="pseudo-nth-td14"></td>
232 <td id="pseudo-nth-td15"></td>
233 <td id="pseudo-nth-td16"></td>
234 <td id="pseudo-nth-td17"></td>
235 <td id="pseudo-nth-td18"></td>
236 </tr>
237 </table>
238
239 <ol id="pseudo-nth-ol1">
240 <li id="pseudo-nth-li1"></li>
241 <li id="pseudo-nth-li2"></li>
242 <li id="pseudo-nth-li3"></li>
243 <li id="pseudo-nth-li4"></li>
244 <li id="pseudo-nth-li5"></li>
245 <li id="pseudo-nth-li6"></li>
246 <li id="pseudo-nth-li7"></li>
247 <li id="pseudo-nth-li8"></li>
248 <li id="pseudo-nth-li9"></li>
249 <li id="pseudo-nth-li10"></li>
250 <li id="pseudo-nth-li11"></li>
251 <li id="pseudo-nth-li12"></li>
252 </ol>
253
254 <p id="pseudo-nth-p1">
255 <span id="pseudo-nth-span1">span1</span>
256 <em id="pseudo-nth-em1">em1</em>
257 <!-- comment node-->
258 <em id="pseudo-nth-em2">em2</em>
259 <span id="pseudo-nth-span2">span2</span>
260 <strong id="pseudo-nth-strong1">strong1</strong>
261 <em id="pseudo-nth-em3">em3</em>
262 <span id="pseudo-nth-span3">span3</span>
263 <span id="pseudo-nth-span4">span4</span>
264 <strong id="pseudo-nth-strong2">strong2</strong>
265 <em id="pseudo-nth-em4">em4</em>
266 </p>
267 </div>
268
269 <div id="pseudo-first-child">
270 <div id="pseudo-first-child-div1"></div>
271 <div id="pseudo-first-child-div2"></div>
272 <div id="pseudo-first-child-div3"></div>
273
274 <p id="pseudo-first-child-p1">
275 <span id="pseudo-first-child-span1"></span
276 ><span id="pseudo-first-child-span2"></span>
277 </p>
278 <p id="pseudo-first-child-p2">
279 <span id="pseudo-first-child-span3"></span
280 ><span id="pseudo-first-child-span4"></span>
281 </p>
282 <p id="pseudo-first-child-p3">
283 <span id="pseudo-first-child-span5"></span
284 ><span id="pseudo-first-child-span6"></span>
285 </p>
286 </div>
287
288 <div id="pseudo-last-child">
289 <p id="pseudo-last-child-p1">
290 <span id="pseudo-last-child-span1"></span
291 ><span id="pseudo-last-child-span2"></span>
292 </p>
293 <p id="pseudo-last-child-p2">
294 <span id="pseudo-last-child-span3"></span
295 ><span id="pseudo-last-child-span4"></span>
296 </p>
297 <p id="pseudo-last-child-p3">
298 <span id="pseudo-last-child-span5"></span
299 ><span id="pseudo-last-child-span6"></span>
300 </p>
301
302 <div id="pseudo-last-child-div1"></div>
303 <div id="pseudo-last-child-div2"></div>
304 <div id="pseudo-last-child-div3"></div>
305 </div>
306
307 <div id="pseudo-only">
308 <p id="pseudo-only-p1">
309 <span id="pseudo-only-span1"></span>
310 </p>
311 <p id="pseudo-only-p2">
312 <span id="pseudo-only-span2"></span>
313 <span id="pseudo-only-span3"></span>
314 </p>
315 <p id="pseudo-only-p3">
316 <span id="pseudo-only-span4"></span>
317 <em id="pseudo-only-em1"></em>
318 <span id="pseudo-only-span5"></span>
319 </p>
320 </div>
321 >
322
323 <div id="pseudo-empty">
324 <p id="pseudo-empty-p1"></p>
325 <p id="pseudo-empty-p2"><!-- comment node --></p>
326 <p id="pseudo-empty-p3"> </p>
327 <p id="pseudo-empty-p4">Text node</p>
328 <p id="pseudo-empty-p5">
329 <span id="pseudo-empty-span1"></span>
330 </p>
331 </div>
332
333 <div id="pseudo-link">
334 <a id="pseudo-link-a1" href="">with href</a>
335 <a id="pseudo-link-a2" href="http://example.org/">with href</a>
336 <a id="pseudo-link-a3">without href</a>
337 <map name="pseudo-link-map1" id="pseudo-link-map1">
338 <area id="pseudo-link-area1" href="" />
339 <area id="pseudo-link-area2" />
340 </map>
341 </div>
342
343 <div id="pseudo-lang">
344 <div id="pseudo-lang-div1"></div>
345 <div id="pseudo-lang-div2" lang="fr"></div>
346 <div id="pseudo-lang-div3" lang="en-AU"></div>
347 <div id="pseudo-lang-div4" lang="es"></div>
348 </div>
349
350 <div id="pseudo-ui">
351 <input id="pseudo-ui-input1" type="text" />
352 <input id="pseudo-ui-input2" type="password" />
353 <input id="pseudo-ui-input3" type="radio" />
354 <input id="pseudo-ui-input4" type="radio" checked="checked" />
355 <input id="pseudo-ui-input5" type="checkbox" />
356 <input
357 id="pseudo-ui-input6"
358 type="checkbox"
359 checked="checked"
360 />
361 <input id="pseudo-ui-input7" type="submit" />
362 <input id="pseudo-ui-input8" type="button" />
363 <input id="pseudo-ui-input9" type="hidden" />
364 <textarea id="pseudo-ui-textarea1"></textarea>
365 <button id="pseudo-ui-button1">Enabled</button>
366
367 <input id="pseudo-ui-input10" disabled="disabled" type="text" />
368 <input
369 id="pseudo-ui-input11"
370 disabled="disabled"
371 type="password"
372 />
373 <input
374 id="pseudo-ui-input12"
375 disabled="disabled"
376 type="radio"
377 />
378 <input
379 id="pseudo-ui-input13"
380 disabled="disabled"
381 type="radio"
382 checked="checked"
383 />
384 <input
385 id="pseudo-ui-input14"
386 disabled="disabled"
387 type="checkbox"
388 />
389 <input
390 id="pseudo-ui-input15"
391 disabled="disabled"
392 type="checkbox"
393 checked="checked"
394 />
395 <input
396 id="pseudo-ui-input16"
397 disabled="disabled"
398 type="submit"
399 />
400 <input
401 id="pseudo-ui-input17"
402 disabled="disabled"
403 type="button"
404 />
405 <input
406 id="pseudo-ui-input18"
407 disabled="disabled"
408 type="hidden"
409 />
410 <textarea
411 id="pseudo-ui-textarea2"
412 disabled="disabled"
413 ></textarea>
414 <button id="pseudo-ui-button2" disabled="disabled">
415 Disabled
416 </button>
417 </div>
418
419 <div id="not">
420 <div id="not-div1"></div>
421 <div id="not-div2"></div>
422 <div id="not-div3"></div>
423
424 <p id="not-p1">
425 <span id="not-span1"></span><em id="not-em1"></em>
426 </p>
427 <p id="not-p2">
428 <span id="not-span2"></span><em id="not-em2"></em>
429 </p>
430 <p id="not-p3">
431 <span id="not-span3"></span><em id="not-em3"></em>
432 </p>
433 </div>
434
435 <div id="pseudo-element">All pseudo-element tests</div>
436
437 <div id="class">
438 <p id="class-p1" class="foo class-p bar"></p>
439 <p id="class-p2" class="class-p foo bar"></p>
440 <p id="class-p3" class="foo bar class-p"></p>
441
442 <!-- All permutations of the classes should match -->
443 <div id="class-div1" class="apple orange banana"></div>
444 <div id="class-div2" class="apple banana orange"></div>
445 <p id="class-p4" class="orange apple banana"></p>
446 <div id="class-div3" class="orange banana apple"></div>
447 <p id="class-p6" class="banana apple orange"></p>
448 <div id="class-div4" class="banana orange apple"></div>
449 <div id="class-div5" class="apple orange"></div>
450 <div id="class-div6" class="apple banana"></div>
451 <div id="class-div7" class="orange banana"></div>
452
453 <span id="class-span1" class="台北Táiběi 台北"></span>
454 <span id="class-span2" class="台北"></span>
455
456 <span id="class-span3" class="foo:bar"></span>
457 <span id="class-span4" class="test.foo[5]bar"></span>
458 </div>
459
460 <div id="id">
461 <div id="id-div1"></div>
462 <div id="id-div2"></div>
463
464 <ul id="id-ul1">
465 <li id="id-li-duplicate"></li>
466 <li id="id-li-duplicate"></li>
467 <li id="id-li-duplicate"></li>
468 <li id="id-li-duplicate"></li>
469 </ul>
470
471 <span id="台北Táiběi"></span>
472 <span id="台北"></span>
473
474 <span id="#foo:bar"></span>
475 <span id="test.foo[5]bar"></span>
476 </div>
477
478 <div id="descendant">
479 <div id="descendant-div1" class="descendant-div1">
480 <div id="descendant-div2" class="descendant-div2">
481 <div id="descendant-div3" class="descendant-div3"></div>
482 </div>
483 </div>
484 <div id="descendant-div4" class="descendant-div4"></div>
485 </div>
486
487 <div id="child">
488 <div id="child-div1" class="child-div1">
489 <div id="child-div2" class="child-div2">
490 <div id="child-div3" class="child-div3"></div>
491 </div>
492 </div>
493 <div id="child-div4" class="child-div4"></div>
494 </div>
495
496 <div id="adjacent">
497 <div id="adjacent-div1" class="adjacent-div1"></div>
498 <div id="adjacent-div2" class="adjacent-div2">
499 <div id="adjacent-div3" class="adjacent-div3"></div>
500 </div>
501 <div id="adjacent-div4" class="adjacent-div4">
502 <p id="adjacent-p1" class="adjacent-p1"></p>
503 <div id="adjacent-div5" class="adjacent-div5"></div>
504 </div>
505 <div id="adjacent-div6" class="adjacent-div6"></div>
506 <p id="adjacent-p2" class="adjacent-p2"></p>
507 <p id="adjacent-p3" class="adjacent-p3"></p>
508 </div>
509
510 <div id="sibling">
511 <div id="sibling-div1" class="sibling-div"></div>
512 <div id="sibling-div2" class="sibling-div">
513 <div id="sibling-div3" class="sibling-div"></div>
514 </div>
515 <div id="sibling-div4" class="sibling-div">
516 <p id="sibling-p1" class="sibling-p"></p>
517 <div id="sibling-div5" class="sibling-div"></div>
518 </div>
519 <div id="sibling-div6" class="sibling-div"></div>
520 <p id="sibling-p2" class="sibling-p"></p>
521 <p id="sibling-p3" class="sibling-p"></p>
522 </div>
523
524 <div id="group">
525 <em id="group-em1"></em>
526 <strong id="group-strong1"></strong>
527 </div>
528 </div>
529 </body>
530</html>
View as plain text