You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
9.7 KiB
299 lines
9.7 KiB
<!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){ |
|
dojo.query("body >").forEach(dojo.destroy); |
|
|
|
// check for deepest embedded id |
|
doh.f(dojo.byId("ancFoo")); |
|
doh.is(0, dojo.query("body >").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>
|
|
|