diff --git a/lib/OpenLayers/Tile/Image.js b/lib/OpenLayers/Tile/Image.js index 149831ef35..50c2548202 100644 --- a/lib/OpenLayers/Tile/Image.js +++ b/lib/OpenLayers/Tile/Image.js @@ -211,7 +211,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { */ positionTile: function() { var style = this.getTile().style, - size = this.layer.getImageSize(this.bounds); + size = this.frame ? this.size : + this.layer.getImageSize(this.bounds); style.left = this.position.x + "%"; style.top = this.position.y + "%"; style.width = size.w + "%"; @@ -254,11 +255,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { this.imgDiv.galleryImg = "no"; var style = this.imgDiv.style; - if (this.layer.gutter) { - var left = this.layer.gutter / this.layer.tileSize.w * 100; - var top = this.layer.gutter / this.layer.tileSize.h * 100; + if (this.frame) { + var left = 0, top = 0; + if (this.layer.gutter) { + left = this.layer.gutter / this.layer.tileSize.w * 100; + top = this.layer.gutter / this.layer.tileSize.h * 100; + } style.left = -left + "%"; style.top = -top + "%"; + style.width = (2 * left + 100) + "%"; + style.height = (2 * top + 100) + "%"; } style.visibility = "hidden"; style.opacity = 0; @@ -275,8 +281,6 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { style.width = "100%"; } if (this.frame) { - style.width = "100%"; - style.height = "100%"; this.frame.appendChild(this.imgDiv); } } diff --git a/tests/Tile/Image.html b/tests/Tile/Image.html index 6ef426e386..2623dd5a6a 100644 --- a/tests/Tile/Image.html +++ b/tests/Tile/Image.html @@ -399,6 +399,97 @@ } } + /* + * A series of tests to verify the dimensions and positions + * of the tile frame and img after draw. + + * Written for https://github.com/openlayers/openlayers/issues/441 + */ + function test_draw_without_gutter_without_frame(t) { + t.plan(5); + + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS('blank', + '../../img/blank.gif', + {layers: 'fake'}, + {isBaseLayer: true}); + map.addLayer(layer); + var tile = new OpenLayers.Tile.Image( + layer, + new OpenLayers.Pixel(6, 6), + new OpenLayers.Bounds(5, 45, 6, 46), + null, + new OpenLayers.Size(256, 256)); + + tile.draw(); + t.eq(tile.frame, null, 'no frame'); + t.eq(parseInt(tile.imgDiv.style.left, 10), 6, 'correct tile img left'); + t.eq(parseInt(tile.imgDiv.style.top, 10), 6, 'correct tile img top'); + t.eq(parseInt(tile.imgDiv.style.width, 10), 256, 'correct tile img width'); + t.eq(parseInt(tile.imgDiv.style.height, 10), 256, 'correct tile img height'); + + map.destroy(); + } + function test_draw_without_gutter_with_frame(t) { + t.plan(8); + + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS('blank', + '../../img/blank.gif', + {layers: 'fake'}, + {isBaseLayer: true}); + map.addLayer(layer); + layer.gutter = 1; // this is just for a frame to be created for + // the tile + var tile = new OpenLayers.Tile.Image( + layer, + new OpenLayers.Pixel(6, 6), + new OpenLayers.Bounds(5, 45, 6, 46), + null, + new OpenLayers.Size(256, 256)); + layer.gutter = null; + + tile.draw(); + t.eq(parseInt(tile.frame.style.left, 10), 6, 'correct tile frame left'); + t.eq(parseInt(tile.frame.style.top, 10), 6, 'correct tile frame top'); + t.eq(parseInt(tile.frame.style.width, 10), 256, 'correct tile frame width'); + t.eq(parseInt(tile.frame.style.height, 10), 256, 'correct tile frame height'); + t.eq(parseInt(tile.imgDiv.style.left, 10), 0, 'correct tile img left'); + t.eq(parseInt(tile.imgDiv.style.top, 10), 0, 'correct tile img top'); + t.eq(parseInt(tile.imgDiv.style.width, 10), 100, 'correct tile img width'); + t.eq(parseInt(tile.imgDiv.style.height, 10), 100, 'correct tile img height'); + + map.destroy(); + } + function test_draw_with_gutter(t) { + t.plan(8); + + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS('blank', + '../../img/blank.gif', + {layers: 'fake'}, + {isBaseLayer: true, gutter: 15}); + map.addLayer(layer); + var tile = new OpenLayers.Tile.Image( + layer, + new OpenLayers.Pixel(6, 6), + new OpenLayers.Bounds(5, 45, 6, 46), + null, + new OpenLayers.Size(256, 256)); + + tile.draw(); + t.eq(parseInt(tile.frame.style.left, 10), 6, 'correct tile frame left'); + t.eq(parseInt(tile.frame.style.top, 10), 6, 'correct tile frame top'); + t.eq(parseInt(tile.frame.style.width, 10), 256, 'correct tile frame width'); + t.eq(parseInt(tile.frame.style.height, 10), 256, 'correct tile frame height'); + t.eq(parseInt(tile.imgDiv.style.left, 10), -5, 'correct tile img left'); + t.eq(parseInt(tile.imgDiv.style.top, 10), -5, 'correct tile img top'); + t.eq(parseInt(tile.imgDiv.style.width, 10), 111, 'correct tile img width'); + t.eq(parseInt(tile.imgDiv.style.height, 10), 111, 'correct tile img height'); + + map.destroy(); + } +