diff options
Diffstat (limited to 'includes/js/dojo/tests/_base/html.html')
-rw-r--r-- | includes/js/dojo/tests/_base/html.html | 556 |
1 files changed, 556 insertions, 0 deletions
diff --git a/includes/js/dojo/tests/_base/html.html b/includes/js/dojo/tests/_base/html.html new file mode 100644 index 0000000..912c8a6 --- /dev/null +++ b/includes/js/dojo/tests/_base/html.html @@ -0,0 +1,556 @@ +<!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" + djConfig="isDebug: true"></script> + <script type="text/javascript"> + dojo.require("doh.runner"); + + function getIframeDocument(/*DOMNode*/iframeNode){ + //summary: Returns the document object associated with the iframe DOM Node argument. + var doc = iframeNode.contentDocument || // W3 + ( + (iframeNode.contentWindow)&&(iframeNode.contentWindow.document) + ) || // IE + ( + (iframeNode.name)&&(documendoh.frames[iframeNode.name])&& + (documendoh.frames[iframeNode.name].document) + ) || null; + return doc; + } + + dojo.addOnLoad(function(){ + doh.register("t", + [ + "doh.is(100, dojo.marginBox('sq100').w);", + "doh.is(100, dojo.marginBox('sq100').h);", + + "doh.is(120, dojo.marginBox('sq100margin10').w);", + "doh.is(120, dojo.marginBox('sq100margin10').h);", + "doh.is(100, dojo.contentBox('sq100margin10').w);", + "doh.is(100, dojo.contentBox('sq100margin10').h);", + + "doh.is(140, dojo.marginBox('sq100margin10pad10').w);", + "doh.is(140, dojo.marginBox('sq100margin10pad10').h);", + + "doh.is(120, dojo.marginBox('sq100pad10').w);", + "doh.is(120, dojo.marginBox('sq100pad10').h);", + + "doh.is(110, dojo.marginBox('sq100ltpad10').w);", + "doh.is(110, dojo.marginBox('sq100ltpad10').h);", + "doh.is(100, dojo.contentBox('sq100ltpad10').w);", + "doh.is(100, dojo.contentBox('sq100ltpad10').h);", + + "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);", + "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);", + + "doh.is(120, dojo.marginBox('sq100border10').w);", + "doh.is(120, dojo.marginBox('sq100border10').h);", + "doh.is(100, dojo.contentBox('sq100border10').w);", + "doh.is(100, dojo.contentBox('sq100border10').h);", + + "doh.is(140, dojo.marginBox('sq100border10margin10').w);", + "doh.is(140, dojo.marginBox('sq100border10margin10').h);", + "doh.is(100, dojo.contentBox('sq100border10margin10').w);", + "doh.is(100, dojo.contentBox('sq100border10margin10').h);", + + "doh.is(160, dojo.marginBox('sq100border10margin10pad10').w);", + "doh.is(160, dojo.marginBox('sq100border10margin10pad10').h);", + "doh.is(100, dojo.contentBox('sq100border10margin10pad10').w);", + "doh.is(100, dojo.contentBox('sq100border10margin10pad10').h);", + + // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge + // "doh.is(100, dojo.marginBox('sq100nopos').w);", + "doh.is(100, dojo.marginBox('sq100nopos').h);", + + "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);", + "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);", + "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);", + "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);", + + "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);", + "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);", + "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);", + "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);", + + "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);", + "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);", + "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);", + "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);", + + "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);", + "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);", + "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);", + "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);", + + function coordsBasic(t){ + var pos = dojo.coords("sq100", false); + // console.debug(pos); + doh.is(100, pos.x); + doh.is(100, pos.y); + doh.is(100, pos.w); + doh.is(100, pos.h); + }, + function coordsMargin(t){ + // coords is getting us the margin-box location, is + // this right? + var pos = dojo.coords("sq100margin10", false); + doh.is(260, pos.x); + doh.is(110, pos.y); + doh.is(120, pos.w); + doh.is(120, pos.h); + }, + function coordsBorder(t){ + var pos = dojo.coords("sq100border10", false); + doh.is(100, pos.x); + doh.is(400, pos.y); + }, + function sq100nopos(t){ + var pos = dojo.coords("sq100nopos", false); + // console.debug(pos); + doh.is(0, pos.x); + doh.t(pos.y > 0); + // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge + // doh.is(100, pos.w); + doh.is(100, pos.h); + }, + function coordsScrolled(t) { + var s = document.createElement('div'); + var c = document.createElement('div'); + document.body.appendChild(s); + s.appendChild(c); + var x=257, y= 285; + with (s.style) { + position = 'absolute'; + overflow = 'scroll'; + border = "10px solid black"; + } + dojo._setMarginBox(s, x, y, 100, 100); + dojo._setMarginBox(c, 0, 0, 500, 500); + s.scrollTop = 200; + var pos = dojo.coords(s, true); + doh.is(x, pos.x); + doh.is(y, pos.y); + }, + "doh.is(1, dojo.style('sq100nopos', 'opacity'));", + "doh.is(0.1, dojo.style('sq100nopos', 'opacity', 0.1));", + "doh.is(0.8, dojo.style('sq100nopos', 'opacity', 0.8));", + function styleObject(){ + dojo.style('sq100nopos', { 'opacity': 0.1 }); + doh.is(0.1, dojo.style('sq100nopos', 'opacity')); + dojo.style('sq100nopos', { 'opacity': 0.8 }); + doh.is(0.8, dojo.style('sq100nopos', 'opacity')); + }, + "doh.is('static', dojo.style('sq100nopos', 'position'));", + function getBgcolor(t){ + var bgc = dojo.style('sq100nopos', 'backgroundColor'); + doh.t((bgc == "rgb(0, 0, 0)")||(bgc == "black")||(bgc == "#000000")); + }, + function isDescendant(t){ + doh.t(dojo.isDescendant("sq100", dojo.body())); + doh.t(dojo.isDescendant("sq100", dojo.doc)); + doh.t(dojo.isDescendant("sq100", "sq100")); + doh.t(dojo.isDescendant(dojo.byId("sq100"), "sq100")); + doh.f(dojo.isDescendant("sq100", dojo.byId("sq100").firstChild)); + doh.t(dojo.isDescendant(dojo.byId("sq100").firstChild, "sq100")); + }, + function isDescendantIframe(t){ + var bif = dojo.byId("blah"); + getIframeDocument(bif).write("<html><body><div id='subDiv'></div></body></html>"); + getIframeDocument(bif).close(); + // this test barely makes sense. disabling it for now. + // doh.t(dojo.isDescendant(bif.contentDocument.getElementById("subDiv"), bif.parentNode)); + var subDiv = getIframeDocument(bif).getElementById("subDiv"); + doh.t(dojo.isDescendant(subDiv, subDiv)); + doh.t(dojo.isDescendant(subDiv, subDiv.parentNode)); + doh.f(dojo.isDescendant(subDiv.parentNode, subDiv)); + + }, + function testClassFunctions(t){ + var node = dojo.byId("sq100"); + dojo.addClass(node, "a"); + doh.is("a", node.className); + dojo.removeClass(node, "c"); + doh.is("a", node.className); + t.assertTrue(dojo.hasClass(node, "a")); + t.assertFalse(dojo.hasClass(node, "b")); + dojo.addClass(node, "b"); + doh.is("a b", node.className); + t.assertTrue(dojo.hasClass(node, "a")); + t.assertTrue(dojo.hasClass(node, "b")); + dojo.removeClass(node, "a"); + doh.is("b", node.className); + t.assertFalse(dojo.hasClass(node, "a")); + t.assertTrue(dojo.hasClass(node, "b")); + dojo.toggleClass(node, "a"); + doh.is("b a", node.className); + t.assertTrue(dojo.hasClass(node, "a")); + t.assertTrue(dojo.hasClass(node, "b")); + dojo.toggleClass(node, "a"); + doh.is("b", node.className); + t.assertFalse(dojo.hasClass(node, "a")); + t.assertTrue(dojo.hasClass(node, "b")); + dojo.toggleClass(node, "b"); + doh.is("", node.className); + t.assertFalse(dojo.hasClass(node, "a")); + t.assertFalse(dojo.hasClass(node, "b")); + dojo.removeClass(node, "c"); + t.assertTrue(!node.className); + }, + function getTypeInput(t){ + doh.f(dojo.hasAttr(dojo.byId("input-no-type"), "type")); + doh.is("text", dojo.attr(dojo.byId("input-no-type"), "type")); + doh.t(dojo.hasAttr(dojo.byId("input-with-type"), "type")); + doh.is("checkbox", dojo.attr(dojo.byId("input-with-type"), "type")); + }, + function getWithString(t){ + doh.f(dojo.hasAttr("input-no-type", "type")); + doh.is("text", dojo.attr("input-no-type", "type")); + doh.t(dojo.hasAttr("input-with-type", "type")); + doh.is("checkbox", dojo.attr("input-with-type", "type")); + }, + function attrId(t){ + doh.t(dojo.hasAttr("div-no-tabindex", "id")); + doh.is("div-no-tabindex", dojo.attr("div-no-tabindex", "id")); + var div = document.createElement("div"); + doh.f(dojo.hasAttr(div, "id")); + doh.is(null, dojo.attr(div, "id")); + dojo.attr(div, "id", "attrId1"); + doh.t(dojo.hasAttr(div, "id")); + doh.is("attrId1", dojo.attr(div, "id")); + dojo.removeAttr(div, "id"); + doh.f(dojo.hasAttr(div, "id")); + doh.is(null, dojo.attr(div, "id")); + }, + function getTabindexDiv(t){ + doh.f(dojo.hasAttr("div-no-tabindex", "tabindex")); + doh.is(null, dojo.attr("div-no-tabindex", "tabindex")); + doh.t(dojo.hasAttr("div-tabindex-minus-1", "tabindex")); + if(!dojo.isOpera){ + // Opera (at least <= 9) does not support tabindex="-1" + doh.is(-1, dojo.attr("div-tabindex-minus-1", "tabindex")); + } + doh.t(dojo.hasAttr("div-tabindex-0", "tabindex")); + doh.is(0, dojo.attr("div-tabindex-0", "tabindex")); + doh.is(1, dojo.attr("div-tabindex-1", "tabindex")); + }, + function getTabindexInput(t){ + doh.f(dojo.hasAttr("input-no-tabindex", "tabindex")); + doh.is(null, dojo.attr("input-no-tabindex", "tabindex")); + doh.t(dojo.hasAttr("input-tabindex-minus-1", "tabindex")); + if(!dojo.isOpera){ + // Opera (at least <= 9) does not support tabindex="-1" + doh.is(-1, dojo.attr("input-tabindex-minus-1", "tabindex")); + } + doh.t(dojo.hasAttr("input-tabindex-0", "tabindex")); + doh.is(0, dojo.attr("input-tabindex-0", "tabindex")); + doh.is(1, dojo.attr("input-tabindex-1", "tabindex")); + }, + function setTabindexDiv(t){ + var div = document.createElement("div"); + doh.is(null, dojo.attr(div, "tabindex")); + dojo.attr(div, "tabindex", -1); + if(!dojo.isOpera){ + // Opera (at least <= 9) does not support tabindex="-1" + doh.is(-1, dojo.attr(div, "tabindex")); + } + dojo.attr(div, "tabindex", 0); + doh.is(0, dojo.attr(div, "tabindex")); + dojo.attr(div, "tabindex", 1); + doh.is(1, dojo.attr(div, "tabindex")); + }, + function setTabindexInput(t){ + var input = document.createElement("input"); + doh.is(null, dojo.attr(input, "tabindex")); + dojo.attr(input, "tabindex", -1); + if(!dojo.isOpera){ + // Opera (at least <= 9) does not support tabindex="-1" + doh.is(-1, dojo.attr(input, "tabindex")); + } + dojo.attr(input, "tabindex", 0); + doh.is(0, dojo.attr(input, "tabindex")); + dojo.attr(input, "tabindex", 1); + doh.is(1, dojo.attr(input, "tabindex")); + }, + function removeTabindexFromDiv(t){ + var div = document.createElement("div"); + dojo.attr(div, "tabindex", 1); + doh.is(1, dojo.attr(div, "tabindex")); + dojo.removeAttr(div, "tabindex"); + doh.is(null, dojo.attr(div, "tabindex")); + }, + function removeTabindexFromInput(t){ + var input = document.createElement("input"); + dojo.attr(input, "tabindex", 1); + doh.is(1, dojo.attr(input, "tabindex")); + dojo.removeAttr(input, "tabindex"); + doh.is(null, dojo.attr(input, "tabindex")); + }, + function attr_map(t){ + var input = document.createElement("input"); + var ctr= 0; + dojo.attr(input, { + "tabindex": 1, + "type": "text", + "onfocus": function(e){ + ctr++; + } + }); + dojo.body().appendChild(input); + doh.is(1, dojo.attr(input, "tabindex")); + doh.is("text", dojo.attr(input, "type")); + doh.is(0, ctr); + var def = new doh.Deferred(); + input.focus(); + setTimeout(function(){ + doh.is(1, ctr); + input.blur(); + input.focus(); + setTimeout(function(){ + doh.is(2, ctr); + def.callback(true); + }, 10); + }, 10); + return def; + }, + function attr_reconnect(t){ + var input = document.createElement("input"); + var ctr = 0; + dojo.attr(input, "type", "text"); + dojo.attr(input, "onfocus", function(e){ ctr++; }); + dojo.attr(input, "onfocus", function(e){ ctr++; }); + dojo.attr(input, "onfocus", function(e){ ctr++; }); + dojo.body().appendChild(input); + doh.is("text", dojo.attr(input, "type")); + doh.is(0, ctr); + var def = new doh.Deferred(); + input.focus(); + setTimeout(function(){ + doh.is(1, ctr); + input.blur(); + input.focus(); + setTimeout(function(){ + doh.is(2, ctr); + def.callback(true); + }, 10); + }, 10); + return def; + } + ] + ); + doh.run(); + }); + </script> + <style type="text/css"> + html, body { + padding: 0px; + margin: 0px; + border: 0px; + } + + #sq100 { + background-color: black; + color: white; + position: absolute; + left: 100px; + top: 100px; + width: 100px; + height: 100px; + border: 0px; + padding: 0px; + margin: 0px; + overflow: hidden; + } + + #sq100margin10 { + background-color: black; + color: white; + position: absolute; + left: 250px; + top: 100px; + width: 100px; + height: 100px; + border: 0px; + padding: 0px; + margin: 10px; + overflow: hidden; + } + + #sq100margin10pad10 { + background-color: black; + color: white; + position: absolute; + left: 400px; + top: 100px; + width: 100px; + height: 100px; + border: 0px; + padding: 10px; + margin: 10px; + overflow: hidden; + } + + #sq100pad10 { + background-color: black; + color: white; + position: absolute; + left: 100px; + top: 250px; + width: 100px; + height: 100px; + border: 0px; + padding: 10px; + margin: 0px; + overflow: hidden; + } + + #sq100ltpad10 { + background-color: black; + color: white; + position: absolute; + left: 250px; + top: 250px; + width: 100px; + height: 100px; + border: 0px; + padding-left: 10px; + padding-top: 10px; + padding-right: 0px; + padding-bottom: 0px; + margin: 0px; + overflow: hidden; + } + + #sq100ltpad10rbmargin10 { + background-color: black; + color: white; + position: absolute; + left: 400px; + top: 250px; + width: 100px; + height: 100px; + border: 0px; + padding-left: 10px; + padding-top: 10px; + padding-right: 0px; + padding-bottom: 0px; + margin-left: 0px; + margin-top: 0px; + margin-right: 10px; + margin-bottom: 10px; + overflow: hidden; + } + + #sq100border10 { + background-color: black; + color: white; + position: absolute; + left: 100px; + top: 400px; + width: 100px; + height: 100px; + border: 10px solid yellow; + padding: 0px; + margin: 0px; + overflow: hidden; + } + + #sq100border10margin10 { + background-color: black; + color: white; + position: absolute; + left: 250px; + top: 400px; + width: 100px; + height: 100px; + border: 10px solid yellow; + padding: 0px; + margin: 10px; + overflow: hidden; + } + + #sq100border10margin10pad10 { + background-color: black; + color: white; + position: absolute; + left: 400px; + top: 400px; + width: 100px; + height: 100px; + border: 10px solid yellow; + padding: 10px; + margin: 10px; + overflow: hidden; + } + + #sq100nopos { + background-color: black; + color: white; + width: 100px; + height: 100px; + padding: 0px; + margin: 0px; + } + + </style> + </head> + <body> + <h1>testing Core HTML/DOM/CSS/Style utils</h1> + <div id="sq100"> + 100px square, abs + </div> + <div id="sq100margin10"> + 100px square, abs, 10px margin + </div> + <div id="sq100margin10pad10"> + 100px square, abs, 10px margin, 10px padding + </div> + <div id="sq100pad10"> + 100px square, abs, 10px padding + </div> + <div id="sq100ltpad10"> + 100px square, abs, 10px left and top padding + </div> + <div id="sq100ltpad10rbmargin10"> + 100px square, abs, 10px left and top padding, 10px bottom and right margin + </div> + <div id="sq100border10"> + 100px square, abs, 10px yellow border + </div> + <div id="sq100border10margin10"> + 100px square, abs, 10px yellow border, 10px margin + </div> + <div id="sq100border10margin10pad10"> + 100px square, abs, 10px yellow border, 10px margin, 10px padding + </div> + <div id="sq100nopos"> + 100px square, no positioning + </div> + <iframe id="blah"></iframe> + + <div id="div-no-tabindex"></div> + <div id="div-tabindex-minus-1" tabindex="-1"></div> + <div id="div-tabindex-0" tabindex="0"></div> + <div id="div-tabindex-1" tabindex="1"></div> + + <div> + <input id="input-no-type"> + <input id="input-with-type" type="checkbox"> + <input id="input-no-tabindex"> + <input id="input-tabindex-minus-1" tabindex="-1"> + <input id="input-tabindex-0" tabindex="0"> + <input id="input-tabindex-1" tabindex="1"> + </div> + </body> +</html> + |