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