1 module("selector", { teardown: moduleTeardown });
4 * This test page is for selector tests that require jQuery in order to do the selection
7 test("element - jQuery only", function() {
10 var fixture = document.getElementById("qunit-fixture");
12 deepEqual( jQuery("p", fixture).get(), q("firstp","ap","sndp","en","sap","first"), "Finding elements with a Node context." );
13 deepEqual( jQuery("p", "#qunit-fixture").get(), q("firstp","ap","sndp","en","sap","first"), "Finding elements with a selector context." );
14 deepEqual( jQuery("p", jQuery("#qunit-fixture")).get(), q("firstp","ap","sndp","en","sap","first"), "Finding elements with a jQuery object context." );
15 deepEqual( jQuery("#qunit-fixture").find("p").get(), q("firstp","ap","sndp","en","sap","first"), "Finding elements with a context via .find()." );
17 ok( jQuery("#length").length, "<input name=\"length\"> cannot be found under IE, see #945" );
18 ok( jQuery("#lengthtest input").length, "<input name=\"length\"> cannot be found under IE, see #945" );
21 equal( jQuery("<div id=\"A'B~C.D[E]\"><p>foo</p></div>").find("p").length, 1, "Find where context root is a node and has an ID with CSS3 meta characters" );
24 test("id", function() {
29 t( "ID Selector", "#body", ["body"] );
30 t( "ID Selector w/ Element", "body#body", ["body"] );
31 t( "ID Selector w/ Element", "ul#first", [] );
32 t( "ID selector with existing ID descendant", "#firstp #simon1", ["simon1"] );
33 t( "ID selector with non-existent descendant", "#firstp #foobar", [] );
34 t( "ID selector using UTF8", "#台北Táiběi", ["台北Táiběi"] );
35 t( "Multiple ID selectors using UTF8", "#台北Táiběi, #台北", ["台北Táiběi","台北"] );
36 t( "Descendant ID selector using UTF8", "div #台北", ["台北"] );
37 t( "Child ID selector using UTF8", "form > #台北", ["台北"] );
39 t( "Escaped ID", "#foo\\:bar", ["foo:bar"] );
40 t( "Escaped ID", "#test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
41 t( "Descendant escaped ID", "div #foo\\:bar", ["foo:bar"] );
42 t( "Descendant escaped ID", "div #test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
43 t( "Child escaped ID", "form > #foo\\:bar", ["foo:bar"] );
44 t( "Child escaped ID", "form > #test\\.foo\\[5\\]bar", ["test.foo[5]bar"] );
46 t( "ID Selector, child ID present", "#form > #radio1", ["radio1"] ); // bug #267
47 t( "ID Selector, not an ancestor ID", "#form #first", [] );
48 t( "ID Selector, not a child ID", "#form > #option1a", [] );
50 t( "All Children of ID", "#foo > *", ["sndp", "en", "sap"] );
51 t( "All Children of ID with no children", "#firstUL > *", [] );
53 a = jQuery("<a id='backslash\\foo'></a>").appendTo("#qunit-fixture");
54 t( "ID Selector contains backslash", "#backslash\\\\foo", ["backslash\\foo"] );
56 t( "ID Selector on Form with an input that has a name of 'id'", "#lengthtest", ["lengthtest"] );
58 t( "ID selector with non-existent ancestor", "#asdfasdf #foobar", [] ); // bug #986
60 t( "Underscore ID", "#types_all", ["types_all"] );
61 t( "Dash ID", "#qunit-fixture", ["qunit-fixture"] );
63 t( "ID with weird characters in it", "#name\\+value", ["name+value"] );
66 test("class - jQuery only", function() {
69 deepEqual( jQuery(".blog", document.getElementsByTagName("p")).get(), q("mark", "simon"), "Finding elements with a context." );
70 deepEqual( jQuery(".blog", "p").get(), q("mark", "simon"), "Finding elements with a context." );
71 deepEqual( jQuery(".blog", jQuery("p")).get(), q("mark", "simon"), "Finding elements with a context." );
72 deepEqual( jQuery("p").find(".blog").get(), q("mark", "simon"), "Finding elements with a context." );
75 test("name", function() {
80 t( "Name selector", "input[name=action]", ["text1"] );
81 t( "Name selector with single quotes", "input[name='action']", ["text1"] );
82 t( "Name selector with double quotes", "input[name=\"action\"]", ["text1"] );
84 t( "Name selector for grouped input", "input[name='types[]']", ["types_all", "types_anime", "types_movie"] );
86 form = jQuery("<form><input name='id'/></form>").appendTo("body");
87 equal( jQuery("input", form[0]).length, 1, "Make sure that rooted queries on forms (with possible expandos) work." );
92 test( "selectors with comma", function() {
95 var fixture = jQuery( "<div><h2><span/></h2><div><p><span/></p><p/></div></div>" );
97 equal( fixture.find( "h2, div p" ).filter( "p" ).length, 2, "has to find two <p>" );
98 equal( fixture.find( "h2, div p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
99 equal( fixture.find( "h2 , div p" ).filter( "p" ).length, 2, "has to find two <p>" );
100 equal( fixture.find( "h2 , div p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
103 test( "child and adjacent", function() {
108 t( "Child", "p > a", ["simon1","google","groups","mark","yahoo","simon"] );
109 t( "Child", "p> a", ["simon1","google","groups","mark","yahoo","simon"] );
110 t( "Child", "p >a", ["simon1","google","groups","mark","yahoo","simon"] );
111 t( "Child", "p>a", ["simon1","google","groups","mark","yahoo","simon"] );
112 t( "Child w/ Class", "p > a.blog", ["mark","simon"] );
113 t( "All Children", "code > *", ["anchor1","anchor2"] );
114 t( "All Grandchildren", "p > * > *", ["anchor1","anchor2"] );
115 t( "Adjacent", "p + p", ["ap","en","sap"] );
116 t( "Adjacent", "p#firstp + p", ["ap"] );
117 t( "Adjacent", "p[lang=en] + p", ["sap"] );
118 t( "Adjacent", "a.GROUPS + code + a", ["mark"] );
119 t( "Element Preceded By", "#groups ~ a", ["mark"] );
120 t( "Element Preceded By", "#length ~ input", ["idTest"] );
121 t( "Element Preceded By", "#siblingfirst ~ em", ["siblingnext", "siblingthird"] );
122 t( "Element Preceded By (multiple)", "#siblingTest em ~ em ~ em ~ span", ["siblingspan"] );
123 t( "Element Preceded By, Containing", "#liveHandlerOrder ~ div em:contains('1')", ["siblingfirst"] );
125 t( "Multiple combinators selects all levels", "#siblingTest em *", ["siblingchild", "siblinggrandchild", "siblinggreatgrandchild"] );
126 t( "Multiple combinators selects all levels", "#siblingTest > em *", ["siblingchild", "siblinggrandchild", "siblinggreatgrandchild"] );
127 t( "Multiple sibling combinators doesn't miss general siblings", "#siblingTest > em:first-child + em ~ span", ["siblingspan"] );
128 t( "Combinators are not skipped when mixing general and specific", "#siblingTest > em:contains('x') + em ~ span", [] );
130 equal( jQuery("#listWithTabIndex").length, 1, "Parent div for next test is found via ID (#8310)" );
131 equal( jQuery("#listWithTabIndex li:eq(2) ~ li").length, 1, "Find by general sibling combinator (#8310)" );
132 equal( jQuery("#__sizzle__").length, 0, "Make sure the temporary id assigned by sizzle is cleared out (#8310)" );
133 equal( jQuery("#listWithTabIndex").length, 1, "Parent div for previous test is still found via ID (#8310)" );
135 t( "Verify deep class selector", "div.blah > p > a", [] );
137 t( "No element deep selector", "div.foo > span > a", [] );
139 nothiddendiv = document.getElementById("nothiddendiv");
141 t( "Non-existent ancestors", ".fototab > .thumbnails > a", [] );
144 test("attributes", function() {
147 var attrbad, div, withScript;
149 t( "Find elements with a tabindex attribute", "[tabindex]", ["listWithTabIndex", "foodWithNegativeTabIndex", "linkWithTabIndex", "linkWithNegativeTabIndex", "linkWithNoHrefWithTabIndex", "linkWithNoHrefWithNegativeTabIndex"] );
151 t( "Attribute Exists", "#qunit-fixture a[title]", ["google"] );
152 t( "Attribute Exists (case-insensitive)", "#qunit-fixture a[TITLE]", ["google"] );
153 t( "Attribute Exists", "#qunit-fixture *[title]", ["google"] );
154 t( "Attribute Exists", "#qunit-fixture [title]", ["google"] );
155 t( "Attribute Exists", "#qunit-fixture a[ title ]", ["google"] );
157 t( "Boolean attribute exists", "#select2 option[selected]", ["option2d"]);
158 t( "Boolean attribute equals", "#select2 option[selected='selected']", ["option2d"]);
160 t( "Attribute Equals", "#qunit-fixture a[rel='bookmark']", ["simon1"] );
161 t( "Attribute Equals", "#qunit-fixture a[rel='bookmark']", ["simon1"] );
162 t( "Attribute Equals", "#qunit-fixture a[rel=bookmark]", ["simon1"] );
163 t( "Attribute Equals", "#qunit-fixture a[href='http://www.google.com/']", ["google"] );
164 t( "Attribute Equals", "#qunit-fixture a[ rel = 'bookmark' ]", ["simon1"] );
165 t( "Attribute Equals Number", "#qunit-fixture option[value=1]", ["option1b","option2b","option3b","option4b","option5c"] );
166 t( "Attribute Equals Number", "#qunit-fixture li[tabIndex=-1]", ["foodWithNegativeTabIndex"] );
168 document.getElementById("anchor2").href = "#2";
169 t( "href Attribute", "p a[href^='#']", ["anchor2"] );
170 t( "href Attribute", "p a[href*='#']", ["simon1", "anchor2"] );
172 t( "for Attribute", "form label[for]", ["label-for"] );
173 t( "for Attribute in form", "#form [for=action]", ["label-for"] );
175 t( "Attribute containing []", "input[name^='foo[']", ["hidden2"] );
176 t( "Attribute containing []", "input[name^='foo[bar]']", ["hidden2"] );
177 t( "Attribute containing []", "input[name*='[bar]']", ["hidden2"] );
178 t( "Attribute containing []", "input[name$='bar]']", ["hidden2"] );
179 t( "Attribute containing []", "input[name$='[bar]']", ["hidden2"] );
180 t( "Attribute containing []", "input[name$='foo[bar]']", ["hidden2"] );
181 t( "Attribute containing []", "input[name*='foo[bar]']", ["hidden2"] );
183 t( "Multiple Attribute Equals", "#form input[type='radio'], #form input[type='hidden']", ["radio1", "radio2", "hidden1"] );
184 t( "Multiple Attribute Equals", "#form input[type='radio'], #form input[type=\"hidden\"]", ["radio1", "radio2", "hidden1"] );
185 t( "Multiple Attribute Equals", "#form input[type='radio'], #form input[type=hidden]", ["radio1", "radio2", "hidden1"] );
187 t( "Attribute selector using UTF8", "span[lang=中文]", ["台北"] );
189 t( "Attribute Begins With", "a[href ^= 'http://www']", ["google","yahoo"] );
190 t( "Attribute Ends With", "a[href $= 'org/']", ["mark"] );
191 t( "Attribute Contains", "a[href *= 'google']", ["google","groups"] );
192 t( "Attribute Is Not Equal", "#ap a[hreflang!='en']", ["google","groups","anchor1"] );
194 t( "Empty values", "#select1 option[value='']", ["option1a"] );
195 t( "Empty values", "#select1 option[value!='']", ["option1b","option1c","option1d"] );
197 t( "Select options via :selected", "#select1 option:selected", ["option1a"] );
198 t( "Select options via :selected", "#select2 option:selected", ["option2d"] );
199 t( "Select options via :selected", "#select3 option:selected", ["option3b", "option3c"] );
200 t( "Select options via :selected", "select[name='select2'] option:selected", ["option2d"] );
202 t( "Grouped Form Elements", "input[name='foo[bar]']", ["hidden2"] );
204 // Make sure attribute value quoting works correctly. See jQuery #6093; #6428; #13894
205 // Use seeded results to bypass querySelectorAll optimizations
207 "<input type='hidden' id='attrbad_space' name='foo bar'/>" +
208 "<input type='hidden' id='attrbad_dot' value='2' name='foo.baz'/>" +
209 "<input type='hidden' id='attrbad_brackets' value='2' name='foo[baz]'/>" +
210 "<input type='hidden' id='attrbad_injection' data-attr='foo_baz']'/>" +
211 "<input type='hidden' id='attrbad_quote' data-attr='''/>" +
212 "<input type='hidden' id='attrbad_backslash' data-attr='\'/>" +
213 "<input type='hidden' id='attrbad_backslash_quote' data-attr='\''/>" +
214 "<input type='hidden' id='attrbad_backslash_backslash' data-attr='\\'/>" +
215 "<input type='hidden' id='attrbad_unicode' data-attr='一'/>"
216 ).appendTo("#qunit-fixture").get();
218 t( "Underscores don't need escaping", "input[id=types_all]", ["types_all"] );
220 t( "input[type=text]", "#form input[type=text]", ["text1", "text2", "hidden2", "name"] );
221 t( "input[type=search]", "#form input[type=search]", ["search"] );
223 withScript = supportjQuery( "<div><span><script src=''/></span></div>" );
224 ok( withScript.find( "#moretests script[src]" ).has( "script" ), "script[src] (jQuery #13777)" );
226 div = document.getElementById("foo");
227 t( "Object.prototype property \"constructor\" (negative)", "[constructor]", [] );
228 t( "Gecko Object.prototype property \"watch\" (negative)", "[watch]", [] );
229 div.setAttribute( "constructor", "foo" );
230 div.setAttribute( "watch", "bar" );
231 t( "Object.prototype property \"constructor\"", "[constructor='foo']", ["foo"] );
232 t( "Gecko Object.prototype property \"watch\"", "[watch='bar']", ["foo"] );
234 t( "Value attribute is retrieved correctly", "input[value=Test]", ["text1", "text2"] );
238 jQuery("<select value='12600'><option value='option' selected='selected'></option><option value=''></option></select>")
239 .prop( "value", "option" )
240 .is(":input[value='12600']"),
242 ":input[value=foo] selects select by attribute"
244 ok( jQuery("<input type='text' value='12600'/>").prop( "value", "option" ).is(":input[value='12600']"),
245 ":input[value=foo] selects text input by attribute"
249 ok( jQuery("<input type='checkbox' checked='checked'/>").prop( "checked", false ).is("[checked]"),
250 "[checked] selects by attribute (positive)"
252 ok( !jQuery("<input type='checkbox'/>").prop( "checked", true ).is("[checked]"),
253 "[checked] selects by attribute (negative)"
257 test("disconnected nodes", function() {
260 var $div = jQuery("<div/>");
261 equal( $div.is("div"), true, "Make sure .is('nodeName') works on disconnected nodes." );
264 test("disconnected nodes - jQuery only", function() {
267 var $opt = jQuery("<option></option>").attr("value", "whipit").appendTo("#qunit-fixture").detach();
268 equal( $opt.val(), "whipit", "option value" );
269 equal( $opt.is(":selected"), false, "unselected option" );
270 $opt.prop("selected", true);
271 equal( $opt.is(":selected"), true, "selected option" );
274 testIframe("selector/html5_selector", "attributes - jQuery.attr", function( jQuery, window, document ) {
278 * Returns an array of elements with the given IDs
279 * q & t are added here for the iFrame's context
285 for ( ; i < arguments.length; i++ ) {
286 r.push( document.getElementById( arguments[i] ) );
292 * Asserts that a select matches the given IDs
293 * @example t("Check for something", "//[a]", ["foo", "baar"]);
294 * @param {String} a - Assertion name
295 * @param {String} b - Sizzle selector
296 * @param {Array} c - Array of ids to construct what is expected
298 function t( a, b, c ) {
299 var f = jQuery(b).get(),
303 for ( ; i < f.length; i++ ) {
304 s += (s && ",") + "'" + f[i].id + "'";
307 deepEqual(f, q.apply( q, c ), a + " (" + b + ")");
310 // ====== All known boolean attributes, including html5 booleans ======
311 // autobuffer, autofocus, autoplay, async, checked,
312 // compact, controls, declare, defer, disabled,
313 // formnovalidate, hidden, indeterminate (property only),
314 // ismap, itemscope, loop, multiple, muted, nohref, noresize,
315 // noshade, nowrap, novalidate, open, pubdate, readonly, required,
316 // reversed, scoped, seamless, selected, truespeed, visible (skipping visible attribute, which is on a barprop object)
318 t( "Attribute Exists", "[autobuffer]", ["video1"]);
319 t( "Attribute Exists", "[autofocus]", ["text1"]);
320 t( "Attribute Exists", "[autoplay]", ["video1"]);
321 t( "Attribute Exists", "[async]", ["script1"]);
322 t( "Attribute Exists", "[checked]", ["check1"]);
323 t( "Attribute Exists", "[compact]", ["dl"]);
324 t( "Attribute Exists", "[controls]", ["video1"]);
325 t( "Attribute Exists", "[declare]", ["object1"]);
326 t( "Attribute Exists", "[defer]", ["script1"]);
327 t( "Attribute Exists", "[disabled]", ["check1"]);
328 t( "Attribute Exists", "[formnovalidate]", ["form1"]);
329 t( "Attribute Exists", "[hidden]", ["div1"]);
330 t( "Attribute Exists", "[indeterminate]", []);
331 t( "Attribute Exists", "[ismap]", ["img1"]);
332 t( "Attribute Exists", "[itemscope]", ["div1"]);
333 t( "Attribute Exists", "[loop]", ["video1"]);
334 t( "Attribute Exists", "[multiple]", ["select1"]);
335 t( "Attribute Exists", "[muted]", ["audio1"]);
336 t( "Attribute Exists", "[nohref]", ["area1"]);
337 t( "Attribute Exists", "[noresize]", ["textarea1"]);
338 t( "Attribute Exists", "[noshade]", ["hr1"]);
339 t( "Attribute Exists", "[nowrap]", ["td1", "div1"]);
340 t( "Attribute Exists", "[novalidate]", ["form1"]);
341 t( "Attribute Exists", "[open]", ["details1"]);
342 t( "Attribute Exists", "[pubdate]", ["article1"]);
343 t( "Attribute Exists", "[readonly]", ["text1"]);
344 t( "Attribute Exists", "[required]", ["text1"]);
345 t( "Attribute Exists", "[reversed]", ["ol1"]);
346 t( "Attribute Exists", "[scoped]", ["style1"]);
347 t( "Attribute Exists", "[seamless]", ["iframe1"]);
348 t( "Attribute Exists", "[selected]", ["option1"]);
349 t( "Attribute Exists", "[truespeed]", ["marquee1"]);
351 // Enumerated attributes (these are not boolean content attributes)
352 jQuery.expandedEach = jQuery.each;
353 jQuery.expandedEach([ "draggable", "contenteditable", "aria-disabled" ], function( i, val ) {
354 t( "Enumerated attribute", "[" + val + "]", ["div1"]);
356 t( "Enumerated attribute", "[spellcheck]", ["span1"]);
358 t( "tabindex selector does not retrieve all elements in IE6/7 (#8473)",
359 "form, [tabindex]", [ "form1", "text1" ] );
360 t( "Improperly named form elements do not interfere with form selections (#9570)", "form[name='formName']", ["form1"] );
363 test( "jQuery.contains", function() {
366 var container = document.getElementById("nonnodes"),
367 element = container.firstChild,
368 text = element.nextSibling,
369 nonContained = container.nextSibling,
370 detached = document.createElement("a");
371 ok( element && element.nodeType === 1, "preliminary: found element" );
372 ok( text && text.nodeType === 3, "preliminary: found text" );
373 ok( nonContained, "preliminary: found non-descendant" );
374 ok( jQuery.contains(container, element), "child" );
375 ok( jQuery.contains(container.parentNode, element), "grandchild" );
376 ok( jQuery.contains(container, text), "text child" );
377 ok( jQuery.contains(container.parentNode, text), "text grandchild" );
378 ok( !jQuery.contains(container, container), "self" );
379 ok( !jQuery.contains(element, container), "parent" );
380 ok( !jQuery.contains(container, nonContained), "non-descendant" );
381 ok( !jQuery.contains(container, document), "document" );
382 ok( !jQuery.contains(container, document.documentElement), "documentElement (negative)" );
383 ok( !jQuery.contains(container, null), "Passing null does not throw an error" );
384 ok( jQuery.contains(document, document.documentElement), "documentElement (positive)" );
385 ok( jQuery.contains(document, element), "document container (positive)" );
386 ok( !jQuery.contains(document, detached), "document container (negative)" );
389 test("jQuery.unique", function() {
392 function Arrayish( arr ) {
393 var i = this.length = arr.length;
395 this[ i ] = arr[ i ];
398 Arrayish.prototype = {
406 body = document.body,
407 fixture = document.getElementById("qunit-fixture"),
408 detached1 = document.createElement("p"),
409 detached2 = document.createElement("ul"),
410 detachedChild = detached1.appendChild( document.createElement("a") ),
411 detachedGrandchild = detachedChild.appendChild( document.createElement("b") );
413 for ( i = 0; i < 12; i++ ) {
414 detached.push( document.createElement("li") );
415 detached[i].id = "detached" + i;
416 detached2.appendChild( document.createElement("li") ).id = "detachedChild" + i;
426 expected: [ fixture ]
429 input: [ fixture, body ],
430 expected: [ body, fixture ]
433 input: [ body, fixture, fixture, body ],
434 expected: [ body, fixture ]
437 input: detached.slice( 0 ),
438 expected: detached.slice( 0 )
440 "Detached children": {
442 detached2.childNodes[0],
443 detached2.childNodes[1],
444 detached2.childNodes[2],
445 detached2.childNodes[3]
448 detached2.childNodes[0],
449 detached2.childNodes[1],
450 detached2.childNodes[2],
451 detached2.childNodes[3]
454 "Attached/detached mixture": {
455 input: [ detached1, fixture, detached2, document, detachedChild, body, detachedGrandchild ],
456 expected: [ document, body, fixture ],
461 jQuery.each( tests, function( label, test ) {
462 var length = test.length || test.input.length;
463 deepEqual( jQuery.unique( test.input ).slice( 0, length ), test.expected, label + " (array)" );
464 deepEqual( jQuery.unique( new Arrayish(test.input) ).slice( 0, length ), test.expected, label + " (quasi-array)" );
468 testIframe("selector/sizzle_cache", "Sizzle cache collides with multiple Sizzles on a page", function( jQuery, window, document ) {
469 var $cached = window["$cached"];
472 notStrictEqual( jQuery, $cached, "Loaded two engines" );
473 deepEqual( $cached(".test a").get(), [ document.getElementById("collision") ], "Select collision anchor with first sizzle" );
474 equal( jQuery(".evil a").length, 0, "Select nothing with second sizzle" );
475 equal( jQuery(".evil a").length, 0, "Select nothing again with second sizzle" );
478 asyncTest( "Iframe dispatch should not affect jQuery (#13936)", 1, function() {
481 iframe = document.getElementById( "iframe" ),
482 iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
484 jQuery( iframe ).on( "load", function() {
488 iframeDoc = this.contentDocument || this.contentWindow.document;
489 form = jQuery( "#navigate", iframeDoc )[ 0 ];
495 strictEqual( thrown, false, "No error thrown from post-reload jQuery call" );
498 jQuery( iframe ).off();
508 iframeDoc.write( "<body><form id='navigate' action='?'></form></body>" );