add opacity support to createDiv() and createImage(). update their tests. also small update to modify tests for more completeness. updated one single complete usage of createImage() due to argument reordering

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

lib/OpenLayers/Tile/Image.js

@@ -104,6 +104,7 @@ OpenLayers.Tile.Image.prototype =
                                                       null,
                                                       "absolute",
                                                       null,
+                                                      null,
                                                       true);
         }
         this.layer.div.appendChild(this.imgDiv);

lib/OpenLayers/Util.js

@@ -55,12 +55,13 @@ OpenLayers.Util.modifyDOMElement = function(element, id, px, sz, position,
 * @param {String} position
 * @param {String} border
 * @param {String} overflow
+* @param {float} opacity Fractional value (0.0 - 1.0)
 *
 * @returns A DOM Div created with the specified attributes.
 * @type DOMElement
 */
 OpenLayers.Util.createDiv = function(id, px, sz, imgURL, position, 
-                                     border, overflow) {
+                                     border, overflow, opacity) {
 
     var dom = document.createElement('div');
 
@@ -78,8 +79,8 @@ OpenLayers.Util.createDiv = function(id, px, sz, imgURL, position,
     if (!position) {
         position = "absolute";
     }
-    OpenLayers.Util.modifyDOMElement(dom, id, px, sz, 
+    OpenLayers.Util.modifyDOMElement(dom, id, px, sz, position, 
-                                     position, border, overflow);
+                                     border, overflow, opacity);
 
     return dom;
 };
@@ -92,12 +93,13 @@ OpenLayers.Util.createDiv = function(id, px, sz, imgURL, position,
 * @param {String} position
 * @param {String} border
 * @param {Boolean} delayDisplay
+* @param {float} opacity Fractional value (0.0 - 1.0)
 *
 * @returns A DOM Image created with the specified attributes.
 * @type DOMElement
 */
 OpenLayers.Util.createImage = function(id, px, sz, imgURL, position, border,
-                                       delayDisplay) {
+                                       opacity, delayDisplay) {
 
     image = document.createElement("img");
 
@@ -124,7 +126,8 @@ OpenLayers.Util.createImage = function(id, px, sz, imgURL, position, border,
     if (!position) {
         position = "relative";
     }
-    OpenLayers.Util.modifyDOMElement(image, id, px, sz, position, border);
+    OpenLayers.Util.modifyDOMElement(image, id, px, sz, position, 
+                                     border, null, opacity);
 
         
     return image;

tests/test_Util.html

@@ -49,7 +49,7 @@
     }
 
     function test_04_Util_createDiv(t) {
-        t.plan( 20 );
+        t.plan( 24 );
 
         var id = "boo";
         var px = new OpenLayers.Pixel(5,5);
@@ -58,8 +58,9 @@
         var position = "absolute";
         var border = "13px solid";
         var overflow = "hidden";
+        var opacity = 0.5;
 
-        var div = OpenLayers.Util.createDiv(id, px, sz, img, position, border, overflow);
+        var div = OpenLayers.Util.createDiv(id, px, sz, img, position, border, overflow, opacity);
 
         if (!isMozilla)
             t.ok( true, "skipping element test outside of Mozilla");
@@ -77,6 +78,9 @@
         t.eq( div.style.position, position, "div.style.positionset correctly");    
         t.ok( (div.style.border.indexOf(border) != -1), "div.style.border set correctly");    
         t.eq( div.style.overflow, overflow, "div.style.overflow set correctly");    
+        t.eq( div.style.opacity, opacity + "", "elemnt.style.opacity set correctly");    
+        var filterString = 'alpha(opacity=' + (opacity * 100) + ')';
+        t.eq( div.style.filter, filterString, "element.style.filter set correctly");
 
         //test defaults
         var div = OpenLayers.Util.createDiv();
@@ -97,11 +101,13 @@
         t.eq( div.style.position, "absolute", "div.style.positionset correctly");    
         t.eq( div.style.border, "", "div.style.border set correctly");    
         t.eq(div.style.overflow, "", "div.style.overflow set correctly");    
+        t.ok( !div.style.opacity, "elemnt.style.opacity set correctly");    
+        t.ok( !div.style.filter, "element.style.filter set correctly");
 
     }
 
     function test_05_Util_createImage(t) {
-        t.plan( 18 );
+        t.plan( 22 );
 
         var img = "http://www.openlayers.org/images/OpenLayers.trac.png";
         var sz = new OpenLayers.Size(10,10);
@@ -109,8 +115,9 @@
         var position = "absolute";
         var id = "boo";
         var border = "1px solid";
+        var opacity = 0.5;
 
-        var image = OpenLayers.Util.createImage(id, xy, sz, img, position, border);
+        var image = OpenLayers.Util.createImage(id, xy, sz, img, position, border, opacity);
 
         if (!isMozilla)
             t.ok( true, "skipping element test outside of Mozilla");
@@ -125,7 +132,10 @@
 
         t.ok( (image.style.border.indexOf(border) != -1), "image.style.border set correctly");    
         t.eq( image.src, img, "image.style.backgroundImage correctly");    
-        t.eq( image.style.position, position, "image.style.positionset correctly");    
+        t.eq( image.style.position, position, "image.style.position set correctly");    
+        t.eq( image.style.opacity, opacity + "", "image.style.opacity set correctly");    
+        var filterString = 'alpha(opacity=' + (opacity * 100) + ')';
+        t.eq( image.style.filter, filterString, "element.style.filter set correctly");
 
         //test defaults
         var image = OpenLayers.Util.createImage();
@@ -144,6 +154,8 @@
         t.ok((image.style.border == ""), "image.style.border set correctly");    
         t.eq(image.src, "", "image.style.backgroundImage correctly");    
         t.eq( image.style.position, "relative", "image.style.positionset correctly");    
+        t.ok( !image.style.opacity, "elemnt.style.opacity default unset");    
+        t.ok( !image.style.filter, "element.style.filter default unset");
 
     }
 
@@ -178,7 +190,7 @@
     }
 
     function test_08_Util_createAlphaImageDiv(t) {
-        t.plan( 18 );
+        t.plan( 19 );
 
         var img = "http://www.openlayers.org/images/OpenLayers.trac.png";
         var sz = new OpenLayers.Size(10,10);
@@ -204,7 +216,9 @@
         t.eq( imageDiv.style.height, sz.h + "px", "image.style.height set correctly");    
 
         t.eq( imageDiv.style.position, position, "image.style.positionset correctly");    
-        t.eq( imageDiv.style.opacity, opacity + "", "image.style.opacity set correctly");    
+        t.eq( imageDiv.style.opacity, opacity + "", "elemnt.style.opacity set correctly");    
+        var filterString = 'alpha(opacity=' + (opacity * 100) + ')';
+        t.eq( imageDiv.style.filter, filterString, "element.style.filter set correctly");
 
 
         image = imageDiv.firstChild;
@@ -284,7 +298,7 @@
     }
 
     function test_09_Util_modifyAlphaImageDiv(t) {
-        t.plan( 18 );
+        t.plan( 19 );
 
         var imageDiv = OpenLayers.Util.createAlphaImageDiv();
 
@@ -312,7 +326,9 @@
         t.eq( imageDiv.style.height, sz.h + "px", "image.style.height set correctly");    
 
         t.eq( imageDiv.style.position, position, "image.style.position set correctly");    
-        t.eq( imageDiv.style.opacity, opacity + "", "image.style.opacity set correctly");    
+        t.eq( imageDiv.style.opacity, opacity + "", "elemnt.style.opacity set correctly");    
+        var filterString = 'alpha(opacity=' + (opacity * 100) + ')';
+        t.eq( imageDiv.style.filter, filterString, "element.style.filter set correctly");
 
 
         image = imageDiv.firstChild;