Merge branch '2.12' of github.com:openlayers/openlayers

examples/kml-pointtrack.js

@@ -29,12 +29,13 @@ function init() {
                         var fid, points = [], feature;
                         for (var i=0, len=e.features.length; i<len; i++) {
                             feature = e.features[i];
-                            if (feature.fid !== fid || i === len-1) {
+                            if ((fid && feature.fid !== fid) || i === len-1) {
-                                fid = feature.fid;
                                 this.addNodes(points, {silent: true});
                                 points = [];
+                            } else {
+                                points.push(feature);
                             }
-                            points.push(feature);
+                            fid = feature.fid;
                         }
                         return false;
                     }

examples/mobile-drawing.html

@@ -5,7 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile-drawing.js"></script>

examples/mobile-jq.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile-base.js"></script>

examples/mobile-layers.html

@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="stylesheet" href="style.mobile.css" type="text/css">
+    <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
     <script src="../lib/OpenLayers.js?mobile"></script>
     <script src="mobile-layers.js"></script>
     <style>

examples/mobile-navigation.html

@@ -6,7 +6,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>Mobile Navigation Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
-    <link rel="stylesheet" href="style.mobile.css" type="text/css" />
+    <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css">
     <script type="text/javascript" src="../lib/OpenLayers.js?mobile"></script>
     <script type="text/javascript" src="mobile-navigation.js"></script>

examples/mobile-sencha.html

@@ -6,7 +6,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>OpenLayers with Sencha Touch</title>
         <script src="../lib/OpenLayers.js?mobile"></script>
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
         <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
         <script src="mobile-sencha.js"></script>

examples/mobile.html

@@ -5,7 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
         <script src="../lib/OpenLayers.js?mobile"></script>
         <script src="mobile.js"></script>
         <style>

lib/OpenLayers.js

@@ -414,4 +414,4 @@
 /**
  * Constant: VERSION_NUMBER
  */
-OpenLayers.VERSION_NUMBER="Release 2.12-rc5";
+OpenLayers.VERSION_NUMBER="Release 2.12-rc7";

lib/OpenLayers/SingleFile.js

@@ -7,7 +7,7 @@ var OpenLayers = {
     /**
      * Constant: VERSION_NUMBER
      */
-    VERSION_NUMBER: "Release 2.12-rc5",
+    VERSION_NUMBER: "Release 2.12-rc7",
 
     /**
      * Constant: singleFile

lib/OpenLayers/Util.js

@@ -1535,6 +1535,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) {
@@ -1569,25 +1596,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
@@ -1604,7 +1616,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);
 };

notes/2.12.md

@@ -25,6 +25,16 @@ Corresponding issues/pull requests:
  * https://github.com/openlayers/openlayers/pull/254
  * https://github.com/openlayers/openlayers/pull/261
 
+## style.mobile.css
+
+The theme/default directory now includes a mobile-specific CSS file, namely
+style.mobile.css. The OpenLayers mobile examples use this file. To use it
+in your mobile pages use tags like this:
+
+<link rel="stylesheet" href="openlayers/theme/default/style.mobile.css" type="text/css">
+
+(This file used to be in the examples/ directory).
+
 ## Sensible projection defaults
 
 The geographic and web mercator projections define default values for the maxExtent, and units. This simplifies the map and layer configuration.

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>

theme/default/style.mobile.css

@@ -49,3 +49,15 @@ div.olControlZoom a:hover {
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
 }
+/* Enable 3d acceleration when operating on tiles, this is
+   known to yield better performance on IOS Safari.
+   http://osgeo-org.1803224.n2.nabble.com/Harware-accelerated-CSS3-animations-for-iOS-td6255560.html
+
+   It also prevents tile blinking effects in iOS 5.
+   See https://github.com/openlayers/openlayers/issues/511
+*/
+@media (-webkit-transform-3d) {
+img.olTileImage {
+    -webkit-transform: translate3d(0, 0, 0);
+}
+}