ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjustment on "Util.getRenderedDimensions" when "containerElement" is absolutely positioned.

Browse Source
This commit is contained in:
Xavier Mamano
2012-06-03 16:54:20 +02:00
parent f5c43d6506
commit 54a51904e9
2 changed files with 91 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
lib/OpenLayers/Util.js
View File

@@ -1526,6 +1526,33 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
var containerElement = (options && options.containerElement)
? options.containerElement : document.body;
// Opera and IE7 can't handle a node with position:aboslute if it inherits
// position:absolute from a parent.
var parentHasPositionAbsolute = false;
var superContainer = null;
var parent = containerElement;
while (parent && parent.tagName.toLowerCase()!="body") {
var parentPosition = OpenLayers.Element.getStyle(parent, "position");
if(parentPosition == "absolute") {
parentHasPositionAbsolute = true;
break;
} else if (parentPosition && parentPosition != "static") {
break;
}
parent = parent.parentNode;
}
if(parentHasPositionAbsolute && (containerElement.clientHeight === 0 ||
containerElement.clientWidth === 0) ){
superContainer = document.createElement("div");
superContainer.style.visibility = "hidden";
superContainer.style.position = "absolute";
superContainer.style.overflow = "visible";
superContainer.style.width = document.body.clientWidth + "px";
superContainer.style.height = document.body.clientHeight + "px";
superContainer.appendChild(container);
}
container.style.position = "absolute";
//fix a dimension, if specified.
if (size) {
@@ -1560,25 +1587,10 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
container.appendChild(content);
// append container to body for rendering
containerElement.appendChild(container);
// Opera and IE7 can't handle a node with position:aboslute if it inherits
// position:absolute from a parent.
var parentHasPositionAbsolute = false;
var parent = container.parentNode;
while (parent && parent.tagName.toLowerCase()!="body") {
var parentPosition = OpenLayers.Element.getStyle(parent, "position");
if(parentPosition == "absolute") {
parentHasPositionAbsolute = true;
break;
} else if (parentPosition && parentPosition != "static") {
break;
}
parent = parent.parentNode;
}
if(!parentHasPositionAbsolute) {
container.style.position = "absolute";
if (superContainer) {
containerElement.appendChild(superContainer);
} else {
containerElement.appendChild(container);
}
// calculate scroll width of content and add corners and shadow width
@@ -1595,7 +1607,12 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
// remove elements
container.removeChild(content);
containerElement.removeChild(container);
if (superContainer) {
superContainer.removeChild(container);
containerElement.removeChild(superContainer);
} else {
containerElement.removeChild(container);
}
return new OpenLayers.Size(w, h);
};

54
tests/manual/rendered-dimensions.html
View File

@@ -39,10 +39,64 @@ function run() {
else {
out.innerHTML += "<br/>height Fail: " + size + ", " + height;
}
// To use the same syntax as in "\tests"
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>