| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <!-- |
|---|
| 4 | we use a strict-mode DTD to ensure that the box model is the same for these |
|---|
| 5 | basic tests |
|---|
| 6 | --> |
|---|
| 7 | <html> |
|---|
| 8 | <head> |
|---|
| 9 | <title>testing Core HTML/DOM/CSS/Style utils</title> |
|---|
| 10 | <style type="text/css"> |
|---|
| 11 | @import "../../resources/dojo.css"; |
|---|
| 12 | </style> |
|---|
| 13 | <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script> |
|---|
| 14 | <script type="text/javascript"> |
|---|
| 15 | require(["dojo", "doh", "dojo/domReady!"], function(dojo, doh){ |
|---|
| 16 | |
|---|
| 17 | doh.register("t", |
|---|
| 18 | [ |
|---|
| 19 | |
|---|
| 20 | function createBasic(t){ |
|---|
| 21 | // test plain creation |
|---|
| 22 | var n = dojo.create("div"); |
|---|
| 23 | dojo.byId("holder1").appendChild(n); |
|---|
| 24 | dojo.addClass(n, "testing"); |
|---|
| 25 | var q = dojo.query(".testing"); |
|---|
| 26 | |
|---|
| 27 | doh.is(1, q.length); |
|---|
| 28 | doh.is("div", n.nodeName.toLowerCase()); |
|---|
| 29 | }, |
|---|
| 30 | |
|---|
| 31 | function createAttrs(t){ |
|---|
| 32 | // test attr creation, no placement |
|---|
| 33 | var n = dojo.create('div', { |
|---|
| 34 | "class":"hasClass", |
|---|
| 35 | title:"foo", |
|---|
| 36 | style:"border:2px solid #ededed; padding:3px" |
|---|
| 37 | }); |
|---|
| 38 | // plain placement: |
|---|
| 39 | dojo.byId("holder1").appendChild(n); |
|---|
| 40 | |
|---|
| 41 | doh.t(dojo.hasClass(n, "hasClass")); |
|---|
| 42 | doh.is("foo", dojo.attr(n, "title")); |
|---|
| 43 | //FIXME: apparently attr(n, "style", "foo:bar; baz:bam;") doesn't work in IE? |
|---|
| 44 | // need to test further in attr or document. |
|---|
| 45 | //doh.is(3, dojo.style(n, "padding")); |
|---|
| 46 | }, |
|---|
| 47 | |
|---|
| 48 | function createPlace(t){ |
|---|
| 49 | // test only creation and placement, no attr |
|---|
| 50 | var n = dojo.create("div", null, dojo.body()); |
|---|
| 51 | n.innerHTML = "<p class='bar'>a</p>"; |
|---|
| 52 | var q = dojo.query("p", n); |
|---|
| 53 | |
|---|
| 54 | doh.is(1, q.length); |
|---|
| 55 | doh.t(dojo.hasClass(q[0], "bar")); |
|---|
| 56 | }, |
|---|
| 57 | |
|---|
| 58 | function createHtml(t){ |
|---|
| 59 | // test creation, placement, and attr (innerHTML) |
|---|
| 60 | var n = dojo.create("div", { |
|---|
| 61 | innerHTML: "<p class='bar2'>a</p>" |
|---|
| 62 | }, dojo.body()); |
|---|
| 63 | var q = dojo.query("p", n); |
|---|
| 64 | |
|---|
| 65 | doh.is(1, q.length); |
|---|
| 66 | doh.t(dojo.hasClass(q[0], "bar2")); |
|---|
| 67 | }, |
|---|
| 68 | |
|---|
| 69 | function createPlaceRef(t){ |
|---|
| 70 | // test creation and referenced placement, with some attr |
|---|
| 71 | var ref = dojo.query("#holder2 > li.last")[0]; |
|---|
| 72 | |
|---|
| 73 | var n = dojo.create("li", { |
|---|
| 74 | innerHTML:"middle", "class":"middleNode" |
|---|
| 75 | }, ref, "before"); |
|---|
| 76 | |
|---|
| 77 | doh.is(3, dojo.query("#holder2 li").length); |
|---|
| 78 | |
|---|
| 79 | var nn = dojo.create("li", { |
|---|
| 80 | innerHTML:"afterLast", "class":"afterLast" |
|---|
| 81 | }, ref, "after"); |
|---|
| 82 | |
|---|
| 83 | // FIXME: this is dependant on query() retaining DOM order. |
|---|
| 84 | // is that safe? nextSibling and friends are a PITA |
|---|
| 85 | var classes = ["first", "middleNode", "last", "afterLast"]; |
|---|
| 86 | var q = dojo.query("#holder2 li"); |
|---|
| 87 | doh.is(4, q.length); |
|---|
| 88 | |
|---|
| 89 | q.forEach(function(n, i){ |
|---|
| 90 | doh.is(classes[i], n.className); |
|---|
| 91 | }); |
|---|
| 92 | |
|---|
| 93 | }, |
|---|
| 94 | |
|---|
| 95 | function destroyList(t){ |
|---|
| 96 | // destroy node byId |
|---|
| 97 | dojo.destroy("holder2"); |
|---|
| 98 | doh.f(dojo.byId("holder2")); |
|---|
| 99 | // destroyed because is child of holder |
|---|
| 100 | doh.is(0, dojo.query(".first").length); |
|---|
| 101 | }, |
|---|
| 102 | |
|---|
| 103 | function createList(t){ |
|---|
| 104 | // test creation/placement of a variety of node tags |
|---|
| 105 | var es = ["div", "a", "span", "br", "table", "ul", "dd", "img", "h2"]; |
|---|
| 106 | dojo.forEach(es, function(el){ |
|---|
| 107 | dojo.create(el, null, "holder3"); |
|---|
| 108 | }); |
|---|
| 109 | var q = dojo.query(">", "holder3"); |
|---|
| 110 | doh.is(q.length, es.length); |
|---|
| 111 | |
|---|
| 112 | // destroy this list: |
|---|
| 113 | q.forEach(dojo.destroy); |
|---|
| 114 | q = dojo.query(">", "holder3"); |
|---|
| 115 | doh.is(q.length, 0); |
|---|
| 116 | |
|---|
| 117 | }, |
|---|
| 118 | |
|---|
| 119 | function destroyAll(t){ |
|---|
| 120 | var c = function(){ |
|---|
| 121 | // eg: don't destroy firebug lite in page |
|---|
| 122 | return dojo.query("body >").filter(function(n){ |
|---|
| 123 | return !dojo.hasClass(n, "firebug"); |
|---|
| 124 | }) |
|---|
| 125 | }; |
|---|
| 126 | c().forEach(dojo.destroy); |
|---|
| 127 | |
|---|
| 128 | // check for deepest embeeded id |
|---|
| 129 | doh.f(dojo.byId("ancFoo")); |
|---|
| 130 | doh.is(0, c().length); |
|---|
| 131 | }, |
|---|
| 132 | |
|---|
| 133 | function recreateOneV1(t){ |
|---|
| 134 | var n = dojo.create("h2", { |
|---|
| 135 | "class":"restored", |
|---|
| 136 | innerHTML:"<span>The End</span>" |
|---|
| 137 | }, dojo.body()); |
|---|
| 138 | |
|---|
| 139 | doh.is(1, dojo.query(".restored").length); |
|---|
| 140 | dojo.destroy(n); |
|---|
| 141 | }, |
|---|
| 142 | |
|---|
| 143 | function recreateOneV2(t){ |
|---|
| 144 | var n = dojo.place("<h2 class='restored'><span>The End</span></h2>", dojo.body()); |
|---|
| 145 | doh.is(1, dojo.query(".restored").length); |
|---|
| 146 | dojo.destroy(n); |
|---|
| 147 | }, |
|---|
| 148 | |
|---|
| 149 | function emptyDiv(t){ |
|---|
| 150 | var n = dojo.create("div", { |
|---|
| 151 | innerHTML: "1<span class='red'>2</span>3<em custom='x'>4</em>5" |
|---|
| 152 | }); |
|---|
| 153 | doh.isNot("", n.innerHTML); |
|---|
| 154 | dojo.empty(n); |
|---|
| 155 | doh.is("", n.innerHTML); |
|---|
| 156 | dojo.destroy(n); |
|---|
| 157 | }, |
|---|
| 158 | |
|---|
| 159 | function emptyTable(t){ |
|---|
| 160 | var table = dojo.create("table", null, dojo.body()), |
|---|
| 161 | tr1 = dojo.create("tr", null, table), |
|---|
| 162 | td1 = dojo.create("td", {innerHTML: "a"}, tr1), |
|---|
| 163 | td2 = dojo.create("td", {innerHTML: "b"}, tr1), |
|---|
| 164 | tr2 = dojo.create("tr", null, table), |
|---|
| 165 | td3 = dojo.create("td", {innerHTML: "c"}, tr2), |
|---|
| 166 | td4 = dojo.create("td", {innerHTML: "d"}, tr2); |
|---|
| 167 | doh.isNot("", table.innerHTML); |
|---|
| 168 | dojo.empty(table); |
|---|
| 169 | doh.is("", table.innerHTML); |
|---|
| 170 | dojo.destroy(table); |
|---|
| 171 | }, |
|---|
| 172 | |
|---|
| 173 | function toDomSpans(t){ |
|---|
| 174 | var n = dojo._toDom("<span>1</span><span>2</span>"); |
|---|
| 175 | doh.is(2, n.childNodes.length); |
|---|
| 176 | doh.is("span", n.firstChild.tagName.toLowerCase()); |
|---|
| 177 | doh.is("1", n.firstChild.innerHTML); |
|---|
| 178 | doh.is("span", n.lastChild.tagName.toLowerCase()); |
|---|
| 179 | doh.is("2", n.lastChild.innerHTML); |
|---|
| 180 | }, |
|---|
| 181 | |
|---|
| 182 | function toDomTr(t){ |
|---|
| 183 | var n = dojo._toDom("<tr><td>First!</td></tr>"); |
|---|
| 184 | doh.is("tr", n.tagName.toLowerCase()); |
|---|
| 185 | doh.is(1, n.childNodes.length); |
|---|
| 186 | doh.is("td", n.firstChild.tagName.toLowerCase()); |
|---|
| 187 | doh.is("First!", n.firstChild.innerHTML); |
|---|
| 188 | }, |
|---|
| 189 | |
|---|
| 190 | function toDomText(t){ |
|---|
| 191 | var n = dojo._toDom("Hello, world!"); |
|---|
| 192 | doh.is(3, n.nodeType); |
|---|
| 193 | doh.is("Hello, world!", n.nodeValue); |
|---|
| 194 | }, |
|---|
| 195 | |
|---|
| 196 | function toDomOption(t){ |
|---|
| 197 | var n = dojo._toDom('<option value="1">First</option>'); |
|---|
| 198 | doh.f(n.selected); |
|---|
| 199 | |
|---|
| 200 | var n = dojo._toDom('<option value="1" selected="selected">First</option>'); |
|---|
| 201 | doh.t(n.selected); |
|---|
| 202 | |
|---|
| 203 | n = dojo._toDom('<option value="1">First</option><option value="2" selected>Second</option>'); |
|---|
| 204 | doh.f(n.childNodes[0].selected); |
|---|
| 205 | doh.t(n.childNodes[1].selected); |
|---|
| 206 | }, |
|---|
| 207 | |
|---|
| 208 | function placeDivs(t){ |
|---|
| 209 | dojo.place("<p class='disposable'>2</p>", dojo.body()); |
|---|
| 210 | var n = dojo.query("body > .disposable")[0]; |
|---|
| 211 | dojo.place("<p class='disposable'>0</p><p class='disposable'>1</p>", n, "before"); |
|---|
| 212 | dojo.place("<p class='disposable'>3</p><p class='disposable'>4</p>", n, "after"); |
|---|
| 213 | dojo.place("<span>a</span>", n, "first"); |
|---|
| 214 | dojo.place("<span>z</span>", n, "last"); |
|---|
| 215 | n = dojo.query("body > .disposable"); |
|---|
| 216 | doh.is(5, n.length); |
|---|
| 217 | doh.is("0", n[0].innerHTML); |
|---|
| 218 | doh.is("1", n[1].innerHTML); |
|---|
| 219 | doh.is("3", n[3].innerHTML); |
|---|
| 220 | doh.is("4", n[4].innerHTML); |
|---|
| 221 | doh.is("<span>a</span>2<span>z</span>", n[2].innerHTML.toLowerCase()); |
|---|
| 222 | n.forEach(dojo.destroy); |
|---|
| 223 | }, |
|---|
| 224 | |
|---|
| 225 | function placeTable(t){ |
|---|
| 226 | dojo.place("<table class='disposable'><tbody></tbody></table>", dojo.body()); |
|---|
| 227 | var n = dojo.query("body > table.disposable > tbody")[0]; |
|---|
| 228 | dojo.place("<tr><td>2</td></tr>", n); |
|---|
| 229 | dojo.place("<tr><td>0</td></tr><tr><td>1</td></tr>", n, "first"); |
|---|
| 230 | dojo.place("<tr><td>3</td></tr><tr><td>4</td></tr>", n, "last"); |
|---|
| 231 | n = dojo.query("body > table.disposable tr"); |
|---|
| 232 | doh.is(5, n.length); |
|---|
| 233 | doh.is("<td>0</td>", n[0].innerHTML.toLowerCase()); |
|---|
| 234 | doh.is("<td>1</td>", n[1].innerHTML.toLowerCase()); |
|---|
| 235 | doh.is("<td>2</td>", n[2].innerHTML.toLowerCase()); |
|---|
| 236 | doh.is("<td>3</td>", n[3].innerHTML.toLowerCase()); |
|---|
| 237 | doh.is("<td>4</td>", n[4].innerHTML.toLowerCase()); |
|---|
| 238 | dojo.query("body > table.disposable").forEach(dojo.destroy); |
|---|
| 239 | }, |
|---|
| 240 | |
|---|
| 241 | function placeReplace(t){ |
|---|
| 242 | dojo.place("<p class='disposable'>2</p>", dojo.body()); |
|---|
| 243 | var n = dojo.query("body > .disposable")[0]; |
|---|
| 244 | dojo.place("<p class='disposable'>0</p><p class='disposable'>1</p>", n, "replace"); |
|---|
| 245 | n = dojo.query("body > .disposable"); |
|---|
| 246 | doh.is(2, n.length); |
|---|
| 247 | doh.is("0", n[0].innerHTML); |
|---|
| 248 | doh.is("1", n[1].innerHTML); |
|---|
| 249 | n.forEach(dojo.destroy); |
|---|
| 250 | }, |
|---|
| 251 | |
|---|
| 252 | function placeOnly(t){ |
|---|
| 253 | dojo.place("<p class='disposable'><em>1</em>2<strong>3</strong></p>", dojo.body()); |
|---|
| 254 | var n = dojo.query("body > .disposable")[0]; |
|---|
| 255 | dojo.place("<span>42</span>99", n, "only"); |
|---|
| 256 | n = dojo.query("body > .disposable"); |
|---|
| 257 | doh.is(1, n.length); |
|---|
| 258 | doh.is("<span>42</span>99", n[0].innerHTML.toLowerCase()); |
|---|
| 259 | n.forEach(dojo.destroy); |
|---|
| 260 | }, |
|---|
| 261 | |
|---|
| 262 | function placeNumber(t){ |
|---|
| 263 | var n = dojo.place("<p><em>1</em><em>2</em></p>", dojo.body()); |
|---|
| 264 | doh.is(2, n.childNodes.length); |
|---|
| 265 | dojo.place("<span>C</span>", n, 99); |
|---|
| 266 | doh.is(3, n.childNodes.length); |
|---|
| 267 | doh.is("span", n.childNodes[2].tagName.toLowerCase()); |
|---|
| 268 | doh.is("C", n.childNodes[2].innerHTML); |
|---|
| 269 | dojo.place("<span>A</span>", n, -1); |
|---|
| 270 | doh.is(4, n.childNodes.length); |
|---|
| 271 | doh.is("span", n.childNodes[0].tagName.toLowerCase()); |
|---|
| 272 | doh.is("A", n.childNodes[0].innerHTML); |
|---|
| 273 | dojo.place("<span>B</span>", n, 2); |
|---|
| 274 | doh.is(5, n.childNodes.length); |
|---|
| 275 | doh.is("span", n.childNodes[2].tagName.toLowerCase()); |
|---|
| 276 | doh.is("B", n.childNodes[2].innerHTML); |
|---|
| 277 | dojo.destroy(n); |
|---|
| 278 | } |
|---|
| 279 | ] |
|---|
| 280 | ); |
|---|
| 281 | doh.runOnLoad(); |
|---|
| 282 | }); |
|---|
| 283 | </script> |
|---|
| 284 | </head> |
|---|
| 285 | <body> |
|---|
| 286 | <h1>testing Core DOM utils</h1> |
|---|
| 287 | |
|---|
| 288 | <div id="holder1"></div> |
|---|
| 289 | <ul id="holder2"> |
|---|
| 290 | <li class="first">first</li> |
|---|
| 291 | <li class="last">last</li> |
|---|
| 292 | </ul> |
|---|
| 293 | |
|---|
| 294 | <div id="holder3"></div> |
|---|
| 295 | |
|---|
| 296 | <p id="someId"></p> |
|---|
| 297 | |
|---|
| 298 | <div> |
|---|
| 299 | <div> |
|---|
| 300 | <a id="ancFoo" href="null.html">link</a> |
|---|
| 301 | </div> |
|---|
| 302 | </div> |
|---|
| 303 | |
|---|
| 304 | </body> |
|---|
| 305 | </html> |
|---|
