third_party/WebKit/LayoutTests/fast/dom/SelectorAPI/resig-SelectorsAPI-test.xhtml

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