content/base/test/file_bug416317.xhtml

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 <?xml version="1.0" encoding="UTF-8"?>
michael@0 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
michael@0 3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"
michael@0 4 xml:lang="en" lang="en" dir="ltr" id="html" class="unitTest" title=":root selector">
michael@0 5 <head>
michael@0 6 <title>selectorTest</title>
michael@0 7 <!-- (c) Disruptive Innovations 2008 -->
michael@0 8 <style type="text/css">
michael@0 9 /* TEST 0 : BASIC TESTS */
michael@0 10 /* element type selector */
michael@0 11 body { background-color: red; margin: 10px; padding: 10px; color: red; font-family: sans-serif }
michael@0 12 div { background-color: red; color: red; }
michael@0 13 div.header { background-color: #e0e0e0; color: black; padding: 10px; margin-bottom: 10px;}
michael@0 14 /* class selector */
michael@0 15 .unitTest { width: 10px; background-color: red; color: red; margin: 0px; margin-right: 2px; float: left; }
michael@0 16 .test { margin-bottom: 2px; background-color: green; color: green; }
michael@0 17 /* group of selectors */
michael@0 18 .unitTest, .test { height: 10px; }
michael@0 19
michael@0 20 .UI > * { float: left }
michael@0 21 .UI { clear: both; height: auto; padding-top: 6px;}
michael@0 22 .tilda { clear: both; height: auto; padding-top: 6px;}
michael@0 23 .plus { clear: both; height: auto; padding-top: 6px;}
michael@0 24
michael@0 25 h1, p { width: 500px; color: #000; }
michael@0 26 a { color: #000; }
michael@0 27 #results { background: #FFF; width: 600px; padding: 10px 40px; color: #000; font-size: 11px; line-height: 1.3em; }
michael@0 28 #root, #root2, #root3 { display: none; }
michael@0 29
michael@0 30 /* init */
michael@0 31 .blox16 { background-color: red; }
michael@0 32 .blox17 { background-color: red; }
michael@0 33 .lastChild > p { background-color: red; }
michael@0 34 .firstOfType > p { background-color: red }
michael@0 35 .lastOfType > p { background-color: red }
michael@0 36 .empty > .isEmpty { color: red; }
michael@0 37 html { background-color: red; }
michael@0 38 </style>
michael@0 39 <span type="text/test" id="test"><![CDATA[
michael@0 40 /* :target selector */
michael@0 41 .target :target { background-color: lime; }
michael@0 42
michael@0 43 /* test 1 : childhood selector */
michael@0 44 html > body { background-color: green; }
michael@0 45 .test > .blox1 { background-color: lime; }
michael@0 46
michael@0 47 /* test 2 : attribute existence selector */
michael@0 48 /* attribute with a value */
michael@0 49 .blox2[align] { background-color: lime; }
michael@0 50 /* attribute with empty value */
michael@0 51 .blox3[align] { background-color: lime; }
michael@0 52 /* attribute with almost similar name */
michael@0 53 .blox4, .blox5 { background-color: lime }
michael@0 54 .blox4[align], .blox5[align] { background-color: red; }
michael@0 55
michael@0 56 /* test3 : attribute value selector */
michael@0 57 .blox6[align="center"] { background-color: lime; }
michael@0 58 .blox6[align="c"] { background-color: red; }
michael@0 59 .blox6[align="centera"] { background-color: red; }
michael@0 60 .blox6[foo="\e9"] { background-color: lime; }
michael@0 61 .blox6[\_foo="\e9"] { background-color: lime; }
michael@0 62
michael@0 63 /* test 4 : [~=] */
michael@0 64 .blox7[class~="foo"] { background-color: lime; }
michael@0 65 .blox8, .blox9, .blox10 { background-color: lime; }
michael@0 66 .blox8[class~=""] { background-color: red; }
michael@0 67 .blox9[foo~=""] { background-color: red; }
michael@0 68 .blox10[foo~="foo"] { background-color: red; }
michael@0 69
michael@0 70 /* test5 [^=] */
michael@0 71 .attrStart > .t3 { background-color: lime; }
michael@0 72 .attrStart > .t1[class^="unit"] { background-color: lime; }
michael@0 73 .attrStart > .t2 { background-color: lime; }
michael@0 74 .attrStart > .t2[class^="nit"] { background-color: red; }
michael@0 75 .attrStart > .t3[align^=""] { background-color: red; }
michael@0 76 .attrStart > .t4[foo^="\e9"] { background-color: lime; }
michael@0 77
michael@0 78 /* test6 [$=] */
michael@0 79 .attrEnd > .t3 { background-color: lime; }
michael@0 80 .attrEnd > .t1[class$="t1"] { background-color: lime; }
michael@0 81 .attrEnd > .t2 { background-color: lime; }
michael@0 82 .attrEnd > .t2[class$="unit"] { background-color: red; }
michael@0 83 .attrEnd > .t3[align$=""] { background-color: red; }
michael@0 84 .attrEnd > .t4[foo$="\e9"] { background-color: lime; }
michael@0 85
michael@0 86 /* test7 [*=] */
michael@0 87 .attrMiddle > .t3 { background-color: lime; }
michael@0 88 .attrMiddle > .t1[class*="t t"] { background-color: lime; }
michael@0 89 .attrMiddle > .t2 { background-color: lime; }
michael@0 90 .attrMiddle > .t2[class*="a"] { background-color: red; }
michael@0 91 .attrMiddle > .t3[align*=""] { background-color: red; }
michael@0 92 .attrMiddle > .t4[foo*="\e9"] { background-color: lime; }
michael@0 93
michael@0 94 /* :first-child tests */
michael@0 95 .firstChild .unitTest:first-child { background-color: lime; }
michael@0 96 .blox12:first-child { background-color: red; }
michael@0 97 .blox13:first-child { background-color: red; }
michael@0 98 .blox12, .blox13 { background-color: lime }
michael@0 99
michael@0 100 /* :root tests */
michael@0 101 :root { background-color: green; }
michael@0 102
michael@0 103 /* :scope tests */
michael@0 104 :scope { background-color: green; }
michael@0 105
michael@0 106 /* :nth-child(n) tests */
michael@0 107 .nthchild1 > :nth-last-child(odd) { background-color: lime; }
michael@0 108 .nthchild1 > :nth-child(odd) { background-color: lime; }
michael@0 109
michael@0 110 .nthchild2 > :nth-last-child(even) { background-color: lime; }
michael@0 111 .nthchild2 > :nth-child(even) { background-color: lime; }
michael@0 112
michael@0 113 .nthchild3 > :nth-child(3n+2) { background-color: lime; }
michael@0 114 .nthchild3 > :nth-last-child(3n+1) { background-color: lime; }
michael@0 115 .nthchild3 > :nth-last-child(3n+3) { background-color: lime; }
michael@0 116
michael@0 117 .nthoftype1 > div:nth-of-type(odd) { background-color: lime; }
michael@0 118 .nthoftype1 > div:nth-last-of-type(odd) { background-color: lime; }
michael@0 119 .nthoftype1 > p { background-color: green; }
michael@0 120
michael@0 121 .nthoftype2 > div:nth-of-type(even) { background-color: lime; }
michael@0 122 .nthoftype2 > div:nth-last-of-type(even) { background-color: lime; }
michael@0 123 .nthoftype2 > p { background-color: green; }
michael@0 124
michael@0 125 .nthoftype3 > div:nth-of-type(3n+1) { background-color: lime; }
michael@0 126 .nthoftype3 > div:nth-last-of-type(3n+1) { background-color: lime; }
michael@0 127 .nthoftype3 > div:nth-last-of-type(3n+2) { background-color: lime; }
michael@0 128 .nthoftype3 > p { background-color: green; }
michael@0 129
michael@0 130 /* :not() tests */
michael@0 131 .blox14:not(span) { background-color: lime; }
michael@0 132 .blox15:not([foo="blox14"]) { background-color: lime; }
michael@0 133 .blox16:not(.blox15) { background-color: lime; }
michael@0 134
michael@0 135 /* :only-of-type tests */
michael@0 136 .blox17:only-of-type { background-color: lime; }
michael@0 137 .blox18:only-of-type { background-color: red; }
michael@0 138 .blox18:not(:only-of-type) { background-color: lime; }
michael@0 139
michael@0 140 /* :last-child tests */
michael@0 141 .lastChild > :last-child { background-color: lime }
michael@0 142 .lastChild > :not(:last-child) { background-color: lime }
michael@0 143
michael@0 144 /* :first-of-type tests */
michael@0 145 .firstOfType > *:first-of-type { background-color: lime; }
michael@0 146 *.firstOfType > :not(:first-of-type) { background-color: lime; }
michael@0 147
michael@0 148 /* :last-of-type tests */
michael@0 149 .lastOfType > *:last-of-type { background-color: lime; }
michael@0 150 *.lastOfType > :not(:last-of-type) { background-color: lime; }
michael@0 151
michael@0 152 /* :only-child tests */
michael@0 153 .onlyChild > *:not(:only-child) { background-color: lime; }
michael@0 154 .onlyChild > .unitTest > *:only-child { background-color: lime; }
michael@0 155
michael@0 156 /* :only-of-type tests */
michael@0 157 .onlyOfType *:only-of-type { background-color: lime; }
michael@0 158 .onlyOfType *:not(:only-of-type) { background-color: lime; }
michael@0 159
michael@0 160 /* :empty tests */
michael@0 161 .empty > *.isEmpty:empty { background-color: lime; color: lime; }
michael@0 162 .empty > .isNotEmpty { background-color: blue; color: blue; }
michael@0 163 .empty > .isNotEmpty:empty { background-color: red; color: red; }
michael@0 164 .empty > .isNotEmpty:not(:empty) { background-color: lime; color: lime; }
michael@0 165
michael@0 166 /* :lang() tests */
michael@0 167 .lang :lang(en) { background-color: lime; }
michael@0 168 .lang :lang(fr) { background-color: lime; }
michael@0 169 .lang .t1 { background-color: blue; }
michael@0 170 .lang .t1:lang(es) { background-color: lime; }
michael@0 171 .lang :lang(es-AR) { background-color: red; }
michael@0 172
michael@0 173 /* [|=] tests */
michael@0 174 .attrLang .t1 { background-color: lime; }
michael@0 175 .attrLang .t1[lang|="en"] { background-color: red; }
michael@0 176 .attrLang [lang|="fr"] { background-color: lime; }
michael@0 177 .attrLang .t2[lang|="en"] { background-color: lime; }
michael@0 178 .attrLang .t3 { background-color: blue; }
michael@0 179 .attrLang .t3[lang|="es"] { background-color: lime; }
michael@0 180 .attrLang [lang|="es-AR"] { background-color: red; }
michael@0 181
michael@0 182 /* UI tests */
michael@0 183 .UI .t1:enabled > .unitTest { background-color: lime; }
michael@0 184 .UI .t2:disabled > .unitTest { background-color: lime; }
michael@0 185 .UI .t3:checked + div { background-color: lime; }
michael@0 186 .UI .t4:not(:checked) + div { background-color: lime; }
michael@0 187
michael@0 188 /* ~ combinator tests */
michael@0 189 .tilda .t1 { background-color: white; }
michael@0 190 .tilda .t1 ~ .unitTest { background-color: lime; }
michael@0 191 .tilda .t1:hover ~ .unitTest { background-color: red; }
michael@0 192
michael@0 193 /* ~ combinator tests */
michael@0 194 .plus .t1, .plus .t2 { background-color: white; }
michael@0 195 .plus .t1 + .unitTest + .unitTest { background-color: lime; }
michael@0 196 .plus .t1:hover + .unitTest + .unitTest { background-color: red; }
michael@0 197 ]]></span>
michael@0 198 <span type="text/test" id="error">
michael@0 199 .blox16:not(.blox15[foo="blox14"]) { background-color: red; }
michael@0 200
michael@0 201 /* Tests from http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20060307/html/index.html */
michael@0 202 div:not(:not(div)) { background-color : red }
michael@0 203
michael@0 204 div, { background: red; }
michael@0 205 .5cm { background: red; }
michael@0 206 foo &amp; address, p { background: red; }
michael@0 207 [*=test] { background: red; }
michael@0 208 [*|*=test] { background: red; }
michael@0 209
michael@0 210 div:subject { background: red; }
michael@0 211 :canvas { background: red; }
michael@0 212 :viewport { background: red; }
michael@0 213 :window { background: red; }
michael@0 214 :menu { background: red; }
michael@0 215 :table { background: red; }
michael@0 216 :select { background: red; }
michael@0 217 ::canvas { background: red; }
michael@0 218 ::viewport { background: red; }
michael@0 219 ::window { background: red; }
michael@0 220 ::menu { background: red; }
michael@0 221 ::table { background: red; }
michael@0 222 ::select { background: red; }
michael@0 223
michael@0 224 ..test { background: red; color: yellow; }
michael@0 225 .foo..quux { background: red; color: yellow; }
michael@0 226 .bar. { background: red; color: yellow; }
michael@0 227 </span>
michael@0 228 <script><![CDATA[
michael@0 229 window.onload = function() {
michael@0 230 if (window.parent && window.parent.SpecialPowers) {
michael@0 231 window.parent.SpecialPowers.pushPrefEnv(
michael@0 232 { 'set': [[ "layout.css.scope-pseudo.enabled", true]] },
michael@0 233 doTest);
michael@0 234 } else {
michael@0 235 doTest();
michael@0 236 }
michael@0 237 }
michael@0 238
michael@0 239 function doTest(){
michael@0 240 if ( window.location.hash.indexOf("target") == -1 )
michael@0 241 window.location.hash = "#target";
michael@0 242
michael@0 243 var root = document.getElementById("root");
michael@0 244 var root2 = document.getElementById("root2");
michael@0 245 var root3 = document.getElementById("root3");
michael@0 246 var results = [];
michael@0 247 var tests = 0, passed = 0;
michael@0 248 var cache = {};
michael@0 249
michael@0 250 var css = document.getElementById("test").firstChild.nodeValue.split("\n");
michael@0 251 for ( var i = 0; i < css.length; i++ ) {
michael@0 252 css[i] = css[i].replace(/\/\*.*?\*\//g, "")
michael@0 253 .replace(/^\s*|\s*$/g, "").split(/\s*{/);
michael@0 254 }
michael@0 255
michael@0 256 var ecss = document.getElementById("error").firstChild.nodeValue.split("\n");
michael@0 257 for ( var i = 0; i < ecss.length; i++ ) {
michael@0 258 ecss[i] = ecss[i].replace(/\/\*.*?\*\//g, "")
michael@0 259 .replace(/^\s*|\s*$/g, "").split(/\s*{/);
michael@0 260 }
michael@0 261
michael@0 262 var namespaceCheck = {};
michael@0 263
michael@0 264 var badNamespace = [
michael@0 265 {},
michael@0 266 null,
michael@0 267 undefined,
michael@0 268 ];
michael@0 269
michael@0 270 interfaceCheck(root, "Element");
michael@0 271 runTest( css, "Element", root, true );
michael@0 272 check( "Inside Element", root, true, false );
michael@0 273 cacheCheck( "Element", root );
michael@0 274 check( "Outside Element", root2, passed === 0 ? "autofail" : false, false );
michael@0 275 runTest( ecss, "SyntaxError: Element", root, false );
michael@0 276 jqTests("Element", root3, "querySelectorAll");
michael@0 277
michael@0 278 var root4 = root2.cloneNode(true);
michael@0 279 interfaceCheck(root4, "Disconnected Element");
michael@0 280 runTest( css, "Disconnected Element", root4, true );
michael@0 281 check( "Disconnected Element", root4, true, true );
michael@0 282 cacheCheck( "Disconnected Element", root4 );
michael@0 283 runTest( ecss, "SyntaxError: Disconnected Element", root4, false );
michael@0 284 jqTests("Disconnected Element", root3.cloneNode(true), "querySelectorAll");
michael@0 285 var newRoot = document.createElement("nosuchtag");
michael@0 286 newRoot.appendChild(root3.cloneNode(true));
michael@0 287 jqTests("Disconnected Element scoping", newRoot, "querySelectorAll");
michael@0 288
michael@0 289 var fragment = document.createDocumentFragment();
michael@0 290 fragment.appendChild( root2.cloneNode(true) );
michael@0 291
michael@0 292 interfaceCheck(fragment, "Fragment");
michael@0 293 runTest( css, "Fragment", fragment, true );
michael@0 294 check( "Fragment", fragment, true, true );
michael@0 295 runTest( ecss, "SyntaxError: Fragment", fragment, false );
michael@0 296 cacheCheck( "Fragment", fragment );
michael@0 297
michael@0 298 root.parentNode.removeChild( root );
michael@0 299
michael@0 300 interfaceCheck(document, "Document");
michael@0 301 runTest( css, "Document", document, true );
michael@0 302 check( "Document", document, true, false );
michael@0 303 runTest( ecss, "SyntaxError: Document", document, false );
michael@0 304 jqTests("Document", document, "querySelectorAll");
michael@0 305 cacheCheck( "Document", document );
michael@0 306
michael@0 307 done();
michael@0 308
michael@0 309 function interfaceCheck(obj, type){
michael@0 310 var q = typeof obj.querySelector === "function";
michael@0 311 assert( q, type + " supports querySelector" );
michael@0 312 var qa = typeof obj.querySelectorAll === "function";
michael@0 313 assert( qa, type + " supports querySelectorAll" );
michael@0 314 return q && qa;
michael@0 315 }
michael@0 316
michael@0 317 function done(){
michael@0 318 if (window.parent && window.parent.SimpleTest) {
michael@0 319 window.parent.SimpleTest.finish();
michael@0 320 } else {
michael@0 321 var r = document.getElementById("results");
michael@0 322 var li = document.createElement("li");
michael@0 323 var b = document.createElement("b");
michael@0 324 b.appendChild( document.createTextNode( ((passed / tests) * 100).toFixed(1) + "%" ) );
michael@0 325 li.appendChild( b );
michael@0 326 li.appendChild( document.createTextNode( ": " + passed + " passed, " + (tests - passed) + " failed" ) );
michael@0 327 r.appendChild( li );
michael@0 328
michael@0 329 for ( var i = 0; i < results.length; i++ ) {
michael@0 330 var li = document.createElement("li");
michael@0 331 var span = document.createElement("span");
michael@0 332 span.style.color = (results[i][0] === "FAIL" ? "red" : "green");
michael@0 333 span.appendChild( document.createTextNode( results[i][0] ) );
michael@0 334 li.appendChild( span );
michael@0 335 li.appendChild( document.createTextNode( " " + results[i][1] ) );
michael@0 336 r.appendChild( li );
michael@0 337 }
michael@0 338 }
michael@0 339 }
michael@0 340
michael@0 341 function cacheCheck( type, root ) {
michael@0 342 try {
michael@0 343 var pre = root.querySelectorAll( "div" ), preLength = pre.length;
michael@0 344
michael@0 345 var div = document.createElement("div");
michael@0 346 (root.body || root).appendChild( div );
michael@0 347
michael@0 348 var post = root.querySelectorAll( "div" ), postLength = post.length;
michael@0 349
michael@0 350 assert( pre.length == preLength, type + ": StaticNodeList" );
michael@0 351 assert( post.length != pre.length, type + ": StaticNodeList" );
michael@0 352 } catch(e) {
michael@0 353 assert( false, type + ": StaticNodeList" );
michael@0 354 assert( false, type + ": StaticNodeList" );
michael@0 355 }
michael@0 356
michael@0 357 if ( div )
michael@0 358 (root.body || root).removeChild( div );
michael@0 359 }
michael@0 360
michael@0 361
michael@0 362 function runTest( css, type, root, expect ) {
michael@0 363 var pass = false;
michael@0 364 try {
michael@0 365 root.querySelectorAll("");
michael@0 366 } catch(e){ pass = e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR; }
michael@0 367 assert( pass, type + ".querySelectorAll Empty String" );
michael@0 368
michael@0 369 pass = false;
michael@0 370 try {
michael@0 371 pass = root.querySelectorAll(null).length === 0;
michael@0 372 } catch(e){ pass = false; }
michael@0 373 assert( pass, type + ".querySelectorAll null" );
michael@0 374
michael@0 375 pass = false;
michael@0 376 try {
michael@0 377 pass = root.querySelectorAll(undefined).length === 0;
michael@0 378 } catch(e){ pass = false; }
michael@0 379 assert( pass, type + ".querySelectorAll undefined" );
michael@0 380
michael@0 381 pass = false;
michael@0 382 try {
michael@0 383 if ( root.querySelectorAll )
michael@0 384 root.querySelectorAll();
michael@0 385 } catch(e){ pass = true; }
michael@0 386 assert( pass, type + ".querySelectorAll no value" );
michael@0 387
michael@0 388 pass = false;
michael@0 389 try {
michael@0 390 root.querySelector("");
michael@0 391 } catch(e){ pass = e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR; }
michael@0 392 assert( pass, type + ".querySelector Empty String" );
michael@0 393
michael@0 394 pass = false;
michael@0 395 try {
michael@0 396 pass = root.querySelector(null) === null;
michael@0 397 } catch(e){ pass = false; }
michael@0 398 assert( pass, type + ".querySelector null" );
michael@0 399
michael@0 400 pass = false;
michael@0 401 try {
michael@0 402 pass = root.querySelector(undefined) === null;
michael@0 403 } catch(e){ pass = false; }
michael@0 404 assert( pass, type + ".querySelector undefined" );
michael@0 405
michael@0 406 pass = false;
michael@0 407 try {
michael@0 408 if ( root.querySelector )
michael@0 409 root.querySelector();
michael@0 410 } catch(e){ pass = true; }
michael@0 411 assert( pass, type + ".querySelector no value" );
michael@0 412
michael@0 413 for ( var i = 0; i < css.length; i++ ) {
michael@0 414 var test = css[i];
michael@0 415 if ( test.length == 2 ) {
michael@0 416 var query = test[0], color = test[1].match(/: ([^\s;]+)/)[1];
michael@0 417
michael@0 418 try {
michael@0 419 var found = root.querySelectorAll(query);
michael@0 420
michael@0 421 for ( var f = 0; f < found.length; f++ ) {
michael@0 422 found[f].style.backgroundColor = color;
michael@0 423 }
michael@0 424
michael@0 425 var pass = color != "red" || found.length === 0;
michael@0 426
michael@0 427 assert(expect && pass, type + ".querySelectorAll: " + query);
michael@0 428 } catch(e){
michael@0 429 var pass = !expect && e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR || false;
michael@0 430 assert(pass, type + ".querySelectorAll: " + query);
michael@0 431 }
michael@0 432
michael@0 433 if ( expect ) {
michael@0 434 var pass = false;
michael@0 435
michael@0 436 try {
michael@0 437 var found2 = root.querySelectorAll( " \t\r\n " + query + " \t\r\n " );
michael@0 438 pass = found2.length == found.length;
michael@0 439 } catch(e) {}
michael@0 440
michael@0 441 assert(pass, type + ".querySelectorAll Whitespace Trim: " + query);
michael@0 442 }
michael@0 443
michael@0 444 try {
michael@0 445 var single = root.querySelector(query);
michael@0 446
michael@0 447 var pass = found.length == 0 && single === null ||
michael@0 448 found.length && found[0] == single;
michael@0 449
michael@0 450 assert(expect, type + ".querySelector: " + query);
michael@0 451 } catch(e){
michael@0 452 var pass = !expect && e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR || false;
michael@0 453 assert(pass, type + ".querySelector: " + query);
michael@0 454 }
michael@0 455 }
michael@0 456 }
michael@0 457 }
michael@0 458
michael@0 459 function check( type, root, expect, fragment ){
michael@0 460 var walker = document.createTreeWalker( root, NodeFilter.SHOW_ELEMENT, { acceptNode: function(){ return 1; } } );
michael@0 461
michael@0 462 while ( walker.nextNode() ) {
michael@0 463 var div = walker.currentNode;
michael@0 464 if ( (div.getAttribute("class") || "").toString().indexOf("unitTest") > -1 &&
michael@0 465 (!fragment || div.getAttribute("id") !== "nofragment") ) {
michael@0 466 // If we're display:none, we need to toggle that when doing computed
michael@0 467 // style.
michael@0 468 var needToggle =
michael@0 469 (window.frameElement &&
michael@0 470 window.frameElement.style.display == "none");
michael@0 471 if (needToggle) {
michael@0 472 if ((div.getAttribute("class") || "").toString().indexOf("skipWhenToggling") > -1) {
michael@0 473 continue;
michael@0 474 }
michael@0 475 window.frameElement.style.display = "";
michael@0 476 // make sure it kicks in immediately
michael@0 477 document.body.offsetWidth;
michael@0 478 }
michael@0 479 var view = document.defaultView.getComputedStyle(div, null);
michael@0 480 var bg = view.getPropertyValue("background-color") || div.style.backgroundColor;
michael@0 481 if (needToggle) {
michael@0 482 window.frameElement.style.display = "none";
michael@0 483 // make sure it kicks in immediately
michael@0 484 document.body.offsetWidth;
michael@0 485 }
michael@0 486
michael@0 487 var pass = bg && bg.indexOf("(255, 0, 0") == -1 && bg.indexOf("#ff0000") == -1 && bg.indexOf("red") == -1;
michael@0 488 //var pass = bg && bg.indexOf("(255, 0, 0") == -1 && bg.indexOf("#ff0000") == -1;
michael@0 489 assert(pass === expect, type + ": " + (div.title || div.parentNode.title));
michael@0 490 }
michael@0 491 }
michael@0 492 }
michael@0 493
michael@0 494 function assert(pass, title) {
michael@0 495 // Update |passed| no matter what: some tests depend on this
michael@0 496 passed += (pass ? 1 : 0);
michael@0 497
michael@0 498 if (window.parent && window.parent.SimpleTest) {
michael@0 499 window.parent.SimpleTest.ok(pass, title);
michael@0 500 } else {
michael@0 501 results.push([ (!pass ? "FAIL" : "PASS"), title ]);
michael@0 502 tests++;
michael@0 503 }
michael@0 504 }
michael@0 505
michael@0 506 function jqTests(type, root, select) {
michael@0 507
michael@0 508 function query(q, resolver){
michael@0 509 try {
michael@0 510 return root[select](q, resolver);
michael@0 511 } catch(e){
michael@0 512 if ( e.message.indexOf("ERR") > -1 ||
michael@0 513 (e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR) )
michael@0 514 throw e;
michael@0 515 }
michael@0 516 }
michael@0 517
michael@0 518 var all = query("*");
michael@0 519
michael@0 520 function checkMatchesSelector(results, q) {
michael@0 521 var key = +new Date + ":" + Math.random();
michael@0 522
michael@0 523 function report(item, shouldMatch) {
michael@0 524 assert( item.mozMatchesSelector(q) === shouldMatch,
michael@0 525 item + (shouldMatch ? "does not match" : "matches")
michael@0 526 + " selector '" + q + "'" );
michael@0 527 }
michael@0 528
michael@0 529 for (var i = 0; i < results.length; i++) {
michael@0 530 var item = results.item(i);
michael@0 531 item[key] = true;
michael@0 532 report( item, true );
michael@0 533 }
michael@0 534
michael@0 535 for (var stride = 15, // reduce test spam
michael@0 536 i = Math.round(Math.random() * stride);
michael@0 537 i < all.length; i += stride)
michael@0 538 {
michael@0 539 var item = all.item(i),
michael@0 540 shouldMatch = !!item[key];
michael@0 541 report( item, shouldMatch );
michael@0 542 }
michael@0 543
michael@0 544 for (var i = 0; i < results.length; i++)
michael@0 545 delete results.item(i)[key];
michael@0 546 }
michael@0 547
michael@0 548 function t( name, q, ids, restrict, ids2 ) {
michael@0 549 var pass = true;
michael@0 550
michael@0 551 if ( restrict === false && root != document )
michael@0 552 return;
michael@0 553
michael@0 554 var namespaced = /\|[^=]/.test( q );
michael@0 555 var prepend = namespaced ? "xHTML|*#root3 " : "#root3 ";
michael@0 556 q = (restrict === false || restrict === ":root" ||
michael@0 557 restrict === ":scope" ? "" : prepend) +
michael@0 558 q.replace(/,/g, ", " + prepend);
michael@0 559 var nq = q.replace(/>/g, "&gt;").replace(/</g, "&lt;");
michael@0 560
michael@0 561 if ( namespaced ) {
michael@0 562 for ( var i = 0; i < badNamespace.length; i++ ) {
michael@0 563 var resolver = badNamespace[i], pass = false, results = null;
michael@0 564
michael@0 565 try {
michael@0 566 results = query(q, resolver);
michael@0 567 } catch(e) {
michael@0 568 pass = (e.message === "bad ERROR" ||
michael@0 569 (e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR));
michael@0 570 }
michael@0 571
michael@0 572 assert( pass, type + ": " + name + " Bad Resolver #" + (i+1) + " (" + nq + ")" +
michael@0 573 (pass ? "" : " Expected: " + extra(ids) + " Received: " + extra(results)) );
michael@0 574 }
michael@0 575 } else {
michael@0 576 var pass = false;
michael@0 577
michael@0 578 try {
michael@0 579 var results = query(q);
michael@0 580 pass = hasPassed( results, ids );
michael@0 581 } catch(e) {
michael@0 582 pass = e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR;
michael@0 583 }
michael@0 584
michael@0 585 assert( pass, type + ": " + name + " (" + nq + ")" +
michael@0 586 (pass ? "" : " Expected: " + extra(ids) + " Received: " + extra(results)) );
michael@0 587
michael@0 588 // For now, don't use checkMatchesSelector when
michael@0 589 // restrict === ":scope" because we have no way to hand the
michael@0 590 // right scope to it yet.
michael@0 591 if (results && restrict !== ":scope")
michael@0 592 checkMatchesSelector( results, q );
michael@0 593 }
michael@0 594
michael@0 595 function hasPassed(results, ids){
michael@0 596 var pass = (results && results.length == ids.length) || (!results && !ids);
michael@0 597
michael@0 598 if ( ids && results ) {
michael@0 599 for ( var i = 0; ids && i < ids.length; i++ ) {
michael@0 600 if ( ids[i] !== results[i].getAttribute("id") ) {
michael@0 601 pass = false;
michael@0 602 }
michael@0 603 }
michael@0 604 } else {
michael@0 605 pass = false;
michael@0 606 }
michael@0 607
michael@0 608 return pass;
michael@0 609 }
michael@0 610
michael@0 611 function extra(results){
michael@0 612 var extra = " [";
michael@0 613 if ( results ) {
michael@0 614 for ( var i = 0; i < results.length; i++ ) {
michael@0 615 extra += (extra.length > 2 ? "," : "") + "'" + (results[i].id || results[i]) + "'";
michael@0 616 }
michael@0 617 }
michael@0 618
michael@0 619 extra += "]";
michael@0 620 return extra;
michael@0 621 }
michael@0 622 }
michael@0 623
michael@0 624 t( "SVG", "*|svg", ["svg1","svg2","svg3"] );
michael@0 625 t( "SVG", "svg|svg", ["svg2","svg3"] );
michael@0 626 t( "SVG", "svg|svg *|circle", ["circle2","circle3"] );
michael@0 627 t( "SVG", "svg|svg svg|circle", ["circle2","circle3"] );
michael@0 628 t( "SVG", "xHTML|div *|svg", ["svg1","svg2","svg3"] );
michael@0 629 t( "SVG", "div svg|svg", ["svg2","svg3"] );
michael@0 630 t( "SVG", "xHTML|div svg|svg", ["svg2","svg3"] );
michael@0 631 t( "SVG", "xHTML|div svg|svg *|circle", ["circle2","circle3"] );
michael@0 632 t( "SVG", "xHTML|div svg *|circle", ["circle1","circle2","circle3"], true, ["circle1"] );
michael@0 633 t( "SVG", "xHTML|div svg|svg svg|circle", ["circle2","circle3"] );
michael@0 634
michael@0 635 t( "Element Selector", "xHTML|p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 636 t( "Parent Element", "xHTML|div p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 637 t( "Parent Element", "xHTML|div xHTML|p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 638 t( "Parent Element", "*|div xHTML|p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 639 t( "Parent Element", "*|div *|p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 640 t( "Child", "xHTML|p > xHTML|a", ["simon1","google","groups","mark","yahoo","simon"] );
michael@0 641 t( "Adjacent", "xHTML|a + xHTML|a", ["groups"] );
michael@0 642 t( "Adjacent", "xHTML|a + a", ["groups"] );
michael@0 643 t( "Nth-child", "xHTML|*#form xHTML|*#select1 xHTML|option:nth-child(3)", ["option1c"] );
michael@0 644
michael@0 645 assert( all && all.length > 30, type + ": Select all" );
michael@0 646 var good = all && all.length;
michael@0 647 for ( var i = 0; all && i < all.length; i++ )
michael@0 648 if ( all[i].nodeType != 1 )
michael@0 649 good = false;
michael@0 650 assert( good, type + ": Select all elements, no comment nodes" );
michael@0 651
michael@0 652 if ( root == document ) {
michael@0 653 t( ":root Selector", ":root", ["html"], false );
michael@0 654 t( ":scope Selector", ":scope", ["html"], ":scope" );
michael@0 655 } else {
michael@0 656 t( ":root Selector", ":root", [], ":root" );
michael@0 657 if (root.localName != "nosuchtag") {
michael@0 658 t( ":scope Selector", ":scope > nosuchtag",
michael@0 659 [ "outerbogustag" ], ":scope");
michael@0 660 }
michael@0 661 t( ":scope Selector", ":scope nosuchtag nosuchtag",
michael@0 662 [ "innerbogustag" ], ":scope");
michael@0 663
michael@0 664 if ( !root.parentNode ) {
michael@0 665 t( ":root All Selector", ":root *", [], ":root" );
michael@0 666 }
michael@0 667 }
michael@0 668
michael@0 669 if ( root.parentNode || root == document ) {
michael@0 670 assert( query(":root *").length == query("*").length - (root == document ? 1 : 0), type + ": :root All Selector" );
michael@0 671 }
michael@0 672 assert( query(":scope *").length == query("*").length - (root == document ? 1 : 0), type + ": :scope All Selector" );
michael@0 673
michael@0 674 t( "Element Selector", "p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 675 t( "Element Selector", "body", ["body"], false );
michael@0 676 t( "Element Selector", "html", ["html"], false );
michael@0 677 t( "Parent Element", "div p", ["firstp","ap","sndp","en","sap","first"] );
michael@0 678 var param = query("#object1 param");
michael@0 679 assert( param && param.length == 2, type + ": Object/param as context" );
michael@0 680
michael@0 681 var l = query("#length");
michael@0 682 assert( l && l.length, type + ': &lt;input name="length"&gt; cannot be found under IE' );
michael@0 683 var lin = query("#lengthtest input");
michael@0 684 assert( lin && lin.length, type + ': &lt;input name="length"&gt; cannot be found under IE' );
michael@0 685
michael@0 686 t( "Broken Selector", "[" );
michael@0 687 t( "Broken Selector", "(" );
michael@0 688 t( "Broken Selector", "{" );
michael@0 689 t( "Broken Selector", "<" );
michael@0 690 t( "Broken Selector", "()" );
michael@0 691 t( "Broken Selector", "<>" );
michael@0 692 t( "Broken Selector", "{}" );
michael@0 693
michael@0 694 t( "ID Selector", "#body", ["body"], false );
michael@0 695 t( "ID Selector w/ Element", "body#body", ["body"], false );
michael@0 696 t( "ID Selector w/ Element", "ul#first", [] );
michael@0 697 t( "ID selector with existing ID descendant", "#firstp #simon1", ["simon1"] );
michael@0 698 t( "ID selector with nonexistent descendant", "#firstp #foobar", [] );
michael@0 699
michael@0 700 t( "ID selector using UTF8", "#台北Táiběi", ["台北Táiběi"] );
michael@0 701 t( "Multiple ID selectors using UTF8", "#台北Táiběi, #台北", ["台北Táiběi","台北"] );
michael@0 702 t( "Descendant ID selector using UTF8", "div #台北", ["台北"] );
michael@0 703 t( "Child ID selector using UTF8", "form > #台北", ["台北"] );
michael@0 704
michael@0 705 t( "Escaped ID", "#foo\\:bar", ["foo:bar"] );
michael@0 706 t( "Escaped ID", "#test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
michael@0 707 t( "Descendant escaped ID", "div #foo\\:bar", ["foo:bar"] );
michael@0 708 t( "Descendant escaped ID", "div #test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
michael@0 709 t( "Child escaped ID", "form > #foo\\:bar", ["foo:bar"] );
michael@0 710 t( "Child escaped ID", "form > #test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
michael@0 711
michael@0 712 t( "ID Selector, child ID present", "#form > #radio1", ["radio1"] ); // bug #267
michael@0 713 t( "ID Selector, not an ancestor ID", "#form #first", [] );
michael@0 714 t( "ID Selector, not a child ID", "#form > #option1a", [] );
michael@0 715
michael@0 716 t( "All Children of ID", "#foo > *", ["sndp", "en", "sap"] );
michael@0 717 t( "All Children of ID with no children", "#firstUL > *", [] );
michael@0 718
michael@0 719 t( "ID selector with nonexistent ancestor", "#asdfasdf #foobar", [] ); // bug #986
michael@0 720
michael@0 721 //t( "body div#form", [], "ID selector within the context of another element" );
michael@0 722
michael@0 723 t( "Class Selector", ".blog", ["mark","simon"] );
michael@0 724 t( "Class Selector", ".blog.link", ["simon"] );
michael@0 725 t( "Class Selector w/ Element", "a.blog", ["mark","simon"] );
michael@0 726 t( "Parent Class Selector", "p .blog", ["mark","simon"] );
michael@0 727
michael@0 728 t( "Class selector using UTF8", ".台北Táiběi", ["utf8class1"] );
michael@0 729 t( "Class selector using UTF8", ".台北", ["utf8class1","utf8class2"] );
michael@0 730 t( "Class selector using UTF8", ".台北Táiběi.台北", ["utf8class1"] );
michael@0 731 t( "Class selector using UTF8", ".台北Táiběi, .台北", ["utf8class1","utf8class2"] );
michael@0 732 t( "Descendant class selector using UTF8", "div .台北Táiběi", ["utf8class1"] );
michael@0 733 t( "Child class selector using UTF8", "form > .台北Táiběi", ["utf8class1"] );
michael@0 734
michael@0 735 t( "Escaped Class", ".foo\\:bar", ["foo:bar"] );
michael@0 736 t( "Escaped Class", ".test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
michael@0 737 t( "Descendant scaped Class", "div .foo\\:bar", ["foo:bar"] );
michael@0 738 t( "Descendant scaped Class", "div .test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
michael@0 739 t( "Child escaped Class", "form > .foo\\:bar", ["foo:bar"] );
michael@0 740 t( "Child escaped Class", "form > .test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
michael@0 741
michael@0 742 t( "Comma Support", "a.blog, p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 743 t( "Comma Support", "a.blog , p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 744 t( "Comma Support", "a.blog ,p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 745 t( "Comma Support", "a.blog,p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 746
michael@0 747 t( "Outer Whitespace", " a.blog,p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 748 t( "Outer Whitespace", "a.blog,p ", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 749 t( "Outer Whitespace", " p,a.blog", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 750 t( "Outer Whitespace", "p,a.blog ", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
michael@0 751
michael@0 752 t( "Child", "p > a", ["simon1","google","groups","mark","yahoo","simon"] );
michael@0 753 t( "Child", "p> a", ["simon1","google","groups","mark","yahoo","simon"] );
michael@0 754 t( "Child", "p >a", ["simon1","google","groups","mark","yahoo","simon"] );
michael@0 755 t( "Child", "p>a", ["simon1","google","groups","mark","yahoo","simon"] );
michael@0 756 t( "Child w/ Class", "p > a.blog", ["mark","simon"] );
michael@0 757 t( "All Children", "code > *", ["anchor1","anchor2"] );
michael@0 758 t( "All Grandchildren", "p > * > *", ["anchor1","anchor2"] );
michael@0 759 t( "Adjacent", "a + a", ["groups"] );
michael@0 760 t( "Adjacent", "a +a", ["groups"] );
michael@0 761 t( "Adjacent", "a+ a", ["groups"] );
michael@0 762 t( "Adjacent", "a+a", ["groups"] );
michael@0 763 t( "Adjacent", "p + p", ["ap","en","sap"] );
michael@0 764 t( "Comma, Child, and Adjacent", "a + a, code > a", ["groups","anchor1","anchor2"] );
michael@0 765
michael@0 766 t( "First Child", "p:first-child", ["firstp","sndp"] );
michael@0 767 t( "Nth Child", "p:nth-child(1)", ["firstp","sndp"] );
michael@0 768
michael@0 769 t( "Last Child", "p:last-child", ["sap"] );
michael@0 770 t( "Last Child", "a:last-child", ["simon1","anchor1","mark","yahoo","anchor2","simon"] );
michael@0 771
michael@0 772 t( "Nth-child", "#main form#form > *:nth-child(2)", ["text2"] );
michael@0 773 t( "Nth-child", "#main form#form > :nth-child(2)", ["text2"] );
michael@0 774
michael@0 775 t( "Nth-child", "#form #select1 option:nth-child(3)", ["option1c"] );
michael@0 776 t( "Nth-child", "#form #select1 option:nth-child(0n+3)", ["option1c"] );
michael@0 777 t( "Nth-child", "#form #select1 option:nth-child(1n+0)", ["option1a", "option1b", "option1c", "option1d"] );
michael@0 778 t( "Nth-child", "#form #select1 option:nth-child(1n)", ["option1a", "option1b", "option1c", "option1d"] );
michael@0 779 t( "Nth-child", "#form #select1 option:nth-child(n)", ["option1a", "option1b", "option1c", "option1d"] );
michael@0 780 t( "Nth-child", "#form #select1 option:nth-child(even)", ["option1b", "option1d"] );
michael@0 781 t( "Nth-child", "#form #select1 option:nth-child(odd)", ["option1a", "option1c"] );
michael@0 782 t( "Nth-child", "#form #select1 option:nth-child(2n)", ["option1b", "option1d"] );
michael@0 783 t( "Nth-child", "#form #select1 option:nth-child(2n+1)", ["option1a", "option1c"] );
michael@0 784 t( "Nth-child", "#form #select1 option:nth-child(3n)", ["option1c"] );
michael@0 785 t( "Nth-child", "#form #select1 option:nth-child(3n+1)", ["option1a", "option1d"] );
michael@0 786 t( "Nth-child", "#form #select1 option:nth-child(3n+2)", ["option1b"] );
michael@0 787 t( "Nth-child", "#form #select1 option:nth-child(3n+3)", ["option1c"] );
michael@0 788 t( "Nth-child", "#form #select1 option:nth-child(3n-1)", ["option1b"] );
michael@0 789 t( "Nth-child", "#form #select1 option:nth-child(3n-2)", ["option1a", "option1d"] );
michael@0 790 t( "Nth-child", "#form #select1 option:nth-child(3n-3)", ["option1c"] );
michael@0 791 t( "Nth-child", "#form #select1 option:nth-child(3n+0)", ["option1c"] );
michael@0 792 t( "Nth-child", "#form #select1 option:nth-child(-n+3)", ["option1a", "option1b", "option1c"] );
michael@0 793
michael@0 794 t( "Attribute Exists", "a[title]", ["google"] );
michael@0 795 t( "Attribute Exists", "*[title]", ["google"] );
michael@0 796 t( "Attribute Exists", "[title]", ["google"] );
michael@0 797
michael@0 798 t( "Attribute Equals", "a[rel='bookmark']", ["simon1"] );
michael@0 799 t( "Attribute Equals", 'a[rel="bookmark"]', ["simon1"] );
michael@0 800 t( "Attribute Equals", "a[rel=bookmark]", ["simon1"] );
michael@0 801 t( "Multiple Attribute Equals", "#form input[type='hidden'],#form input[type='radio']", ['radio1','radio2','hidden1'] );
michael@0 802 t( "Multiple Attribute Equals", "#form input[type=\"hidden\"],#form input[type='radio']", ['radio1','radio2','hidden1'] );
michael@0 803 t( "Multiple Attribute Equals", "#form input[type=hidden],#form input[type=radio]", ['radio1','radio2','hidden1'] );
michael@0 804
michael@0 805 t( "Attribute selector using UTF8", "span[lang=中文]", ["台北"] );
michael@0 806
michael@0 807 t( "Attribute Begins With", "a[href ^= 'http://www']", ["google","yahoo"] );
michael@0 808 t( "Attribute Ends With", "a[href $= 'org/']", ["mark"] );
michael@0 809 t( "Attribute Contains", "a[href *= 'google']", ["google","groups"] );
michael@0 810
michael@0 811 // t("Select options via [selected]", "#select1 option[selected]", ["option1a"] );
michael@0 812 t("Select options via [selected]", "#select1 option[selected]", [] );
michael@0 813 t("Select options via [selected]", "#select2 option[selected]", ["option2d"] );
michael@0 814 t("Select options via [selected]", "#select3 option[selected]", ["option3b", "option3c"] );
michael@0 815
michael@0 816 t( "Grouped Form Elements", "input[name='foo[bar]']", ["hidden2"] );
michael@0 817
michael@0 818 t( ":not() Existing attribute", "#form select:not([multiple])", ["select1", "select2"]);
michael@0 819 t( ":not() Equals attribute", "#form select:not([name=select1])", ["select2", "select3"]);
michael@0 820 t( ":not() Equals quoted attribute", "#form select:not([name='select1'])", ["select2", "select3"]);
michael@0 821
michael@0 822 t( "First Child", "p:first-child", ["firstp","sndp"] );
michael@0 823 t( "Last Child", "p:last-child", ["sap"] );
michael@0 824 t( "Only Child", "a:only-child", ["simon1","anchor1","yahoo","anchor2"] );
michael@0 825 t( "Empty", "ul:empty", ["firstUL"] );
michael@0 826 //t( "Enabled UI Element", "#form input:enabled", ["text1","radio1","radio2","check1","check2","hidden2","name"] );
michael@0 827 t( "Disabled UI Element", "#form input:disabled", ["text2"] );
michael@0 828 t( "Checked UI Element", "#form input:checked", ["radio2","check1"] );
michael@0 829 t( "Element Preceded By", "p ~ div", ["foo","fx-queue","fx-tests", "moretests"] );
michael@0 830 t( "Not", "a.blog:not(.link)", ["mark"] );
michael@0 831 }
michael@0 832 };
michael@0 833 ]]></script>
michael@0 834 </head>
michael@0 835 <body id="body" class="unitTest" title="childhood and element type selectors">
michael@0 836 <h1><a href="http://www.w3.org/TR/selectors-api/">Selectors API</a> Test Suite</h1>
michael@0 837 <p>Testrunner by <a href="http://ejohn.org/">John Resig</a>, tests by <a href="http://ejohn.org/">John Resig</a>, <a href="http://disruptive-innovations.com/zoo/css3tests/selectorTest.html">Disruptive Innovations</a>, <a href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20060307/html/index.html">W3C CSS Working Group</a>, <a href="http://jquery.com/test/">jQuery JavaScript Library</a>.</p>
michael@0 838 <div id="root">
michael@0 839 <div class="header">
michael@0 840 <h3>CSS 3 Selectors tests</h3>
michael@0 841 <p>(c) <a href="http://www.disruptive-innovations.com">Disruptive Innovations</a> 2008<br/>
michael@0 842 Last update: 2008-06-06</p>
michael@0 843 </div>
michael@0 844
michael@0 845 <div class="test target">
michael@0 846 <div class="unitTest skipWhenToggling" id="target" title=":target selector"></div>
michael@0 847 </div>
michael@0 848
michael@0 849 <div class="test">
michael@0 850 <div class="blox1 unitTest" title="childhood selector"></div>
michael@0 851 </div>
michael@0 852
michael@0 853 <div class="test attributeExistence">
michael@0 854 <div class="blox2 unitTest" align="center" title="attribute existence selector"></div>
michael@0 855 <div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div>
michael@0 856 <div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div>
michael@0 857 <div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div>
michael@0 858 </div>
michael@0 859
michael@0 860 <div class="test attributeValue">
michael@0 861 <div class="blox6 unitTest" align="center" title="attribute value selector"></div>
michael@0 862 <div class="blox6 unitTest" foo="&eacute;" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
michael@0 863 <div class="blox6 unitTest" _foo="&eacute;" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
michael@0 864 </div>
michael@0 865
michael@0 866 <div class="test attributeSpaceSeparatedValues">
michael@0 867 <div class="blox7 foo unitTest" title="[~=] attribute selector"></div>
michael@0 868 <div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div>
michael@0 869 <div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div>
michael@0 870 <div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div>
michael@0 871 </div>
michael@0 872
michael@0 873 <div class="test attrStart">
michael@0 874 <div class="unitTest t1" title="[^=] attribute selector"></div>
michael@0 875 <div class="unitTest t2" title="[^=] attribute selector"></div>
michael@0 876 <div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
michael@0 877 <div class="unitTest t4" foo="&eacute;tagada" title="[^=] attribute selector looking for &eacute;"></div>
michael@0 878 </div>
michael@0 879
michael@0 880 <div class="test attrEnd">
michael@0 881 <div class="unitTest t1" title="[$=] attribute selector"></div>
michael@0 882 <div class="unitTest t2" title="[$=] attribute selector"></div>
michael@0 883 <div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
michael@0 884 <div class="unitTest t4" foo="tagada&eacute;" title="[$=] attribute selector looking for &eacute;"></div>
michael@0 885 </div>
michael@0 886
michael@0 887 <div class="test attrMiddle">
michael@0 888 <div class="unitTest t1" title="[*=] attribute selector"></div>
michael@0 889 <div class="unitTest t2" title="[*=] attribute selector"></div>
michael@0 890 <div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
michael@0 891 <div class="unitTest t4" foo="tagada&eacute;foo" title="[*=] attribute selector looking for &eacute;"></div>
michael@0 892 </div>
michael@0 893
michael@0 894 <div class="test firstChild">
michael@0 895 <div class="unitTest" title=":first-child selector"></div>
michael@0 896 <div class="blox12 unitTest" title=":first-child selector should not match non first child"></div>
michael@0 897 <div class="blox13 unitTest" title=":first-child selector should not match non first child"></div>
michael@0 898 </div>
michael@0 899
michael@0 900 <div class="test not">
michael@0 901 <div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div>
michael@0 902 <div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div>
michael@0 903 <div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts only simple selectors for argument"></div>
michael@0 904 </div>
michael@0 905
michael@0 906 <div class="test onlyOfType">
michael@0 907 <div class="blox17 unitTest" title=":only-of-type selector"></div>
michael@0 908 <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
michael@0 909 <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
michael@0 910 </div>
michael@0 911
michael@0 912 <div class="test nthchild1">
michael@0 913 <div class="unitTest" title=":nth-child(odd) selector"></div>
michael@0 914 <div class="unitTest" title=":nth-last-child(odd) selector"></div>
michael@0 915 <div class="unitTest" title=":nth-child(odd) selector"></div>
michael@0 916 <div class="unitTest" title=":nth-last-child(odd) selector"></div>
michael@0 917 <div class="unitTest" title=":nth-child(odd) selector"></div>
michael@0 918 <div class="unitTest" title=":nth-last-child(odd) selector"></div>
michael@0 919 </div>
michael@0 920 <div class="test nthchild2">
michael@0 921 <div class="unitTest" title=":nth-last-child(even) selector"></div>
michael@0 922 <div class="unitTest" title=":nth-child(even) selector"></div>
michael@0 923 <div class="unitTest" title=":nth-last-child(even) selector"></div>
michael@0 924 <div class="unitTest" title=":nth-child(even) selector"></div>
michael@0 925 <div class="unitTest" title=":nth-last-child(even) selector"></div>
michael@0 926 <div class="unitTest" title=":nth-child(even) selector"></div>
michael@0 927 </div>
michael@0 928 <div class="test nthchild3">
michael@0 929 <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
michael@0 930 <div class="unitTest" title=":nth-child(3n+2) selector"></div>
michael@0 931 <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
michael@0 932 <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
michael@0 933 <div class="unitTest" title=":nth-child(3n+2) selector"></div>
michael@0 934 <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
michael@0 935 </div>
michael@0 936
michael@0 937 <div class="test nthoftype1">
michael@0 938 <div class="unitTest" title=":nth-of-type(odd) selector"></div>
michael@0 939 <p class="unitTest" title=":nth-* selector"></p>
michael@0 940 <p class="unitTest" title=":nth-* selector"></p>
michael@0 941 <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
michael@0 942 <p class="unitTest" title=":nth-* selector"></p>
michael@0 943 <div class="unitTest" title=":nth-of-type(odd) selector"></div>
michael@0 944 <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
michael@0 945 </div>
michael@0 946 <div class="test nthoftype2">
michael@0 947 <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
michael@0 948 <p class="unitTest" title=":nth-* selector"></p>
michael@0 949 <p class="unitTest" title=":nth-* selector"></p>
michael@0 950 <div class="unitTest" title=":nth-of-type(even) selector"></div>
michael@0 951 <p class="unitTest" title=":nth-* selector"></p>
michael@0 952 <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
michael@0 953 <div class="unitTest" title=":nth-of-type(even) selector"></div>
michael@0 954 </div>
michael@0 955 <div class="test nthoftype3">
michael@0 956 <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
michael@0 957 <p class="unitTest" title=":nth-* selector"></p>
michael@0 958 <p class="unitTest" title=":nth-* selector"></p>
michael@0 959 <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
michael@0 960 <p class="unitTest" title=":nth-* selector"></p>
michael@0 961 <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
michael@0 962 <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
michael@0 963 <p class="unitTest" title=":nth-* selector"></p>
michael@0 964 <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
michael@0 965 <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
michael@0 966 </div>
michael@0 967
michael@0 968 <div class="test lastChild">
michael@0 969 <p class="unitTest" title=":not(:last-child) selector"></p>
michael@0 970 <div class="unitTest" title=":last-child selector"></div>&nbsp;
michael@0 971 </div>
michael@0 972
michael@0 973 <div class="test firstOfType">
michael@0 974 <p class="unitTest" title=":first-of-type selector"></p>
michael@0 975 <div class="unitTest" title=":first-of-type selector"></div>
michael@0 976 <p class="unitTest" title=":not(:first-of-type)"></p>
michael@0 977 <div class="unitTest" title=":not(:first-of-type)"></div>
michael@0 978 </div>
michael@0 979
michael@0 980 <div class="test lastOfType">
michael@0 981 <p class="unitTest" title=":not(:last-of-type)"></p>
michael@0 982 <div class="unitTest" title=":not(:last-of-type)"></div>
michael@0 983 <p class="unitTest" title=":last-of-type selector"></p>
michael@0 984 <div class="unitTest" title=":last-of-type selector"></div>
michael@0 985 </div>
michael@0 986
michael@0 987 <div class="test onlyChild">
michael@0 988 <div class="unitTest" title=":only-child where the element is NOT the only child"></div>
michael@0 989 <div class="unitTest" title=":only-child where the element is the only child">
michael@0 990 <div class="unitTest" title=":only-child where the element is the only child"></div>
michael@0 991 </div>
michael@0 992 </div>
michael@0 993
michael@0 994 <div class="test onlyOfType">
michael@0 995 <p class="unitTest" title=":only-of-type"></p>
michael@0 996 <div class="unitTest" title=":only-of-type">
michael@0 997 <div class="unitTest" title=":only-of-type"></div>
michael@0 998 </div>
michael@0 999 <div class="unitTest" title=":not(only-of-type)"></div>
michael@0 1000 </div>
michael@0 1001
michael@0 1002 <div class="test empty">
michael@0 1003 <div class="unitTest isEmpty" title=":empty with empty element"></div>
michael@0 1004 <div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
michael@0 1005 <div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
michael@0 1006 <div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
michael@0 1007 <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference">&nbsp;</div>
michael@0 1008 </div>
michael@0 1009
michael@0 1010 <div class="test lang">
michael@0 1011 <div id="nofragment" class="unitTest" title=":lang() where language comes from the document"></div>
michael@0 1012 <div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div>
michael@0 1013 <div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div>
michael@0 1014 <div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
michael@0 1015 </div>
michael@0 1016
michael@0 1017 <div class="test attrLang">
michael@0 1018 <div class="unitTest t1" title="[|=] where language comes from the document"></div>
michael@0 1019 <div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div>
michael@0 1020 <div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div>
michael@0 1021 <div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
michael@0 1022 </div>
michael@0 1023
michael@0 1024 <div class="test UI">
michael@0 1025 <button name="submit" type="submit" value="submit" class="t1" title=":enabled pseudo-class"><div class="unitTest"></div></button>
michael@0 1026 <button name="submit" type="submit" value="submit" class="t2" disabled="true" title=":enabled pseudo-class"><div class="unitTest"></div></button>
michael@0 1027 </div>
michael@0 1028 <div class="test UI">
michael@0 1029 <input class="t3" type="checkbox" checked="true"/><div class="unitTest" title=":checked"></div>
michael@0 1030 the previous square should be green when the checkbox is checked and become red when you uncheck it
michael@0 1031 </div>
michael@0 1032 <div class="test UI">
michael@0 1033 <input class="t4" type="checkbox"/><div class="unitTest" title=":not(:checked)"></div>
michael@0 1034 the previous square should be green when the checkbox is NOT checked and become red when you check it
michael@0 1035 </div>
michael@0 1036
michael@0 1037 <div class="test tilda">
michael@0 1038 <div class="unitTest t1" title="~ combinator"></div>
michael@0 1039 <div class="unitTest" title="~ combinator"></div>
michael@0 1040 <div class="unitTest" title="~ combinator"></div>
michael@0 1041 <div class="unitTest" title="~ combinator"></div>
michael@0 1042 <span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span>
michael@0 1043 </div>
michael@0 1044 <div class="test plus">
michael@0 1045 <div class="unitTest t1" title="+ combinator"></div>
michael@0 1046 <div class="unitTest t2" title="+ combinator"></div>
michael@0 1047 <div class="unitTest" title="+ combinator"></div>
michael@0 1048 <span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span>
michael@0 1049 </div>
michael@0 1050 </div>
michael@0 1051 <div id="root2">
michael@0 1052 <div class="header">
michael@0 1053 <h3>CSS 3 Selectors tests</h3>
michael@0 1054 <p>(c) <a href="http://www.disruptive-innovations.com">Disruptive Innovations</a> 2008<br/>
michael@0 1055 Last update: 2008-06-06</p>
michael@0 1056 </div>
michael@0 1057
michael@0 1058 <div class="test">
michael@0 1059 <div class="blox1 unitTest" title="childhood selector"></div>
michael@0 1060 </div>
michael@0 1061
michael@0 1062 <div class="test attributeExistence">
michael@0 1063 <div class="blox2 unitTest" align="center" title="attribute existence selector"></div>
michael@0 1064 <div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div>
michael@0 1065 <div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div>
michael@0 1066 <div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div>
michael@0 1067 </div>
michael@0 1068
michael@0 1069 <div class="test attributeValue">
michael@0 1070 <div class="blox6 unitTest" align="center" title="attribute value selector"></div>
michael@0 1071 <div class="blox6 unitTest" foo="&eacute;" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
michael@0 1072 <div class="blox6 unitTest" _foo="&eacute;" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
michael@0 1073 </div>
michael@0 1074
michael@0 1075 <div class="test attributeSpaceSeparatedValues">
michael@0 1076 <div class="blox7 foo unitTest" title="[~=] attribute selector"></div>
michael@0 1077 <div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div>
michael@0 1078 <div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div>
michael@0 1079 <div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div>
michael@0 1080 </div>
michael@0 1081
michael@0 1082 <div class="test attrStart">
michael@0 1083 <div class="unitTest t1" title="[^=] attribute selector"></div>
michael@0 1084 <div class="unitTest t2" title="[^=] attribute selector"></div>
michael@0 1085 <div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
michael@0 1086 <div class="unitTest t4" foo="&eacute;tagada" title="[^=] attribute selector looking for &eacute;"></div>
michael@0 1087 </div>
michael@0 1088
michael@0 1089 <div class="test attrEnd">
michael@0 1090 <div class="unitTest t1" title="[$=] attribute selector"></div>
michael@0 1091 <div class="unitTest t2" title="[$=] attribute selector"></div>
michael@0 1092 <div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
michael@0 1093 <div class="unitTest t4" foo="tagada&eacute;" title="[$=] attribute selector looking for &eacute;"></div>
michael@0 1094 </div>
michael@0 1095
michael@0 1096 <div class="test attrMiddle">
michael@0 1097 <div class="unitTest t1" title="[*=] attribute selector"></div>
michael@0 1098 <div class="unitTest t2" title="[*=] attribute selector"></div>
michael@0 1099 <div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
michael@0 1100 <div class="unitTest t4" foo="tagada&eacute;foo" title="[*=] attribute selector looking for &eacute;"></div>
michael@0 1101 </div>
michael@0 1102
michael@0 1103 <div class="test firstChild">
michael@0 1104 <div class="unitTest" title=":first-child selector"></div>
michael@0 1105 <div class="blox12 unitTest" title=":first-child selector should not match non first child"></div>
michael@0 1106 <div class="blox13 unitTest" title=":first-child selector should not match non first child"></div>
michael@0 1107 </div>
michael@0 1108
michael@0 1109 <div class="test not">
michael@0 1110 <div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div>
michael@0 1111 <div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div>
michael@0 1112 <div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts only simple selectors for argument"></div>
michael@0 1113 </div>
michael@0 1114
michael@0 1115 <div class="test onlyOfType">
michael@0 1116 <div class="blox17 unitTest" title=":only-of-type selector"></div>
michael@0 1117 <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
michael@0 1118 <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
michael@0 1119 </div>
michael@0 1120
michael@0 1121 <div class="test nthchild1">
michael@0 1122 <div class="unitTest" title=":nth-child(odd) selector"></div>
michael@0 1123 <div class="unitTest" title=":nth-last-child(odd) selector"></div>
michael@0 1124 <div class="unitTest" title=":nth-child(odd) selector"></div>
michael@0 1125 <div class="unitTest" title=":nth-last-child(odd) selector"></div>
michael@0 1126 <div class="unitTest" title=":nth-child(odd) selector"></div>
michael@0 1127 <div class="unitTest" title=":nth-last-child(odd) selector"></div>
michael@0 1128 </div>
michael@0 1129 <div class="test nthchild2">
michael@0 1130 <div class="unitTest" title=":nth-last-child(even) selector"></div>
michael@0 1131 <div class="unitTest" title=":nth-child(even) selector"></div>
michael@0 1132 <div class="unitTest" title=":nth-last-child(even) selector"></div>
michael@0 1133 <div class="unitTest" title=":nth-child(even) selector"></div>
michael@0 1134 <div class="unitTest" title=":nth-last-child(even) selector"></div>
michael@0 1135 <div class="unitTest" title=":nth-child(even) selector"></div>
michael@0 1136 </div>
michael@0 1137 <div class="test nthchild3">
michael@0 1138 <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
michael@0 1139 <div class="unitTest" title=":nth-child(3n+2) selector"></div>
michael@0 1140 <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
michael@0 1141 <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
michael@0 1142 <div class="unitTest" title=":nth-child(3n+2) selector"></div>
michael@0 1143 <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
michael@0 1144 </div>
michael@0 1145
michael@0 1146 <div class="test nthoftype1">
michael@0 1147 <div class="unitTest" title=":nth-of-type(odd) selector"></div>
michael@0 1148 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1149 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1150 <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
michael@0 1151 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1152 <div class="unitTest" title=":nth-of-type(odd) selector"></div>
michael@0 1153 <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
michael@0 1154 </div>
michael@0 1155 <div class="test nthoftype2">
michael@0 1156 <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
michael@0 1157 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1158 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1159 <div class="unitTest" title=":nth-of-type(even) selector"></div>
michael@0 1160 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1161 <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
michael@0 1162 <div class="unitTest" title=":nth-of-type(even) selector"></div>
michael@0 1163 </div>
michael@0 1164 <div class="test nthoftype3">
michael@0 1165 <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
michael@0 1166 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1167 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1168 <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
michael@0 1169 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1170 <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
michael@0 1171 <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
michael@0 1172 <p class="unitTest" title=":nth-of-* selector"></p>
michael@0 1173 <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
michael@0 1174 <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
michael@0 1175 </div>
michael@0 1176
michael@0 1177 <div class="test lastChild">
michael@0 1178 <p class="unitTest" title=":not(:last-child) selector"></p>
michael@0 1179 <div class="unitTest" title=":last-child selector"></div>&nbsp;
michael@0 1180 </div>
michael@0 1181
michael@0 1182 <div class="test firstOfType">
michael@0 1183 <p class="unitTest" title=":first-of-type selector"></p>
michael@0 1184 <div class="unitTest" title=":first-of-type selector"></div>
michael@0 1185 <p class="unitTest" title=":not(:first-of-type)"></p>
michael@0 1186 <div class="unitTest" title=":not(:first-of-type)"></div>
michael@0 1187 </div>
michael@0 1188
michael@0 1189 <div class="test lastOfType">
michael@0 1190 <p class="unitTest" title=":not(:last-of-type)"></p>
michael@0 1191 <div class="unitTest" title=":not(:last-of-type)"></div>
michael@0 1192 <p class="unitTest" title=":last-of-type selector"></p>
michael@0 1193 <div class="unitTest" title=":last-of-type selector"></div>
michael@0 1194 </div>
michael@0 1195
michael@0 1196 <div class="test onlyChild">
michael@0 1197 <div class="unitTest" title=":only-child where the element is NOT the only child"></div>
michael@0 1198 <div class="unitTest" title=":only-child where the element is the only child">
michael@0 1199 <div class="unitTest" title=":only-child where the element is the only child"></div>
michael@0 1200 </div>
michael@0 1201 </div>
michael@0 1202
michael@0 1203 <div class="test onlyOfType">
michael@0 1204 <p class="unitTest" title=":only-of-type"></p>
michael@0 1205 <div class="unitTest" title=":only-of-type">
michael@0 1206 <div class="unitTest" title=":only-of-type"></div>
michael@0 1207 </div>
michael@0 1208 <div class="unitTest" title=":not(only-of-type)"></div>
michael@0 1209 </div>
michael@0 1210
michael@0 1211 <div class="test empty">
michael@0 1212 <div class="unitTest isEmpty" title=":empty with empty element"></div>
michael@0 1213 <div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
michael@0 1214 <div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
michael@0 1215 <div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
michael@0 1216 <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference">&nbsp;</div>
michael@0 1217 </div>
michael@0 1218
michael@0 1219 <div class="test lang">
michael@0 1220 <div id="nofragment" class="unitTest" title=":lang() where language comes from the document"></div>
michael@0 1221 <div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div>
michael@0 1222 <div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div>
michael@0 1223 <div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
michael@0 1224 </div>
michael@0 1225
michael@0 1226 <div class="test attrLang">
michael@0 1227 <div class="unitTest t1" title="[|=] where language comes from the document"></div>
michael@0 1228 <div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div>
michael@0 1229 <div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div>
michael@0 1230 <div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
michael@0 1231 </div>
michael@0 1232
michael@0 1233 <div class="test UI">
michael@0 1234 <button name="submit" type="submit" value="submit" class="t1" title=":enabled pseudo-class"><div class="unitTest"></div></button>
michael@0 1235 <button name="submit" type="submit" value="submit" class="t2" disabled="true" title=":enabled pseudo-class"><div class="unitTest"></div></button>
michael@0 1236 </div>
michael@0 1237 <div class="test UI">
michael@0 1238 <input class="t3" type="checkbox" checked="true"/><div class="unitTest" title=":checked"></div>
michael@0 1239 the previous square should be green when the checkbox is checked and become red when you uncheck it
michael@0 1240 </div>
michael@0 1241 <div class="test UI">
michael@0 1242 <input class="t4" type="checkbox"/><div class="unitTest" title=":not(:checked)"></div>
michael@0 1243 the previous square should be green when the checkbox is NOT checked and become red when you check it
michael@0 1244 </div>
michael@0 1245
michael@0 1246 <div class="test tilda">
michael@0 1247 <div class="unitTest t1" title="~ combinator"></div>
michael@0 1248 <div class="unitTest" title="~ combinator"></div>
michael@0 1249 <div class="unitTest" title="~ combinator"></div>
michael@0 1250 <div class="unitTest" title="~ combinator"></div>
michael@0 1251 <span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span>
michael@0 1252 </div>
michael@0 1253 <div class="test plus">
michael@0 1254 <div class="unitTest t1" title="+ combinator"></div>
michael@0 1255 <div class="unitTest t2" title="+ combinator"></div>
michael@0 1256 <div class="unitTest" title="+ combinator"></div>
michael@0 1257 <span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span>
michael@0 1258 </div>
michael@0 1259 </div>
michael@0 1260 <div id="root3">
michael@0 1261 <div id="svgs">
michael@0 1262 <!-- svg elements, but in the xhtml namespace -->
michael@0 1263 <svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg1">
michael@0 1264 <desc id="desc1">Example circle01 - circle filled with red and stroked with blue</desc>
michael@0 1265 <rect id="rect1" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
michael@0 1266 <circle id="circle1" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
michael@0 1267 </svg>
michael@0 1268 <!-- svg elements using svg: -->
michael@0 1269 <svg:svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg2">
michael@0 1270 <svg:desc id="desc2">Example circle01 - circle filled with red and stroked with blue</svg:desc>
michael@0 1271 <svg:rect id="rect2" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
michael@0 1272 <svg:circle id="circle2" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
michael@0 1273 </svg:svg>
michael@0 1274 <!-- svg using an inline xmlns -->
michael@0 1275 <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3">
michael@0 1276 <desc id="desc3">Example circle01 - circle filled with red and stroked with blue</desc>
michael@0 1277 <rect id="rect3" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
michael@0 1278 <circle id="circle3" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />
michael@0 1279 </svg>
michael@0 1280 </div>
michael@0 1281
michael@0 1282 <h1 id="header">jQuery Test Suite</h1>
michael@0 1283 <h2 id="banner"></h2>
michael@0 1284 <h2 id="userAgent"></h2>
michael@0 1285
michael@0 1286 <!-- Test HTML -->
michael@0 1287 <div id="nothiddendiv" style="height:1px;background:white;">
michael@0 1288
michael@0 1289 <div id="nothiddendivchild"></div>
michael@0 1290 </div>
michael@0 1291 <!-- Test for scoping -->
michael@0 1292 <nosuchtag id="outerbogustag">
michael@0 1293 <nosuchtag id="innerbogustag"></nosuchtag>
michael@0 1294 </nosuchtag>
michael@0 1295 <!-- this iframe is outside the #main so it won't reload constantly wasting time, but it means the tests must be "safe" and clean up after themselves -->
michael@0 1296 <iframe id="loadediframe" name="loadediframe" style="display:none;" src="data/iframe.html"></iframe>
michael@0 1297 <dl id="dl" style="display:none;">
michael@0 1298 <div id="main" style="display: none;">
michael@0 1299 <p id="firstp">See <a id="simon1" href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a> for more information.</p>
michael@0 1300
michael@0 1301 <p id="ap">
michael@0 1302 Here are some links in a normal paragraph: <a id="google" href="http://www.google.com/" title="Google!">Google</a>,
michael@0 1303 <a id="groups" href="http://groups.google.com/">Google Groups</a>.
michael@0 1304 This link has <code><a href="http://smin" id="anchor1">class="blog"</a></code>:
michael@0 1305 <a href="http://diveintomark.org/" class="blog" hreflang="en" id="mark">diveintomark</a>
michael@0 1306
michael@0 1307 </p>
michael@0 1308 <div id="foo">
michael@0 1309
michael@0 1310 <p id="sndp">Everything inside the red border is inside a div with <code>id="foo"</code>.</p>
michael@0 1311 <p lang="en" id="en">This is a normal link: <a id="yahoo" href="http://www.yahoo.com/" class="blogTest">Yahoo</a></p>
michael@0 1312 <p id="sap">This link has <code><a href="#2" id="anchor2">class="blog"</a></code>: <a href="http://simon.incutio.com/" class="blog link" id="simon">Simon Willison's Weblog</a></p>
michael@0 1313
michael@0 1314 </div>
michael@0 1315
michael@0 1316 <p id="first">Try them out:</p>
michael@0 1317 <ul id="firstUL"></ul>
michael@0 1318 <ol id="empty"></ol>
michael@0 1319 <form id="form" action="formaction">
michael@0 1320 <input type="text" name="action" value="Test" id="text1" maxlength="30"/>
michael@0 1321 <input type="text" name="text2" value="Test" id="text2" disabled="disabled"/>
michael@0 1322 <input type="radio" name="radio1" id="radio1" value="on"/>
michael@0 1323
michael@0 1324 <input type="radio" name="radio2" id="radio2" checked="checked"/>
michael@0 1325
michael@0 1326 <input type="checkbox" name="check" id="check1" checked="checked"/>
michael@0 1327 <input type="checkbox" id="check2" value="on"/>
michael@0 1328
michael@0 1329 <input type="hidden" name="hidden" id="hidden1"/>
michael@0 1330 <input type="text" style="display:none;" name="foo[bar]" id="hidden2"/>
michael@0 1331
michael@0 1332 <input type="text" id="name" name="name" value="name" />
michael@0 1333
michael@0 1334 <button id="button" name="button">Button</button>
michael@0 1335
michael@0 1336 <textarea id="area1" maxlength="30">foobar</textarea>
michael@0 1337
michael@0 1338
michael@0 1339 <select name="select1" id="select1">
michael@0 1340 <option id="option1a" class="emptyopt" value="">Nothing</option>
michael@0 1341 <option id="option1b" value="1">1</option>
michael@0 1342 <option id="option1c" value="2">2</option>
michael@0 1343 <option id="option1d" value="3">3</option>
michael@0 1344 </select>
michael@0 1345 <select name="select2" id="select2">
michael@0 1346
michael@0 1347 <option id="option2a" class="emptyopt" value="">Nothing</option>
michael@0 1348 <option id="option2b" value="1">1</option>
michael@0 1349 <option id="option2c" value="2">2</option>
michael@0 1350 <option id="option2d" selected="selected" value="3">3</option>
michael@0 1351 </select>
michael@0 1352 <select name="select3" id="select3" multiple="multiple">
michael@0 1353 <option id="option3a" class="emptyopt" value="">Nothing</option>
michael@0 1354
michael@0 1355 <option id="option3b" selected="selected" value="1">1</option>
michael@0 1356 <option id="option3c" selected="selected" value="2">2</option>
michael@0 1357 <option id="option3d" value="3">3</option>
michael@0 1358 </select>
michael@0 1359
michael@0 1360 <object id="object1" codebase="stupid">
michael@0 1361 <param name="p1" value="x1" />
michael@0 1362 <param name="p2" value="x2" />
michael@0 1363
michael@0 1364 </object>
michael@0 1365
michael@0 1366 <span id="台北Táiběi"></span>
michael@0 1367 <span id="台北" lang="中文"></span>
michael@0 1368 <span id="utf8class1" class="台北Táiběi 台北"></span>
michael@0 1369 <span id="utf8class2" class="台北"></span>
michael@0 1370 <span id="foo:bar" class="foo:bar"></span>
michael@0 1371 <span id="test.foo[5]bar" class="test.foo[5]bar"></span>
michael@0 1372
michael@0 1373 <foo_bar id="foobar">test element</foo_bar>
michael@0 1374
michael@0 1375 </form>
michael@0 1376 <b id="floatTest">Float test.</b>
michael@0 1377 <iframe id="iframe" name="iframe"></iframe>
michael@0 1378 <form id="lengthtest">
michael@0 1379 <input type="text" id="length" name="test"/>
michael@0 1380 <input type="text" id="idTest" name="id"/>
michael@0 1381 </form>
michael@0 1382 <table id="table"></table>
michael@0 1383
michael@0 1384
michael@0 1385 <div id="fx-queue">
michael@0 1386 <div id="fadein" class='chain test'>fadeIn<div>fadeIn</div></div>
michael@0 1387 <div id="fadeout" class='chain test out'>fadeOut<div>fadeOut</div></div>
michael@0 1388
michael@0 1389 <div id="show" class='chain test'>show<div>show</div></div>
michael@0 1390 <div id="hide" class='chain test out'>hide<div>hide</div></div>
michael@0 1391
michael@0 1392
michael@0 1393 <div id="togglein" class='chain test'>togglein<div>togglein</div></div>
michael@0 1394 <div id="toggleout" class='chain test out'>toggleout<div>toggleout</div></div>
michael@0 1395
michael@0 1396
michael@0 1397 <div id="slideup" class='chain test'>slideUp<div>slideUp</div></div>
michael@0 1398 <div id="slidedown" class='chain test out'>slideDown<div>slideDown</div></div>
michael@0 1399
michael@0 1400 <div id="slidetogglein" class='chain test'>slideToggleIn<div>slideToggleIn</div></div>
michael@0 1401
michael@0 1402 <div id="slidetoggleout" class='chain test out'>slideToggleOut<div>slideToggleOut</div></div>
michael@0 1403 </div>
michael@0 1404
michael@0 1405 <div id="fx-tests"></div>
michael@0 1406
michael@0 1407 <form id="testForm" action="#" method="get">
michael@0 1408 <textarea name="T3" rows="2" cols="15">?
michael@0 1409 Z</textarea>
michael@0 1410 <input type="hidden" name="H1" value="x" />
michael@0 1411 <input type="hidden" name="H2" />
michael@0 1412
michael@0 1413 <input name="PWD" type="password" value="" />
michael@0 1414 <input name="T1" type="text" />
michael@0 1415 <input name="T2" type="text" value="YES" readonly="readonly" />
michael@0 1416 <input type="checkbox" name="C1" value="1" />
michael@0 1417 <input type="checkbox" name="C2" />
michael@0 1418 <input type="radio" name="R1" value="1" />
michael@0 1419 <input type="radio" name="R1" value="2" />
michael@0 1420 <input type="text" name="My Name" value="me" />
michael@0 1421 <input type="reset" name="reset" value="NO" />
michael@0 1422
michael@0 1423 <select name="S1">
michael@0 1424 <option value="abc">ABC</option>
michael@0 1425 <option value="abc">ABC</option>
michael@0 1426 <option value="abc">ABC</option>
michael@0 1427 </select>
michael@0 1428 <select name="S2" multiple="multiple" size="3">
michael@0 1429 <option value="abc">ABC</option>
michael@0 1430
michael@0 1431 <option value="abc">ABC</option>
michael@0 1432 <option value="abc">ABC</option>
michael@0 1433 </select>
michael@0 1434 <select name="S3">
michael@0 1435 <option selected="selected">YES</option>
michael@0 1436 </select>
michael@0 1437 <select name="S4">
michael@0 1438
michael@0 1439 <option value="" selected="selected">NO</option>
michael@0 1440 </select>
michael@0 1441 <input type="submit" name="sub1" value="NO" />
michael@0 1442 <input type="submit" name="sub2" value="NO" />
michael@0 1443 <input type="image" name="sub3" value="NO" />
michael@0 1444 <button name="sub4" type="submit" value="NO">NO</button>
michael@0 1445 <input name="D1" type="text" value="NO" disabled="disabled" />
michael@0 1446 <input type="checkbox" checked="checked" disabled="disabled" name="D2" value="NO" />
michael@0 1447
michael@0 1448 <input type="radio" name="D3" value="NO" checked="checked" disabled="disabled" />
michael@0 1449 <select name="D4" disabled="disabled">
michael@0 1450 <option selected="selected" value="NO">NO</option>
michael@0 1451 </select>
michael@0 1452 </form>
michael@0 1453 <div id="moretests">
michael@0 1454 <form>
michael@0 1455 <div id="checkedtest" style="display:none;">
michael@0 1456
michael@0 1457 <input type="radio" name="checkedtestradios" checked="checked"/>
michael@0 1458 <input type="radio" name="checkedtestradios" value="on"/>
michael@0 1459 <input type="checkbox" name="checkedtestcheckboxes" checked="checked"/>
michael@0 1460 <input type="checkbox" name="checkedtestcheckboxes" />
michael@0 1461 </div>
michael@0 1462 </form>
michael@0 1463 <div id="nonnodes"><span>hi</span> there <!-- mon ami --></div>
michael@0 1464
michael@0 1465 <div id="t2037">
michael@0 1466 <div><div class="hidden">hidden</div></div>
michael@0 1467 </div>
michael@0 1468 </div>
michael@0 1469 </div>
michael@0 1470 </dl>
michael@0 1471
michael@0 1472 <ol id="tests"></ol>
michael@0 1473 </div>
michael@0 1474 <ol id="results"></ol>
michael@0 1475 </body>
michael@0 1476 </html>

mercurial