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