306 lines
10 KiB
HTML
306 lines
10 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<!--
|
|
we use a strict-mode DTD to ensure that the box model is the same for these
|
|
basic tests
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>testing Core HTML/DOM/CSS/Style utils</title>
|
|
<style type="text/css">
|
|
@import "../../resources/dojo.css";
|
|
</style>
|
|
<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script>
|
|
<script type="text/javascript">
|
|
require(["dojo", "doh", "dojo/domReady!"], function(dojo, doh){
|
|
|
|
doh.register("t",
|
|
[
|
|
|
|
function createBasic(t){
|
|
// test plain creation
|
|
var n = dojo.create("div");
|
|
dojo.byId("holder1").appendChild(n);
|
|
dojo.addClass(n, "testing");
|
|
var q = dojo.query(".testing");
|
|
|
|
doh.is(1, q.length);
|
|
doh.is("div", n.nodeName.toLowerCase());
|
|
},
|
|
|
|
function createAttrs(t){
|
|
// test attr creation, no placement
|
|
var n = dojo.create('div', {
|
|
"class":"hasClass",
|
|
title:"foo",
|
|
style:"border:2px solid #ededed; padding:3px"
|
|
});
|
|
// plain placement:
|
|
dojo.byId("holder1").appendChild(n);
|
|
|
|
doh.t(dojo.hasClass(n, "hasClass"));
|
|
doh.is("foo", dojo.attr(n, "title"));
|
|
//FIXME: apparently attr(n, "style", "foo:bar; baz:bam;") doesn't work in IE?
|
|
// need to test further in attr or document.
|
|
//doh.is(3, dojo.style(n, "padding"));
|
|
},
|
|
|
|
function createPlace(t){
|
|
// test only creation and placement, no attr
|
|
var n = dojo.create("div", null, dojo.body());
|
|
n.innerHTML = "<p class='bar'>a</p>";
|
|
var q = dojo.query("p", n);
|
|
|
|
doh.is(1, q.length);
|
|
doh.t(dojo.hasClass(q[0], "bar"));
|
|
},
|
|
|
|
function createHtml(t){
|
|
// test creation, placement, and attr (innerHTML)
|
|
var n = dojo.create("div", {
|
|
innerHTML: "<p class='bar2'>a</p>"
|
|
}, dojo.body());
|
|
var q = dojo.query("p", n);
|
|
|
|
doh.is(1, q.length);
|
|
doh.t(dojo.hasClass(q[0], "bar2"));
|
|
},
|
|
|
|
function createPlaceRef(t){
|
|
// test creation and referenced placement, with some attr
|
|
var ref = dojo.query("#holder2 > li.last")[0];
|
|
|
|
var n = dojo.create("li", {
|
|
innerHTML:"middle", "class":"middleNode"
|
|
}, ref, "before");
|
|
|
|
doh.is(3, dojo.query("#holder2 li").length);
|
|
|
|
var nn = dojo.create("li", {
|
|
innerHTML:"afterLast", "class":"afterLast"
|
|
}, ref, "after");
|
|
|
|
// FIXME: this is dependant on query() retaining DOM order.
|
|
// is that safe? nextSibling and friends are a PITA
|
|
var classes = ["first", "middleNode", "last", "afterLast"];
|
|
var q = dojo.query("#holder2 li");
|
|
doh.is(4, q.length);
|
|
|
|
q.forEach(function(n, i){
|
|
doh.is(classes[i], n.className);
|
|
});
|
|
|
|
},
|
|
|
|
function destroyList(t){
|
|
// destroy node byId
|
|
dojo.destroy("holder2");
|
|
doh.f(dojo.byId("holder2"));
|
|
// destroyed because is child of holder
|
|
doh.is(0, dojo.query(".first").length);
|
|
},
|
|
|
|
function createList(t){
|
|
// test creation/placement of a variety of node tags
|
|
var es = ["div", "a", "span", "br", "table", "ul", "dd", "img", "h2"];
|
|
dojo.forEach(es, function(el){
|
|
dojo.create(el, null, "holder3");
|
|
});
|
|
var q = dojo.query(">", "holder3");
|
|
doh.is(q.length, es.length);
|
|
|
|
// destroy this list:
|
|
q.forEach(dojo.destroy);
|
|
q = dojo.query(">", "holder3");
|
|
doh.is(q.length, 0);
|
|
|
|
},
|
|
|
|
function destroyAll(t){
|
|
var c = function(){
|
|
// eg: don't destroy firebug lite in page
|
|
return dojo.query("body >").filter(function(n){
|
|
return !dojo.hasClass(n, "firebug");
|
|
})
|
|
};
|
|
c().forEach(dojo.destroy);
|
|
|
|
// check for deepest embeeded id
|
|
doh.f(dojo.byId("ancFoo"));
|
|
doh.is(0, c().length);
|
|
},
|
|
|
|
function recreateOneV1(t){
|
|
var n = dojo.create("h2", {
|
|
"class":"restored",
|
|
innerHTML:"<span>The End</span>"
|
|
}, dojo.body());
|
|
|
|
doh.is(1, dojo.query(".restored").length);
|
|
dojo.destroy(n);
|
|
},
|
|
|
|
function recreateOneV2(t){
|
|
var n = dojo.place("<h2 class='restored'><span>The End</span></h2>", dojo.body());
|
|
doh.is(1, dojo.query(".restored").length);
|
|
dojo.destroy(n);
|
|
},
|
|
|
|
function emptyDiv(t){
|
|
var n = dojo.create("div", {
|
|
innerHTML: "1<span class='red'>2</span>3<em custom='x'>4</em>5"
|
|
});
|
|
doh.isNot("", n.innerHTML);
|
|
dojo.empty(n);
|
|
doh.is("", n.innerHTML);
|
|
dojo.destroy(n);
|
|
},
|
|
|
|
function emptyTable(t){
|
|
var table = dojo.create("table", null, dojo.body()),
|
|
tr1 = dojo.create("tr", null, table),
|
|
td1 = dojo.create("td", {innerHTML: "a"}, tr1),
|
|
td2 = dojo.create("td", {innerHTML: "b"}, tr1),
|
|
tr2 = dojo.create("tr", null, table),
|
|
td3 = dojo.create("td", {innerHTML: "c"}, tr2),
|
|
td4 = dojo.create("td", {innerHTML: "d"}, tr2);
|
|
doh.isNot("", table.innerHTML);
|
|
dojo.empty(table);
|
|
doh.is("", table.innerHTML);
|
|
dojo.destroy(table);
|
|
},
|
|
|
|
function toDomSpans(t){
|
|
var n = dojo._toDom("<span>1</span><span>2</span>");
|
|
doh.is(2, n.childNodes.length);
|
|
doh.is("span", n.firstChild.tagName.toLowerCase());
|
|
doh.is("1", n.firstChild.innerHTML);
|
|
doh.is("span", n.lastChild.tagName.toLowerCase());
|
|
doh.is("2", n.lastChild.innerHTML);
|
|
},
|
|
|
|
function toDomTr(t){
|
|
var n = dojo._toDom("<tr><td>First!</td></tr>");
|
|
doh.is("tr", n.tagName.toLowerCase());
|
|
doh.is(1, n.childNodes.length);
|
|
doh.is("td", n.firstChild.tagName.toLowerCase());
|
|
doh.is("First!", n.firstChild.innerHTML);
|
|
},
|
|
|
|
function toDomText(t){
|
|
var n = dojo._toDom("Hello, world!");
|
|
doh.is(3, n.nodeType);
|
|
doh.is("Hello, world!", n.nodeValue);
|
|
},
|
|
|
|
function toDomOption(t){
|
|
var n = dojo._toDom('<option value="1">First</option>');
|
|
doh.f(n.selected);
|
|
|
|
var n = dojo._toDom('<option value="1" selected="selected">First</option>');
|
|
doh.t(n.selected);
|
|
|
|
n = dojo._toDom('<option value="1">First</option><option value="2" selected>Second</option>');
|
|
doh.f(n.childNodes[0].selected);
|
|
doh.t(n.childNodes[1].selected);
|
|
},
|
|
|
|
function placeDivs(t){
|
|
dojo.place("<p class='disposable'>2</p>", dojo.body());
|
|
var n = dojo.query("body > .disposable")[0];
|
|
dojo.place("<p class='disposable'>0</p><p class='disposable'>1</p>", n, "before");
|
|
dojo.place("<p class='disposable'>3</p><p class='disposable'>4</p>", n, "after");
|
|
dojo.place("<span>a</span>", n, "first");
|
|
dojo.place("<span>z</span>", n, "last");
|
|
n = dojo.query("body > .disposable");
|
|
doh.is(5, n.length);
|
|
doh.is("0", n[0].innerHTML);
|
|
doh.is("1", n[1].innerHTML);
|
|
doh.is("3", n[3].innerHTML);
|
|
doh.is("4", n[4].innerHTML);
|
|
doh.is("<span>a</span>2<span>z</span>", n[2].innerHTML.toLowerCase());
|
|
n.forEach(dojo.destroy);
|
|
},
|
|
|
|
function placeTable(t){
|
|
dojo.place("<table class='disposable'><tbody></tbody></table>", dojo.body());
|
|
var n = dojo.query("body > table.disposable > tbody")[0];
|
|
dojo.place("<tr><td>2</td></tr>", n);
|
|
dojo.place("<tr><td>0</td></tr><tr><td>1</td></tr>", n, "first");
|
|
dojo.place("<tr><td>3</td></tr><tr><td>4</td></tr>", n, "last");
|
|
n = dojo.query("body > table.disposable tr");
|
|
doh.is(5, n.length);
|
|
doh.is("<td>0</td>", n[0].innerHTML.toLowerCase());
|
|
doh.is("<td>1</td>", n[1].innerHTML.toLowerCase());
|
|
doh.is("<td>2</td>", n[2].innerHTML.toLowerCase());
|
|
doh.is("<td>3</td>", n[3].innerHTML.toLowerCase());
|
|
doh.is("<td>4</td>", n[4].innerHTML.toLowerCase());
|
|
dojo.query("body > table.disposable").forEach(dojo.destroy);
|
|
},
|
|
|
|
function placeReplace(t){
|
|
dojo.place("<p class='disposable'>2</p>", dojo.body());
|
|
var n = dojo.query("body > .disposable")[0];
|
|
dojo.place("<p class='disposable'>0</p><p class='disposable'>1</p>", n, "replace");
|
|
n = dojo.query("body > .disposable");
|
|
doh.is(2, n.length);
|
|
doh.is("0", n[0].innerHTML);
|
|
doh.is("1", n[1].innerHTML);
|
|
n.forEach(dojo.destroy);
|
|
},
|
|
|
|
function placeOnly(t){
|
|
dojo.place("<p class='disposable'><em>1</em>2<strong>3</strong></p>", dojo.body());
|
|
var n = dojo.query("body > .disposable")[0];
|
|
dojo.place("<span>42</span>99", n, "only");
|
|
n = dojo.query("body > .disposable");
|
|
doh.is(1, n.length);
|
|
doh.is("<span>42</span>99", n[0].innerHTML.toLowerCase());
|
|
n.forEach(dojo.destroy);
|
|
},
|
|
|
|
function placeNumber(t){
|
|
var n = dojo.place("<p><em>1</em><em>2</em></p>", dojo.body());
|
|
doh.is(2, n.childNodes.length);
|
|
dojo.place("<span>C</span>", n, 99);
|
|
doh.is(3, n.childNodes.length);
|
|
doh.is("span", n.childNodes[2].tagName.toLowerCase());
|
|
doh.is("C", n.childNodes[2].innerHTML);
|
|
dojo.place("<span>A</span>", n, -1);
|
|
doh.is(4, n.childNodes.length);
|
|
doh.is("span", n.childNodes[0].tagName.toLowerCase());
|
|
doh.is("A", n.childNodes[0].innerHTML);
|
|
dojo.place("<span>B</span>", n, 2);
|
|
doh.is(5, n.childNodes.length);
|
|
doh.is("span", n.childNodes[2].tagName.toLowerCase());
|
|
doh.is("B", n.childNodes[2].innerHTML);
|
|
dojo.destroy(n);
|
|
}
|
|
]
|
|
);
|
|
doh.runOnLoad();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>testing Core DOM utils</h1>
|
|
|
|
<div id="holder1"></div>
|
|
<ul id="holder2">
|
|
<li class="first">first</li>
|
|
<li class="last">last</li>
|
|
</ul>
|
|
|
|
<div id="holder3"></div>
|
|
|
|
<p id="someId"></p>
|
|
|
|
<div>
|
|
<div>
|
|
<a id="ancFoo" href="null.html">link</a>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|