161 lines
5.2 KiB
HTML
161 lines
5.2 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html id="html">
|
|
<head>
|
|
<title>Testing dojo.NodeList-traverse extensions to dojo.NodeList</title>
|
|
<style type="text/css">
|
|
@import "../resources/dojo.css";
|
|
</style>
|
|
<script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug: true, popup: true"></script>
|
|
<script type="text/javascript">
|
|
require(["dojo", "doh", "dojo/NodeList-traverse", "dojo/domReady!"], function(dojo, doh){
|
|
|
|
function verify(/*dojo.NodeList*/nl, /*Array*/ids, /*String*/ comment){
|
|
comment = comment || "verify";
|
|
for(var i = 0, node; (node = nl[i]); i++){
|
|
doh.is(ids[i], node.id, comment + " " + i);
|
|
}
|
|
//Make sure lengths are equal.
|
|
doh.is(ids.length, i, comment + " length");
|
|
}
|
|
|
|
var divs = dojo.query("div.testDiv");
|
|
|
|
doh.register([
|
|
function children(t){
|
|
verify(divs.last().children(), ["crass", "classy", "yeah"]);
|
|
},
|
|
|
|
function closest(t){
|
|
// test simple selector
|
|
var classy = dojo.query("#classy");
|
|
var closestDiv = classy.closest("div");
|
|
verify(closestDiv, ["third"], "closest('div')");
|
|
verify(closestDiv.end().closest(".classy"), ["classy"], "closestDiv.end().closest('.classy')");
|
|
|
|
// test descendant selector
|
|
var bang = dojo.query(".bang");
|
|
var closestFooBar = bang.closest(".foo > .bar");
|
|
verify(closestFooBar, ["level4"], ".foo > .bar");
|
|
|
|
// test descendant selector that doesn't match (".foo" alone matches nodes, but not
|
|
// ".bogus .foo")
|
|
var closestBogusFoo = bang.closest(".bogus .foo");
|
|
verify(closestBogusFoo, [], ".bogus .foo");
|
|
|
|
// positive test that scope argument works: .foo > .bar should match a scope
|
|
// of "level2" or above
|
|
closestFooBar = bang.closest(".foo > .bar", "level2");
|
|
verify(closestFooBar, ["level4"], ".foo > .bar query relative to level2");
|
|
|
|
// > .bar should match a scope of level3 or level1
|
|
var topBar = bang.closest("> .bar", "level3");
|
|
verify(topBar, ["level4"], "> .bar query relative to level3");
|
|
|
|
// negative test that scope argument works: .foo > .bar relative to level3
|
|
// doesn't match since .foo is level3, rather than a child of level3
|
|
closestFooBar = bang.closest(".foo > .bar", "level3");
|
|
verify(closestFooBar, [], ".foo > .bar query relative to level3");
|
|
|
|
// complex test of multiple elements in NodeList
|
|
// Only some of the elements in dojo.query("div") have a ".foo" ancestor,
|
|
// and three of those elements have the *same* .foo ancestor, so
|
|
// closest(".foo") should result in list of just two elements
|
|
var closestFoo = dojo.query("div").closest(".foo");
|
|
verify(closestFoo, ["level1", "level3"], ".foo from div");
|
|
|
|
},
|
|
|
|
function parent(t){
|
|
verify(dojo.query("#classy").parent(), ["third"]);
|
|
},
|
|
|
|
function parents(t){
|
|
var classy = dojo.query("#classy");
|
|
verify(classy.parents(), ["third", "body", "html"]);
|
|
verify(classy.parents(".third"), ["third"]);
|
|
verify(classy.parents("body"), ["body"]);
|
|
},
|
|
|
|
function siblings(t){
|
|
verify(dojo.query("#classy").siblings(), ["crass", "yeah"]);
|
|
},
|
|
|
|
function next(t){
|
|
verify(dojo.query("#crass").next(), ["classy"]);
|
|
},
|
|
|
|
function nextAll(t){
|
|
verify(dojo.query("#crass").nextAll(), ["classy", "yeah"]);
|
|
verify(dojo.query("#crass").nextAll("#yeah"), ["yeah"]);
|
|
},
|
|
|
|
function prev(t){
|
|
verify(dojo.query("#classy").prev(), ["crass"]);
|
|
},
|
|
|
|
function prevAll(t){
|
|
verify(dojo.query("#yeah").prevAll(), ["classy", "crass"]);
|
|
verify(dojo.query("#yeah").prevAll("#crass"), ["crass"]);
|
|
},
|
|
|
|
function andSelf(t){
|
|
verify(dojo.query("#yeah").prevAll().andSelf(), ["classy", "crass", "yeah"]);
|
|
},
|
|
|
|
function first(t){
|
|
verify(divs.first(), ["sq100"]);
|
|
},
|
|
|
|
function last(t){
|
|
verify(divs.last(), ["third"]);
|
|
},
|
|
|
|
function even(t){
|
|
var even = divs.even();
|
|
verify(even, ["t"]);
|
|
verify(even.end(), ["sq100", "t", "third"]);
|
|
},
|
|
|
|
function odd(t){
|
|
var odd = divs.odd();
|
|
verify(odd, ["sq100", "third"]);
|
|
verify(odd.end(), ["sq100", "t", "third"]);
|
|
}
|
|
]);
|
|
doh.runOnLoad();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body id="body" class="classy">
|
|
<h1 id="firstH1">testing dojo.NodeList-traverse</h1>
|
|
<div id="sq100" class="testDiv">
|
|
100px square, abs
|
|
</div>
|
|
<div id="t" class="testDiv">
|
|
<span id="c1">c1</span>
|
|
</div>
|
|
<div id="third" class="third testDiv">
|
|
<!-- This is the third top level div -->
|
|
<span id="crass">Crass, baby</span>
|
|
The third div
|
|
<span id="classy" class="classy">Classy, baby</span>
|
|
The third div, again
|
|
<!-- Another comment -->
|
|
<span id="yeah">Yeah, baby</span>
|
|
</div>
|
|
<div id="level1" class="foo">
|
|
<div id="level2" class="bar">
|
|
<div id="level3" class="foo">
|
|
<div id="level4" class="bar">
|
|
<div id="level5" class="bar">
|
|
<div id="level6" class="bang">foo bar bar bang</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|