Committing an updated fix for #1906. This fixes a 2.7->2.8 regression in

particular behavior with regard to determining the size of a popup. thanks
to the absolutely tireless work of gregers on this issue! Also, in case 
anyone was wondering? Browsers suck. (Pullup #1906)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9384 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Popup.js

@@ -506,7 +506,7 @@ OpenLayers.Popup = OpenLayers.Class({
         // contents into a fake contentDiv (for the CSS) and then measuring it
         var preparedHTML = "<div class='" + this.contentDisplayClass+ "'>" + 
             this.contentDiv.innerHTML + 
-            "<div>";
+            "</div>";
  
         var containerElement = (this.map) ? this.map.layerContainerDiv
         								  : document.body;

lib/OpenLayers/Util.js

@@ -1540,9 +1540,7 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
     
     // create temp container div with restricted size
     var container = document.createElement("div");
-    container.style.overflow= "";
+    container.style.visibility = "hidden";
-    container.style.position = "absolute";
-    container.style.left = "-9999px";
         
     var containerElement = (options && options.containerElement) 
     	? options.containerElement : document.body;
@@ -1567,12 +1565,40 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
     var content = document.createElement("div");
     content.innerHTML = contentHTML;
     
+    // we need overflow visible when calculating the size
+    content.style.overflow = "visible";
+    if (content.childNodes) {
+        for (var i=0, l=content.childNodes.length; i<l; i++) {
+            if (!content.childNodes[i].style) continue;
+            content.childNodes[i].style.overflow = "visible";
+        }
+    }
+    
     // add content to restricted container 
     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";
+    }
+    
     // calculate scroll width of content and add corners and shadow width
     if (!w) {
         w = parseInt(content.scrollWidth);

tests/manual/rendered-dimensions.html

@@ -11,10 +11,33 @@ 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 = "Pass:  " + size + ", " + bigger;
+        out.innerHTML = "bigger Pass:  " + size + ", " + bigger;
     } else { 
-        out.innerHTML = "Fail:  " + size + ", " + bigger;
+        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;
     }
 } 
 </script>