source: Dev/trunk/src/client/dojo/tests/query/queryQuirks.html @ 503

Last change on this file since 503 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.

File size: 18.3 KB
Line 
1<html>
2        <head>
3                <title>testing query()</title>
4                <style type="text/css">
5                        @import "../../resources/dojo.css";
6                </style>
7                <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true, async: true"></script>
8                <script type="text/javascript">
9                        // Use selector specified in URL (ex: query.html?selector=lite), defaulting to acme if unspecified
10                        var specified = window.location.search.substr(1).match(/selector=(.*)/);
11                        var selector = specified ? specified[0].split("=")[1] : "acme";
12
13                        require(["dojo", "doh", "dojo/query!"+selector, "dojo/sniff", "dojo/io/iframe", "dojo/domReady!"],
14                                        function(dojo, doh, dq, has){
15                                query = dq; // make a global
16
17                                function createDocument(xml){
18                                        var fauxXhr = { responseText: xml };
19                                        if("DOMParser" in dojo.global){
20                                                var parser = new DOMParser();
21                                                fauxXhr.responseXML = parser.parseFromString(xml, "text/xml");
22                                        }
23                                        // kludge: use dojo.xhr contentHandler for XML to process IE XMLDOC as needed
24                                        return dojo._contentHandlers["xml"](fauxXhr); // DOMDocument
25                                }
26
27                                // Tests that should work for any selector engine (lite or acme)
28                                // .class, #id, tag, and star, attribute selectors, and child (>), descendant (space),and union (,)
29                                // combinators. With a native selector engine, the lite engine does not support pseudo classes.
30                                doh.register("css2", [
31                                        // basic sanity checks
32                                        "doh.is(4, (query('h3')).length);",
33                                        "doh.is(1, (query('#t')).length);",
34                                        "doh.is(1, (query('#bug')).length);",
35                                        "doh.is(4, (query('#t h3')).length);",
36                                        "doh.is(1, (query('div#t')).length);",
37                                        "doh.is(4, (query('div#t h3')).length);",
38                                        "doh.is(0, (query('span#t')).length);",
39                                        "doh.is(0, (query('.bogus')).length);",
40                                        "doh.is(0, (query('.bogus', dojo.byId('container'))).length);",
41                                        "doh.is(0, (query('#bogus')).length);",
42                                        "doh.is(0, (query('#bogus', dojo.byId('container'))).length);",
43                                        "doh.is(1, (query('#t div > h3')).length);",
44                                        "doh.is(2, (query('.foo')).length);",
45                                        "doh.is(1, (query('.foo.bar')).length);",
46                                        "doh.is(2, (query('.baz')).length);",
47                                        "doh.is(3, (query('#t > h3')).length);",
48                                       
49                                        // this fails on IE8 because qSA completely fails on unknown elements. not sure how to fix this other than completely disable qSA on IE8, which would be an unacceptable performance regression
50                                        //"doh.t(query.matches(query('section')[0],'section'));",
51
52                                        "doh.is(2, (query('#baz,#foo,#t')).length);",
53                                        "doh.is(0, (query(null)).length);",
54
55                                        //"doh.is(1, (query('#bug')).length);",
56
57                                        // syntactic equivalents
58                                        "doh.is(12, (query('#t > *')).length);",
59                                        "doh.is(3, (query('.foo > *')).length);",
60
61                                        // with a root, by ID
62                                        "doh.is(3, (query('> *', 'container')).length);",
63                                        "doh.is(3, (query('> *, > h3', 'container')).length);",
64                                        "doh.is(3, (query('> h3', 't')).length);",
65
66                                        // compound queries
67                                        "doh.is(2, (query('.foo, .bar')).length);",
68                                        "doh.is(2, (query('.foo,.bar')).length);",
69
70                                        // multiple class attribute
71                                        "doh.is(1, (query('.foo.bar')).length);",
72                                        "doh.is(2, (query('.foo')).length);",
73                                        "doh.is(2, (query('.baz')).length);",
74
75                                        // case sensitivity
76                                        "doh.is(1, (query('span.baz')).length);",
77                                        "doh.is(1, (query('sPaN.baz')).length);",
78                                        "doh.is(1, (query('SPAN.baz')).length);",
79
80                                        // For quirks mode, case sensitivity is browser dependent, so querying .fooBar
81                                        //  may return 1 or 2 entries.   See #8775 and #14874 for details.
82                                        // "doh.is(1, query('.fooBar').length);",
83                                       
84                                        // attribute selectors
85                                        "doh.is(3, (query('[foo]')).length);",
86
87                                        // attribute substring selectors
88                                        "doh.is(1, (query('[foo$=\"thud\"]')).length);",
89                                        "doh.is(1, (query('[foo$=thud]')).length);",
90                                        "doh.is(1, (query('[foo$=\"thudish\"]')).length);",
91                                        "doh.is(1, (query('#t [foo$=thud]')).length);",
92                                        "doh.is(1, (query('#t [title$=thud]')).length);",
93                                        "doh.is(0, (query('#t span[title$=thud ]')).length);",
94                                        "doh.is(1, (query('[id$=\\'55555\\']')).length);",
95                                        "doh.is(2, (query('[foo~=\"bar\"]')).length);",
96                                        "doh.is(2, (query('[ foo ~= \"bar\" ]')).length);",
97                                        "doh.is(2, (query('[foo|=\"bar\"]')).length);",
98                                        "doh.is(1, (query('[foo|=\"bar-baz\"]')).length);",
99                                        "doh.is(0, (query('[foo|=\"baz\"]')).length);",
100                                        // TODO: ^=, *=
101
102                                        // descendant selectors
103                                        "doh.is(3, query('> *', 'container').length);",
104                                        "doh.is(2, query('> [qux]', 'container').length);",
105                                        "doh.is('child1', query('> [qux]', 'container')[0].id);",
106                                        "doh.is('child3', query('> [qux]', 'container')[1].id);",
107                                        "doh.is(3, query('> *', 'container').length);",
108                                        "doh.is(3, query('>*', 'container').length);",
109                                        "doh.is('passed', query('#bug')[0].value);",
110
111                                        // bug 9071
112                                        "doh.is(2, (query('a', 't4')).length);",
113                                        "doh.is(2, (query('p a', 't4')).length);",
114                                        "doh.is(2, (query('div p', 't4')).length);",
115                                        "doh.is(2, (query('div p a', 't4')).length);",
116                                        "doh.is(2, (query('.subA', 't4')).length);",
117                                        "doh.is(2, (query('.subP .subA', 't4')).length);",
118                                        "doh.is(2, (query('.subDiv .subP', 't4')).length);",
119                                        "doh.is(2, (query('.subDiv .subP .subA', 't4')).length);",
120
121                                        // failed scope arg
122                                        "doh.is(0, (query('*', 'thinger')).length);",
123                                        "doh.is(0, (query('div#foo').length));",
124
125                                        // escaping special characters with quotes (http://www.w3.org/TR/CSS21/syndata.html#strings)
126                                        // bug 10651
127                                        'doh.is(1, query(\'option[value="a+b"]\', "attrSpecialChars").length);',
128                                        'doh.is(1, query(\'option[value="a~b"]\', "attrSpecialChars").length);',
129                                        'doh.is(1, query(\'option[value="a^b"]\', "attrSpecialChars").length);',
130                                        'doh.is(1, query(\'option[value="a,b"]\', "attrSpecialChars").length);',
131
132                                        // selector with substring that contains equals sign (bug 7479)
133                                        "doh.is(1, query(\"a[href*='foo=bar']\", 'attrSpecialChars').length);",
134
135                                        // selector with substring that contains brackets (bug 9193, 11189, 13084)
136                                        'doh.is(1, query(\'input[name="data[foo][bar]"]\', "attrSpecialChars").length);',
137                                        'doh.is(1, query(\'input[name="foo[0].bar"]\', "attrSpecialChars").length);',
138                                        'doh.is(1, query(\'input[name="test[0]"]\', "attrSpecialChars").length);',
139
140                                        // escaping special characters with backslashes (http://www.w3.org/TR/CSS21/syndata.html#characters)
141                                        // selector with substring that contains brackets (bug 9193, 11189, 13084)
142                                        // eval() converts 4 backslashes --> 1 by the time dojo.query() sees the string
143                                        'doh.is(1, query("input[name=data\\\\[foo\\\\]\\\\[bar\\\\]]", "attrSpecialChars").length);',
144                                        'doh.is(1, query("input[name=foo\\\\[0\\\\]\\\\.bar]", "attrSpecialChars").length);',
145
146                                        // cross-document queries
147                                        {
148                                                name: "crossDocumentQuery",
149                                                setUp: function(){
150                                                        this.t3 = window.frames["t3"];
151                                                        this.doc = dojo.io.iframe.doc(t3);
152                                                        this.doc.open();
153                                                        this.doc.write([
154                                                                "<html><head>",
155                                                                "<title>inner document</title>",
156                                                                "</head>",
157                                                                "<body>",
158                                                                "<div id='st1'><h3>h3 <span>span <span> inner <span>inner-inner</span></span></span> endh3 </h3></div>",
159                                                                "</body>",
160                                                                "</html>"
161                                                        ].join(""));
162                                                },
163                                                runTest: function(){
164                                                        doh.is(1, query('h3', dojo.byId("st1", this.doc)).length);
165                                                        // use a long query to force a test of the XPath system on FF. see bug #7075
166                                                        doh.is(1, query('h3 > span > span > span', dojo.byId("st1", this.doc)).length);
167                                                        doh.is(1, query('h3 > span > span > span', this.doc.body.firstChild).length);
168                                                }
169                                        },
170
171                                        // escaping of ":" chars inside an ID
172                                        function silly_IDs1(){
173                                                doh.t(document.getElementById("silly:id::with:colons"), "getElementById");
174                                                doh.is(1, query("#silly\\:id\\:\\:with\\:colons").length, "query(\"#silly\\:id\\:\\:with\\:colons\")");
175                                                doh.is(1, query("#silly\\~id").length, "query(\"#silly\\~id\")");
176                                        },
177                                        function NodeList_identity(){
178                                                var foo = new dojo.NodeList([dojo.byId("container")]);
179                                                doh.is(foo, query(foo));
180                                        },
181                                        function xml(){
182                                                var doc = createDocument([
183                                                        "<ResultSet>",
184                                                        "<Result>One</Result>",
185                                                        "<RESULT>Two</RESULT>",
186                                                        "<result><nested>Three</nested></result>",
187                                                        "<result>Four</result>",
188                                                        "</ResultSet>"
189                                                ].join("")
190                                                );
191                                                var de = doc.documentElement;
192
193                                                doh.is(2, query("result", de).length, "all lower");
194
195                                                //doh.is(1, query("result>nested", de).length, "nested XML");
196                                                doh.is(1, query("Result", de).length, "mixed case");
197                                                doh.is(1, query("RESULT", de).length, "all upper");
198                                                doh.is(0, query("resulT", de).length, "no match");
199                                                doh.is(0, query("rEsulT", de).length, "no match");
200                                        },
201                                        function xml_attrs(){
202                                                if(!has("ie")){ // remove if() when #14880 is fixed
203                                                        var doc = createDocument([
204                                                                "<ResultSet>",
205                                                                "<RESULT thinger='blah'>ONE</RESULT>",
206                                                                "<RESULT thinger='gadzooks'><CHILD>Two</CHILD></RESULT>",
207                                                                "</ResultSet>"
208                                                        ].join(""));
209                                                        var de = doc.documentElement;
210
211                                                        doh.is(2, query("RESULT", de).length, "result elements");
212                                                        doh.is(0, query("RESULT[THINGER]", de).length, "result elements with attrs (wrong)");
213                                                        doh.is(2, query("RESULT[thinger]", de).length, "result elements with attrs");
214                                                        doh.is(1, query("RESULT[thinger=blah]", de).length, "result elements with attr value");
215                                                        doh.is(1, query("RESULT > CHILD", de).length, "Using child operator");
216                                                } // remove when #14880 is fixed
217                                        },
218                                        function sort(){
219                                                var i = query("div");
220                                                // smoke test
221                                                i.sort(function(a,b){ return 1; })
222                                        }
223                                ]);
224
225                                // Tests for CSS2.1+, and also CSS2 pseudo selectors (which aren't supported by selector=css2 or
226                                // selector=lite)
227                                if(/css2.1|css3|acme/.test(selector)){
228                                        doh.register("css2.1", [
229                                                // first-child
230                                                "doh.is(1, (query('h1:first-child')).length);",
231                                                "doh.is(2, (query('h3:first-child')).length);",
232
233                                                // + sibling selector
234                                                "doh.is(1, (query('.foo+ span')).length);",
235                                                "doh.is(1, (query('.foo+span')).length);",
236                                                "doh.is(1, (query('.foo +span')).length);",
237                                                "doh.is(1, (query('.foo + span')).length);"
238                                        ]);
239                                }
240
241                                // Tests for CSS3+
242                                if(/css3|acme/.test(selector)){
243                                        doh.register("css3", [
244                                                // sub-selector parsing
245                                                "doh.is(1, query('#t span.foo:not(:first-child)').length);",
246
247                                                // ~ sibling selector
248                                                "doh.is(4, (query('.foo~ span')).length);",
249                                                "doh.is(4, (query('.foo~span')).length);",
250                                                "doh.is(4, (query('.foo ~span')).length);",
251                                                "doh.is(4, (query('.foo ~ span')).length);",
252                                                "doh.is(1, (query('#foo~ *')).length);",
253                                                "doh.is(1, (query('#foo ~*')).length);",
254                                                "doh.is(1, (query('#foo ~*')).length);",
255                                                "doh.is(1, (query('#foo ~ *')).length);",
256                                                // "t.is(0, (query('[ foo ~= \"\\'bar\\'\" ]')).length);",
257
258                                                // nth-child tests
259                                                "doh.is(2, query('#t > h3:nth-child(odd)').length);",
260                                                "doh.is(3, query('#t h3:nth-child(odd)').length);",
261                                                "doh.is(3, query('#t h3:nth-child(2n+1)').length);",
262                                                "doh.is(1, query('#t h3:nth-child(even)').length);",
263                                                "doh.is(1, query('#t h3:nth-child(2n)').length);",
264                                                "doh.is(1, query('#t h3:nth-child(2n+3)').length);",
265                                                "doh.is(2, query('#t h3:nth-child(1)').length);",
266                                                "doh.is(1, query('#t > h3:nth-child(1)').length);",
267                                                "doh.is(3, query('#t :nth-child(3)').length);",
268                                                "doh.is(0, query('#t > div:nth-child(1)').length);",
269                                                "doh.is(7, query('#t span').length);",
270                                                "doh.is(3, query('#t > *:nth-child(n+10)').length);",
271                                                "doh.is(1, query('#t > *:nth-child(n+12)').length);",
272                                                "doh.is(10, query('#t > *:nth-child(-n+10)').length);",
273                                                "doh.is(5, query('#t > *:nth-child(-2n+10)').length);",
274                                                "doh.is(6, query('#t > *:nth-child(2n+2)').length);",
275                                                "doh.is(5, query('#t > *:nth-child(2n+4)').length);",
276                                                "doh.is(5, query('#t > *:nth-child(2n+4)').length);",
277                                                "doh.is(5, query('#t> *:nth-child(2n+4)').length);",
278                                                // TODO: uncomment these two tests when #14879 fixed
279                                                //"doh.is(12, query('#t > *:nth-child(n-5)').length);",
280                                                //"doh.is(12, query('#t >*:nth-child(n-5)').length);",
281                                                "doh.is(6, query('#t > *:nth-child(2n-5)').length);",
282                                                "doh.is(6, query('#t>*:nth-child(2n-5)').length);",
283                                                // TODO: uncomment when #14879 fixed
284                                                // "doh.is(dojo.byId('_foo'), query('.foo:nth-child(2)')[0]);",
285                                                "doh.is(query('style')[0], query(':nth-child(2)')[0]);",
286
287                                                // :checked pseudo-selector
288                                                "doh.is(2, query('#t2 > :checked').length);",
289                                                "doh.is(dojo.byId('checkbox2'), query('#t2 > input[type=checkbox]:checked')[0]);",
290                                                "doh.is(dojo.byId('radio2'), query('#t2 > input[type=radio]:checked')[0]);",
291                                                // This :checked selector is only defined for elements that have the checked property, option elements are not specified by the spec (http://www.w3.org/TR/css3-selectors/#checked) and not universally supported
292                                                //"doh.is(2, query('#t2select option:checked').length);",
293
294                                                "doh.is(1, query('#radio1:disabled').length);",
295                                                "doh.is(0, query('#radio1:enabled').length);",
296                                                "doh.is(0, query('#radio2:disabled').length);",
297                                                "doh.is(1, query('#radio2:enabled').length);",
298
299
300                                                // :empty pseudo-selector
301                                                "doh.is(4, query('#t > span:empty').length);",
302                                                "doh.is(6, query('#t span:empty').length);",
303                                                "doh.is(0, query('h3 span:empty').length);",
304                                                "doh.is(1, query('h3 :not(:empty)').length);"
305                                        ]);
306                                }
307
308                                // Tests for ACME specific functionality (not part of CSS3)
309                                if(selector == "acme"){
310                                        doh.register("acme", [
311                                                // Case insensitive class selectors (#8775, #14874).
312                                                // Acme is case-insensitive for backwards compatibility.
313                                                "doh.is(1, query('.fooBar').length);",
314
315                                                // sub-selector parsing
316                                                // TODO: move this test to CSS3 section when #14875 is fixed
317                                                "doh.is(1, query('#t span.foo:not(span:first-child)').length);",
318
319                                                // special characters in attribute values without backslashes.
320                                                // supported by acme but apparently not standard, see http://www.w3.org/TR/CSS21/syndata.html#characters
321                                                function attrSpecialCharsNoEscape(){
322                                                        // bug 10651
323                                                        doh.is(1, query('option[value=a+b]', 'attrSpecialChars').length, "value=a+b");
324                                                        doh.is(1, query('option[value=a~b]', 'attrSpecialChars').length, "value=a~b");
325                                                        doh.is(1, query('option[value=a^b]', 'attrSpecialChars').length, "value=a^b");
326                                                },
327
328                                                // implied * after > (non-standard syntax)
329                                                "doh.is(12, (query('#t >')).length);",
330                                                "doh.is(3, (query('.foo >')).length);",
331                                                "doh.is(3, query('>', 'container').length);",
332                                                "doh.is(0, query('> .not-there').length);",
333                                                "doh.is(1, (query('#foo ~')).length);",
334                                                "doh.is(1, (query('#foo~')).length);",
335
336                                                // implied * before and after + and ~ (non-standard syntax)
337                                                "doh.is(1, query('+', 'container').length);",
338                                                "doh.is(3, query('~', 'container').length);",
339
340                                                // check for correct document order
341                                                // not sure if this is guaranteed by css3, so putting in acme section
342                                                function domOrder() {
343                                                        var inputs = query(".upperclass .lowerclass input");
344                                                        doh.is("notbug", inputs[0].id);
345                                                        doh.is("bug", inputs[1].id);
346                                                        doh.is("checkbox1", inputs[2].id);
347                                                        doh.is("checkbox2", inputs[3].id);
348                                                        doh.is("radio1", inputs[4].id);
349                                                        doh.is("radio2", inputs[5].id);
350                                                        doh.is("radio3", inputs[6].id);
351                                                },
352
353                                                // TODO: move to css2 section after #7869 fixed for lite engine (on IE)
354                                                function xml_nthchild(){
355                                                        var doc = createDocument([
356                                                                "<ResultSet>",
357                                                                "<result>One</result>",
358                                                                "<result>Two</result>",
359                                                                "<result>Three</result>",
360                                                                "<result>Four</result>",
361                                                                "</ResultSet>"
362                                                        ].join("")
363                                                        );
364                                                        var de = doc.documentElement;
365                                                        doh.is("Four", query("result:nth-child(4)", de)[0].firstChild.data, "fourth child");
366                                                }
367                                        ]);
368                                }
369
370                                doh.run();
371                        });
372                </script>
373        </head>
374        <body class="upperclass">
375                <h1>Testing dojo/query module.</h1>
376                <p>Specify ?selector=lite/css2/css2.1/css3/acme on URL to get specific test.</p>
377                <div id="t" class="lowerclass">
378                        <h3>h3 <span>span</span> endh3 </h3>
379                        <!-- comment to throw things off -->
380                        <div class="foo bar" id="_foo">
381                                <h3>h3</h3>
382                                <span id="foo"></span>
383                                <span></span>
384                        </div>
385                        <h3>h3</h3>
386                        <h3 class="baz foobar" title="thud">h3</h3>
387                        <span class="fooBar baz foo"></span>
388                        <span foo="bar"></span>
389                        <span foo="baz bar thud"></span>
390                        <!-- FIXME: should foo="bar-baz-thud" match? [foo$=thud] ??? -->
391                        <span foo="bar-baz-thudish" id="silly:id::with:colons"></span>
392                        <div id="container">
393                                <div id="child1" qux="true"></div>
394                                <div id="child2"></div>
395                                <div id="child3" qux="true"></div>
396                        </div>
397                        <div id="silly~id" qux="true"></div>
398                        <input id="notbug" name="bug" type="hidden" value="failed">
399                        <input id="bug" type="hidden" value="passed">
400                </div>
401                <div id="t2" class="lowerclass">
402                        <input type="checkbox" name="checkbox1" id="checkbox1" value="foo">
403                        <input type="checkbox" name="checkbox2" id="checkbox2" value="bar" checked>
404
405                        <input type="radio" disabled="true" name="radio" id="radio1" value="thinger">
406                        <input type="radio" name="radio" id="radio2" value="stuff" checked>
407                        <input type="radio" name="radio" id="radio3" value="blah">
408                </div>
409                <select id="t2select" multiple="multiple">
410                        <option>0</option>
411                        <option selected="selected">1</option>
412                        <option selected="selected">2</option>
413                </select>
414               
415                <iframe id="t3" name="t3" src="../../resources/blank.html"></iframe>
416                <div id="t4">
417                        <div id="one" class="subDiv">
418                                <p class="one subP"><a class="subA">one</a></p>
419                                <div id="two" class="subDiv">
420                                        <p class="two subP"><a class="subA">two</a></p>
421                                </div>
422                        </div>
423                </div>
424                <section></section>
425                <div id='other'>
426                  <div id='abc55555'></div>
427                  <div id='abd55555efg'></div>
428                  <div id='55555abc'></div>
429                  <div id='1'></div>
430                  <div id='2c'></div>
431                  <div id='3ch'></div>
432                  <div id='4chr'></div>
433                  <div id='5char'></div>
434                  <div id='6chars'></div>
435                </div>
436               
437                <div id="attrSpecialChars">
438                        <select name="special">
439                                <!-- tests for special characters in attribute values (characters that are part of query syntax) -->
440                                <option value="a+b">1</option>
441                                <option value="a~b">2</option>
442                                <option value="a^b">3</option>
443                                <option value="a,b">4</option>
444                        </select>
445
446                        <!-- tests for quotes in attribute values -->
447                        <a href="foo=bar">hi</a>
448                        <!-- tests for brackets in attribute values -->
449                        <input name="data[foo][bar]">
450                        <!-- attribute name with a dot, goes down separate code path -->
451                        <input name="foo[0].bar">
452                        <input name="test[0]">
453                </div>
454        </body>
455</html>
456
Note: See TracBrowser for help on using the repository browser.