forked from mirrors/gecko-dev
82e837eb83
This fixes the failures in bug 1671573 and just works thanks to the
invalidation improvements I did for :is / :where.
Added a couple tests for invalidation which is the tricky bit. 001 is a
very straight-forward test, 002 is the :is test but with :is() replaced
by double-:not().
This also fixes default namespaces inside :is() / :where(), which are
supposed to get ignored, but aren't. Added tests for that and for the
pre-existing :not() behavior which Chrome doesn't quite get right.
Differential Revision: https://phabricator.services.mozilla.com/D94142
1469 lines
66 KiB
HTML
1469 lines
66 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!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>
|
|
<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; }
|
|
|
|
/* :scope tests */
|
|
:scope { 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">
|
|
/* Tests from http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20060307/html/index.html */
|
|
|
|
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><![CDATA[
|
|
/* eslint-disable no-shadow */
|
|
|
|
window.onload = function() {
|
|
doTest();
|
|
}
|
|
|
|
function doTest(){
|
|
if ( !window.location.hash.includes("target") )
|
|
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 ( let 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 ( let 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 );
|
|
runTest( ecss, "SyntaxError: Element", root, false );
|
|
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 );
|
|
runTest( ecss, "SyntaxError: Disconnected Element", root4, false );
|
|
jqTests("Disconnected Element", root3.cloneNode(true), "querySelectorAll");
|
|
var newRoot = document.createElement("nosuchtag");
|
|
newRoot.appendChild(root3.cloneNode(true));
|
|
jqTests("Disconnected Element scoping", newRoot, "querySelectorAll");
|
|
|
|
var fragment = document.createDocumentFragment();
|
|
fragment.appendChild( root2.cloneNode(true) );
|
|
|
|
interfaceCheck(fragment, "Fragment");
|
|
runTest( css, "Fragment", fragment, true );
|
|
check( "Fragment", fragment, true, true );
|
|
runTest( ecss, "SyntaxError: Fragment", fragment, false );
|
|
cacheCheck( "Fragment", fragment );
|
|
|
|
root.remove( );
|
|
|
|
interfaceCheck(document, "Document");
|
|
runTest( css, "Document", document, true );
|
|
check( "Document", document, true, false );
|
|
runTest( ecss, "SyntaxError: Document", document, false );
|
|
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 ( let 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.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR; }
|
|
assert( pass, type + ".querySelectorAll Empty String" );
|
|
|
|
pass = false;
|
|
try {
|
|
pass = root.querySelectorAll(null).length === 0;
|
|
} catch(e){ pass = false; }
|
|
assert( pass, type + ".querySelectorAll null" );
|
|
|
|
pass = false;
|
|
try {
|
|
pass = root.querySelectorAll(undefined).length === 0;
|
|
} catch(e){ pass = false; }
|
|
assert( pass, type + ".querySelectorAll undefined" );
|
|
|
|
pass = false;
|
|
try {
|
|
if ( root.querySelectorAll )
|
|
root.querySelectorAll();
|
|
} catch(e){ pass = true; }
|
|
assert( pass, type + ".querySelectorAll no value" );
|
|
|
|
pass = false;
|
|
try {
|
|
root.querySelector("");
|
|
} catch(e){ pass = e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR; }
|
|
assert( pass, type + ".querySelector Empty String" );
|
|
|
|
pass = false;
|
|
try {
|
|
pass = root.querySelector(null) === null;
|
|
} catch(e){ pass = false; }
|
|
assert( pass, type + ".querySelector null" );
|
|
|
|
pass = false;
|
|
try {
|
|
pass = root.querySelector(undefined) === null;
|
|
} catch(e){ pass = false; }
|
|
assert( pass, type + ".querySelector undefined" );
|
|
|
|
pass = false;
|
|
try {
|
|
if ( root.querySelector )
|
|
root.querySelector();
|
|
} catch(e){ pass = true; }
|
|
assert( pass, type + ".querySelector no value" );
|
|
|
|
for ( let 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.name == "SyntaxError" && 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.name == "SyntaxError" && 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(){ return 1; } } );
|
|
|
|
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);
|
|
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.includes("(255, 0, 0") && !bg.includes("#ff0000") && !bg.includes("red");
|
|
//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 jqTests(type, root, select) {
|
|
|
|
function query(q, resolver){
|
|
try {
|
|
return root[select](q, resolver);
|
|
} catch(e){
|
|
if ( e.message.indexOf("ERR") > -1 ||
|
|
(e.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR) )
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
var all = query("*");
|
|
|
|
function checkMatchesSelector(results, q) {
|
|
var key = +new Date + ":" + Math.random();
|
|
|
|
function report(item, shouldMatch) {
|
|
assert( item.matches(q) === shouldMatch,
|
|
item + (shouldMatch ? "does not match" : "matches")
|
|
+ " selector '" + q + "'" );
|
|
}
|
|
|
|
for (var i = 0; i < results.length; i++) {
|
|
var item = results.item(i);
|
|
item[key] = true;
|
|
report( item, true );
|
|
}
|
|
|
|
for (var stride = 15, // reduce test spam
|
|
i = Math.round(Math.random() * stride);
|
|
i < all.length; i += stride)
|
|
{
|
|
var item = all.item(i),
|
|
shouldMatch = !!item[key];
|
|
report( item, shouldMatch );
|
|
}
|
|
|
|
for (var i = 0; i < results.length; i++)
|
|
delete results.item(i)[key];
|
|
}
|
|
|
|
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" ||
|
|
restrict === ":scope" ? "" : 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.name == "SyntaxError" && e.code == DOMException.SYNTAX_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.name == "SyntaxError" && e.code == DOMException.SYNTAX_ERR;
|
|
}
|
|
|
|
assert( pass, type + ": " + name + " (" + nq + ")" +
|
|
(pass ? "" : " Expected: " + extra(ids) + " Received: " + extra(results)) );
|
|
|
|
// For now, don't use checkMatchesSelector when
|
|
// restrict === ":scope" because we have no way to hand the
|
|
// right scope to it yet.
|
|
if (results && restrict !== ":scope")
|
|
checkMatchesSelector( results, q );
|
|
}
|
|
|
|
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"] );
|
|
|
|
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 );
|
|
t( ":scope Selector", ":scope", ["html"], ":scope" );
|
|
} else {
|
|
t( ":root Selector", ":root", [], ":root" );
|
|
if (root.localName != "nosuchtag") {
|
|
t( ":scope Selector", ":scope > nosuchtag",
|
|
[ "outerbogustag" ], ":scope");
|
|
}
|
|
t( ":scope Selector", ":scope nosuchtag nosuchtag",
|
|
[ "innerbogustag" ], ":scope");
|
|
|
|
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" );
|
|
}
|
|
assert( query(":scope *").length == query("*").length - (root == document ? 1 : 0), type + ": :scope 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 nonexistent 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 nonexistent 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( "Outer Whitespace", " a.blog,p", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
|
|
t( "Outer Whitespace", "a.blog,p ", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
|
|
t( "Outer Whitespace", " p,a.blog", ['firstp','ap','mark','sndp','en','sap','simon','first'] );
|
|
t( "Outer Whitespace", "p,a.blog ", ['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>
|
|
<!-- Test for scoping -->
|
|
<nosuchtag id="outerbogustag">
|
|
<nosuchtag id="innerbogustag"></nosuchtag>
|
|
</nosuchtag>
|
|
<!-- 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>
|