can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
392 lines (358 loc) • 11.2 kB
HTML
<html>
<!--
we use a quirks-mode DTD on purpose to ensure that things go tilt. Wheee!!
-->
<head>
<title>testing Core HTML/DOM/CSS/Style utils in quirks mode</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/sniff", "dojo/domReady!"], function(dojo, doh, has){
doh.register("t",
[
"t.is(100, dojo.marginBox('sq100').w);",
"t.is(100, dojo.marginBox('sq100').h);",
"t.is(120, dojo.marginBox('sq100margin10').w);",
"t.is(120, dojo.marginBox('sq100margin10').h);",
"t.is(100, dojo.contentBox('sq100margin10').w);",
"t.is(100, dojo.contentBox('sq100margin10').h);",
// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
//"t.is(100, dojo.marginBox('sq100nopos').w);",
"t.is(100, dojo.marginBox('sq100nopos').h);",
function coordsBasic(t){
var pos = dojo.position("sq100", false);
// console.debug(pos);
t.is(100, pos.x);
t.is(100, pos.y);
t.is(100, pos.w);
t.is(100, pos.h);
},
function coordsMargin(t){
// position() is getting us the border-box location
var pos = dojo.position("sq100margin10", false);
t.is(260, pos.x);
t.is(110, pos.y);
t.is(100, pos.w);
t.is(100, pos.h);
pos = dojo.marginBox("sq100margin10");
t.is(120, pos.w);
t.is(120, pos.h);
// Though coords shouldn't be used, test it for backward compatibility.
// coords returns the border-box location and margin-box size
pos = dojo.coords("sq100margin10", false);
t.is(260, pos.x);
t.is(110, pos.y);
t.is(120, pos.w);
t.is(120, pos.h);
},
function coordsBorder(t){
var pos = dojo.position("sq100border10", false);
t.is(100, pos.x);
t.is(400, pos.y);
},
function sq100nopos(t){
var pos = dojo.position("sq100nopos", false);
// console.debug(pos);
t.is(0, pos.x);
t.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
//t.is(100, pos.w);
t.is(100, pos.h);
}
]
);
if(has("ie") <= 9){
// IE collapses padding in quirks mode. We just report on it.
doh.register("t",
[
"t.is(120, dojo.marginBox('sq100margin10pad10').w);",
"t.is(120, dojo.marginBox('sq100margin10pad10').h);",
"t.is(100, dojo.marginBox('sq100pad10').w);",
"t.is(100, dojo.marginBox('sq100pad10').h);",
"t.is(100, dojo.marginBox('sq100ltpad10').w);",
"t.is(100, dojo.marginBox('sq100ltpad10').h);",
"t.is(90, dojo.contentBox('sq100ltpad10').w);",
"t.is(90, dojo.contentBox('sq100ltpad10').h);",
"t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').w);",
"t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').h);",
"t.is(100, dojo.marginBox('sq100border10').w);",
"t.is(100, dojo.marginBox('sq100border10').h);",
"t.is(80, dojo.contentBox('sq100border10').w);",
"t.is(80, dojo.contentBox('sq100border10').h);",
"t.is(120, dojo.marginBox('sq100border10margin10').w);",
"t.is(120, dojo.marginBox('sq100border10margin10').h);",
"t.is(80, dojo.contentBox('sq100border10margin10').w);",
"t.is(80, dojo.contentBox('sq100border10margin10').h);",
"t.is(120, dojo.marginBox('sq100border10margin10pad10').w);",
"t.is(120, dojo.marginBox('sq100border10margin10pad10').h);",
"t.is(60, dojo.contentBox('sq100border10margin10pad10').w);",
"t.is(60, dojo.contentBox('sq100border10margin10pad10').h);"
]
);
}else{
doh.register("t",
[
"t.is(140, dojo.marginBox('sq100margin10pad10').w);",
"t.is(140, dojo.marginBox('sq100margin10pad10').h);",
"t.is(120, dojo.marginBox('sq100pad10').w);",
"t.is(120, dojo.marginBox('sq100pad10').h);",
"t.is(110, dojo.marginBox('sq100ltpad10').w);",
"t.is(110, dojo.marginBox('sq100ltpad10').h);",
"t.is(100, dojo.contentBox('sq100ltpad10').w);",
"t.is(100, dojo.contentBox('sq100ltpad10').h);",
"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
"t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",
"t.is(120, dojo.marginBox('sq100border10').w);",
"t.is(120, dojo.marginBox('sq100border10').h);",
"t.is(100, dojo.contentBox('sq100border10').w);",
"t.is(100, dojo.contentBox('sq100border10').h);",
"t.is(140, dojo.marginBox('sq100border10margin10').w);",
"t.is(140, dojo.marginBox('sq100border10margin10').h);",
"t.is(100, dojo.contentBox('sq100border10margin10').w);",
"t.is(100, dojo.contentBox('sq100border10margin10').h);",
"t.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
"t.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
"t.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
"t.is(100, dojo.contentBox('sq100border10margin10pad10').h);"
]
);
}
doh.register("t",
[
function emptySvg(t){
dojo.empty(dojo.byId("surface"));
doh.f(!!dojo.byId("surface").firstChild, "svg firstChild");
},
function destroySvg(t){
dojo.destroy(dojo.byId("surface"));
doh.f(!!dojo.byId("surface"), "svg byId");
},
function emptyObject(t){
dojo.empty(dojo.byId("objectToEmpty"));
doh.f(!!dojo.byId("objectToEmpty").firstChild, "object firstChild");
},
function destroyObject(t){
dojo.destroy(dojo.byId("objectToEmpty"));
doh.f(!!dojo.byId("objectToEmpty"), "object byId");
},
function destroyIframe(t){
dojo.destroy(dojo.byId("iframeToDestroy"));
doh.f(!!dojo.byId("iframeToDestroy"), "iframe byId");
},
function destroyDivNotInDOM(t){
var p = dojo.byId("divToRemoveFromDOM");
var n = dojo.byId("divToDestroy");
p = p.parentNode.removeChild(p);
doh.f(!!dojo.byId("divToRemoveFromDOM"), "div byId");
doh.t(!!p.firstChild, "div child 1");
doh.is(p.firstChild, n, "div 1st child");
doh.isNot(p.firstChild, p.lastChild, "div 1st child");
dojo.destroy(n);
doh.t(!!p.firstChild, "div child 2");
doh.isNot(p.firstChild, n, "div 2nd child");
doh.is(p.firstChild, p.lastChild, "div 2nd child");
dojo.empty(p);
doh.f(!!p.firstChild, "div child 3");
dojo.destroy(p);
doh.t(true, "no exception thrown");
}
]
);
doh.runOnLoad();
});
</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>
<!-- SVG element to test empty -->
<svg id="surface" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
><rect id="rect1" fill="rgb(255, 0, 0)" x="0" y="0" width="80" height="60" ry="0" rx="0" fill-rule="evenodd"
/></svg>
<!-- OBJECT element to test empty -->
<object width="500" height="500" id="objectToEmpty" data="data:application/x-silverlight," type="application/x-silverlight"
><param name="background" value="transparent"
/></object>
<!-- IFRAME element to test destroy -->
<iframe id="iframeToDestroy" src="about:blank"
><span></span
></iframe>
<!-- DIV element to test destroy of element not in the DOM -->
<div id="divToRemoveFromDOM"
><div id="divToDestroy"></div
><div></div
></div>
</body>
</html>