| 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" |
|---|
| 14 | src="../../dojo.js" |
|---|
| 15 | djConfig="isDebug: true"></script> |
|---|
| 16 | <script type="text/javascript"> |
|---|
| 17 | dojo.require("doh.runner"); |
|---|
| 18 | |
|---|
| 19 | function getIframeDocument(/*DOMNode*/iframeNode){ |
|---|
| 20 | //summary: Returns the document object associated with the iframe DOM Node argument. |
|---|
| 21 | var doc = iframeNode.contentDocument || // W3 |
|---|
| 22 | ( |
|---|
| 23 | (iframeNode.contentWindow)&&(iframeNode.contentWindow.document) |
|---|
| 24 | ) || // IE |
|---|
| 25 | ( |
|---|
| 26 | (iframeNode.name)&&(documendoh.frames[iframeNode.name])&& |
|---|
| 27 | (documendoh.frames[iframeNode.name].document) |
|---|
| 28 | ) || null; |
|---|
| 29 | return doc; |
|---|
| 30 | } |
|---|
| 31 | |
|---|
| 32 | dojo.addOnLoad(function(){ |
|---|
| 33 | doh.register("t", |
|---|
| 34 | [ |
|---|
| 35 | "doh.is(null, dojo.byId('nonExistantId'));", |
|---|
| 36 | "doh.is(null, dojo.byId(null));", |
|---|
| 37 | "doh.is(null, dojo.byId(''));", |
|---|
| 38 | "doh.is(undefined, dojo.byId(undefined));", |
|---|
| 39 | |
|---|
| 40 | "doh.is(100, dojo.marginBox('sq100').w);", |
|---|
| 41 | "doh.is(100, dojo.marginBox('sq100').h);", |
|---|
| 42 | |
|---|
| 43 | "doh.is(120, dojo.marginBox('sq100margin10').w);", |
|---|
| 44 | "doh.is(120, dojo.marginBox('sq100margin10').h);", |
|---|
| 45 | "doh.is(100, dojo.contentBox('sq100margin10').w);", |
|---|
| 46 | "doh.is(100, dojo.contentBox('sq100margin10').h);", |
|---|
| 47 | |
|---|
| 48 | "doh.is(140, dojo.marginBox('sq100margin10pad10').w);", |
|---|
| 49 | "doh.is(140, dojo.marginBox('sq100margin10pad10').h);", |
|---|
| 50 | |
|---|
| 51 | "doh.is(120, dojo.marginBox('sq100pad10').w);", |
|---|
| 52 | "doh.is(120, dojo.marginBox('sq100pad10').h);", |
|---|
| 53 | |
|---|
| 54 | "doh.is(110, dojo.marginBox('sq100ltpad10').w);", |
|---|
| 55 | "doh.is(110, dojo.marginBox('sq100ltpad10').h);", |
|---|
| 56 | "doh.is(100, dojo.contentBox('sq100ltpad10').w);", |
|---|
| 57 | "doh.is(100, dojo.contentBox('sq100ltpad10').h);", |
|---|
| 58 | |
|---|
| 59 | "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);", |
|---|
| 60 | "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);", |
|---|
| 61 | |
|---|
| 62 | "doh.is(120, dojo.marginBox('sq100border10').w);", |
|---|
| 63 | "doh.is(120, dojo.marginBox('sq100border10').h);", |
|---|
| 64 | "doh.is(100, dojo.contentBox('sq100border10').w);", |
|---|
| 65 | "doh.is(100, dojo.contentBox('sq100border10').h);", |
|---|
| 66 | |
|---|
| 67 | "doh.is(140, dojo.marginBox('sq100border10margin10').w);", |
|---|
| 68 | "doh.is(140, dojo.marginBox('sq100border10margin10').h);", |
|---|
| 69 | "doh.is(100, dojo.contentBox('sq100border10margin10').w);", |
|---|
| 70 | "doh.is(100, dojo.contentBox('sq100border10margin10').h);", |
|---|
| 71 | |
|---|
| 72 | "doh.is(160, dojo.marginBox('sq100border10margin10pad10').w);", |
|---|
| 73 | "doh.is(160, dojo.marginBox('sq100border10margin10pad10').h);", |
|---|
| 74 | "doh.is(100, dojo.contentBox('sq100border10margin10pad10').w);", |
|---|
| 75 | "doh.is(100, dojo.contentBox('sq100border10margin10pad10').h);", |
|---|
| 76 | |
|---|
| 77 | // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge |
|---|
| 78 | // "doh.is(100, dojo.marginBox('sq100nopos').w);", |
|---|
| 79 | "doh.is(100, dojo.marginBox('sq100nopos').h);", |
|---|
| 80 | |
|---|
| 81 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);", |
|---|
| 82 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);", |
|---|
| 83 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);", |
|---|
| 84 | "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);", |
|---|
| 85 | |
|---|
| 86 | "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);", |
|---|
| 87 | "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);", |
|---|
| 88 | "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);", |
|---|
| 89 | "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);", |
|---|
| 90 | |
|---|
| 91 | "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);", |
|---|
| 92 | "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);", |
|---|
| 93 | "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);", |
|---|
| 94 | "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);", |
|---|
| 95 | |
|---|
| 96 | "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);", |
|---|
| 97 | "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);", |
|---|
| 98 | "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);", |
|---|
| 99 | "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);", |
|---|
| 100 | |
|---|
| 101 | function coordsBasic(t){ |
|---|
| 102 | var pos = dojo.coords("sq100", false); |
|---|
| 103 | // console.debug(pos); |
|---|
| 104 | doh.is(100, pos.x); |
|---|
| 105 | doh.is(100, pos.y); |
|---|
| 106 | doh.is(100, pos.w); |
|---|
| 107 | doh.is(100, pos.h); |
|---|
| 108 | }, |
|---|
| 109 | function coordsMargin(t){ |
|---|
| 110 | // coords is getting us the margin-box location, is |
|---|
| 111 | // this right? |
|---|
| 112 | var pos = dojo.coords("sq100margin10", false); |
|---|
| 113 | doh.is(260, pos.x); |
|---|
| 114 | doh.is(110, pos.y); |
|---|
| 115 | doh.is(120, pos.w); |
|---|
| 116 | doh.is(120, pos.h); |
|---|
| 117 | }, |
|---|
| 118 | function coordsBorder(t){ |
|---|
| 119 | var pos = dojo.coords("sq100border10", false); |
|---|
| 120 | doh.is(100, pos.x); |
|---|
| 121 | doh.is(400, pos.y); |
|---|
| 122 | }, |
|---|
| 123 | function sq100nopos(t){ |
|---|
| 124 | var pos = dojo.coords("sq100nopos", false); |
|---|
| 125 | // console.debug(pos); |
|---|
| 126 | doh.is(0, pos.x); |
|---|
| 127 | doh.t(pos.y > 0); |
|---|
| 128 | // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge |
|---|
| 129 | // doh.is(100, pos.w); |
|---|
| 130 | doh.is(100, pos.h); |
|---|
| 131 | }, |
|---|
| 132 | function coordsScrolled(t) { |
|---|
| 133 | var s = document.createElement('div'); |
|---|
| 134 | var c = document.createElement('div'); |
|---|
| 135 | document.body.appendChild(s); |
|---|
| 136 | s.appendChild(c); |
|---|
| 137 | var x=257, y= 285; |
|---|
| 138 | with (s.style) { |
|---|
| 139 | position = 'absolute'; |
|---|
| 140 | overflow = 'scroll'; |
|---|
| 141 | border = "10px solid black"; |
|---|
| 142 | } |
|---|
| 143 | dojo._setMarginBox(s, x, y, 100, 100); |
|---|
| 144 | dojo._setMarginBox(c, 0, 0, 500, 500); |
|---|
| 145 | s.scrollTop = 200; |
|---|
| 146 | var pos = dojo.coords(s, true); |
|---|
| 147 | doh.is(x, pos.x); |
|---|
| 148 | doh.is(y, pos.y); |
|---|
| 149 | }, |
|---|
| 150 | "doh.is(1, dojo.style('sq100nopos', 'opacity'));", |
|---|
| 151 | "doh.is(0.1, dojo.style('sq100nopos', 'opacity', 0.1));", |
|---|
| 152 | "doh.is(0.8, dojo.style('sq100nopos', 'opacity', 0.8));", |
|---|
| 153 | function styleObject(){ |
|---|
| 154 | dojo.style('sq100nopos', { 'opacity': 0.1 }); |
|---|
| 155 | doh.is(0.1, dojo.style('sq100nopos', 'opacity')); |
|---|
| 156 | dojo.style('sq100nopos', { 'opacity': 0.8 }); |
|---|
| 157 | doh.is(0.8, dojo.style('sq100nopos', 'opacity')); |
|---|
| 158 | }, |
|---|
| 159 | "doh.is('static', dojo.style('sq100nopos', 'position'));", |
|---|
| 160 | function getBgcolor(t){ |
|---|
| 161 | var bgc = dojo.style('sq100nopos', 'backgroundColor'); |
|---|
| 162 | doh.t((bgc == "rgb(0, 0, 0)")||(bgc == "black")||(bgc == "#000000")); |
|---|
| 163 | }, |
|---|
| 164 | function isDescendant(t){ |
|---|
| 165 | doh.t(dojo.isDescendant("sq100", dojo.body())); |
|---|
| 166 | doh.t(dojo.isDescendant("sq100", dojo.doc)); |
|---|
| 167 | doh.t(dojo.isDescendant("sq100", "sq100")); |
|---|
| 168 | doh.t(dojo.isDescendant(dojo.byId("sq100"), "sq100")); |
|---|
| 169 | doh.f(dojo.isDescendant("sq100", dojo.byId("sq100").firstChild)); |
|---|
| 170 | doh.t(dojo.isDescendant(dojo.byId("sq100").firstChild, "sq100")); |
|---|
| 171 | }, |
|---|
| 172 | function isDescendantIframe(t){ |
|---|
| 173 | var bif = dojo.byId("blah"); |
|---|
| 174 | getIframeDocument(bif).write("<html><body><div id='subDiv'></div></body></html>"); |
|---|
| 175 | getIframeDocument(bif).close(); |
|---|
| 176 | // this test barely makes sense. disabling it for now. |
|---|
| 177 | // doh.t(dojo.isDescendant(bif.contentDocument.getElementById("subDiv"), bif.parentNode)); |
|---|
| 178 | var subDiv = getIframeDocument(bif).getElementById("subDiv"); |
|---|
| 179 | doh.t(dojo.isDescendant(subDiv, subDiv)); |
|---|
| 180 | doh.t(dojo.isDescendant(subDiv, subDiv.parentNode)); |
|---|
| 181 | doh.f(dojo.isDescendant(subDiv.parentNode, subDiv)); |
|---|
| 182 | |
|---|
| 183 | }, |
|---|
| 184 | function testClassFunctions(t){ |
|---|
| 185 | var node = dojo.byId("sq100"); |
|---|
| 186 | dojo.addClass(node, "a"); |
|---|
| 187 | doh.is("a", node.className, "class is a"); |
|---|
| 188 | dojo.removeClass(node, "c"); |
|---|
| 189 | doh.is("a", node.className, "class is still a"); |
|---|
| 190 | t.assertTrue(dojo.hasClass(node, "a"), "class is a, test for a"); |
|---|
| 191 | t.assertFalse(dojo.hasClass(node, "b"), "class is a, test for b"); |
|---|
| 192 | dojo.addClass(node, "b"); |
|---|
| 193 | doh.is("a b", node.className, "class is a b"); |
|---|
| 194 | t.assertTrue(dojo.hasClass(node, "a"), "class is a b, test for a"); |
|---|
| 195 | t.assertTrue(dojo.hasClass(node, "b"), "class is a b, test for b"); |
|---|
| 196 | dojo.removeClass(node, "a"); |
|---|
| 197 | doh.is("b", node.className, "class is b"); |
|---|
| 198 | t.assertFalse(dojo.hasClass(node, "a"), "class is b, test for a"); |
|---|
| 199 | t.assertTrue(dojo.hasClass(node, "b"), "class is b, test for b"); |
|---|
| 200 | dojo.toggleClass(node, "a"); |
|---|
| 201 | doh.is("b a", node.className, "class is b a"); |
|---|
| 202 | t.assertTrue(dojo.hasClass(node, "a"), "class is b a, test for a"); |
|---|
| 203 | t.assertTrue(dojo.hasClass(node, "b"), "class is b a, test for b"); |
|---|
| 204 | dojo.toggleClass(node, "a"); |
|---|
| 205 | doh.is("b", node.className, "class is b (again)"); |
|---|
| 206 | t.assertFalse(dojo.hasClass(node, "a"), "class is b (again), test for a"); |
|---|
| 207 | t.assertTrue(dojo.hasClass(node, "b"), "class is b (again), test for b"); |
|---|
| 208 | dojo.toggleClass(node, "b"); |
|---|
| 209 | doh.is("", node.className, "class is blank"); |
|---|
| 210 | t.assertFalse(dojo.hasClass(node, "a"), "class is blank, test for a"); |
|---|
| 211 | t.assertFalse(dojo.hasClass(node, "b"), "class is blank, test for b"); |
|---|
| 212 | dojo.removeClass(node, "c"); |
|---|
| 213 | t.assertTrue(!node.className, "no class"); |
|---|
| 214 | }, |
|---|
| 215 | function getTypeInput(t){ |
|---|
| 216 | doh.f(dojo.hasAttr(dojo.byId("input-no-type"), "type")); |
|---|
| 217 | doh.is(null, dojo.attr(dojo.byId("input-no-type"), "type")); |
|---|
| 218 | doh.t(dojo.hasAttr(dojo.byId("input-with-type"), "type")); |
|---|
| 219 | doh.is("checkbox", dojo.attr(dojo.byId("input-with-type"), "type")); |
|---|
| 220 | }, |
|---|
| 221 | function getWithString(t){ |
|---|
| 222 | doh.f(dojo.hasAttr("input-no-type", "type")); |
|---|
| 223 | doh.is(null, dojo.attr("input-no-type", "type")); |
|---|
| 224 | doh.t(dojo.hasAttr("input-with-type", "type")); |
|---|
| 225 | doh.is("checkbox", dojo.attr("input-with-type", "type")); |
|---|
| 226 | }, |
|---|
| 227 | function attrId(t){ |
|---|
| 228 | doh.t(dojo.hasAttr("div-no-tabindex", "id")); |
|---|
| 229 | doh.is("div-no-tabindex", dojo.attr("div-no-tabindex", "id")); |
|---|
| 230 | var div = document.createElement("div"); |
|---|
| 231 | doh.f(dojo.hasAttr(div, "id")); |
|---|
| 232 | doh.is(null, dojo.attr(div, "id")); |
|---|
| 233 | dojo.attr(div, "id", "attrId1"); |
|---|
| 234 | doh.t(dojo.hasAttr(div, "id")); |
|---|
| 235 | doh.is("attrId1", dojo.attr(div, "id")); |
|---|
| 236 | dojo.removeAttr(div, "id"); |
|---|
| 237 | doh.f(dojo.hasAttr(div, "id")); |
|---|
| 238 | doh.is(null, dojo.attr(div, "id")); |
|---|
| 239 | }, |
|---|
| 240 | function getTabindexDiv(t){ |
|---|
| 241 | doh.f(dojo.hasAttr("div-no-tabindex", "tabIndex")); |
|---|
| 242 | doh.t(dojo.attr("div-no-tabindex", "tabIndex") <= 0); |
|---|
| 243 | doh.t(dojo.hasAttr("div-tabindex-minus-1", "tabIndex")); |
|---|
| 244 | if(!dojo.isOpera){ |
|---|
| 245 | // Opera (at least <= 9) does not support tabIndex="-1" |
|---|
| 246 | doh.is(-1, dojo.attr("div-tabindex-minus-1", "tabIndex")); |
|---|
| 247 | } |
|---|
| 248 | doh.t(dojo.hasAttr("div-tabindex-0", "tabIndex")); |
|---|
| 249 | doh.is(0, dojo.attr("div-tabindex-0", "tabIndex")); |
|---|
| 250 | doh.is(1, dojo.attr("div-tabindex-1", "tabIndex")); |
|---|
| 251 | }, |
|---|
| 252 | function getTabindexInput(t){ |
|---|
| 253 | if(!dojo.isIE || dojo.isIE >= 8){ |
|---|
| 254 | // IE6/7 always reports tabIndex as defined |
|---|
| 255 | doh.f(dojo.hasAttr("input-no-tabindex", "tabIndex")); |
|---|
| 256 | doh.f(dojo.attr("input-no-tabindex", "tabIndex")); |
|---|
| 257 | } |
|---|
| 258 | doh.t(dojo.hasAttr("input-tabindex-minus-1", "tabIndex")); |
|---|
| 259 | if(!dojo.isOpera){ |
|---|
| 260 | // Opera (at least <= 9) does not support tabIndex="-1" |
|---|
| 261 | doh.is(-1, dojo.attr("input-tabindex-minus-1", "tabIndex")); |
|---|
| 262 | } |
|---|
| 263 | doh.t(dojo.hasAttr("input-tabindex-0", "tabIndex")); |
|---|
| 264 | doh.is(0, dojo.attr("input-tabindex-0", "tabIndex")); |
|---|
| 265 | doh.is(1, dojo.attr("input-tabindex-1", "tabIndex")); |
|---|
| 266 | }, |
|---|
| 267 | function setTabindexDiv(t){ |
|---|
| 268 | var div = document.createElement("div"); |
|---|
| 269 | doh.is(null, dojo.attr(div, "tabIndex")); |
|---|
| 270 | dojo.attr(div, "tabIndex", -1); |
|---|
| 271 | if(!dojo.isOpera){ |
|---|
| 272 | // Opera (at least <= 9) does not support tabIndex="-1" |
|---|
| 273 | doh.is(-1, dojo.attr(div, "tabIndex")); |
|---|
| 274 | } |
|---|
| 275 | dojo.attr(div, "tabIndex", 0); |
|---|
| 276 | doh.is(0, dojo.attr(div, "tabIndex")); |
|---|
| 277 | dojo.attr(div, "tabIndex", 1); |
|---|
| 278 | doh.is(1, dojo.attr(div, "tabIndex")); |
|---|
| 279 | }, |
|---|
| 280 | function setTabindexInput(t){ |
|---|
| 281 | var input = document.createElement("input"); |
|---|
| 282 | doh.t(dojo.attr(input, "tabIndex") <= 0); |
|---|
| 283 | dojo.attr(input, "tabIndex", -1); |
|---|
| 284 | if(!dojo.isOpera){ |
|---|
| 285 | // Opera (at least <= 9) does not support tabIndex="-1" |
|---|
| 286 | doh.is(-1, dojo.attr(input, "tabIndex")); |
|---|
| 287 | } |
|---|
| 288 | dojo.attr(input, "tabIndex", 0); |
|---|
| 289 | doh.is(0, dojo.attr(input, "tabIndex")); |
|---|
| 290 | dojo.attr(input, "tabIndex", 1); |
|---|
| 291 | doh.is(1, dojo.attr(input, "tabIndex")); |
|---|
| 292 | }, |
|---|
| 293 | function removeTabindexFromDiv(t){ |
|---|
| 294 | var div = document.createElement("div"); |
|---|
| 295 | dojo.attr(div, "tabIndex", 1); |
|---|
| 296 | doh.is(1, dojo.attr(div, "tabIndex")); |
|---|
| 297 | dojo.removeAttr(div, "tabIndex"); |
|---|
| 298 | doh.is(null, dojo.attr(div, "tabIndex")); |
|---|
| 299 | }, |
|---|
| 300 | function removeDisabledFromInput(t){ |
|---|
| 301 | var input = document.createElement("input"); |
|---|
| 302 | dojo.attr(input, "disabled", true); |
|---|
| 303 | doh.t(dojo.attr(input, "disabled")); |
|---|
| 304 | dojo.removeAttr(input, "disabled"); |
|---|
| 305 | doh.f(dojo.attr(input, "disabled")); |
|---|
| 306 | }, |
|---|
| 307 | function removeTabindexFromInput(t){ |
|---|
| 308 | var input = document.createElement("input"); |
|---|
| 309 | dojo.attr(input, "tabIndex", 1); |
|---|
| 310 | doh.is(1, dojo.attr(input, "tabIndex")); |
|---|
| 311 | dojo.removeAttr(input, "tabIndex"); |
|---|
| 312 | doh.is(null, dojo.attr(input, "tabIndex")); |
|---|
| 313 | }, |
|---|
| 314 | function setReadonlyInput(t){ |
|---|
| 315 | var input = document.createElement("input"); |
|---|
| 316 | doh.f(dojo.attr(input, "readonly")); |
|---|
| 317 | dojo.attr(input, "readonly", true); |
|---|
| 318 | doh.is(true, dojo.attr(input, "readonly")); |
|---|
| 319 | dojo.attr(input, "readonly", false); |
|---|
| 320 | doh.is(false, dojo.attr(input, "readonly")); |
|---|
| 321 | }, |
|---|
| 322 | function attr_map(t){ |
|---|
| 323 | var input = document.createElement("input"); |
|---|
| 324 | var ctr= 0; |
|---|
| 325 | dojo.attr(input, { |
|---|
| 326 | "class": "thinger blah", |
|---|
| 327 | "tabIndex": 1, |
|---|
| 328 | "type": "text", |
|---|
| 329 | "onfocus": function(e){ |
|---|
| 330 | ctr++; |
|---|
| 331 | } |
|---|
| 332 | }); |
|---|
| 333 | dojo.body().appendChild(input); |
|---|
| 334 | doh.is(1, dojo.attr(input, "tabIndex"), "tabIndex"); |
|---|
| 335 | if(!dojo.isIE || dojo.isIE > 7){ |
|---|
| 336 | // IE6/7 treats type="text" as missing, even if it was |
|---|
| 337 | // explicitly specified |
|---|
| 338 | doh.is("text", dojo.attr(input, "type"), "type"); |
|---|
| 339 | } |
|---|
| 340 | doh.is(0, ctr, "onfocus ctr == 0"); |
|---|
| 341 | doh.t(dojo.hasClass(input, "thinger"), "hasClass of thinger"); |
|---|
| 342 | doh.t(dojo.hasClass(input, "blah"), "hasClass of blah"); |
|---|
| 343 | var def = new doh.Deferred(); |
|---|
| 344 | input.focus(); |
|---|
| 345 | setTimeout(function(){ |
|---|
| 346 | doh.is(1, ctr, "onfocus ctr == 1"); |
|---|
| 347 | input.blur(); |
|---|
| 348 | input.focus(); |
|---|
| 349 | setTimeout(function(){ |
|---|
| 350 | doh.is(2, ctr, "onfocus ctr == 2"); |
|---|
| 351 | def.callback(true); |
|---|
| 352 | }, 10); |
|---|
| 353 | }, 10); |
|---|
| 354 | return def; |
|---|
| 355 | }, |
|---|
| 356 | function attr_reconnect(t){ |
|---|
| 357 | var input = document.createElement("input"); |
|---|
| 358 | var ctr = 0; |
|---|
| 359 | dojo.attr(input, "type", "text"); |
|---|
| 360 | dojo.attr(input, "onfocus", function(e){ ctr++; }); |
|---|
| 361 | dojo.attr(input, "onfocus", function(e){ ctr++; }); |
|---|
| 362 | dojo.attr(input, "onfocus", function(e){ ctr++; }); |
|---|
| 363 | dojo.body().appendChild(input); |
|---|
| 364 | if(!dojo.isIE || dojo.isIE > 7){ |
|---|
| 365 | // IE6/7 treats type="text" as missing, even if it was |
|---|
| 366 | // explicitly specified |
|---|
| 367 | doh.is("text", dojo.attr(input, "type")); |
|---|
| 368 | } |
|---|
| 369 | doh.is(0, ctr); |
|---|
| 370 | var def = new doh.Deferred(); |
|---|
| 371 | input.focus(); |
|---|
| 372 | setTimeout(function(){ |
|---|
| 373 | doh.is(1, ctr); |
|---|
| 374 | input.blur(); |
|---|
| 375 | input.focus(); |
|---|
| 376 | setTimeout(function(){ |
|---|
| 377 | doh.is(2, ctr); |
|---|
| 378 | def.callback(true); |
|---|
| 379 | }, 10); |
|---|
| 380 | }, 10); |
|---|
| 381 | return def; |
|---|
| 382 | }, |
|---|
| 383 | function attrSpecials(){ |
|---|
| 384 | var node = document.createElement("div"); |
|---|
| 385 | dojo.body().appendChild(node); |
|---|
| 386 | dojo.attr(node, { |
|---|
| 387 | style: { |
|---|
| 388 | opacity: 0.5, |
|---|
| 389 | width: "30px", |
|---|
| 390 | border: "1px solid black" |
|---|
| 391 | } |
|---|
| 392 | }); |
|---|
| 393 | doh.is(0.5, dojo.style(node, "opacity")); |
|---|
| 394 | doh.is(30, dojo.style(node, "width")); |
|---|
| 395 | doh.is(1, dojo.style(node, "borderWidth")); |
|---|
| 396 | dojo.attr(node, { |
|---|
| 397 | innerHTML: "howdy!" |
|---|
| 398 | }); |
|---|
| 399 | doh.is("howdy!", node.innerHTML); |
|---|
| 400 | doh.is("howdy!", dojo.attr(node, "innerHTML")); |
|---|
| 401 | dojo.attr(node, "innerHTML", "<span>howdy!</span>"); |
|---|
| 402 | doh.is(1, node.firstChild.nodeType); |
|---|
| 403 | doh.is("span", node.firstChild.nodeName.toLowerCase()); |
|---|
| 404 | doh.is("<span>howdy!</span>", node.innerHTML.toLowerCase()); |
|---|
| 405 | doh.is("<span>howdy!</span>", dojo.attr(node, "innerHTML").toLowerCase()); |
|---|
| 406 | }, |
|---|
| 407 | function testLabelForAttr(t){ |
|---|
| 408 | // create label with no for attribute make sure requesting |
|---|
| 409 | // it as for and html for returns null |
|---|
| 410 | var label = document.createElement("label"); |
|---|
| 411 | if(!dojo.isIE){ |
|---|
| 412 | // IE always assumes that "for" is present |
|---|
| 413 | doh.f(dojo.attr(label, "for")); |
|---|
| 414 | doh.f(dojo.attr(label, "htmlFor")); |
|---|
| 415 | } |
|---|
| 416 | // add a for attribute and test that can get by requesting for |
|---|
| 417 | dojo.attr(label, "for", "testId"); |
|---|
| 418 | doh.is("testId", dojo.attr(label, "for")); |
|---|
| 419 | // add as htmlFor and make sure it is returned when requested as htmlFor |
|---|
| 420 | var label2 = document.createElement("label"); |
|---|
| 421 | dojo.attr(label2, "htmlFor", "testId2"); |
|---|
| 422 | doh.is("testId2", dojo.attr(label2, "htmlFor")); |
|---|
| 423 | // check than when requested as for or htmlFor attribute is found |
|---|
| 424 | doh.t(dojo.hasAttr(label, "for")); |
|---|
| 425 | doh.t(dojo.hasAttr(label2, "htmlfor")); |
|---|
| 426 | // test from markup |
|---|
| 427 | var labelNoFor = dojo.byId("label-no-for"); |
|---|
| 428 | // make sure testing if has attribute using for or htmlFor |
|---|
| 429 | // both return null when no value set |
|---|
| 430 | if(!dojo.isIE){ |
|---|
| 431 | // IE always assumes that "for" is present |
|---|
| 432 | doh.f(dojo.hasAttr(labelNoFor, "for")); |
|---|
| 433 | doh.f(dojo.hasAttr(labelNoFor, "htmlFor")); |
|---|
| 434 | } |
|---|
| 435 | var labelWithFor = dojo.byId("label-with-for"); |
|---|
| 436 | // when markup includes for make certain testing if has attribute |
|---|
| 437 | // using for or htmlFor returns true |
|---|
| 438 | doh.t(dojo.hasAttr(labelWithFor, "for")); |
|---|
| 439 | doh.t(dojo.hasAttr(labelWithFor, "htmlFor")); |
|---|
| 440 | // when markup include for attrib make sure can retrieve using for or htmlFor |
|---|
| 441 | doh.is("input-with-label", dojo.attr(labelWithFor, "for")); |
|---|
| 442 | doh.is("input-with-label", dojo.attr(labelWithFor, "htmlFor")); |
|---|
| 443 | }, |
|---|
| 444 | function attrInnerHtmlDiv(t){ |
|---|
| 445 | var n = dojo.create("div", { |
|---|
| 446 | innerHTML: "1<em>2</em>3" |
|---|
| 447 | }, dojo.body()); |
|---|
| 448 | doh.is("1<em>2</em>3", n.innerHTML.toLowerCase()); |
|---|
| 449 | dojo.destroy(n); |
|---|
| 450 | }, |
|---|
| 451 | function attrInnerHtmlTable(t){ |
|---|
| 452 | var n = dojo.create("table", { |
|---|
| 453 | innerHTML: "<thead><tr><th>1st!</th></tr></thead><tbody></tbody>" |
|---|
| 454 | }, dojo.body()); |
|---|
| 455 | doh.is("<thead><tr><th>1st!</th></tr></thead><tbody></tbody>", |
|---|
| 456 | n.innerHTML.toLowerCase().replace(/\s+/g, "")); |
|---|
| 457 | dojo.destroy(n); |
|---|
| 458 | }, |
|---|
| 459 | function attrInputTextValue(t){ |
|---|
| 460 | doh.is("123", dojo.byId("input-text-value").value); |
|---|
| 461 | doh.is("123", dojo.attr("input-text-value", "value")); |
|---|
| 462 | dojo.attr("input-text-value", "value", "abc"); |
|---|
| 463 | doh.is("abc", dojo.byId("input-text-value").value); |
|---|
| 464 | doh.is("abc", dojo.attr("input-text-value", "value")); |
|---|
| 465 | dojo.byId("input-text-value").value = "xyz"; |
|---|
| 466 | doh.is("xyz", dojo.byId("input-text-value").value); |
|---|
| 467 | doh.is("xyz", dojo.attr("input-text-value", "value")); |
|---|
| 468 | }, |
|---|
| 469 | function testInputDisabled(t){ |
|---|
| 470 | doh.f(dojo.attr("input-no-disabled", "disabled")); |
|---|
| 471 | doh.t(dojo.attr("input-with-disabled", "disabled")); |
|---|
| 472 | doh.t(dojo.attr("input-with-disabled-true", "disabled")); |
|---|
| 473 | } |
|---|
| 474 | ] |
|---|
| 475 | ); |
|---|
| 476 | doh.run(); |
|---|
| 477 | }); |
|---|
| 478 | </script> |
|---|
| 479 | <style type="text/css"> |
|---|
| 480 | html, body { |
|---|
| 481 | padding: 0px; |
|---|
| 482 | margin: 0px; |
|---|
| 483 | border: 0px; |
|---|
| 484 | } |
|---|
| 485 | |
|---|
| 486 | #sq100 { |
|---|
| 487 | background-color: black; |
|---|
| 488 | color: white; |
|---|
| 489 | position: absolute; |
|---|
| 490 | left: 100px; |
|---|
| 491 | top: 100px; |
|---|
| 492 | width: 100px; |
|---|
| 493 | height: 100px; |
|---|
| 494 | border: 0px; |
|---|
| 495 | padding: 0px; |
|---|
| 496 | margin: 0px; |
|---|
| 497 | overflow: hidden; |
|---|
| 498 | } |
|---|
| 499 | |
|---|
| 500 | #sq100margin10 { |
|---|
| 501 | background-color: black; |
|---|
| 502 | color: white; |
|---|
| 503 | position: absolute; |
|---|
| 504 | left: 250px; |
|---|
| 505 | top: 100px; |
|---|
| 506 | width: 100px; |
|---|
| 507 | height: 100px; |
|---|
| 508 | border: 0px; |
|---|
| 509 | padding: 0px; |
|---|
| 510 | margin: 10px; |
|---|
| 511 | overflow: hidden; |
|---|
| 512 | } |
|---|
| 513 | |
|---|
| 514 | #sq100margin10pad10 { |
|---|
| 515 | background-color: black; |
|---|
| 516 | color: white; |
|---|
| 517 | position: absolute; |
|---|
| 518 | left: 400px; |
|---|
| 519 | top: 100px; |
|---|
| 520 | width: 100px; |
|---|
| 521 | height: 100px; |
|---|
| 522 | border: 0px; |
|---|
| 523 | padding: 10px; |
|---|
| 524 | margin: 10px; |
|---|
| 525 | overflow: hidden; |
|---|
| 526 | } |
|---|
| 527 | |
|---|
| 528 | #sq100pad10 { |
|---|
| 529 | background-color: black; |
|---|
| 530 | color: white; |
|---|
| 531 | position: absolute; |
|---|
| 532 | left: 100px; |
|---|
| 533 | top: 250px; |
|---|
| 534 | width: 100px; |
|---|
| 535 | height: 100px; |
|---|
| 536 | border: 0px; |
|---|
| 537 | padding: 10px; |
|---|
| 538 | margin: 0px; |
|---|
| 539 | overflow: hidden; |
|---|
| 540 | } |
|---|
| 541 | |
|---|
| 542 | #sq100ltpad10 { |
|---|
| 543 | background-color: black; |
|---|
| 544 | color: white; |
|---|
| 545 | position: absolute; |
|---|
| 546 | left: 250px; |
|---|
| 547 | top: 250px; |
|---|
| 548 | width: 100px; |
|---|
| 549 | height: 100px; |
|---|
| 550 | border: 0px; |
|---|
| 551 | padding-left: 10px; |
|---|
| 552 | padding-top: 10px; |
|---|
| 553 | padding-right: 0px; |
|---|
| 554 | padding-bottom: 0px; |
|---|
| 555 | margin: 0px; |
|---|
| 556 | overflow: hidden; |
|---|
| 557 | } |
|---|
| 558 | |
|---|
| 559 | #sq100ltpad10rbmargin10 { |
|---|
| 560 | background-color: black; |
|---|
| 561 | color: white; |
|---|
| 562 | position: absolute; |
|---|
| 563 | left: 400px; |
|---|
| 564 | top: 250px; |
|---|
| 565 | width: 100px; |
|---|
| 566 | height: 100px; |
|---|
| 567 | border: 0px; |
|---|
| 568 | padding-left: 10px; |
|---|
| 569 | padding-top: 10px; |
|---|
| 570 | padding-right: 0px; |
|---|
| 571 | padding-bottom: 0px; |
|---|
| 572 | margin-left: 0px; |
|---|
| 573 | margin-top: 0px; |
|---|
| 574 | margin-right: 10px; |
|---|
| 575 | margin-bottom: 10px; |
|---|
| 576 | overflow: hidden; |
|---|
| 577 | } |
|---|
| 578 | |
|---|
| 579 | #sq100border10 { |
|---|
| 580 | background-color: black; |
|---|
| 581 | color: white; |
|---|
| 582 | position: absolute; |
|---|
| 583 | left: 100px; |
|---|
| 584 | top: 400px; |
|---|
| 585 | width: 100px; |
|---|
| 586 | height: 100px; |
|---|
| 587 | border: 10px solid yellow; |
|---|
| 588 | padding: 0px; |
|---|
| 589 | margin: 0px; |
|---|
| 590 | overflow: hidden; |
|---|
| 591 | } |
|---|
| 592 | |
|---|
| 593 | #sq100border10margin10 { |
|---|
| 594 | background-color: black; |
|---|
| 595 | color: white; |
|---|
| 596 | position: absolute; |
|---|
| 597 | left: 250px; |
|---|
| 598 | top: 400px; |
|---|
| 599 | width: 100px; |
|---|
| 600 | height: 100px; |
|---|
| 601 | border: 10px solid yellow; |
|---|
| 602 | padding: 0px; |
|---|
| 603 | margin: 10px; |
|---|
| 604 | overflow: hidden; |
|---|
| 605 | } |
|---|
| 606 | |
|---|
| 607 | #sq100border10margin10pad10 { |
|---|
| 608 | background-color: black; |
|---|
| 609 | color: white; |
|---|
| 610 | position: absolute; |
|---|
| 611 | left: 400px; |
|---|
| 612 | top: 400px; |
|---|
| 613 | width: 100px; |
|---|
| 614 | height: 100px; |
|---|
| 615 | border: 10px solid yellow; |
|---|
| 616 | padding: 10px; |
|---|
| 617 | margin: 10px; |
|---|
| 618 | overflow: hidden; |
|---|
| 619 | } |
|---|
| 620 | |
|---|
| 621 | #sq100nopos { |
|---|
| 622 | background-color: black; |
|---|
| 623 | color: white; |
|---|
| 624 | width: 100px; |
|---|
| 625 | height: 100px; |
|---|
| 626 | padding: 0px; |
|---|
| 627 | margin: 0px; |
|---|
| 628 | } |
|---|
| 629 | |
|---|
| 630 | </style> |
|---|
| 631 | </head> |
|---|
| 632 | <body> |
|---|
| 633 | <h1>testing Core HTML/DOM/CSS/Style utils</h1> |
|---|
| 634 | <div id="sq100"> |
|---|
| 635 | 100px square, abs |
|---|
| 636 | </div> |
|---|
| 637 | <div id="sq100margin10"> |
|---|
| 638 | 100px square, abs, 10px margin |
|---|
| 639 | </div> |
|---|
| 640 | <div id="sq100margin10pad10"> |
|---|
| 641 | 100px square, abs, 10px margin, 10px padding |
|---|
| 642 | </div> |
|---|
| 643 | <div id="sq100pad10"> |
|---|
| 644 | 100px square, abs, 10px padding |
|---|
| 645 | </div> |
|---|
| 646 | <div id="sq100ltpad10"> |
|---|
| 647 | 100px square, abs, 10px left and top padding |
|---|
| 648 | </div> |
|---|
| 649 | <div id="sq100ltpad10rbmargin10"> |
|---|
| 650 | 100px square, abs, 10px left and top padding, 10px bottom and right margin |
|---|
| 651 | </div> |
|---|
| 652 | <div id="sq100border10"> |
|---|
| 653 | 100px square, abs, 10px yellow border |
|---|
| 654 | </div> |
|---|
| 655 | <div id="sq100border10margin10"> |
|---|
| 656 | 100px square, abs, 10px yellow border, 10px margin |
|---|
| 657 | </div> |
|---|
| 658 | <div id="sq100border10margin10pad10"> |
|---|
| 659 | 100px square, abs, 10px yellow border, 10px margin, 10px padding |
|---|
| 660 | </div> |
|---|
| 661 | <div id="sq100nopos"> |
|---|
| 662 | 100px square, no positioning |
|---|
| 663 | </div> |
|---|
| 664 | <iframe id="blah"></iframe> |
|---|
| 665 | |
|---|
| 666 | <div id="div-no-tabindex"></div> |
|---|
| 667 | <div id="div-tabindex-minus-1" tabIndex="-1"></div> |
|---|
| 668 | <div id="div-tabindex-0" tabIndex="0"></div> |
|---|
| 669 | <div id="div-tabindex-1" tabIndex="1"></div> |
|---|
| 670 | |
|---|
| 671 | <div> |
|---|
| 672 | <input id="input-no-type"> |
|---|
| 673 | <input id="input-with-type" type="checkbox"> |
|---|
| 674 | <input id="input-no-tabindex"> |
|---|
| 675 | <input id="input-tabindex-minus-1" tabIndex="-1"> |
|---|
| 676 | <input id="input-tabindex-0" tabIndex="0"> |
|---|
| 677 | <input id="input-tabindex-1" tabIndex="1"> |
|---|
| 678 | <input id="input-text-value" type="text" value="123"> |
|---|
| 679 | <input id="input-no-disabled" type="text"> |
|---|
| 680 | <input id="input-with-disabled" type="text" disabled> |
|---|
| 681 | <input id="input-with-disabled-true" disabled="disabled"> |
|---|
| 682 | </div> |
|---|
| 683 | <div> |
|---|
| 684 | <label id="label-no-for">label with no for </label><input type="text" id="label-test-input"> |
|---|
| 685 | <label id="label-with-for" for="input-with-label">label with for </label><input type="text" id="input-with-label"> |
|---|
| 686 | </div> |
|---|
| 687 | </body> |
|---|
| 688 | </html> |
|---|
| 689 | |
|---|
