New file |
0,0 → 1,317 |
<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" |
djConfig="isDebug: true"></script> |
<script type="text/javascript"> |
dojo.require("doh.runner"); |
dojo.addOnLoad(function(){ |
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.coords("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){ |
// coords is getting us the margin-box location, is |
// this right? |
var 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 sq100nopos(t){ |
var pos = dojo.coords("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(dojo.isIE){ |
// 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.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> |
</body> |
</html> |
|