2008-07-22 04:55:52 +04:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" xmlns:svg = "http://www.w3.org/2000/svg"
xml:lang="en" lang="en" dir="ltr" id="html" class="unitTest" title=":root selector">
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > selectorTest< / title >
<!-- (c) Disruptive Innovations 2008 -->
< style type = "text/css" >
/* TEST 0 : BASIC TESTS */
/* element type selector */
body { background-color: red; margin: 10px; padding: 10px; color: red; font-family: sans-serif }
div { background-color: red; color: red; }
div.header { background-color: #e0e0e0; color: black; padding: 10px; margin-bottom: 10px;}
/* class selector */
.unitTest { width: 10px; background-color: red; color: red; margin: 0px; margin-right: 2px; float: left; }
.test { margin-bottom: 2px; background-color: green; color: green; }
/* group of selectors */
.unitTest, .test { height: 10px; }
.UI > * { float: left }
.UI { clear: both; height: auto; padding-top: 6px;}
.tilda { clear: both; height: auto; padding-top: 6px;}
.plus { clear: both; height: auto; padding-top: 6px;}
h1, p { width: 500px; color: #000; }
a { color: #000; }
#results { background: #FFF; width: 600px; padding: 10px 40px; color: #000; font-size: 11px; line-height: 1.3em; }
#root, #root2, #root3 { display: none; }
/* init */
.blox16 { background-color: red; }
.blox17 { background-color: red; }
.lastChild > p { background-color: red; }
.firstOfType > p { background-color: red }
.lastOfType > p { background-color: red }
.empty > .isEmpty { color: red; }
html { background-color: red; }
< / style >
< span type = "text/test" id = "test" > < ![CDATA[
/* :target selector */
.target :target { background-color: lime; }
/* test 1 : childhood selector */
html > body { background-color: green; }
.test > .blox1 { background-color: lime; }
/* test 2 : attribute existence selector */
/* attribute with a value */
.blox2[align] { background-color: lime; }
/* attribute with empty value */
.blox3[align] { background-color: lime; }
/* attribute with almost similar name */
.blox4, .blox5 { background-color: lime }
.blox4[align], .blox5[align] { background-color: red; }
/* test3 : attribute value selector */
.blox6[align="center"] { background-color: lime; }
.blox6[align="c"] { background-color: red; }
.blox6[align="centera"] { background-color: red; }
.blox6[foo="\e9"] { background-color: lime; }
.blox6[\_foo="\e9"] { background-color: lime; }
/* test 4 : [~=] */
.blox7[class~="foo"] { background-color: lime; }
.blox8, .blox9, .blox10 { background-color: lime; }
.blox8[class~=""] { background-color: red; }
.blox9[foo~=""] { background-color: red; }
.blox10[foo~="foo"] { background-color: red; }
/* test5 [^=] */
.attrStart > .t3 { background-color: lime; }
.attrStart > .t1[class^="unit"] { background-color: lime; }
.attrStart > .t2 { background-color: lime; }
.attrStart > .t2[class^="nit"] { background-color: red; }
.attrStart > .t3[align^=""] { background-color: red; }
.attrStart > .t4[foo^="\e9"] { background-color: lime; }
/* test6 [$=] */
.attrEnd > .t3 { background-color: lime; }
.attrEnd > .t1[class$="t1"] { background-color: lime; }
.attrEnd > .t2 { background-color: lime; }
.attrEnd > .t2[class$="unit"] { background-color: red; }
.attrEnd > .t3[align$=""] { background-color: red; }
.attrEnd > .t4[foo$="\e9"] { background-color: lime; }
/* test7 [*=] */
.attrMiddle > .t3 { background-color: lime; }
.attrMiddle > .t1[class*="t t"] { background-color: lime; }
.attrMiddle > .t2 { background-color: lime; }
.attrMiddle > .t2[class*="a"] { background-color: red; }
.attrMiddle > .t3[align*=""] { background-color: red; }
.attrMiddle > .t4[foo*="\e9"] { background-color: lime; }
/* :first-child tests */
.firstChild .unitTest:first-child { background-color: lime; }
.blox12:first-child { background-color: red; }
.blox13:first-child { background-color: red; }
.blox12, .blox13 { background-color: lime }
/* :root tests */
:root { background-color: green; }
/* :nth-child(n) tests */
.nthchild1 > :nth-last-child(odd) { background-color: lime; }
.nthchild1 > :nth-child(odd) { background-color: lime; }
.nthchild2 > :nth-last-child(even) { background-color: lime; }
.nthchild2 > :nth-child(even) { background-color: lime; }
.nthchild3 > :nth-child(3n+2) { background-color: lime; }
.nthchild3 > :nth-last-child(3n+1) { background-color: lime; }
.nthchild3 > :nth-last-child(3n+3) { background-color: lime; }
.nthoftype1 > div:nth-of-type(odd) { background-color: lime; }
.nthoftype1 > div:nth-last-of-type(odd) { background-color: lime; }
.nthoftype1 > p { background-color: green; }
.nthoftype2 > div:nth-of-type(even) { background-color: lime; }
.nthoftype2 > div:nth-last-of-type(even) { background-color: lime; }
.nthoftype2 > p { background-color: green; }
.nthoftype3 > div:nth-of-type(3n+1) { background-color: lime; }
.nthoftype3 > div:nth-last-of-type(3n+1) { background-color: lime; }
.nthoftype3 > div:nth-last-of-type(3n+2) { background-color: lime; }
.nthoftype3 > p { background-color: green; }
/* :not() tests */
.blox14:not(span) { background-color: lime; }
.blox15:not([foo="blox14"]) { background-color: lime; }
.blox16:not(.blox15) { background-color: lime; }
/* :only-of-type tests */
.blox17:only-of-type { background-color: lime; }
.blox18:only-of-type { background-color: red; }
.blox18:not(:only-of-type) { background-color: lime; }
/* :last-child tests */
.lastChild > :last-child { background-color: lime }
.lastChild > :not(:last-child) { background-color: lime }
/* :first-of-type tests */
.firstOfType > *:first-of-type { background-color: lime; }
*.firstOfType > :not(:first-of-type) { background-color: lime; }
/* :last-of-type tests */
.lastOfType > *:last-of-type { background-color: lime; }
*.lastOfType > :not(:last-of-type) { background-color: lime; }
/* :only-child tests */
.onlyChild > *:not(:only-child) { background-color: lime; }
.onlyChild > .unitTest > *:only-child { background-color: lime; }
/* :only-of-type tests */
.onlyOfType *:only-of-type { background-color: lime; }
.onlyOfType *:not(:only-of-type) { background-color: lime; }
/* :empty tests */
.empty > *.isEmpty:empty { background-color: lime; color: lime; }
.empty > .isNotEmpty { background-color: blue; color: blue; }
.empty > .isNotEmpty:empty { background-color: red; color: red; }
.empty > .isNotEmpty:not(:empty) { background-color: lime; color: lime; }
/* :lang() tests */
.lang :lang(en) { background-color: lime; }
.lang :lang(fr) { background-color: lime; }
.lang .t1 { background-color: blue; }
.lang .t1:lang(es) { background-color: lime; }
.lang :lang(es-AR) { background-color: red; }
/* [|=] tests */
.attrLang .t1 { background-color: lime; }
.attrLang .t1[lang|="en"] { background-color: red; }
.attrLang [lang|="fr"] { background-color: lime; }
.attrLang .t2[lang|="en"] { background-color: lime; }
.attrLang .t3 { background-color: blue; }
.attrLang .t3[lang|="es"] { background-color: lime; }
.attrLang [lang|="es-AR"] { background-color: red; }
/* UI tests */
.UI .t1:enabled > .unitTest { background-color: lime; }
.UI .t2:disabled > .unitTest { background-color: lime; }
.UI .t3:checked + div { background-color: lime; }
.UI .t4:not(:checked) + div { background-color: lime; }
/* ~ combinator tests */
.tilda .t1 { background-color: white; }
.tilda .t1 ~ .unitTest { background-color: lime; }
.tilda .t1:hover ~ .unitTest { background-color: red; }
/* ~ combinator tests */
.plus .t1, .plus .t2 { background-color: white; }
.plus .t1 + .unitTest + .unitTest { background-color: lime; }
.plus .t1:hover + .unitTest + .unitTest { background-color: red; }
]]>< / span >
< span type = "text/test" id = "error" >
.blox16:not(.blox15[foo="blox14"]) { background-color: red; }
/* Tests from http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20060307/html/index.html */
div:not(:not(div)) { background-color : red }
div, { background: red; }
.5cm { background: red; }
foo & address, p { background: red; }
[*=test] { background: red; }
[*|*=test] { background: red; }
div:subject { background: red; }
:canvas { background: red; }
:viewport { background: red; }
:window { background: red; }
:menu { background: red; }
:table { background: red; }
:select { background: red; }
::canvas { background: red; }
::viewport { background: red; }
::window { background: red; }
::menu { background: red; }
::table { background: red; }
::select { background: red; }
..test { background: red; color: yellow; }
.foo..quux { background: red; color: yellow; }
.bar. { background: red; color: yellow; }
< / span >
< script > < ! [ C D A T A [
window.onload = function(){
if ( window.location.hash.indexOf("target") == -1 )
window.location.hash = "#target";
var root = document.getElementById("root");
var root2 = document.getElementById("root2");
var root3 = document.getElementById("root3");
var results = [];
var tests = 0, passed = 0;
var cache = {};
var css = document.getElementById("test").firstChild.nodeValue.split("\n");
for ( var i = 0; i < css.length ; i + + ) {
css[i] = css[i].replace(/\/\*.*?\*\//g, "")
.replace(/^\s*|\s*$/g, "").split(/\s*{/);
}
var ecss = document.getElementById("error").firstChild.nodeValue.split("\n");
for ( var i = 0; i < ecss.length ; i + + ) {
ecss[i] = ecss[i].replace(/\/\*.*?\*\//g, "")
.replace(/^\s*|\s*$/g, "").split(/\s*{/);
}
var namespaceCheck = {};
var badNamespace = [
{},
null,
undefined,
];
interfaceCheck(root, "Element");
runTest( css, "Element", root, true );
check( "Inside Element", root, true, false );
cacheCheck( "Element", root );
check( "Outside Element", root2, passed === 0 ? "autofail" : false, false );
2008-07-22 20:44:14 +04:00
runTest( ecss, "SyntaxError: Element", root, false );
2008-07-22 04:55:52 +04:00
jqTests("Element", root3, "querySelectorAll");
var root4 = root2.cloneNode(true);
interfaceCheck(root4, "Disconnected Element");
runTest( css, "Disconnected Element", root4, true );
check( "Disconnected Element", root4, true, true );
cacheCheck( "Disconnected Element", root4 );
2008-07-22 20:44:14 +04:00
runTest( ecss, "SyntaxError: Disconnected Element", root4, false );
2008-07-22 04:55:52 +04:00
jqTests("Disconnected Element", root3.cloneNode(true), "querySelectorAll");
var fragment = document.createDocumentFragment();
fragment.appendChild( root2.cloneNode(true) );
interfaceCheck(fragment, "Fragment");
runTest( css, "Fragment", fragment, true );
check( "Fragment", fragment, true, true );
2008-07-22 20:44:14 +04:00
runTest( ecss, "SyntaxError: Fragment", fragment, false );
2008-07-22 04:55:52 +04:00
cacheCheck( "Fragment", fragment );
root.parentNode.removeChild( root );
interfaceCheck(document, "Document");
runTest( css, "Document", document, true );
check( "Document", document, true, false );
2008-07-22 20:44:14 +04:00
runTest( ecss, "SyntaxError: Document", document, false );
2008-07-22 04:55:52 +04:00
jqTests("Document", document, "querySelectorAll");
cacheCheck( "Document", document );
done();
function interfaceCheck(obj, type){
var q = typeof obj.querySelector === "function";
assert( q, type + " supports querySelector" );
var qa = typeof obj.querySelectorAll === "function";
assert( qa, type + " supports querySelectorAll" );
return q & & qa;
}
function done(){
if (window.parent & & window.parent.SimpleTest) {
window.parent.SimpleTest.finish();
} else {
var r = document.getElementById("results");
var li = document.createElement("li");
var b = document.createElement("b");
b.appendChild( document.createTextNode( ((passed / tests) * 100).toFixed(1) + "%" ) );
li.appendChild( b );
li.appendChild( document.createTextNode( ": " + passed + " passed, " + (tests - passed) + " failed" ) );
r.appendChild( li );
for ( var i = 0; i < results.length ; i + + ) {
var li = document.createElement("li");
var span = document.createElement("span");
span.style.color = (results[i][0] === "FAIL" ? "red" : "green");
span.appendChild( document.createTextNode( results[i][0] ) );
li.appendChild( span );
li.appendChild( document.createTextNode( " " + results[i][1] ) );
r.appendChild( li );
}
}
}
function cacheCheck( type, root ) {
try {
var pre = root.querySelectorAll( "div" ), preLength = pre.length;
var div = document.createElement("div");
(root.body || root).appendChild( div );
var post = root.querySelectorAll( "div" ), postLength = post.length;
assert( pre.length == preLength, type + ": StaticNodeList" );
assert( post.length != pre.length, type + ": StaticNodeList" );
} catch(e) {
assert( false, type + ": StaticNodeList" );
assert( false, type + ": StaticNodeList" );
}
if ( div )
(root.body || root).removeChild( div );
}
function runTest( css, type, root, expect ) {
var pass = false;
try {
root.querySelectorAll("");
} catch(e){ pass = e.code == DOMException.SYNTAX_ERR; }
assert( pass, type + ".querySelectorAll Empty String" );
pass = false;
try {
root.querySelectorAll(null);
} catch(e){ pass = e.code == DOMException.SYNTAX_ERR; }
assert( pass, type + ".querySelectorAll null" );
pass = false;
try {
root.querySelectorAll(undefined);
} catch(e){ pass = e.code == DOMException.SYNTAX_ERR; }
assert_todo( pass, type + ".querySelectorAll undefined" );
pass = false;
try {
if ( root.querySelectorAll )
root.querySelectorAll();
} catch(e){ pass = true; }
assert( pass, type + ".querySelectorAll no value" );
var pass = false;
try {
root.querySelector("");
} catch(e){ pass = e.code == DOMException.SYNTAX_ERR; }
assert( pass, type + ".querySelector Empty String" );
pass = false;
try {
root.querySelector(null);
} catch(e){ pass = e.code == DOMException.SYNTAX_ERR; }
assert( pass, type + ".querySelector null" );
pass = false;
try {
root.querySelector(undefined);
} catch(e){ pass = e.code == DOMException.SYNTAX_ERR; }
assert_todo( pass, type + ".querySelector undefined" );
pass = false;
try {
if ( root.querySelector )
root.querySelector();
} catch(e){ pass = true; }
assert( pass, type + ".querySelector no value" );
for ( var i = 0; i < css.length ; i + + ) {
var test = css[i];
if ( test.length == 2 ) {
var query = test[0], color = test[1].match(/: ([^\s;]+)/)[1];
try {
var found = root.querySelectorAll(query);
for ( var f = 0; f < found.length ; f + + ) {
found[f].style.backgroundColor = color;
}
var pass = color != "red" || found.length === 0;
assert(expect & & pass, type + ".querySelectorAll: " + query);
} catch(e){
var pass = !expect & & e.code == DOMException.SYNTAX_ERR || false;
assert(pass, type + ".querySelectorAll: " + query);
}
if ( expect ) {
var pass = false;
try {
var found2 = root.querySelectorAll( " \t\r\n " + query + " \t\r\n " );
pass = found2.length == found.length;
} catch(e) {}
assert(pass, type + ".querySelectorAll Whitespace Trim: " + query);
}
try {
var single = root.querySelector(query);
var pass = found.length == 0 & & single === null ||
found.length & & found[0] == single;
assert(expect, type + ".querySelector: " + query);
} catch(e){
var pass = !expect & & e.code == DOMException.SYNTAX_ERR || false;
assert(pass, type + ".querySelector: " + query);
}
}
}
}
function check( type, root, expect, fragment ){
var walker = document.createTreeWalker( root, NodeFilter.SHOW_ELEMENT, { acceptNode: function(){ return 1; } }, false );
while ( walker.nextNode() ) {
var div = walker.currentNode;
if ( (div.getAttribute("class") || "").toString().indexOf("unitTest") > -1 & &
(!fragment || div.getAttribute("id") !== "nofragment") ) {
// If we're display:none, we need to toggle that when doing computed
// style.
var needToggle =
(window.frameElement & &
window.frameElement.style.display == "none");
if (needToggle) {
if ((div.getAttribute("class") || "").toString().indexOf("skipWhenToggling") > -1) {
continue;
}
window.frameElement.style.display = "";
// make sure it kicks in immediately
document.body.offsetWidth;
}
var view = document.defaultView.getComputedStyle(div, null);
var bg = view.getPropertyValue("background-color") || div.style.backgroundColor;
if (needToggle) {
window.frameElement.style.display = "none";
// make sure it kicks in immediately
document.body.offsetWidth;
}
var pass = bg & & bg.indexOf("(255, 0, 0") == -1 & & bg.indexOf("#ff0000") == -1 & & bg.indexOf("red") == -1;
//var pass = bg & & bg.indexOf("(255, 0, 0") == -1 & & bg.indexOf("#ff0000") == -1;
assert(pass === expect, type + ": " + (div.title || div.parentNode.title));
}
}
}
function assert(pass, title) {
// Update |passed| no matter what: some tests depend on this
passed += (pass ? 1 : 0);
if (window.parent & & window.parent.SimpleTest) {
window.parent.SimpleTest.ok(pass, title);
} else {
results.push([ (!pass ? "FAIL" : "PASS"), title ]);
tests++;
}
}
function assert_todo(pass, title) {
if (window.parent & & window.parent.SimpleTest) {
window.parent.SimpleTest.todo(pass, title);
} else {
assert(pass, title);
}
}
function jqTests(type, root, select) {
function query(q, resolver){
try {
return root[select](q, resolver);
} catch(e){
if ( e.message.indexOf("ERR") > -1 || e.code == DOMException.NAMESPACE_ERR ||
e.code == DOMException.SYNTAX_ERR)
throw e;
}
}
function t( name, q, ids, restrict, ids2 ) {
var pass = true;
if ( restrict === false & & root != document )
return;
var namespaced = /\|[^=]/.test( q );
var prepend = namespaced ? "xHTML|*#root3 " : "#root3 ";
q = (restrict === false || restrict === ":root" ? "" : prepend) + q.replace(/,/g, ", " + prepend);
var nq = q.replace(/>/g, "> ").replace(/< /g, "< ");
if ( namespaced ) {
for ( var i = 0; i < badNamespace.length ; i + + ) {
var resolver = badNamespace[i], pass = false, results = null;
try {
results = query(q, resolver);
} catch(e) {
pass = (e.message === "bad ERROR" || e.code == DOMException.NAMESPACE_ERR);
}
assert( pass, type + ": " + name + " Bad Resolver #" + (i+1) + " (" + nq + ")" +
(pass ? "" : " Expected: " + extra(ids) + " Received: " + extra(results)) );
}
} else {
var pass = false;
try {
var results = query(q);
pass = hasPassed( results, ids );
} catch(e) {
pass = e.code == DOMException.SYNTAX_ERR;
}
assert( pass, type + ": " + name + " (" + nq + ")" +
(pass ? "" : " Expected: " + extra(ids) + " Received: " + extra(results)) );
}
function hasPassed(results, ids){
var pass = (results & & results.length == ids.length) || (!results & & !ids);
if ( ids & & results ) {
for ( var i = 0; ids & & i < ids.length ; i + + ) {
if ( ids[i] !== results[i].getAttribute("id") ) {
pass = false;
}
}
} else {
pass = false;
}
return pass;
}
function extra(results){
var extra = " [";
if ( results ) {
for ( var i = 0; i < results.length ; i + + ) {
extra += (extra.length > 2 ? "," : "") + "'" + (results[i].id || results[i]) + "'";
}
}
extra += "]";
return extra;
}
}
t( "SVG", "*|svg", ["svg1","svg2","svg3"] );
t( "SVG", "svg|svg", ["svg2","svg3"] );
t( "SVG", "svg|svg *|circle", ["circle2","circle3"] );
t( "SVG", "svg|svg svg|circle", ["circle2","circle3"] );
t( "SVG", "xHTML|div *|svg", ["svg1","svg2","svg3"] );
t( "SVG", "div svg|svg", ["svg2","svg3"] );
t( "SVG", "xHTML|div svg|svg", ["svg2","svg3"] );
t( "SVG", "xHTML|div svg|svg *|circle", ["circle2","circle3"] );
t( "SVG", "xHTML|div svg *|circle", ["circle1","circle2","circle3"], true, ["circle1"] );
t( "SVG", "xHTML|div svg|svg svg|circle", ["circle2","circle3"] );
t( "Element Selector", "xHTML|p", ["firstp","ap","sndp","en","sap","first"] );
t( "Parent Element", "xHTML|div p", ["firstp","ap","sndp","en","sap","first"] );
t( "Parent Element", "xHTML|div xHTML|p", ["firstp","ap","sndp","en","sap","first"] );
t( "Parent Element", "*|div xHTML|p", ["firstp","ap","sndp","en","sap","first"] );
t( "Parent Element", "*|div *|p", ["firstp","ap","sndp","en","sap","first"] );
t( "Child", "xHTML|p > xHTML|a", ["simon1","google","groups","mark","yahoo","simon"] );
t( "Adjacent", "xHTML|a + xHTML|a", ["groups"] );
t( "Adjacent", "xHTML|a + a", ["groups"] );
t( "Nth-child", "xHTML|*#form xHTML|*#select1 xHTML|option:nth-child(3)", ["option1c"] );
var all = query("*");
assert( all & & all.length > 30, type + ": Select all" );
var good = all & & all.length;
for ( var i = 0; all & & i < all.length ; i + + )
if ( all[i].nodeType != 1 )
good = false;
assert( good, type + ": Select all elements, no comment nodes" );
if ( root == document ) {
t( ":root Selector", ":root", ["html"], false );
} else {
t( ":root Selector", ":root", [], ":root" );
if ( !root.parentNode ) {
t( ":root All Selector", ":root *", [], ":root" );
}
}
if ( root.parentNode || root == document ) {
assert( query(":root *").length == query("*").length - (root == document ? 1 : 0), type + ": :root All Selector" );
}
t( "Element Selector", "p", ["firstp","ap","sndp","en","sap","first"] );
t( "Element Selector", "body", ["body"], false );
t( "Element Selector", "html", ["html"], false );
t( "Parent Element", "div p", ["firstp","ap","sndp","en","sap","first"] );
var param = query("#object1 param");
assert( param & & param.length == 2, type + ": Object/param as context" );
var l = query("#length");
assert( l & & l.length, type + ': < input name="length"> cannot be found under IE' );
var lin = query("#lengthtest input");
assert( lin & & lin.length, type + ': < input name="length"> cannot be found under IE' );
t( "Broken Selector", "[" );
t( "Broken Selector", "(" );
t( "Broken Selector", "{" );
t( "Broken Selector", "< " );
t( "Broken Selector", "()" );
t( "Broken Selector", "< >" );
t( "Broken Selector", "{}" );
t( "ID Selector", "#body", ["body"], false );
t( "ID Selector w/ Element", "body#body", ["body"], false );
t( "ID Selector w/ Element", "ul#first", [] );
t( "ID selector with existing ID descendant", "#firstp #simon1", ["simon1"] );
t( "ID selector with non-existant descendant", "#firstp #foobar", [] );
t( "ID selector using UTF8", "#台北Táiběi", ["台北Táiběi"] );
t( "Multiple ID selectors using UTF8", "#台北Táiběi, #台北", ["台北Táiběi","台北"] );
t( "Descendant ID selector using UTF8", "div #台北", ["台北"] );
t( "Child ID selector using UTF8", "form > #台北", ["台北"] );
t( "Escaped ID", "#foo\\:bar", ["foo:bar"] );
t( "Escaped ID", "#test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
t( "Descendant escaped ID", "div #foo\\:bar", ["foo:bar"] );
t( "Descendant escaped ID", "div #test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
t( "Child escaped ID", "form > #foo\\:bar", ["foo:bar"] );
t( "Child escaped ID", "form > #test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
t( "ID Selector, child ID present", "#form > #radio1", ["radio1"] ); // bug #267
t( "ID Selector, not an ancestor ID", "#form #first", [] );
t( "ID Selector, not a child ID", "#form > #option1a", [] );
t( "All Children of ID", "#foo > *", ["sndp", "en", "sap"] );
t( "All Children of ID with no children", "#firstUL > *", [] );
t( "ID selector with non-existant ancestor", "#asdfasdf #foobar", [] ); // bug #986
//t( "body div#form", [], "ID selector within the context of another element" );
t( "Class Selector", ".blog", ["mark","simon"] );
t( "Class Selector", ".blog.link", ["simon"] );
t( "Class Selector w/ Element", "a.blog", ["mark","simon"] );
t( "Parent Class Selector", "p .blog", ["mark","simon"] );
t( "Class selector using UTF8", ".台北Táiběi", ["utf8class1"] );
t( "Class selector using UTF8", ".台北", ["utf8class1","utf8class2"] );
t( "Class selector using UTF8", ".台北Táiběi.台北", ["utf8class1"] );
t( "Class selector using UTF8", ".台北Táiběi, .台北", ["utf8class1","utf8class2"] );
t( "Descendant class selector using UTF8", "div .台北Táiběi", ["utf8class1"] );
t( "Child class selector using UTF8", "form > .台北Táiběi", ["utf8class1"] );
t( "Escaped Class", ".foo\\:bar", ["foo:bar"] );
t( "Escaped Class", ".test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
t( "Descendant scaped Class", "div .foo\\:bar", ["foo:bar"] );
t( "Descendant scaped Class", "div .test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
t( "Child escaped Class", "form > .foo\\:bar", ["foo:bar"] );
t( "Child escaped Class", "form > .test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
t( "Comma Support", "a.blog, p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
t( "Comma Support", "a.blog , p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
t( "Comma Support", "a.blog ,p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
t( "Comma Support", "a.blog,p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
t( "Child", "p > a", ["simon1","google","groups","mark","yahoo","simon"] );
t( "Child", "p> a", ["simon1","google","groups","mark","yahoo","simon"] );
t( "Child", "p >a", ["simon1","google","groups","mark","yahoo","simon"] );
t( "Child", "p>a", ["simon1","google","groups","mark","yahoo","simon"] );
t( "Child w/ Class", "p > a.blog", ["mark","simon"] );
t( "All Children", "code > *", ["anchor1","anchor2"] );
t( "All Grandchildren", "p > * > *", ["anchor1","anchor2"] );
t( "Adjacent", "a + a", ["groups"] );
t( "Adjacent", "a +a", ["groups"] );
t( "Adjacent", "a+ a", ["groups"] );
t( "Adjacent", "a+a", ["groups"] );
t( "Adjacent", "p + p", ["ap","en","sap"] );
t( "Comma, Child, and Adjacent", "a + a, code > a", ["groups","anchor1","anchor2"] );
t( "First Child", "p:first-child", ["firstp","sndp"] );
t( "Nth Child", "p:nth-child(1)", ["firstp","sndp"] );
t( "Last Child", "p:last-child", ["sap"] );
t( "Last Child", "a:last-child", ["simon1","anchor1","mark","yahoo","anchor2","simon"] );
t( "Nth-child", "#main form#form > *:nth-child(2)", ["text2"] );
t( "Nth-child", "#main form#form > :nth-child(2)", ["text2"] );
t( "Nth-child", "#form #select1 option:nth-child(3)", ["option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(0n+3)", ["option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(1n+0)", ["option1a", "option1b", "option1c", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(1n)", ["option1a", "option1b", "option1c", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(n)", ["option1a", "option1b", "option1c", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(even)", ["option1b", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(odd)", ["option1a", "option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(2n)", ["option1b", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(2n+1)", ["option1a", "option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(3n)", ["option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(3n+1)", ["option1a", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(3n+2)", ["option1b"] );
t( "Nth-child", "#form #select1 option:nth-child(3n+3)", ["option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(3n-1)", ["option1b"] );
t( "Nth-child", "#form #select1 option:nth-child(3n-2)", ["option1a", "option1d"] );
t( "Nth-child", "#form #select1 option:nth-child(3n-3)", ["option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(3n+0)", ["option1c"] );
t( "Nth-child", "#form #select1 option:nth-child(-n+3)", ["option1a", "option1b", "option1c"] );
t( "Attribute Exists", "a[title]", ["google"] );
t( "Attribute Exists", "*[title]", ["google"] );
t( "Attribute Exists", "[title]", ["google"] );
t( "Attribute Equals", "a[rel='bookmark']", ["simon1"] );
t( "Attribute Equals", 'a[rel="bookmark"]', ["simon1"] );
t( "Attribute Equals", "a[rel=bookmark]", ["simon1"] );
t( "Multiple Attribute Equals", "#form input[type='hidden'],#form input[type='radio']", ['radio1','radio2','hidden1'] );
t( "Multiple Attribute Equals", "#form input[type=\"hidden\"],#form input[type='radio']", ['radio1','radio2','hidden1'] );
t( "Multiple Attribute Equals", "#form input[type=hidden],#form input[type=radio]", ['radio1','radio2','hidden1'] );
t( "Attribute selector using UTF8", "span[lang=中文]", ["台北"] );
t( "Attribute Begins With", "a[href ^= 'http://www']", ["google","yahoo"] );
t( "Attribute Ends With", "a[href $= 'org/']", ["mark"] );
t( "Attribute Contains", "a[href *= 'google']", ["google","groups"] );
// t("Select options via [selected]", "#select1 option[selected]", ["option1a"] );
t("Select options via [selected]", "#select1 option[selected]", [] );
t("Select options via [selected]", "#select2 option[selected]", ["option2d"] );
t("Select options via [selected]", "#select3 option[selected]", ["option3b", "option3c"] );
t( "Grouped Form Elements", "input[name='foo[bar]']", ["hidden2"] );
t( ":not() Existing attribute", "#form select:not([multiple])", ["select1", "select2"]);
t( ":not() Equals attribute", "#form select:not([name=select1])", ["select2", "select3"]);
t( ":not() Equals quoted attribute", "#form select:not([name='select1'])", ["select2", "select3"]);
t( "First Child", "p:first-child", ["firstp","sndp"] );
t( "Last Child", "p:last-child", ["sap"] );
t( "Only Child", "a:only-child", ["simon1","anchor1","yahoo","anchor2"] );
t( "Empty", "ul:empty", ["firstUL"] );
//t( "Enabled UI Element", "#form input:enabled", ["text1","radio1","radio2","check1","check2","hidden2","name"] );
t( "Disabled UI Element", "#form input:disabled", ["text2"] );
t( "Checked UI Element", "#form input:checked", ["radio2","check1"] );
t( "Element Preceded By", "p ~ div", ["foo","fx-queue","fx-tests", "moretests"] );
t( "Not", "a.blog:not(.link)", ["mark"] );
}
};
]]>< / script >
< / head >
< body id = "body" class = "unitTest" title = "childhood and element type selectors" >
< h1 > < a href = "http://www.w3.org/TR/selectors-api/" > Selectors API< / a > Test Suite< / h1 >
< 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 >
< div id = "root" >
< div class = "header" >
< h3 > CSS 3 Selectors tests< / h3 >
< p > (c) < a href = "http://www.disruptive-innovations.com" > Disruptive Innovations< / a > 2008< br / >
Last update: 2008-06-06< / p >
< / div >
< div class = "test target" >
< div class = "unitTest skipWhenToggling" id = "target" title = ":target selector" > < / div >
< / div >
< div class = "test" >
< div class = "blox1 unitTest" title = "childhood selector" > < / div >
< / div >
< div class = "test attributeExistence" >
< div class = "blox2 unitTest" align = "center" title = "attribute existence selector" > < / div >
< div class = "blox3 unitTest" align = "" title = "attribute existence selector with empty string value" > < / div >
< div class = "blox4 unitTest" valign = "center" title = "attribute existence selector with almost identical attribute" > < / div >
< div class = "blox5 unitTest" alignv = "center" title = "attribute existence selector with almost identical attribute" > < / div >
< / div >
< div class = "test attributeValue" >
< div class = "blox6 unitTest" align = "center" title = "attribute value selector" > < / div >
< div class = "blox6 unitTest" foo = "é" title = "attribute value selector with an entity in the attribute and an escaped value in the selector" > < / div >
< div class = "blox6 unitTest" _foo = "é" title = "attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name" > < / div >
< / div >
< div class = "test attributeSpaceSeparatedValues" >
< div class = "blox7 foo unitTest" title = "[~=] attribute selector" > < / div >
< div class = "blox8 unitTest" title = "[~=] attribute selector looking for empty string" > < / div >
< div class = "blox9 unitTest" foo = "" title = "[~=] attribute selector looking for empty string in empty attribute" > < / div >
< div class = "blox10 unitTest" foo = "foobar" title = "[~=] attribute selector looking for 'foo' in 'foobar'" > < / div >
< / div >
< div class = "test attrStart" >
< div class = "unitTest t1" title = "[^=] attribute selector" > < / div >
< div class = "unitTest t2" title = "[^=] attribute selector" > < / div >
< div class = "unitTest t3" align = "center" title = "[^=] attribute selector looking for empty string" > < / div >
< div class = "unitTest t4" foo = "étagada" title = "[^=] attribute selector looking for é" > < / div >
< / div >
< div class = "test attrEnd" >
< div class = "unitTest t1" title = "[$=] attribute selector" > < / div >
< div class = "unitTest t2" title = "[$=] attribute selector" > < / div >
< div class = "unitTest t3" align = "center" title = "[$=] attribute selector looking for empty string" > < / div >
< div class = "unitTest t4" foo = "tagadaé" title = "[$=] attribute selector looking for é" > < / div >
< / div >
< div class = "test attrMiddle" >
< div class = "unitTest t1" title = "[*=] attribute selector" > < / div >
< div class = "unitTest t2" title = "[*=] attribute selector" > < / div >
< div class = "unitTest t3" align = "center" title = "[*=] attribute selector looking for empty string" > < / div >
< div class = "unitTest t4" foo = "tagadaéfoo" title = "[*=] attribute selector looking for é" > < / div >
< / div >
< div class = "test firstChild" >
< div class = "unitTest" title = ":first-child selector" > < / div >
< div class = "blox12 unitTest" title = ":first-child selector should not match non first child" > < / div >
< div class = "blox13 unitTest" title = ":first-child selector should not match non first child" > < / div >
< / div >
< div class = "test not" >
< div class = "blox14 unitTest" title = "negation pseudo-class with argument being an element type selector" > < / div >
< div class = "blox15 unitTest" foo = "blox15" title = "negation pseudo-class with argument being an attribute selector" > < / div >
< div class = "blox16 unitTest" foo = "blox15" title = "negation pseudo-class accepts only simple selectors for argument" > < / div >
< / div >
< div class = "test onlyOfType" >
< div class = "blox17 unitTest" title = ":only-of-type selector" > < / div >
< p class = "blox18 unitTest" title = "negated :only-of-type selector" > < / p >
< p class = "blox18 unitTest" title = "negated :only-of-type selector" > < / p >
< / div >
< div class = "test nthchild1" >
< div class = "unitTest" title = ":nth-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(odd) selector" > < / div >
< / div >
< div class = "test nthchild2" >
< div class = "unitTest" title = ":nth-last-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-child(even) selector" > < / div >
< / div >
< div class = "test nthchild3" >
< div class = "unitTest no" title = ":nth-last-child(3n+3) selector" > < / div >
< div class = "unitTest" title = ":nth-child(3n+2) selector" > < / div >
< div class = "unitTest no" title = ":nth-last-child(3n+1) selector" > < / div >
< div class = "unitTest no" title = ":nth-last-child(3n+3) selector" > < / div >
< div class = "unitTest" title = ":nth-child(3n+2) selector" > < / div >
< div class = "unitTest no" title = ":nth-last-child(3n+1) selector" > < / div >
< / div >
< div class = "test nthoftype1" >
< div class = "unitTest" title = ":nth-of-type(odd) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(odd) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-of-type(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-of-type(odd) selector" > < / div >
< / div >
< div class = "test nthoftype2" >
< div class = "unitTest" title = ":nth-last-of-type(even) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-of-type(even) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(even) selector" > < / div >
< div class = "unitTest" title = ":nth-of-type(even) selector" > < / div >
< / div >
< div class = "test nthoftype3" >
< div class = "unitTest" title = ":nth-of-type(3n+1) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(3n+2) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(3n+1) selector" > < / div >
< div class = "unitTest" title = ":nth-of-type(3n+1) selector" > < / div >
< p class = "unitTest" title = ":nth-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(3n+2) selector" > < / div >
< div class = "unitTest" title = ":nth-last-of-type(3n+1) selector" > < / div >
< / div >
< div class = "test lastChild" >
< p class = "unitTest" title = ":not(:last-child) selector" > < / p >
< div class = "unitTest" title = ":last-child selector" > < / div >
< / div >
< div class = "test firstOfType" >
< p class = "unitTest" title = ":first-of-type selector" > < / p >
< div class = "unitTest" title = ":first-of-type selector" > < / div >
< p class = "unitTest" title = ":not(:first-of-type)" > < / p >
< div class = "unitTest" title = ":not(:first-of-type)" > < / div >
< / div >
< div class = "test lastOfType" >
< p class = "unitTest" title = ":not(:last-of-type)" > < / p >
< div class = "unitTest" title = ":not(:last-of-type)" > < / div >
< p class = "unitTest" title = ":last-of-type selector" > < / p >
< div class = "unitTest" title = ":last-of-type selector" > < / div >
< / div >
< div class = "test onlyChild" >
< div class = "unitTest" title = ":only-child where the element is NOT the only child" > < / div >
< div class = "unitTest" title = ":only-child where the element is the only child" >
< div class = "unitTest" title = ":only-child where the element is the only child" > < / div >
< / div >
< / div >
< div class = "test onlyOfType" >
< p class = "unitTest" title = ":only-of-type" > < / p >
< div class = "unitTest" title = ":only-of-type" >
< div class = "unitTest" title = ":only-of-type" > < / div >
< / div >
< div class = "unitTest" title = ":not(only-of-type)" > < / div >
< / div >
< div class = "test empty" >
< div class = "unitTest isEmpty" title = ":empty with empty element" > < / div >
< div class = "unitTest isNotEmpty" title = ":empty but element contains a whitespace" > < / div >
< div class = "unitTest isEmpty" title = ":empty and element contains an SGML comment" > <!-- foo --> < / div >
< div class = "unitTest isNotEmpty" title = ":empty but element contains a SPAN element" > < span > < / span > < / div >
< div class = "unitTest isNotEmpty" title = ":empty but element contains an entity reference" > < / div >
< / div >
< div class = "test lang" >
< div id = "nofragment" class = "unitTest" title = ":lang() where language comes from the document" > < / div >
< div class = "unitTest" lang = "fr" title = ":lang() where language comes from the element" > < / div >
< div class = "unitTest" lang = "en-US" title = ":lang() where language comes from the element but is a dialect of the language queried" > < / div >
< 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 >
< / div >
< div class = "test attrLang" >
< div class = "unitTest t1" title = "[|=] where language comes from the document" > < / div >
< div class = "unitTest" lang = "fr" title = "[|=] where language comes from the element" > < / div >
< div class = "unitTest t2" lang = "en-US" title = "[|=] where language comes from the element but is a dialect of the language queried" > < / div >
< 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 >
< / div >
< div class = "test UI" >
< button name = "submit" type = "submit" value = "submit" class = "t1" title = ":enabled pseudo-class" > < div class = "unitTest" > < / div > < / button >
< button name = "submit" type = "submit" value = "submit" class = "t2" disabled = "true" title = ":enabled pseudo-class" > < div class = "unitTest" > < / div > < / button >
< / div >
< div class = "test UI" >
< input class = "t3" type = "checkbox" checked = "true" / > < div class = "unitTest" title = ":checked" > < / div >
the previous square should be green when the checkbox is checked and become red when you uncheck it
< / div >
< div class = "test UI" >
< input class = "t4" type = "checkbox" / > < div class = "unitTest" title = ":not(:checked)" > < / div >
the previous square should be green when the checkbox is NOT checked and become red when you check it
< / div >
< div class = "test tilda" >
< div class = "unitTest t1" title = "~ combinator" > < / div >
< div class = "unitTest" title = "~ combinator" > < / div >
< div class = "unitTest" title = "~ combinator" > < / div >
< div class = "unitTest" title = "~ combinator" > < / div >
< span style = "float:left" > the three last squares should be green and become red when the pointer hovers over the white square< / span >
< / div >
< div class = "test plus" >
< div class = "unitTest t1" title = "+ combinator" > < / div >
< div class = "unitTest t2" title = "+ combinator" > < / div >
< div class = "unitTest" title = "+ combinator" > < / div >
< span style = "float:left" > the last square should be green and become red when the pointer hovers over the FIRST white square< / span >
< / div >
< / div >
< div id = "root2" >
< div class = "header" >
< h3 > CSS 3 Selectors tests< / h3 >
< p > (c) < a href = "http://www.disruptive-innovations.com" > Disruptive Innovations< / a > 2008< br / >
Last update: 2008-06-06< / p >
< / div >
< div class = "test" >
< div class = "blox1 unitTest" title = "childhood selector" > < / div >
< / div >
< div class = "test attributeExistence" >
< div class = "blox2 unitTest" align = "center" title = "attribute existence selector" > < / div >
< div class = "blox3 unitTest" align = "" title = "attribute existence selector with empty string value" > < / div >
< div class = "blox4 unitTest" valign = "center" title = "attribute existence selector with almost identical attribute" > < / div >
< div class = "blox5 unitTest" alignv = "center" title = "attribute existence selector with almost identical attribute" > < / div >
< / div >
< div class = "test attributeValue" >
< div class = "blox6 unitTest" align = "center" title = "attribute value selector" > < / div >
< div class = "blox6 unitTest" foo = "é" title = "attribute value selector with an entity in the attribute and an escaped value in the selector" > < / div >
< div class = "blox6 unitTest" _foo = "é" title = "attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name" > < / div >
< / div >
< div class = "test attributeSpaceSeparatedValues" >
< div class = "blox7 foo unitTest" title = "[~=] attribute selector" > < / div >
< div class = "blox8 unitTest" title = "[~=] attribute selector looking for empty string" > < / div >
< div class = "blox9 unitTest" foo = "" title = "[~=] attribute selector looking for empty string in empty attribute" > < / div >
< div class = "blox10 unitTest" foo = "foobar" title = "[~=] attribute selector looking for 'foo' in 'foobar'" > < / div >
< / div >
< div class = "test attrStart" >
< div class = "unitTest t1" title = "[^=] attribute selector" > < / div >
< div class = "unitTest t2" title = "[^=] attribute selector" > < / div >
< div class = "unitTest t3" align = "center" title = "[^=] attribute selector looking for empty string" > < / div >
< div class = "unitTest t4" foo = "étagada" title = "[^=] attribute selector looking for é" > < / div >
< / div >
< div class = "test attrEnd" >
< div class = "unitTest t1" title = "[$=] attribute selector" > < / div >
< div class = "unitTest t2" title = "[$=] attribute selector" > < / div >
< div class = "unitTest t3" align = "center" title = "[$=] attribute selector looking for empty string" > < / div >
< div class = "unitTest t4" foo = "tagadaé" title = "[$=] attribute selector looking for é" > < / div >
< / div >
< div class = "test attrMiddle" >
< div class = "unitTest t1" title = "[*=] attribute selector" > < / div >
< div class = "unitTest t2" title = "[*=] attribute selector" > < / div >
< div class = "unitTest t3" align = "center" title = "[*=] attribute selector looking for empty string" > < / div >
< div class = "unitTest t4" foo = "tagadaéfoo" title = "[*=] attribute selector looking for é" > < / div >
< / div >
< div class = "test firstChild" >
< div class = "unitTest" title = ":first-child selector" > < / div >
< div class = "blox12 unitTest" title = ":first-child selector should not match non first child" > < / div >
< div class = "blox13 unitTest" title = ":first-child selector should not match non first child" > < / div >
< / div >
< div class = "test not" >
< div class = "blox14 unitTest" title = "negation pseudo-class with argument being an element type selector" > < / div >
< div class = "blox15 unitTest" foo = "blox15" title = "negation pseudo-class with argument being an attribute selector" > < / div >
< div class = "blox16 unitTest" foo = "blox15" title = "negation pseudo-class accepts only simple selectors for argument" > < / div >
< / div >
< div class = "test onlyOfType" >
< div class = "blox17 unitTest" title = ":only-of-type selector" > < / div >
< p class = "blox18 unitTest" title = "negated :only-of-type selector" > < / p >
< p class = "blox18 unitTest" title = "negated :only-of-type selector" > < / p >
< / div >
< div class = "test nthchild1" >
< div class = "unitTest" title = ":nth-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-child(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(odd) selector" > < / div >
< / div >
< div class = "test nthchild2" >
< div class = "unitTest" title = ":nth-last-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-last-child(even) selector" > < / div >
< div class = "unitTest" title = ":nth-child(even) selector" > < / div >
< / div >
< div class = "test nthchild3" >
< div class = "unitTest no" title = ":nth-last-child(3n+3) selector" > < / div >
< div class = "unitTest" title = ":nth-child(3n+2) selector" > < / div >
< div class = "unitTest no" title = ":nth-last-child(3n+1) selector" > < / div >
< div class = "unitTest no" title = ":nth-last-child(3n+3) selector" > < / div >
< div class = "unitTest" title = ":nth-child(3n+2) selector" > < / div >
< div class = "unitTest no" title = ":nth-last-child(3n+1) selector" > < / div >
< / div >
< div class = "test nthoftype1" >
< div class = "unitTest" title = ":nth-of-type(odd) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(odd) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-of-type(odd) selector" > < / div >
< div class = "unitTest" title = ":nth-last-of-type(odd) selector" > < / div >
< / div >
< div class = "test nthoftype2" >
< div class = "unitTest" title = ":nth-last-of-type(even) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-of-type(even) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(even) selector" > < / div >
< div class = "unitTest" title = ":nth-of-type(even) selector" > < / div >
< / div >
< div class = "test nthoftype3" >
< div class = "unitTest" title = ":nth-of-type(3n+1) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(3n+2) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(3n+1) selector" > < / div >
< div class = "unitTest" title = ":nth-of-type(3n+1) selector" > < / div >
< p class = "unitTest" title = ":nth-of-* selector" > < / p >
< div class = "unitTest" title = ":nth-last-of-type(3n+2) selector" > < / div >
< div class = "unitTest" title = ":nth-last-of-type(3n+1) selector" > < / div >
< / div >
< div class = "test lastChild" >
< p class = "unitTest" title = ":not(:last-child) selector" > < / p >
< div class = "unitTest" title = ":last-child selector" > < / div >
< / div >
< div class = "test firstOfType" >
< p class = "unitTest" title = ":first-of-type selector" > < / p >
< div class = "unitTest" title = ":first-of-type selector" > < / div >
< p class = "unitTest" title = ":not(:first-of-type)" > < / p >
< div class = "unitTest" title = ":not(:first-of-type)" > < / div >
< / div >
< div class = "test lastOfType" >
< p class = "unitTest" title = ":not(:last-of-type)" > < / p >
< div class = "unitTest" title = ":not(:last-of-type)" > < / div >
< p class = "unitTest" title = ":last-of-type selector" > < / p >
< div class = "unitTest" title = ":last-of-type selector" > < / div >
< / div >
< div class = "test onlyChild" >
< div class = "unitTest" title = ":only-child where the element is NOT the only child" > < / div >
< div class = "unitTest" title = ":only-child where the element is the only child" >
< div class = "unitTest" title = ":only-child where the element is the only child" > < / div >
< / div >
< / div >
< div class = "test onlyOfType" >
< p class = "unitTest" title = ":only-of-type" > < / p >
< div class = "unitTest" title = ":only-of-type" >
< div class = "unitTest" title = ":only-of-type" > < / div >
< / div >
< div class = "unitTest" title = ":not(only-of-type)" > < / div >
< / div >
< div class = "test empty" >
< div class = "unitTest isEmpty" title = ":empty with empty element" > < / div >
< div class = "unitTest isNotEmpty" title = ":empty but element contains a whitespace" > < / div >
< div class = "unitTest isEmpty" title = ":empty and element contains an SGML comment" > <!-- foo --> < / div >
< div class = "unitTest isNotEmpty" title = ":empty but element contains a SPAN element" > < span > < / span > < / div >
< div class = "unitTest isNotEmpty" title = ":empty but element contains an entity reference" > < / div >
< / div >
< div class = "test lang" >
< div id = "nofragment" class = "unitTest" title = ":lang() where language comes from the document" > < / div >
< div class = "unitTest" lang = "fr" title = ":lang() where language comes from the element" > < / div >
< div class = "unitTest" lang = "en-US" title = ":lang() where language comes from the element but is a dialect of the language queried" > < / div >
< 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 >
< / div >
< div class = "test attrLang" >
< div class = "unitTest t1" title = "[|=] where language comes from the document" > < / div >
< div class = "unitTest" lang = "fr" title = "[|=] where language comes from the element" > < / div >
< div class = "unitTest t2" lang = "en-US" title = "[|=] where language comes from the element but is a dialect of the language queried" > < / div >
< 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 >
< / div >
< div class = "test UI" >
< button name = "submit" type = "submit" value = "submit" class = "t1" title = ":enabled pseudo-class" > < div class = "unitTest" > < / div > < / button >
< button name = "submit" type = "submit" value = "submit" class = "t2" disabled = "true" title = ":enabled pseudo-class" > < div class = "unitTest" > < / div > < / button >
< / div >
< div class = "test UI" >
< input class = "t3" type = "checkbox" checked = "true" / > < div class = "unitTest" title = ":checked" > < / div >
the previous square should be green when the checkbox is checked and become red when you uncheck it
< / div >
< div class = "test UI" >
< input class = "t4" type = "checkbox" / > < div class = "unitTest" title = ":not(:checked)" > < / div >
the previous square should be green when the checkbox is NOT checked and become red when you check it
< / div >
< div class = "test tilda" >
< div class = "unitTest t1" title = "~ combinator" > < / div >
< div class = "unitTest" title = "~ combinator" > < / div >
< div class = "unitTest" title = "~ combinator" > < / div >
< div class = "unitTest" title = "~ combinator" > < / div >
< span style = "float:left" > the three last squares should be green and become red when the pointer hovers over the white square< / span >
< / div >
< div class = "test plus" >
< div class = "unitTest t1" title = "+ combinator" > < / div >
< div class = "unitTest t2" title = "+ combinator" > < / div >
< div class = "unitTest" title = "+ combinator" > < / div >
< span style = "float:left" > the last square should be green and become red when the pointer hovers over the FIRST white square< / span >
< / div >
< / div >
< div id = "root3" >
< div id = "svgs" >
<!-- svg elements, but in the xhtml namespace -->
< svg width = "12cm" height = "4cm" viewBox = "0 0 1200 400" version = "1.1" id = "svg1" >
< desc id = "desc1" > Example circle01 - circle filled with red and stroked with blue< / desc >
< rect id = "rect1" x = "1" y = "1" width = "1198" height = "398" fill = "none" stroke = "blue" stroke-width = "2" / >
< circle id = "circle1" cx = "600" cy = "200" r = "100" fill = "red" stroke = "blue" stroke-width = "10" / >
< / svg >
<!-- svg elements using svg: -->
< svg:svg width = "12cm" height = "4cm" viewBox = "0 0 1200 400" version = "1.1" id = "svg2" >
< svg:desc id = "desc2" > Example circle01 - circle filled with red and stroked with blue< / svg:desc >
< svg:rect id = "rect2" x = "1" y = "1" width = "1198" height = "398" fill = "none" stroke = "blue" stroke-width = "2" / >
< svg:circle id = "circle2" cx = "600" cy = "200" r = "100" fill = "red" stroke = "blue" stroke-width = "10" / >
< / svg:svg >
<!-- svg using an inline xmlns -->
< svg width = "12cm" height = "4cm" viewBox = "0 0 1200 400" xmlns = "http://www.w3.org/2000/svg" version = "1.1" id = "svg3" >
< desc id = "desc3" > Example circle01 - circle filled with red and stroked with blue< / desc >
< rect id = "rect3" x = "1" y = "1" width = "1198" height = "398" fill = "none" stroke = "blue" stroke-width = "2" / >
< circle id = "circle3" cx = "600" cy = "200" r = "100" fill = "red" stroke = "blue" stroke-width = "10" / >
< / svg >
< / div >
< h1 id = "header" > jQuery Test Suite< / h1 >
< h2 id = "banner" > < / h2 >
< h2 id = "userAgent" > < / h2 >
<!-- Test HTML -->
< div id = "nothiddendiv" style = "height:1px;background:white;" >
< div id = "nothiddendivchild" > < / div >
< / div >
<!-- 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 -->
< iframe id = "loadediframe" name = "loadediframe" style = "display:none;" src = "data/iframe.html" > < / iframe >
< dl id = "dl" style = "display:none;" >
< div id = "main" style = "display: none;" >
< 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 >
< p id = "ap" >
Here are some links in a normal paragraph: < a id = "google" href = "http://www.google.com/" title = "Google!" > Google< / a > ,
< a id = "groups" href = "http://groups.google.com/" > Google Groups< / a > .
This link has < code > < a href = "http://smin" id = "anchor1" > class="blog"< / a > < / code > :
< a href = "http://diveintomark.org/" class = "blog" hreflang = "en" id = "mark" > diveintomark< / a >
< / p >
< div id = "foo" >
< p id = "sndp" > Everything inside the red border is inside a div with < code > id="foo"< / code > .< / p >
< p lang = "en" id = "en" > This is a normal link: < a id = "yahoo" href = "http://www.yahoo.com/" class = "blogTest" > Yahoo< / a > < / p >
< 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 >
< / div >
< p id = "first" > Try them out:< / p >
< ul id = "firstUL" > < / ul >
< ol id = "empty" > < / ol >
< form id = "form" action = "formaction" >
< input type = "text" name = "action" value = "Test" id = "text1" maxlength = "30" / >
< input type = "text" name = "text2" value = "Test" id = "text2" disabled = "disabled" / >
< input type = "radio" name = "radio1" id = "radio1" value = "on" / >
< input type = "radio" name = "radio2" id = "radio2" checked = "checked" / >
< input type = "checkbox" name = "check" id = "check1" checked = "checked" / >
< input type = "checkbox" id = "check2" value = "on" / >
< input type = "hidden" name = "hidden" id = "hidden1" / >
< input type = "text" style = "display:none;" name = "foo[bar]" id = "hidden2" / >
< input type = "text" id = "name" name = "name" value = "name" / >
< button id = "button" name = "button" > Button< / button >
< textarea id = "area1" maxlength = "30" > foobar< / textarea >
< select name = "select1" id = "select1" >
< option id = "option1a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option1b" value = "1" > 1< / option >
< option id = "option1c" value = "2" > 2< / option >
< option id = "option1d" value = "3" > 3< / option >
< / select >
< select name = "select2" id = "select2" >
< option id = "option2a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option2b" value = "1" > 1< / option >
< option id = "option2c" value = "2" > 2< / option >
< option id = "option2d" selected = "selected" value = "3" > 3< / option >
< / select >
< select name = "select3" id = "select3" multiple = "multiple" >
< option id = "option3a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option3b" selected = "selected" value = "1" > 1< / option >
< option id = "option3c" selected = "selected" value = "2" > 2< / option >
< option id = "option3d" value = "3" > 3< / option >
< / select >
< object id = "object1" codebase = "stupid" >
< param name = "p1" value = "x1" / >
< param name = "p2" value = "x2" / >
< / object >
< span id = "台北Táiběi" > < / span >
< span id = "台北" lang = "中文" > < / span >
< span id = "utf8class1" class = "台北Táiběi 台北" > < / span >
< span id = "utf8class2" class = "台北" > < / span >
< span id = "foo:bar" class = "foo:bar" > < / span >
< span id = "test.foo[5]bar" class = "test.foo[5]bar" > < / span >
< foo_bar id = "foobar" > test element< / foo_bar >
< / form >
< b id = "floatTest" > Float test.< / b >
< iframe id = "iframe" name = "iframe" > < / iframe >
< form id = "lengthtest" >
< input type = "text" id = "length" name = "test" / >
< input type = "text" id = "idTest" name = "id" / >
< / form >
< table id = "table" > < / table >
< div id = "fx-queue" >
< div id = "fadein" class = 'chain test' > fadeIn< div > fadeIn< / div > < / div >
< div id = "fadeout" class = 'chain test out' > fadeOut< div > fadeOut< / div > < / div >
< div id = "show" class = 'chain test' > show< div > show< / div > < / div >
< div id = "hide" class = 'chain test out' > hide< div > hide< / div > < / div >
< div id = "togglein" class = 'chain test' > togglein< div > togglein< / div > < / div >
< div id = "toggleout" class = 'chain test out' > toggleout< div > toggleout< / div > < / div >
< div id = "slideup" class = 'chain test' > slideUp< div > slideUp< / div > < / div >
< div id = "slidedown" class = 'chain test out' > slideDown< div > slideDown< / div > < / div >
< div id = "slidetogglein" class = 'chain test' > slideToggleIn< div > slideToggleIn< / div > < / div >
< div id = "slidetoggleout" class = 'chain test out' > slideToggleOut< div > slideToggleOut< / div > < / div >
< / div >
< div id = "fx-tests" > < / div >
< form id = "testForm" action = "#" method = "get" >
< textarea name = "T3" rows = "2" cols = "15" > ?
Z< / textarea >
< input type = "hidden" name = "H1" value = "x" / >
< input type = "hidden" name = "H2" / >
< input name = "PWD" type = "password" value = "" / >
< input name = "T1" type = "text" / >
< input name = "T2" type = "text" value = "YES" readonly = "readonly" / >
< input type = "checkbox" name = "C1" value = "1" / >
< input type = "checkbox" name = "C2" / >
< input type = "radio" name = "R1" value = "1" / >
< input type = "radio" name = "R1" value = "2" / >
< input type = "text" name = "My Name" value = "me" / >
< input type = "reset" name = "reset" value = "NO" / >
< select name = "S1" >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< / select >
< select name = "S2" multiple = "multiple" size = "3" >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< / select >
< select name = "S3" >
< option selected = "selected" > YES< / option >
< / select >
< select name = "S4" >
< option value = "" selected = "selected" > NO< / option >
< / select >
< input type = "submit" name = "sub1" value = "NO" / >
< input type = "submit" name = "sub2" value = "NO" / >
< input type = "image" name = "sub3" value = "NO" / >
< button name = "sub4" type = "submit" value = "NO" > NO< / button >
< input name = "D1" type = "text" value = "NO" disabled = "disabled" / >
< input type = "checkbox" checked = "checked" disabled = "disabled" name = "D2" value = "NO" / >
< input type = "radio" name = "D3" value = "NO" checked = "checked" disabled = "disabled" / >
< select name = "D4" disabled = "disabled" >
< option selected = "selected" value = "NO" > NO< / option >
< / select >
< / form >
< div id = "moretests" >
< form >
< div id = "checkedtest" style = "display:none;" >
< input type = "radio" name = "checkedtestradios" checked = "checked" / >
< input type = "radio" name = "checkedtestradios" value = "on" / >
< input type = "checkbox" name = "checkedtestcheckboxes" checked = "checked" / >
< input type = "checkbox" name = "checkedtestcheckboxes" / >
< / div >
< / form >
< div id = "nonnodes" > < span > hi< / span > there <!-- mon ami --> < / div >
< div id = "t2037" >
< div > < div class = "hidden" > hidden< / div > < / div >
< / div >
< / div >
< / div >
< / dl >
< ol id = "tests" > < / ol >
< / div >
< ol id = "results" > < / ol >
< / body >
< / html >
