Collecting image tile changes in the Image.js.

lib/OpenLayers/Tile/Image.js

@@ -362,12 +362,12 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         var opacity = this.layer.opacity,
             tileAnimation = this.layer.map.tileAnimation;
 
-        if (OpenLayers.TRANSITION && tileAnimation && opacity) {
+        if (OpenLayers.Tile.Image.TRANSITION && tileAnimation && opacity) {
             // if the displaying of the tile is animated we delay the
             // loadend event until after the end of the transition, this
             // to avoid flash effects because the backbuffer is removed
             // before the tile is actually displayed
-            OpenLayers.Event.observe(img, OpenLayers.TRANSITION_END,
+            OpenLayers.Event.observe(img, OpenLayers.Tile.Image.TRANSITION_END,
                 OpenLayers.Function.bind(this.onTransitionEnd, this)
             );
         }
@@ -376,7 +376,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         img.style.opacity = opacity;
         img.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
 
-        if (!OpenLayers.TRANSITION || !tileAnimation || !opacity) {
+        if (!OpenLayers.Tile.Image.TRANSITION || !tileAnimation || !opacity) {
             this.isLoading = false;
             this.events.triggerEvent("loadend");
         }
@@ -432,3 +432,34 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
     CLASS_NAME: "OpenLayers.Tile.Image"
 
 });
+
+// Test for support of CSS transitions and store appropriate property names
+(function() {
+    function testProp(props) {
+        var style = document.documentElement.style;
+        for (var i=0; i<props.length; i++) {
+            if(props[i] in style) {
+                return props[i];
+            }
+        }
+        return false;
+    }
+    
+    var TRANSITION = testProp([
+        'transition', 'webkitTransition', 'MozTransition'
+    ]);
+    
+    var TRANSITION_END = TRANSITION === 'webkitTransition' ?
+        TRANSITION + 'End' : 'transitionend';
+
+    /**
+     * Constant: OpenLayers.Tile.Image.TRANSITION
+     */
+    OpenLayers.Tile.Image.TRANSITION = TRANSITION;
+
+    /**
+     * Constant: OpenLayers.Tile.Image.TRANSITION_END
+     */
+    OpenLayers.Tile.Image.TRANSITION_END = TRANSITION_END;
+})();
+

lib/OpenLayers/Util.js

@@ -1435,34 +1435,6 @@ OpenLayers.BROWSER_NAME = (function() {
     return name;
 })();
 
-(function() {
-    function testProp(props) {
-        var style = document.documentElement.style;
-        for (var i=0; i<props.length; i++) {
-            if(props[i] in style) {
-                return props[i];
-            }
-        }
-        return false;
-    }
-
-    /**
-     * Constant: TRANSITION
-     */
-    OpenLayers.TRANSITION = testProp([
-        'transition', 'webkitTransition', 'MozTransition'
-    ]);
-
-    /**
-     * Constant: OpenLayers.TRANSITION_END
-     */
-    OpenLayers.TRANSITION_END = OpenLayers.TRANSITION === 'webkitTransition' ?
-        OpenLayers.TRANSITION + 'End' : 'transitionend';
-})();
-
-
-
-
 /**
  * Function: getBrowserName
  * 

tests/Tile/Image.html

@@ -357,9 +357,9 @@
         var log;
         tile.events.on({loadend: function() { log++; }});
 
-        var T = OpenLayers.TRANSITION;
+        var T = OpenLayers.Tile.Image.TRANSITION;
-        var TE = OpenLayers.TRANSITION_END;
+        var TE = OpenLayers.Tile.Image.TRANSITION_END;
-        OpenLayers.TRANSITION_END = 'transitionend';
+        OpenLayers.Tile.Image.TRANSITION_END = 'transitionend';
 
         function firstObserverName() {
             var cacheID = tile.imgDiv._eventCacheID,
@@ -367,7 +367,7 @@
             return observers && observers.length > 0 ? observers[0].name : undefined;
         }
 
-        OpenLayers.TRANSITION = true;
+        OpenLayers.Tile.Image.TRANSITION = true;
         map.tileAnimation = true;
         log = 0;
         tile.onImageLoad();
@@ -381,7 +381,7 @@
              '[a] onImageLoad registers a transitionend observer');
         OpenLayers.Event.stopObservingElement(tile.imgDiv);
 
-        OpenLayers.TRANSITION = true;
+        OpenLayers.Tile.Image.TRANSITION = true;
         map.tileAnimation = false;
         log = 0;
         tile.onImageLoad();
@@ -395,7 +395,7 @@
              '[b] onImageLoad does not register a transitionend observer');
         OpenLayers.Event.stopObservingElement(tile.imgDiv);
 
-        OpenLayers.TRANSITION = false;
+        OpenLayers.Tile.Image.TRANSITION = false;
         map.tileAnimation = true;
         log = 0;
         tile.onImageLoad();
@@ -410,8 +410,8 @@
         OpenLayers.Event.stopObservingElement(tile.imgDiv);
 
         map.destroy();
-        OpenLayers.TRANSITION = T;
+        OpenLayers.Tile.Image.TRANSITION = T;
-        OpenLayers.TRANSITION_END = TE;
+        OpenLayers.Tile.Image.TRANSITION_END = TE;
     }
     
   </script>