558 lines
16 KiB
HTML
558 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>dojo.html.set test</title>
|
|
|
|
<script src='../../dojo.js' djConfig='isDebug:true, parseOnLoad:false'></script>
|
|
<script>
|
|
require(["dojo", "doh", "dojo/html", "dojo/NodeList-html"], function(dojo, doh){
|
|
|
|
/* test goals
|
|
* injecting content as string, node, nodelist.
|
|
* injecting exotic nodes/markup e.g. table rows, lists
|
|
* injecting whole html documents (extractContent option)
|
|
* parsing resulting content
|
|
|
|
* cleanup when setting content
|
|
*/
|
|
dojo.declare("dojo.html.test.SimpleThing", null, {
|
|
constructor: function(params, node) {
|
|
node.setAttribute("test", "ok");
|
|
}
|
|
});
|
|
|
|
dojo.declare("dojo.html.test.ParserInstantiateTester", null, {
|
|
constructor: function(params, node) {
|
|
node.setAttribute("test", "ok");
|
|
}
|
|
});
|
|
dojo.declare("dojo.html.test.DeclarativeContentSetter", dojo.html._ContentSetter, {
|
|
postscript: function() {
|
|
this.set();
|
|
}
|
|
});
|
|
|
|
|
|
dojo.addOnLoad(function(){
|
|
|
|
function ieTrimSpaceBetweenTags(str){
|
|
return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1");
|
|
}
|
|
|
|
|
|
targetNode = null;
|
|
|
|
doh.register("basicChecks", [
|
|
{
|
|
name: 'set',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.byId("pane1");
|
|
var msg = "Simple No-params Test";
|
|
console.log("targetNode has content: ", targetNode.innerHTML);
|
|
var result = "";
|
|
dojo.html.set(
|
|
targetNode,
|
|
msg
|
|
);
|
|
console.log("after set, targetNode has content: ", targetNode.innerHTML);
|
|
doh.is(msg, targetNode.innerHTML);
|
|
}
|
|
},
|
|
{
|
|
name: 'setContentWithOnEnd',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.byId("pane1");
|
|
var msg = "setContentWithOnEnd Test";
|
|
var result = false;
|
|
dojo.html.set(
|
|
targetNode,
|
|
msg,
|
|
{
|
|
onEnd: function() {
|
|
dojo.getObject(this.declaredClass).prototype.onEnd.call(this);
|
|
result = true;
|
|
}
|
|
}
|
|
);
|
|
doh.is(msg, targetNode.innerHTML);
|
|
doh.t(result);
|
|
}
|
|
},
|
|
{
|
|
name: 'setContent_with_parsing',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
|
|
dojo.html.set(
|
|
dojo.byId("pane1"),
|
|
cont,
|
|
{
|
|
postscript: function() {
|
|
this.set();
|
|
|
|
doh.t(typeof ifrs != "undefined" && ifrs.declaredClass=="dojo.html.test.SimpleThing");
|
|
doh.t(this.parseResults.length > 0);
|
|
},
|
|
parseContent: true
|
|
}
|
|
);
|
|
}
|
|
},
|
|
{
|
|
name: 'emptyElement',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
var msg = "setContentWithOnEnd Test";
|
|
var node = dojo.byId("pane1");
|
|
node.innerHTML = '<div><span>just</span>some test<br/></div>text';
|
|
var cNodes = node.childNodes.length;
|
|
|
|
dojo.html._emptyNode(dojo.byId("pane1"));
|
|
doh.t(node.childNodes.length == 0 && node.innerHTML == "");
|
|
}
|
|
},
|
|
// the following tests use the _emptyNode function, so ensure it passes before
|
|
// head-scratching over any failures that follow
|
|
{
|
|
name: 'changeContentTRHead',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.query('table#tableTest > thead > tr')[0];
|
|
|
|
var html = "<td><div>This</div>Should<u>Work</u></td>";
|
|
dojo.html.set(
|
|
targetNode,
|
|
html,
|
|
{
|
|
"testname": "basicChecks changeContentTRHead"
|
|
}
|
|
);
|
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
|
doh.is(html.toLowerCase(), res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'changeContentTHead',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.query('table#tableTest > thead')[0];
|
|
|
|
var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
|
|
dojo.html.set(
|
|
targetNode,
|
|
html,
|
|
{
|
|
"testname": "basicChecks changeContentTHead"
|
|
}
|
|
);
|
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
|
doh.is(html.toLowerCase(), res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'changeContentTRBody',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.query('table#tableTest > tbody > tr')[0];
|
|
var html = "<td><div>This</div>Should<u>Work</u></td>";
|
|
dojo.html.set(
|
|
targetNode,
|
|
html,
|
|
{
|
|
"testname": "basicChecks changeContentTRBody"
|
|
});
|
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
|
doh.is(html.toLowerCase(), res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'changeContentTBody',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.query('table#tableTest > tbody')[0];
|
|
var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
|
|
dojo.html.set(
|
|
targetNode, html,
|
|
{
|
|
"testname": "basicChecks changeContentTBody"
|
|
});
|
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
|
doh.is(html.toLowerCase(), res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'changeContentTable',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.query('table#tableTest')[0];
|
|
var html = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>";
|
|
dojo.html.set(
|
|
targetNode, html,
|
|
{
|
|
"testname": "basicChecks changeContentTable"
|
|
});
|
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
|
doh.is(html.toLowerCase(), res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'setNodeList',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
var tmpUL = dojo.create("ul");
|
|
dojo.create("li", { innerHTML: "item 1" }, tmpUL);
|
|
dojo.create("li", { innerHTML: "item 2" }, tmpUL);
|
|
console.log("ul content: ", tmpUL.innerHTML, tmpUL.childNodes.length);
|
|
targetNode = dojo.byId("pane1");
|
|
dojo.html.set(
|
|
targetNode, tmpUL.childNodes,
|
|
{
|
|
"testname": "basicChecks setNodeList"
|
|
});
|
|
var res = dojo.query("li", dojo.byId("pane1")).length;
|
|
doh.is(2, res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'setMixedContent',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
|
|
targetNode = dojo.byId("pane1");
|
|
var html = '<h4>See Jane</h4>'
|
|
+ 'Look at her <span>Run</span>!';
|
|
dojo.html.set(
|
|
targetNode, html,
|
|
{
|
|
"testname": "basicChecks setMixedContent"
|
|
});
|
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
|
doh.is(html.toLowerCase(), res);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: 'extractContent',
|
|
runTest: function(t){
|
|
console.log("basicChecks: " + this.name);
|
|
targetNode = dojo.byId("pane1");
|
|
var html = ''
|
|
+'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">'
|
|
+'<html> '
|
|
+' <head> '
|
|
+' <title> '
|
|
+' the title '
|
|
+' </title> '
|
|
+' </head> '
|
|
+' <body> '
|
|
+' <p> '
|
|
+' This is the <b>Good Stuff</b><br> '
|
|
+' </p> '
|
|
+' </body> '
|
|
+'</html> ';
|
|
|
|
dojo.html.set(
|
|
targetNode, html,
|
|
{
|
|
"testname": "basicChecks changeContentTable",
|
|
extractContent: true
|
|
});
|
|
doh.t(targetNode.innerHTML.indexOf("title") == -1);
|
|
doh.t(dojo.query("*", targetNode).length == 3);
|
|
},
|
|
tearDown: function(){
|
|
dojo.html._emptyNode(targetNode);
|
|
}
|
|
}
|
|
]);
|
|
doh.register("nodelistExtension", [
|
|
{
|
|
name: 'nodelistHtml',
|
|
runTest: function(t){
|
|
console.log("nodelistExtension: " + this.name);
|
|
|
|
dojo.query(".zork").html("<li dojoType='dojo.html.test.ParserInstantiateTester'>1</li><li dojoType='dojo.html.test.ParserInstantiateTester'>2</li><li dojoType='dojo.html.test.ParserInstantiateTester'>3</li>",
|
|
{
|
|
parseContent: true,
|
|
onBegin: function() {
|
|
this.content = this.content.replace(/([0-9])/g, "MOOO");
|
|
this.inherited("onBegin", arguments);
|
|
}
|
|
}).removeClass("notdone").addClass("done");
|
|
|
|
var liNodes = dojo.query(".zork > li");
|
|
|
|
// test to make sure three li's were added to class="zork" node (3x 3 set li's)
|
|
doh.is(9, liNodes.length);
|
|
|
|
// test the innerHTML's got replaced in our onBegin
|
|
doh.t( liNodes.every(function(n) { return n.innerHTML.match(/MOOO/) }) );
|
|
console.log(this.name + ": innerHTML.match subtest was ok");
|
|
|
|
// test the parent elements got the correct className
|
|
doh.t( dojo.query(".zork").every(function(n) { return n.className == "zork done"; }) );
|
|
console.log(this.name + ": li.className subtest was ok");
|
|
|
|
// and test the parser correctly created object from the child nodes
|
|
// ...they should all have a test attribute now
|
|
doh.t( liNodes.every(function(n) { return n.getAttribute("test") == "ok"; }) );
|
|
console.log(this.name + ": Tester instantiation subtest(getAttribute) was ok");
|
|
|
|
},
|
|
tearDown: function(){
|
|
// dojo.html._emptyNode(targetNode);
|
|
}
|
|
},
|
|
{
|
|
name: "nodeListSimple",
|
|
runTest: function(t){
|
|
var txt = "foo";
|
|
dojo.query("#simpleText").html("<p>"+txt+"</p>");
|
|
|
|
// check if its there at all
|
|
var len = dojo.query("#simpleText p").length;
|
|
doh.is(1, len);
|
|
|
|
// check the inner html is right:
|
|
var p = dojo.query("#simpleText p")[0];
|
|
doh.t( p && p.innerHTML == txt );
|
|
}
|
|
}
|
|
]);
|
|
doh.register("fromMarkup", [
|
|
{
|
|
name: 'contentOpFromMarkup',
|
|
runTest: function(t){
|
|
console.log("fromMarkup: " + this.name);
|
|
|
|
dojo.parser.parse("markupSetContentOp");
|
|
doh.t(dojo.byId("markupPane").innerHTML == "markupSetContentOp: new node content");
|
|
},
|
|
tearDown: function(){
|
|
dojo.byId("markupPane").innerHTML = "initial content";
|
|
}
|
|
},
|
|
{
|
|
name: 'extendedContentOpFromMarkup',
|
|
runTest: function(t){
|
|
console.log("fromMarkup: " + this.name);
|
|
|
|
dojo.parser.parse("markupSetContentOpX");
|
|
|
|
doh.t(dojo.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase());
|
|
},
|
|
tearDown: function(){
|
|
dojo.byId("markupPane").innerHTML = "initial content";
|
|
}
|
|
}
|
|
]);
|
|
doh.register("reuse", [
|
|
{
|
|
name: 'ContentSetterReUse',
|
|
runTest: function(t){
|
|
console.log("fromMarkup: " + this.name);
|
|
|
|
targetNode = dojo.byId('pane1');
|
|
var args = [
|
|
[
|
|
"simple"
|
|
],
|
|
[
|
|
'<div dojoType="dojo.html.test.SimpleThing" jsId="id00">parsed content</div>',
|
|
{
|
|
parseContent: true
|
|
}
|
|
],
|
|
[
|
|
'<div dojoType="dojo.html.test.SimpleThing" jsId="id01">parsed content</div>',
|
|
{
|
|
parseContent: true
|
|
}
|
|
]
|
|
];
|
|
var setter = new dojo.html._ContentSetter({
|
|
node: targetNode
|
|
});
|
|
dojo.forEach(args, function(applyArgs) {
|
|
setter.node = targetNode;
|
|
setter.set.apply(setter, applyArgs);
|
|
setter.tearDown();
|
|
});
|
|
doh.t(id00 && id01);
|
|
// check we cleaned up after ourselves
|
|
doh.f(setter.parseResults);
|
|
},
|
|
tearDown: function(){
|
|
dojo.byId("markupPane").innerHTML = "initial content";
|
|
}
|
|
}
|
|
]);
|
|
|
|
// Test specification of inherited attributes dir, lang, etc.
|
|
var handle;
|
|
doh.register("inherited", [
|
|
{
|
|
name: 'unspecified',
|
|
runTest: function(t){
|
|
var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
|
|
|
|
var parserCalled, inherited;
|
|
handle = dojo.connect(dojo.parser, "parse", function(args){
|
|
parserCalled = true;
|
|
inherited = args.inherited;
|
|
});
|
|
|
|
dojo.html.set(
|
|
dojo.byId("pane1"),
|
|
cont,
|
|
{
|
|
parseContent: true
|
|
}
|
|
);
|
|
doh.t(parserCalled, "parser was called");
|
|
doh.f("dir" in inherited, "no dir specified");
|
|
doh.f("lang" in inherited, "no lang specified");
|
|
},
|
|
tearDown: function(){
|
|
dojo.disconnect(handle);
|
|
}
|
|
},
|
|
{
|
|
name: 'specified',
|
|
runTest: function(t){
|
|
var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
|
|
|
|
var parserCalled, inherited;
|
|
handle = dojo.connect(dojo.parser, "parse", function(args){
|
|
parserCalled = true;
|
|
inherited = args.inherited;
|
|
});
|
|
|
|
dojo.html.set(
|
|
dojo.byId("pane1"),
|
|
cont,
|
|
{
|
|
dir: "rtl",
|
|
lang: "it_it",
|
|
textDir: "ltr",
|
|
parseContent: true
|
|
}
|
|
);
|
|
doh.t(parserCalled, "parser was called");
|
|
doh.is("rtl", inherited.dir, "dir");
|
|
doh.is("it_it", inherited.lang, "lang");
|
|
doh.is("ltr", inherited.textDir, "textdir");
|
|
},
|
|
tearDown: function(){
|
|
dojo.disconnect(handle);
|
|
}
|
|
}
|
|
|
|
]);
|
|
|
|
doh.run();
|
|
});
|
|
});
|
|
</script>
|
|
<style>
|
|
@import "../../../dojo/resources/dojo.css";
|
|
|
|
.box {
|
|
border: 1px solid black;
|
|
height: 190px;
|
|
width: 80%;
|
|
overflow: auto;
|
|
}
|
|
.zork {
|
|
width: 200px;
|
|
margin: 10px;
|
|
list-style-type: none;
|
|
}
|
|
.notdone {
|
|
color: #999; background-color: #ccc;
|
|
}
|
|
.done {
|
|
color: #fff; background-color: #090;
|
|
}
|
|
.done li {
|
|
border: 1px; background-color: orange;
|
|
width: 180px;
|
|
}
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body class='tundra'>
|
|
<h1>dojo.html.set</h1>
|
|
|
|
<div id="pane1"></div>
|
|
<div id="pane2"></div>
|
|
<table id='tableTest' class='box'>
|
|
<thead>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
<tbody>
|
|
</table>
|
|
<ul class="zork notdone">initial content</ul>
|
|
<ul class="zork notdone">initial content</ul>
|
|
<ul class="zork notdone">initial content</ul>
|
|
|
|
<div id="markupPane">initial content</div>
|
|
<div id="markupSetContentOp">
|
|
<div dojoType="dojo.html.test.DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div>
|
|
</div>
|
|
<div id="markupSetContentOpX">
|
|
<div dojoType="dojo.html.test.DeclarativeContentSetter" jsId="markupSetContentOpX_setter" node="markupPane" content="markupSetContentOpX: new node content">
|
|
<script type="dojo/method" event="onBegin">
|
|
this.content = this.content.toUpperCase();
|
|
console.log(this.id + ", made my content look like this:" + this.content);
|
|
</script>
|
|
<script type="dojo/method" event="onFoo">
|
|
console.log("dojo/method supplied onBegin");
|
|
this.content = this.content.toUpperCase();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div id="another">
|
|
<div id="myTest9" dojoType="dojo.html.test.DeclarativeContentSetter">
|
|
Some content
|
|
<script type="dojo/method">
|
|
console.log("parsed me!");
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<h1 id="simpleText">test</h1>
|
|
</body>
|
|
</html>
|