diff options
Diffstat (limited to 'misc/openlayers/tests/Tile')
| -rw-r--r-- | misc/openlayers/tests/Tile/Image.html | 490 | ||||
| -rw-r--r-- | misc/openlayers/tests/Tile/Image/IFrame.html | 183 | ||||
| -rw-r--r-- | misc/openlayers/tests/Tile/UTFGrid.html | 306 |
3 files changed, 979 insertions, 0 deletions
diff --git a/misc/openlayers/tests/Tile/Image.html b/misc/openlayers/tests/Tile/Image.html new file mode 100644 index 0000000..825c187 --- /dev/null +++ b/misc/openlayers/tests/Tile/Image.html @@ -0,0 +1,490 @@ +<html> +<head> + <script src="../OLLoader.js"></script> + <script type="text/javascript"> + // turn off tile queue, so we can check img urls in tests + delete OpenLayers.Layer.Grid.prototype.queueTileDraw; + + var isMozilla = (navigator.userAgent.indexOf("compatible") == -1); + var tile; + + var map, layer; + function setUp() { + map = new OpenLayers.Map("map"); + layer = new OpenLayers.Layer(null, { + isBaseLayer: true + }); + map.addLayer(layer) + map.setCenter(new OpenLayers.LonLat(0, 0)); + } + + function tearDown() { + map.destroy(); + map = null; + layer = null; + } + + function test_Tile_Image_constructor (t) { + t.plan( 6 ); + + setUp(); + + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + var url = "http://www.openlayers.org/dev/tests/tileimage"; + var size = new OpenLayers.Size(5,6); + tile = new OpenLayers.Tile.Image(layer, position, bounds, url, size); + + t.ok( tile instanceof OpenLayers.Tile.Image, "new OpenLayers.Tile returns Tile object" ); + t.ok( tile.layer == layer, "tile.layer is set correctly"); + t.ok( tile.position.equals(position), "tile.position is set correctly"); + t.ok( tile.bounds.equals(bounds), "tile.bounds is set correctly"); + t.eq( tile.url, url, "tile.url is set correctly"); + t.ok( tile.size.equals(size), "tile.size is set correctly"); + + tearDown(); + } + + function test_destroy_observers(t) { + t.plan(2); + + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "../../img/blank.gif", {layers: 'basic'}); + map.addLayer(layer); + + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + var size = new OpenLayers.Size(5,6); + + // with alpha hack + var withAlpha = new OpenLayers.Tile.Image(layer, position, bounds, null, size); + withAlpha.layerAlphaHack = true; + + withAlpha.draw(); + var cacheID = withAlpha.imgDiv._eventCacheID; + withAlpha.destroy(); + + t.eq(OpenLayers.Event.observers[cacheID], undefined, + "With alpha hack: imgDiv observers are cleared in destroy"); + + // without alpha hack + var withoutAlpha = new OpenLayers.Tile.Image(layer, position, bounds, null, size); + withoutAlpha.layerAlphaHack = false; + + withoutAlpha.draw(); + var cacheID = withoutAlpha.imgDiv._eventCacheID; + withoutAlpha.destroy(); + + t.eq(OpenLayers.Event.observers[cacheID], undefined, + "Without alpha hack: imgDiv observers are cleared in destroy"); + + map.destroy(); + } + + function test_Tile_Image_async (t) { + t.plan( 3 ); + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS( + "Name", + "../../img/blank.gif", + {layers: 'basic'}, {async: true, getURLasync: function(bounds, callback, scope) { + callback.call(scope, this.getURL(bounds)); + }} + ); + map.addLayer(layer); + + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + tile = layer.addTile(bounds, position); + tile.renderTile(); + t.delay_call(0.1, function() { + var expected = new Image(); + expected.src = layer.getURL(bounds); + t.eq(tile.imgDiv.src, expected.src, "image src correct for async request"); + t.eq(tile.asyncRequestId, 1, "asyncRequestId correct after renderTile"); + tile.renderTile(); + }); + t.delay_call(0.2, function() { + t.eq(tile.asyncRequestId, 2, "asyncRequestId correct after subsequent renderTile"); + tile.destroy(); + layer.destroy(); + map.destroy(); + }); + } + + function test_Tile_Image_draw (t) { + t.plan(7); + + var map = new OpenLayers.Map('map'); + + var size = new OpenLayers.Size(5,6); + layer = new OpenLayers.Layer.WMS("Name", + "../../img/blank.gif", + null, + {tileSize: size}); + map.addLayer(layer); + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + var url = "http://www.openlayers.org/dev/tests/tileimage"; + tile = new OpenLayers.Tile.Image(layer, position, bounds, url, size); + + tile.events.register("loadstart", this, function() { + t.ok(true, "loadstart triggered"); + }); + tile.events.register("reload", this, function() { + t.ok(true, "reload triggered"); + }); + + //this should trigger a "loadstart" event + tile.draw(); + + if (!isMozilla) + t.ok( true, "skipping element test outside of Mozilla"); + else + t.ok( tile.imgDiv instanceof HTMLElement, "tile.draw creates an image"); + var tParams = { + SERVICE: "WMS", VERSION: "1.1.1", + REQUEST: "GetMap", STYLES: "", + FORMAT: "image/jpeg", + SRS: "EPSG:4326", BBOX: [1,2,3,4], + WIDTH: String(size.w), HEIGHT: String(size.h) + }; + var expected = new Image(); + expected.src = "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams) + t.delay_call(0.1, function() { + t.eq( tile.imgDiv.src, expected.src, "tile.draw creates an image"); + }); + t.eq( tile.imgDiv.style.width, "5px", "Image width is correct" ); + t.eq( tile.imgDiv.style.height, "6px", "Image height is correct" ); + t.ok( tile.imgDiv.parentNode === layer.div, "Image is directly appended to the layer div" ); + + // this should trigger a "reload" event (since the image never actually + // loads in tests) + tile.draw(); + + } + function test_Tile_Image_OutsideMaxExtent(t) { + t.plan( 11 ); + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + var url = "http://www.openlayers.org/dev/tests/tileimage"; + var size = new OpenLayers.Size(5,6); + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "../../img/blank.gif", {layers: 'basic'}, {encodeBBOX: true}); + map.addLayer(layer); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-90,-180,90), url, size); + tile.draw() + t.eq(tile.imgDiv, null, "Images against side of maxextent don't load"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-181,-91,180,90), url, size); + tile.draw() + var tParams = { + LAYERS: "basic", SERVICE: "WMS", VERSION: "1.1.1", + REQUEST: "GetMap", STYLES: "", + FORMAT: "image/jpeg", + SRS: "EPSG:4326", BBOX: "-181,-91,180,90", + WIDTH: "256", HEIGHT: "256" + }; + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Images over edges of maxextent do load"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-181,-90,180,90), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-181,-90,180,90"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Images over edges of maxextent do load"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-180,-90,180,90), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-180,-90,180,90"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Image covering all of extent loads"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-80,-45,80,45), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-80,-45,80,45"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Image covering small part of extent loads"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-95,185,95), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-185,-95,185,95"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Image covering more than all of extent loads"); + + layer.displayOutsideMaxExtent=1; + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-90,-180,90), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-185,-90,-180,90"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Images against side of maxextent do load with displayOutsideMaxExtent"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-181,-90,180,90), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-181,-90,180,90"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Images over edges of maxextent do load with displayOutsideMaxExtent set"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-180,-90,180,90), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-180,-90,180,90"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Image covering all of extent loads with display outside max extent"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-80,-45,80,45), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-80,-45,80,45"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Image covering small part of extent loads with display outside max extent"); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-95,185,95), url, size); + tile.draw() + tParams = OpenLayers.Util.extend(tParams, {BBOX: "-185,-95,185,95"}); + t.eq(tile.url, + "../../img/blank.gif?" + OpenLayers.Util.getParameterString(tParams), + "Image covering more than all of extent loads"); + } + function test_Tile_Image_Display_After_Move(t) { + t.plan(2); + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + var url = "http://www.openlayers.org/dev/tests/tileimage"; + var size = new OpenLayers.Size(5,6); + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "../../img/blank.gif", {layers: 'basic'}); + map.addLayer(layer); + map.zoomToMaxExtent(); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size); + tile.draw(); + tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true); + t.delay_call( 1, function() { t.ok(!tile.imgDiv, "Reference to tile image removed.") } ); + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "../../img/blank.gif", {layers: 'basic'}, {'alpha':true}); + map.addLayer(layer); + tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size); + tile.draw(); + tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true) + t.delay_call( 1, function() { t.ok(!tile.imgDiv, "Reference to alpha tile image removed.") } ); + + } + + function test_Tile_Image_gutters(t) { + t.plan(5); + + var gutter = 0; + var name = 'Test Layer'; + var url = "http://octo.metacarta.com/cgi-bin/mapserv"; + var params = { map: '/mapdata/vmap_wms.map', + layers: 'basic', + format: 'image/png'}; + + + var map = new OpenLayers.Map('map', {tileManager: null}); + var layer = new OpenLayers.Layer.WMS(name, url, params, {gutter: gutter}); + map.addLayer(layer); + map.setCenter(new OpenLayers.LonLat(0,0), 5); + + var tile = layer.grid[0][0]; + t.ok(tile.layer.imageSize == null, + "zero size gutter doesn't set image size"); + + var zero_gutter_bounds = tile.bounds; + + map.destroy(); + + var gutter = 15; + var map = new OpenLayers.Map('map', {tileManager: null}); + var layer = new OpenLayers.Layer.WMS(name, url, params, {gutter: gutter}); + map.addLayer(layer); + map.setCenter(new OpenLayers.LonLat(0,0), 5); + var tile = layer.grid[0][0]; + t.ok(tile.layer.imageSize.equals(new OpenLayers.Size(tile.size.w + (2 * gutter), + tile.size.h + (2 * gutter))), + "gutter properly changes image size"); + + var offsetLeft = -(gutter / layer.tileSize.w * 100) | 0; + var offsetTop = -(gutter / layer.tileSize.h * 100) | 0; + t.eq(parseInt(tile.imgDiv.style.left, 10), offsetLeft, + "gutter properly sets image left style"); + t.eq(parseInt(tile.imgDiv.style.top, 10), offsetTop, + "gutter properly sets image top style"); + t.ok(tile.bounds.equals(zero_gutter_bounds), + "gutter doesn't affect tile bounds"); + + map.destroy(); + } + + function test_createBackBuffer(t) { + t.plan(3); + + var map = new OpenLayers.Map('map', {tileManager: null}); + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "../../img/blank.gif", {layers: 'basic'}); + map.addLayer(layer); + map.setCenter(new OpenLayers.LonLat(0,0), 5); + var tile = layer.grid[0][0]; + + // we're going to create a back buffer while the image + // is actually loading, so we call stopObservingElement + // to avoid any unexpected behavior + tile.isLoading = false; + OpenLayers.Event.stopObservingElement(tile.imgDiv); + + var img = tile.imgDiv; + var left = img.style.left; + var bb = tile.createBackBuffer(); + t.eq(bb.style.left, left, "backbuffer has same left style as frame"); + t.ok(bb === img, "image appended to bb"); + t.ok(tile.imgDiv == null, "image reference removed from tile"); + map.destroy(); + } + + function test_onImageLoad(t) { + t.plan(3); + + var map = new OpenLayers.Map('map', {tileManager: null}); + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "../../img/blank.gif", {layers: 'basic'}, {opacity: 0.5}); + map.addLayer(layer); + map.setCenter(new OpenLayers.LonLat(0,0), 5); + + var tile = layer.grid[0][0]; + + var log; + tile.events.on({loadend: function() { log++; }}); + + log = 0; + tile.onImageLoad(); + t.eq(tile.imgDiv.style.visibility, 'inherit', + 'onImageLoad makes the image visible'); + t.eq(parseFloat(tile.imgDiv.style.opacity), 0.5, + 'onImageLoad sets the expected opacity for the image'); + t.eq(log, 1, + 'onImageLoad does trigger loadend'); + + map.destroy(); + } + + function test_getCanvasContext(t) { + if (!OpenLayers.CANVAS_SUPPORTED) { + t.plan(0); + } else { + t.plan(1); + + var map = new OpenLayers.Map('map'); + var layer = new OpenLayers.Layer.WMS("blank", + "../../img/blank.gif", {layers: 'fake'}); + map.addLayer(layer); + map.setCenter(new OpenLayers.LonLat(0, 0), 5); + + t.delay_call(5, function() { + var tile = layer.grid[0][0]; + tile.onImageLoad(); + t.ok(tile.getCanvasContext() instanceof CanvasRenderingContext2D, + "getCanvasContext() returns CanvasRenderingContext2D instance"); + map.destroy(); + }); + } + } + + /* + * 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(); + } + + </script> +</head> +<body> +<div id="map" style="height:550px;width:500px"></div> +</body> +</html> + diff --git a/misc/openlayers/tests/Tile/Image/IFrame.html b/misc/openlayers/tests/Tile/Image/IFrame.html new file mode 100644 index 0000000..192c7c6 --- /dev/null +++ b/misc/openlayers/tests/Tile/Image/IFrame.html @@ -0,0 +1,183 @@ +<html> +<head> + <script src="../../OLLoader.js"></script> + <script type="text/javascript"> + // turn off animation frame handling, so we can check img urls in tests + delete OpenLayers.Layer.Grid.prototype.queueTileDraw; + + var isMozilla = (navigator.userAgent.indexOf("compatible") == -1); + var isOpera = (navigator.userAgent.indexOf("Opera") != -1); + var isIElt9 = (parseFloat(navigator.appVersion.split("MSIE")[1]) < 9); + + var map, layer; + var position = new OpenLayers.Pixel(20,30); + var bounds = new OpenLayers.Bounds(1,2,3,4); + var url = "http://www.openlayers.org/dev/tests/tileimage"; + var size = new OpenLayers.Size(5,6); + var name = "OpenaLayers WMS"; + var wmsUrl = "http://labs.metacarta.com/wms/vmap0?"; + + function test_Tile_Image_IFrame_create (t) { + t.plan( 3 ); + map = new OpenLayers.Map('map', {tileManager: null}); + var bar = new Array(205).join("1234567890"); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, + {layers: 'basic', foo: bar}, + {tileOptions: {maxGetUrlLength: 2048}, + transitionEffect: 'resize'}); + map.addLayer(layer); + + var tile = layer.addTile(bounds, position); + + tile.draw(); + t.eq(tile.imgDiv.nodeName.toLowerCase(), "iframe", "IFrame used for long URL"); + + layer.mergeNewParams({foo: null}); + tile.draw(); + t.eq(tile.imgDiv.nodeName.toLowerCase(), "img", "IMG used for short URL"); + + tile.maxGetUrlLength = 0; + tile.draw(); + t.eq(tile.imgDiv.nodeName.toLowerCase(), "iframe", "IFrame used when maxGetUrlLength is 0"); + + tile.destroy(); + layer.destroy(); + map.destroy(); + } + + function test_Tile_Image_IFrame_clear (t) { + t.plan( 1 ); + + map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); + map.addLayer(layer); + tile = layer.addTile(bounds, position); + tile.draw(); + tile.clear(); + + t.eq( + tile.frame.getElementsByTagName("iframe").length, 0, + "IFrame removed on clear()"); + tile.destroy(); + layer.destroy(); + map.destroy(); + } + + function test_Tile_Image_IFrame_initImage (t) { + t.plan( 2 ); + + map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); + map.addLayer(layer); + tile = layer.addTile(bounds, position); + tile.url = layer.getURL(bounds); + tile.initImage(); + + if(isMozilla) { + t.ok( tile.imgDiv instanceof HTMLElement, "tile.iFrame successfully created."); + } + else { + t.ok( tile.imgDiv != null, "tile.iFrame successfully created."); + } + t.eq( tile.imgDiv.className, "olTileImage", "iFrame's className correctly set."); + + map.destroy(); + } + + function test_Tile_Image_IFrame_createImage (t) { + t.plan( 9 ); + + map = new OpenLayers.Map('map', {tileManager: null}); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); + map.addLayer(layer); + var tile = layer.addTile(bounds, position); + tile.draw(); + var iFrame = tile.imgDiv; + var eventPane = tile.frame.childNodes[0]; + + t.ok(OpenLayers.String.contains(eventPane.style.backgroundImage, + tile.blankImageUrl), + "backgroundImage of eventPane is set."); + t.eq(parseInt(eventPane.style.zIndex, 10), 1, "zIndex of eventPane is set."); + if(isIElt9) { + t.ok(iFrame != null, "IFrame successfully created."); + t.eq(iFrame.style.backgroundColor, '#ffffff', "backgroundColor correctly set."); + t.eq(iFrame.style.filter, 'chroma(color=#FFFFFF)', "filter correctly set."); + } else { + t.ok(iFrame instanceof HTMLElement, "IFrame successfully created."); + t.ok(true, 'Skip IFrame backgroundColor test outside IE < 9'); + t.ok(true, 'Skip IFrame filter test outside IE < 9'); + } + t.eq( iFrame.scrolling, 'no', "no scrolling"); + t.eq( parseFloat(iFrame.marginWidth), 0, "no margin width"); + t.eq( parseFloat(iFrame.marginHeight), 0, "no margin height"); + t.eq( parseFloat(iFrame.frameBorder), 0, "no iframe border"); + + map.destroy(); + } + + function test_Tile_Image_IFrame_createRequestForm (t) { + t.plan( 6 ); + + var tParams = { + SERVICE: "WMS", VERSION: "1.1.1", + REQUEST: "GetMap", STYLES: "", + FORMAT: "image/jpeg", + SRS: "EPSG:4326", BBOX: [1,2,3,4], + WIDTH: String(size.w), HEIGHT: String(size.h) + }; + var newLayer = new OpenLayers.Layer.WMS("Name", + "http://labs.metacarta.com/TESTURL", + tParams, + {tileSize: size, tileOptions: {maxGetUrlLength: 0}}); + map = new OpenLayers.Map('map'); + map.addLayer(newLayer); + tile = newLayer.addTile(bounds, position); + tile.url = newLayer.getURL(bounds); + tile.initImage(); + + tile.url = newLayer.getURL(bounds); + var form = tile.createRequestForm(); + if(isMozilla) { + t.ok( form instanceof HTMLElement, "created html form successfully."); + } + else { + t.ok( form != null, "created html form successfully."); + } + + + var cacheId = newLayer.params["_OLSALT"]; + cacheId = (cacheId ? cacheId + "_" : "") + tile.bounds.toBBOX(); + var url = OpenLayers.Util.urlAppend(newLayer.url, cacheId); + + t.eq( form.method.toLowerCase(), 'post', "form method correctly set."); + t.eq( form.target, tile.id+'_iFrame', "form target correctly set."); + t.eq( form.action, url, "form action correctly set."); + + var formParams = {}; + var children = form.childNodes; + for(var i=0; i<form.childNodes.length; i++) { + formParams[children[i].name] = children[i].value + } + newLayer.params.BBOX = newLayer.params.BBOX.join(","); + t.eq(newLayer.params, formParams, "html form elements equal layer's parameters."); + + tile.draw(); + tile.clear(); + tile.initImage(); + tile.createRequestForm(); + t.ok( + tile.imgDiv.nodeName == "IFRAME", + "Iframe has been reinserted properly" + ); + + tile.destroy(); + newLayer.destroy(); + map.destroy(); + } +</script> +</head> +<body> +<div id="map" style="height:550px;width:500px"></div> +</body> +</html> diff --git a/misc/openlayers/tests/Tile/UTFGrid.html b/misc/openlayers/tests/Tile/UTFGrid.html new file mode 100644 index 0000000..4998adc --- /dev/null +++ b/misc/openlayers/tests/Tile/UTFGrid.html @@ -0,0 +1,306 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <script> + /** + * Because browsers that implement requestAnimationFrame may not execute + * animation functions while a window is not displayed (e.g. in a hidden + * iframe as in these tests), we mask the native implementations here. The + * native requestAnimationFrame functionality is tested in Util.html and + * in PanZoom.html (where a popup is opened before panning). The panTo tests + * here will test the fallback setTimeout implementation for animation. + */ + window.requestAnimationFrame = + window.webkitRequestAnimationFrame = + window.mozRequestAnimationFrame = + window.oRequestAnimationFrame = + window.msRequestAnimationFrame = null; + </script> + <script src="../OLLoader.js"></script> + <script type="text/javascript"> + + var map, layer; + function setUp() { + layer = new OpenLayers.Layer.UTFGrid({ + url: "../data/utfgrid/world_utfgrid/${z}/${x}/${y}.json", + isBaseLayer: true, + utfgridResolution: 4 + }); + map = new OpenLayers.Map({ + div: "map", + projection: "EPSG:900913", + layers: [layer], + center: [0, 0], + zoom: 1, + tileManager: null + }); + } + + function tearDown() { + map.destroy(); + map = null; + layer = null; + } + + function test_constructor(t) { + t.plan(7); + + setUp(); + + var position = new OpenLayers.Pixel(20, 30); + var bounds = new OpenLayers.Bounds(1, 2, 3, 4); + var url = "http://example.com/"; + var size = new OpenLayers.Size(5, 6); + var tile = new OpenLayers.Tile.UTFGrid(layer, position, bounds, url, size); + + t.ok(tile instanceof OpenLayers.Tile, "tile instance"); + t.ok(tile instanceof OpenLayers.Tile.UTFGrid, "UTFGrid tile instance"); + t.ok(tile.layer === layer, "layer set"); + t.ok(tile.position.equals(position), "position set"); + t.ok(tile.bounds.equals(bounds), "bounds set"); + t.eq(tile.url, url, "url set"); + t.ok(tile.size.equals(size), "size set"); + + tearDown(); + } + + function test_parseData(t) { + t.plan(2); + setUp(); + + var tile = layer.grid[0][0]; + + tile.parseData('{"foo": "bar"}'); + t.eq(tile.json, {foo: "bar"}, "valid json parsed"); + + var err, obj; + try { + obj = tile.parseData('foo bar'); + } catch (e) { + err = e; + } + // The JSON format doesn't actually throw on IE6, so we also check + // for undefined here. + t.ok(err instanceof Error || obj === undefined, "throws on invalid json"); + + tearDown(); + } + + function test_draw(t) { + t.plan(7); + setUp(); + + var position = new OpenLayers.Pixel(20, 30); + var bounds = new OpenLayers.Bounds(1, 2, 3, 4); + var url = "../data/utfgrid/world_utfgrid/${z}/${x}/${y}.json"; + var size = new OpenLayers.Size(256, 256); + var tile = new OpenLayers.Tile.UTFGrid(layer, position, bounds, url, size); + + var log = []; + function logger(event) { + log.push(event); + } + tile.events.on({ + loadstart: logger, + reload: logger, + loadend: logger + }); + + t.eq(log.length, 0, "no events logged"); + + // start tile loading + tile.draw(); + t.eq(log.length, 1, "[first draw] one event"); + t.eq(log[0].type, "loadstart", "[first draw] loadstart"); + + // restart tile loading + log.length = 0; + tile.draw(); + t.eq(log.length, 1, "[second draw] first event"); + t.eq(log[0].type, "reload", "[second draw] reload"); + + // wait for tile loading to finish + t.delay_call(1, function() { + t.eq(log.length, 2, "[second draw] second event"); + t.eq(log[1].type, "loadend", "[second draw] loadend"); + tearDown(); + }); + + } + + function test_abortLoading(t) { + t.plan(7); + setUp(); + + var position = new OpenLayers.Pixel(20, 30); + var bounds = new OpenLayers.Bounds(1, 2, 3, 4); + var url = "../data/utfgrid/world_utfgrid/${z}/${x}/${y}.json"; + var size = new OpenLayers.Size(256, 256); + var tile = new OpenLayers.Tile.UTFGrid(layer, position, bounds, url, size); + + var log = []; + function logger(event) { + log.push(event); + } + tile.events.on({ + loadstart: logger, + reload: logger, + loadend: logger + }); + + t.eq(log.length, 0, "no events logged"); + + // start tile loading + tile.draw(); + t.eq(log.length, 1, "[first draw] one event"); + t.eq(log[0].type, "loadstart", "[first draw] loadstart"); + + // abort tile loading + log.length = 0; + tile.abortLoading(); + t.eq(log.length, 0, "[first abort] no events logged"); // TODO: does anybody need an abort event? + + // abort again for the heck of it + var err; + try { + tile.abortLoading(); + } catch (e) { + err = e; + } + t.ok(!err, "[second abort] no trouble"); + t.eq(log.length, 0, "[second abort] no events"); + + // wait to confirm tile loading doesn't happen after abort + t.delay_call(1, function() { + t.eq(log.length, 0, "[wait] no events"); + tearDown(); + }); + + } + + function test_getFeatureId(t) { + t.plan(3); + setUp(); + + var tile = layer.grid[1][1]; + t.delay_call(0.5, function() { + var id = tile.getFeatureId(16, 60); + t.eq(id, "238", "feature 238 at 16, 60"); + t.eq(tile.getFeatureId(18, 63), id, "same feature at 18, 63"); + + t.eq(tile.getFeatureId(300, 10), null, "null id outside tile"); + + tearDown(); + }); + } + + function test_getFeatureInfo(t) { + t.plan(3); + setUp(); + + var tile = layer.grid[1][1]; + t.delay_call(0.5, function() { + var info = tile.getFeatureInfo(16, 60); + var exp = { + id: "238", + data: { + NAME: "Svalbard", + POP2005: 0 + } + }; + t.eq(info, exp, "feature info at 16, 60"); + t.eq(tile.getFeatureInfo(17, 62), exp, "same feature at 17, 62"); + + t.eq(tile.getFeatureInfo(300, 10), null, "undefined outside tile"); + + tearDown(); + }); + } + + // While I dislike committing tests that aren't run, I'd like to make an + // exception here. This test (or something like it) should pass. When + // https://github.com/mapbox/utfgrid-spec/issues/1 is resolved, we should + // either modify this or update demo.json and enable the test. + function xtest_getFeatureId_demo(t) { + /** + * The UTFGrid 1.2 spec (https://github.com/mapbox/utfgrid-spec/blob/master/1.2/utfgrid.md) + * links to a demo.json to be used for testing implementations. This + * file is constructed with 256x256 data points. Each data point maps + * to a "feature id" using this heuristic: + * + * // x and y are pixel offsets from top left of 256x256 tile + * if (y < 255 || x < 222) { + * id = (y * 256) + x + * } else { + * id = 65501; // max number of ids that can be encoded + * } + */ + t.plan(1); + setUp(); + + // look at this beauty of a constructor + var tile = new OpenLayers.Tile.UTFGrid( + layer, // layer + new OpenLayers.Pixel(0, 0), // position + new OpenLayers.Bounds(0, 0, 256, 256), // bounds + "../data/utfgrid/demo-1.1.json", // url + new OpenLayers.Size(256, 256), // size + {utfgridResolution: 1} // options + ); + + var err; + var request = new OpenLayers.Request.GET({ + url: tile.url, + success: function(req) { + try { + tile.parseData(req.responseText); + } catch (e) { + err = e; + } + }, + failure: function(req) { + err = new Error("Failed to fetch json. Status: " + req.status); + } + }); + + // wait for response and parsing, then make assertions + t.delay_call(1, function() { + if (err) { + t.fail(err); + } else { + var got, exp, failure; + outer: for (var y=0; y<256; ++y) { + for (var x=0; x<256; ++x) { + if (y<255 || x<222) { + exp = String((y * 256) + x); + } else { + exp = "65501"; + } + got = tile.getFeatureId(x, y); + if (got !== exp) { + failure = "Failed to get id for (" + x + ", " + y + "): " + + "got " + got + " but expected " + exp; + + break outer; + } + } + } + if (!failure) { + t.ok(true, "resolved feature ids for all data points"); + } else { + t.fail(failure); + } + } + tearDown(); + }); + + } + + </script> +</head> +<body> +<div id="map" style="height:550px;width:500px"></div> +</body> +</html> + |