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