Files
openlayers/tests/manual/rendered-dimensions.html
2012-06-03 23:54:11 +02:00

103 lines
4.4 KiB
HTML

<html>
<head>
<style type="text/css">
.testDims p{
padding: 20px;
}
</style>
<script src="../../lib/OpenLayers.js"></script>
<script>
function run() {
var out = document.getElementById("out");
var size = OpenLayers.Util.getRenderedDimensions("<p>Content</p>");
var bigger = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", null, {displayClass: 'testDims'});
var overflow = OpenLayers.Util.getRenderedDimensions("<p style='overflow:auto'>Content</p>");
var width = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", new OpenLayers.Size(250, null));
var height = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", new OpenLayers.Size(null, 40));
if ((size.w + 40) == bigger.w && (size.h + 40) == bigger.h) {
out.innerHTML = "bigger Pass: " + size + ", " + bigger;
} else {
out.innerHTML = "bigger Fail: " + size + ", " + bigger;
}
if (size.w == overflow.w && size.h == overflow.h) {
out.innerHTML += "<br/>overflow Pass: " + size + ", " + overflow;
} else {
out.innerHTML += "<br/>overflow Fail: " + size + ", " + overflow;
}
if (width.w == 250 && width.h == size.h) {
out.innerHTML += "<br/>width Pass: " + size + ", " + width;
}
else {
out.innerHTML += "<br/>width Fail: " + size + ", " + width;
}
if (height.h == 40 && height.w == size.w) {
out.innerHTML += "<br/>height Pass: " + size + ", " + height;
}
else {
out.innerHTML += "<br/>height Fail: " + size + ", " + height;
}
// To use the same syntax as in "\tests"
var t = {eq: function(a, b, msg) {
if (a == b) {
out.innerHTML += "<br/>ok " + msg;
}
else {
out.innerHTML += "<br/><span style=\"color:red\">Fail (" + a + " not eq " + b + "): " + msg + "<span>";
}
}
};
var text = (new Array(10)).join("foo foo foo <br>"),
content = "<div>" + text + "</div>";
var testName,
finalSize,
initialSize = OpenLayers.Util.getRenderedDimensions(content, null);
// containerElement option on absolute position with width and height
testName = "Absolute with w&h: ";
var optionAbsDiv ={
containerElement: document.getElementById("absoluteDiv")
};
finalSize = OpenLayers.Util.getRenderedDimensions(content, null, optionAbsDiv);
t.eq(finalSize.w, initialSize.w,
testName + "initial width " + initialSize.w + "px is maintained");
t.eq(finalSize.h, initialSize.h,
testName + "initial height " + initialSize.h + "px is maintained");
testName = "Absolute with w&h (set height): ";
finalSize = OpenLayers.Util.getRenderedDimensions(content, {h: 15}, optionAbsDiv);
t.eq(finalSize.h, 15, testName + "got the fixed height to 15px");
t.eq(finalSize.w, initialSize.w,
testName + "initial width " + initialSize.w + "px is maintained");
testName = "Absolute with w&h (set width): ";
finalSize = OpenLayers.Util.getRenderedDimensions(content, {w: 20}, optionAbsDiv);
t.eq(finalSize.w, 20, testName + "got the fixed width to 20px");
// containerElement option on absolute position without width and height
testName = "Absolute without w&h: ";
var optionAbsDiv00 ={
containerElement: document.getElementById("absoluteDiv00")
};
finalSize = OpenLayers.Util.getRenderedDimensions(content, null, optionAbsDiv00);
t.eq(finalSize.w, initialSize.w,
testName + "initial width " + initialSize.w + "px is maintained");
t.eq(finalSize.h, initialSize.h,
testName + "initial height " + initialSize.h + "px is maintained");
testName = "Absolute without w&h (set height): ";
finalSize = OpenLayers.Util.getRenderedDimensions(content, {h: 15}, optionAbsDiv00);
t.eq(finalSize.h, 15, testName + "got the fixed height to 15px");
t.eq(finalSize.w, initialSize.w,
testName + "initial width " + initialSize.w + "px is maintained");
testName = "Absolute without w&h (set width): ";
finalSize = OpenLayers.Util.getRenderedDimensions(content, {w: 20}, optionAbsDiv00);
t.eq(finalSize.w, 20, testName + "got the fixed width to 20px");
}
</script>
</head>
<body onload="run()">
<div id="out"></div>
<div id="absoluteDiv" style="position:absolute; left:10px; width:500px; height: 500px"></div>
<div id="absoluteDiv00" style="position:absolute; left:10px;"></div>
</body>
</html>