diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index 491448c9c9..8e326a3b30 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -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); }; diff --git a/tests/manual/rendered-dimensions.html b/tests/manual/rendered-dimensions.html index 41b0fcf4d4..71025afef8 100644 --- a/tests/manual/rendered-dimensions.html +++ b/tests/manual/rendered-dimensions.html @@ -39,10 +39,64 @@ else { out.innerHTML += "
height Fail: " + size + ", " + height; } + + // To use the same syntax as in "\tests" + var t = {eq: function(a, b, msg) { + if (a == b) { + out.innerHTML += "
ok " + msg; + } + else { + out.innerHTML += "
Fail (" + a + " not eq " + b + "): " + msg + ""; + } + } + }; + var text = (new Array(10)).join("foo foo foo
"), + content = "
" + text + "
"; + 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"); }
+
+