| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html id="html"> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Testing dojo.NodeList-traverse extensions to dojo.NodeList</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../resources/dojo.css"; |
|---|
| 8 | </style> |
|---|
| 9 | <script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug: true, popup: true"></script> |
|---|
| 10 | <script type="text/javascript"> |
|---|
| 11 | require(["doh", "dojo/query", "dojo/NodeList-traverse", "dojo/domReady!"], function(doh, query){ |
|---|
| 12 | |
|---|
| 13 | function verify(/*dojo.NodeList*/nl, /*Array*/ids, /*String*/ comment){ |
|---|
| 14 | comment = comment || "verify"; |
|---|
| 15 | for(var i = 0, node; (node = nl[i]); i++){ |
|---|
| 16 | doh.is(ids[i], node.id, comment + " " + i); |
|---|
| 17 | } |
|---|
| 18 | //Make sure lengths are equal. |
|---|
| 19 | doh.is(ids.length, i, comment + " length"); |
|---|
| 20 | } |
|---|
| 21 | |
|---|
| 22 | var divs = query("div.testDiv"); |
|---|
| 23 | |
|---|
| 24 | doh.register([ |
|---|
| 25 | function children(t){ |
|---|
| 26 | verify(divs.last().children(), ["crass", "classy", "yeah"]); |
|---|
| 27 | }, |
|---|
| 28 | |
|---|
| 29 | function closest(t){ |
|---|
| 30 | // test simple selector |
|---|
| 31 | var classy = query("#classy"); |
|---|
| 32 | var closestDiv = classy.closest("div"); |
|---|
| 33 | verify(closestDiv, ["third"], "closest('div')"); |
|---|
| 34 | verify(closestDiv.end().closest(".classy"), ["classy"], "closestDiv.end().closest('.classy')"); |
|---|
| 35 | |
|---|
| 36 | // test descendant selector |
|---|
| 37 | var bang = query(".bang"); |
|---|
| 38 | var closestFooBar = bang.closest(".foo > .bar"); |
|---|
| 39 | verify(closestFooBar, ["level4"], ".foo > .bar"); |
|---|
| 40 | |
|---|
| 41 | // test descendant selector that doesn't match (".foo" alone matches nodes, but not |
|---|
| 42 | // ".bogus .foo") |
|---|
| 43 | var closestBogusFoo = bang.closest(".bogus .foo"); |
|---|
| 44 | verify(closestBogusFoo, [], ".bogus .foo"); |
|---|
| 45 | |
|---|
| 46 | // positive test that scope argument works: .foo > .bar should match a scope |
|---|
| 47 | // of "level2" or above |
|---|
| 48 | closestFooBar = bang.closest(".foo > .bar", "level2"); |
|---|
| 49 | verify(closestFooBar, ["level4"], ".foo > .bar query relative to level2"); |
|---|
| 50 | |
|---|
| 51 | // > .bar should match a scope of level3 or level1 |
|---|
| 52 | var topBar = bang.closest("> .bar", "level3"); |
|---|
| 53 | verify(topBar, ["level4"], "> .bar query relative to level3"); |
|---|
| 54 | |
|---|
| 55 | // negative test that scope argument works: .foo > .bar relative to level3 |
|---|
| 56 | // doesn't match since .foo is level3, rather than a child of level3 |
|---|
| 57 | closestFooBar = bang.closest(".foo > .bar", "level3"); |
|---|
| 58 | verify(closestFooBar, [], ".foo > .bar query relative to level3"); |
|---|
| 59 | |
|---|
| 60 | // complex test of multiple elements in NodeList |
|---|
| 61 | // Only some of the elements in query("div") have a ".foo" ancestor, |
|---|
| 62 | // and three of those elements have the *same* .foo ancestor, so |
|---|
| 63 | // closest(".foo") should result in list of just two elements |
|---|
| 64 | var closestFoo = query("div").closest(".foo"); |
|---|
| 65 | verify(closestFoo, ["level1", "level3"], ".foo from div"); |
|---|
| 66 | |
|---|
| 67 | }, |
|---|
| 68 | |
|---|
| 69 | function parent(t){ |
|---|
| 70 | verify(query("#classy").parent(), ["third"]); |
|---|
| 71 | }, |
|---|
| 72 | |
|---|
| 73 | function parents(t){ |
|---|
| 74 | var classy = query("#classy"); |
|---|
| 75 | verify(classy.parents(), ["third", "body", "html"]); |
|---|
| 76 | verify(classy.parents(".third"), ["third"]); |
|---|
| 77 | verify(classy.parents("body"), ["body"]); |
|---|
| 78 | }, |
|---|
| 79 | |
|---|
| 80 | function siblings(t){ |
|---|
| 81 | verify(query("#classy").siblings(), ["crass", "yeah"]); |
|---|
| 82 | }, |
|---|
| 83 | |
|---|
| 84 | function next(t){ |
|---|
| 85 | verify(query("#crass").next(), ["classy"]); |
|---|
| 86 | }, |
|---|
| 87 | |
|---|
| 88 | function nextAll(t){ |
|---|
| 89 | verify(query("#crass").nextAll(), ["classy", "yeah"]); |
|---|
| 90 | verify(query("#crass").nextAll("#yeah"), ["yeah"]); |
|---|
| 91 | }, |
|---|
| 92 | |
|---|
| 93 | function prev(t){ |
|---|
| 94 | verify(query("#classy").prev(), ["crass"]); |
|---|
| 95 | }, |
|---|
| 96 | |
|---|
| 97 | function prevAll(t){ |
|---|
| 98 | verify(query("#yeah").prevAll(), ["classy", "crass"]); |
|---|
| 99 | verify(query("#yeah").prevAll("#crass"), ["crass"]); |
|---|
| 100 | }, |
|---|
| 101 | |
|---|
| 102 | function andSelf(t){ |
|---|
| 103 | verify(query("#yeah").prevAll().andSelf(), ["classy", "crass", "yeah"]); |
|---|
| 104 | }, |
|---|
| 105 | |
|---|
| 106 | function first(t){ |
|---|
| 107 | verify(divs.first(), ["sq100"]); |
|---|
| 108 | }, |
|---|
| 109 | |
|---|
| 110 | function last(t){ |
|---|
| 111 | verify(divs.last(), ["third"]); |
|---|
| 112 | }, |
|---|
| 113 | |
|---|
| 114 | function even(t){ |
|---|
| 115 | var even = divs.even(); |
|---|
| 116 | verify(even, ["t"]); |
|---|
| 117 | verify(even.end(), ["sq100", "t", "third"]); |
|---|
| 118 | }, |
|---|
| 119 | |
|---|
| 120 | function odd(t){ |
|---|
| 121 | var odd = divs.odd(); |
|---|
| 122 | verify(odd, ["sq100", "third"]); |
|---|
| 123 | verify(odd.end(), ["sq100", "t", "third"]); |
|---|
| 124 | } |
|---|
| 125 | ]); |
|---|
| 126 | |
|---|
| 127 | doh.run(); |
|---|
| 128 | }); |
|---|
| 129 | </script> |
|---|
| 130 | </head> |
|---|
| 131 | <body id="body" class="classy"> |
|---|
| 132 | <h1 id="firstH1">testing dojo.NodeList-traverse</h1> |
|---|
| 133 | <div id="sq100" class="testDiv"> |
|---|
| 134 | 100px square, abs |
|---|
| 135 | </div> |
|---|
| 136 | <div id="t" class="testDiv"> |
|---|
| 137 | <span id="c1">c1</span> |
|---|
| 138 | </div> |
|---|
| 139 | <div id="third" class="third testDiv"> |
|---|
| 140 | <!-- This is the third top level div --> |
|---|
| 141 | <span id="crass">Crass, baby</span> |
|---|
| 142 | The third div |
|---|
| 143 | <span id="classy" class="classy">Classy, baby</span> |
|---|
| 144 | The third div, again |
|---|
| 145 | <!-- Another comment --> |
|---|
| 146 | <span id="yeah">Yeah, baby</span> |
|---|
| 147 | </div> |
|---|
| 148 | <div id="level1" class="foo"> |
|---|
| 149 | <div id="level2" class="bar"> |
|---|
| 150 | <div id="level3" class="foo"> |
|---|
| 151 | <div id="level4" class="bar"> |
|---|
| 152 | <div id="level5" class="bar"> |
|---|
| 153 | <div id="level6" class="bang">foo bar bar bang</div> |
|---|
| 154 | </div> |
|---|
| 155 | </div> |
|---|
| 156 | </div> |
|---|
| 157 | </div> |
|---|
| 158 | </div> |
|---|
| 159 | </body> |
|---|
| 160 | </html> |
|---|
| 161 | |
|---|
