Merge pull request #505 from jorix/getRenderedDimensions-absolute

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

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);
+    if (superContainer) {
-    
+        containerElement.appendChild(superContainer);
-    // Opera and IE7 can't handle a node with position:aboslute if it inherits
+    } else {
-    // position:absolute from a parent.
+        containerElement.appendChild(container);
-    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";
     }
     
     // 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);
 };

tests/manual/rendered-dimensions.html

@@ -39,10 +39,64 @@ function run() {
     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>