From cd0b43d938382937b1ad11502defc8c36308a897 Mon Sep 17 00:00:00 2001 From: euzuro Date: Mon, 29 May 2006 13:30:11 +0000 Subject: [PATCH] add OpenLayers.Util.modifyAlphaImage() function and tests git-svn-id: http://svn.openlayers.org/trunk/openlayers@448 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- lib/OpenLayers/Util.js | 56 ++++++++++++++++++++++--------- tests/test_Util.html | 75 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 115 insertions(+), 16 deletions(-) diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index 93d22f4e59..c2f6e84e42 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -709,6 +709,42 @@ OpenLayers.Util.alphaHack = function() { (version >= 5.5) && (version < 7) ); } +/** +* @param {DOMElement} div Div containing Alpha-adjusted Image +* @param {String} id +* @param {OpenLayers.Pixel} px +* @param {OpenLayers.Size} sz +* @param {String} imgURL +* @param {String} position +* @param {String} border +* @param {String} sizing 'crop', 'scale', or 'image'. Default is "scale" +*/ +OpenLayers.Util.modifyAlphaImageDiv = function(div, id, px, sz, imgURL, + position, border, sizing) { + + OpenLayers.Util.modifyDOMElement(div, id, px, sz); + + var img = div.childNodes[0]; + + if (imgURL) { + img.src = imgURL; + } + OpenLayers.Util.modifyDOMElement(img, div.id + "_innerImage", null, sz, + "relative", border); + + if (OpenLayers.Util.alphaHack()) { + div.style.display = "inline-block"; + if (sizing == null) { + sizing = "scale"; + } + div.style.filter = "progid:DXImageTransform.Microsoft" + + ".AlphaImageLoader(src='" + img.src + "', " + + "sizingMethod='" + sizing + "')"; + img.style.filter = "progid:DXImageTransform.Microsoft" + + ".Alpha(opacity=0)"; + } +}; + /** * @param {String} id * @param {OpenLayers.Pixel} px @@ -725,23 +761,13 @@ OpenLayers.Util.alphaHack = function() { OpenLayers.Util.createAlphaImageDiv = function(id, px, sz, imgURL, position, border, sizing) { - var div = OpenLayers.Util.createDiv(id, px, sz); - var img = OpenLayers.Util.createImage(id + "_innerImage", null, sz, - imgURL, "relative", border); + var div = OpenLayers.Util.createDiv(); + var img = OpenLayers.Util.createImage(); div.appendChild(img); - if (OpenLayers.Util.alphaHack()) { - div.style.display = "inline-block"; - if (sizing == null) { - sizing = "scale"; - } - div.style.filter = "progid:DXImageTransform.Microsoft" + - ".AlphaImageLoader(src='" + imgURL + "', " + - "sizingMethod='" + sizing + "')"; - img.style.filter = "progid:DXImageTransform.Microsoft" + - ".Alpha(opacity=0)"; - } - + OpenLayers.Util.modifyAlphaImageDiv(div, id, px, sz, imgURL, + position, border, sizing); + return div; }; diff --git a/tests/test_Util.html b/tests/test_Util.html index 705316c21b..e2499bbb16 100644 --- a/tests/test_Util.html +++ b/tests/test_Util.html @@ -246,7 +246,7 @@ var filter = "progid:DXImageTransform.Microsoft" + ".AlphaImageLoader(src='" + img + "', " + "sizingMethod='scale')"; - t.eq(imageDiv.style.filter, filter, "sizingMethod correctly set to scale"); + t.eq(imageDiv.style.filter, filter, "sizingMethod default correctly set to scale"); } else { t.ok(true); } @@ -282,6 +282,79 @@ } + function test_09_Util_modifyAlphaImageDiv(t) { + t.plan( 17 ); + + var imageDiv = OpenLayers.Util.createAlphaImageDiv(); + + var img = "http://www.openlayers.org/images/OpenLayers.trac.png"; + var sz = new OpenLayers.Size(10,10); + var xy = new OpenLayers.Pixel(5,5); + var position = "absolute"; + var id = "boo"; + var border = "1px solid"; + var sizing = "crop"; + + OpenLayers.Util.modifyAlphaImageDiv(imageDiv, id, xy, sz, img, position, border, sizing); + + if (!isMozilla) + t.ok( true, "skipping element test outside of Mozilla"); + else + t.ok( imageDiv instanceof HTMLDivElement, "createDiv creates a valid HTMLDivElement" ); + + t.eq( imageDiv.id, id, "image.id set correctly"); + t.eq( imageDiv.style.left, xy.x + "px", "image.style.left set correctly"); + t.eq( imageDiv.style.top, xy.y + "px", "image.style.top set correctly"); + + t.eq( imageDiv.style.width, sz.w + "px", "image.style.width set correctly"); + t.eq( imageDiv.style.height, sz.h + "px", "image.style.height set correctly"); + + t.eq( imageDiv.style.position, position, "image.style.positionset correctly"); + + + image = imageDiv.firstChild; + + if (!isMozilla) + t.ok( true, "skipping element test outside of Mozilla"); + else + t.ok( image instanceof HTMLImageElement, "createImage creates a valid HTMLImageElement" ); + t.eq( image.id, id + "_innerImage", "image.id set correctly"); + + t.eq( image.style.width, sz.w + "px", "image.style.width set correctly"); + t.eq( image.style.height, sz.h + "px", "image.style.height set correctly"); + + t.ok( (image.style.border.indexOf(border) != -1), "image.style.border set correctly"); + t.eq( image.style.position, "relative", "image.style.positionset correctly"); + + if (OpenLayers.Util.alphaHack()) { + + t.eq(imageDiv.style.display, "inline-block", "imageDiv.style.display set correctly"); + + var filter = "progid:DXImageTransform.Microsoft" + + ".AlphaImageLoader(src='" + img + "', " + + "sizingMethod='" + sizing + "')"; + t.eq(imageDiv.style.filter, filter, "div filter value correctly set"); + + filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; + t.eq(image.style.filter, filter, "image filter set correctly"); + + } else { + t.eq( image.src, img, "image.style.backgroundImage correctly"); + t.ok(true, "div filter value not set (not in IE)"); + t.ok(true, "image filter value not set (not in IE)"); + } + + var imageDiv = OpenLayers.Util.createAlphaImageDiv(id, xy, sz, img, position, border); + if (OpenLayers.Util.alphaHack()) { + var filter = "progid:DXImageTransform.Microsoft" + + ".AlphaImageLoader(src='" + img + "', " + + "sizingMethod='scale')"; + t.eq(imageDiv.style.filter, filter, "sizingMethod default correctly set to scale"); + } else { + t.ok(true); + } + + } // -->