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

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

Added Dojo 1.9.3 release.

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