diff --git a/test/test-extensions.js b/test/test-extensions.js index 73faf238e3..c9cdac18a5 100644 --- a/test/test-extensions.js +++ b/test/test-extensions.js @@ -395,7 +395,12 @@ function expectResembleWebGL(map, referenceImage, tolerance, done) { map.render(); map.on('postcompose', function(event) { - var webglCanvas = map.getTarget().children[0].children[0]; + if (event.frameState.animate) { + // make sure the tile-queue is empty + return; + } + + var webglCanvas = event.glContext.getCanvas(); expect(webglCanvas).to.be.a(HTMLCanvasElement); // draw the WebGL canvas on a new canvas, because we can not create diff --git a/test_rendering/README.md b/test_rendering/README.md index 292d965bf3..8f305068a4 100644 --- a/test_rendering/README.md +++ b/test_rendering/README.md @@ -14,8 +14,9 @@ From the command-line the tests can be run with the build target `./build.py tes ## Adding new tests When creating a new test case, a reference image has to be created. By appending `?generate` -to the URL, a canvas with the rendered map will be shown on the page. Then the reference -image can simply be created with a right-click and "Save image as". +to the URL, a canvas with the rendered map will be shown on the page when calling +`expectResemble`. Then the reference image can simply be created with a right-click +and "Save image as". It is recommended to only run a single test case when generating the reference image. diff --git a/test_rendering/spec/ol/data/icon.png b/test_rendering/spec/ol/data/icon.png new file mode 100644 index 0000000000..ed886623d5 Binary files /dev/null and b/test_rendering/spec/ol/data/icon.png differ diff --git a/test_rendering/spec/ol/data/tiles/osm/5/5/12.png b/test_rendering/spec/ol/data/tiles/osm/5/5/12.png new file mode 100644 index 0000000000..ada08786c9 Binary files /dev/null and b/test_rendering/spec/ol/data/tiles/osm/5/5/12.png differ diff --git a/test_rendering/spec/ol/data/tiles/stamen-labels/5/5/12.png b/test_rendering/spec/ol/data/tiles/stamen-labels/5/5/12.png new file mode 100644 index 0000000000..b88d09eb76 Binary files /dev/null and b/test_rendering/spec/ol/data/tiles/stamen-labels/5/5/12.png differ diff --git a/test_rendering/spec/ol/expected/pan-canvas.png b/test_rendering/spec/ol/expected/pan-canvas.png new file mode 100644 index 0000000000..f9c84f316d Binary files /dev/null and b/test_rendering/spec/ol/expected/pan-canvas.png differ diff --git a/test_rendering/spec/ol/expected/pan-webgl.png b/test_rendering/spec/ol/expected/pan-webgl.png new file mode 100644 index 0000000000..49fe4e01aa Binary files /dev/null and b/test_rendering/spec/ol/expected/pan-webgl.png differ diff --git a/test_rendering/spec/ol/expected/render-canvas.png b/test_rendering/spec/ol/expected/render-canvas.png new file mode 100644 index 0000000000..ed50f1d7d2 Binary files /dev/null and b/test_rendering/spec/ol/expected/render-canvas.png differ diff --git a/test_rendering/spec/ol/expected/render-webgl.png b/test_rendering/spec/ol/expected/render-webgl.png new file mode 100644 index 0000000000..ab1663b974 Binary files /dev/null and b/test_rendering/spec/ol/expected/render-webgl.png differ diff --git a/test_rendering/spec/ol/expected/rotate-canvas.png b/test_rendering/spec/ol/expected/rotate-canvas.png new file mode 100644 index 0000000000..e614cf3c08 Binary files /dev/null and b/test_rendering/spec/ol/expected/rotate-canvas.png differ diff --git a/test_rendering/spec/ol/expected/rotate-webgl.png b/test_rendering/spec/ol/expected/rotate-webgl.png new file mode 100644 index 0000000000..014481d84b Binary files /dev/null and b/test_rendering/spec/ol/expected/rotate-webgl.png differ diff --git a/test_rendering/spec/ol/expected/zoom-canvas.png b/test_rendering/spec/ol/expected/zoom-canvas.png new file mode 100644 index 0000000000..ab3b0abde3 Binary files /dev/null and b/test_rendering/spec/ol/expected/zoom-canvas.png differ diff --git a/test_rendering/spec/ol/expected/zoom-webgl.png b/test_rendering/spec/ol/expected/zoom-webgl.png new file mode 100644 index 0000000000..f89e01ad68 Binary files /dev/null and b/test_rendering/spec/ol/expected/zoom-webgl.png differ diff --git a/test_rendering/spec/ol/layer/expected/2-layers-canvas.png b/test_rendering/spec/ol/layer/expected/2-layers-canvas.png new file mode 100644 index 0000000000..ad069af45c Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/2-layers-canvas.png differ diff --git a/test_rendering/spec/ol/layer/expected/2-layers-webgl.png b/test_rendering/spec/ol/layer/expected/2-layers-webgl.png new file mode 100644 index 0000000000..a982b089de Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/2-layers-webgl.png differ diff --git a/test_rendering/spec/ol/layer/expected/image-canvas.png b/test_rendering/spec/ol/layer/expected/image-canvas.png new file mode 100644 index 0000000000..86f9bedd38 Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/image-canvas.png differ diff --git a/test_rendering/spec/ol/layer/expected/image-webgl.png b/test_rendering/spec/ol/layer/expected/image-webgl.png new file mode 100644 index 0000000000..e0e4a150d8 Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/image-webgl.png differ diff --git a/test_rendering/spec/ol/layer/expected/opacity-canvas.png b/test_rendering/spec/ol/layer/expected/opacity-canvas.png new file mode 100644 index 0000000000..a69bb84d85 Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/opacity-canvas.png differ diff --git a/test_rendering/spec/ol/layer/expected/opacity-webgl.png b/test_rendering/spec/ol/layer/expected/opacity-webgl.png new file mode 100644 index 0000000000..389d138042 Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/opacity-webgl.png differ diff --git a/test_rendering/spec/ol/layer/expected/osm-canvas.png b/test_rendering/spec/ol/layer/expected/osm-canvas.png new file mode 100644 index 0000000000..86f9bedd38 Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/osm-canvas.png differ diff --git a/test_rendering/spec/ol/layer/expected/osm-webgl.png b/test_rendering/spec/ol/layer/expected/osm-webgl.png new file mode 100644 index 0000000000..86f9bedd38 Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/osm-webgl.png differ diff --git a/test_rendering/spec/ol/layer/image.test.js b/test_rendering/spec/ol/layer/image.test.js new file mode 100644 index 0000000000..692090e015 --- /dev/null +++ b/test_rendering/spec/ol/layer/image.test.js @@ -0,0 +1,94 @@ +goog.provide('ol.test.rendering.layer.Image'); + +describe('ol.rendering.layer.Image', function() { + + var target, map; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + map = new ol.Map({ + target: target, + renderer: renderer, + view: new ol.View({ + center: ol.proj.transform( + [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'), + zoom: 5 + }) + }); + return map; + } + + function waitForImages(sources, layerOptions, onImagesLoaded) { + var imagesLoading = 0; + var imagesLoaded = 0; + + var update = function() { + if (imagesLoading === imagesLoaded) { + onImagesLoaded(); + } + }; + + goog.array.forEach(sources, function(source) { + source.on('imageloadstart', function(event) { + imagesLoading++; + }); + source.on('imageloadend', function(event) { + imagesLoaded++; + update(); + }); + source.on('imageloaderror', function(event) { + expect().fail('Image failed to load'); + }); + + var options = { + source: source + }; + goog.object.extend(options, layerOptions); + map.addLayer(new ol.layer.Image(options)); + }); + } + + describe('single image layer', function() { + var source; + + beforeEach(function() { + source = new ol.source.ImageStatic({ + url: 'spec/ol/data/tiles/osm/5/5/12.png', + imageExtent: new ol.tilegrid.XYZ({}).getTileCoordExtent( + [5, 5, -12 - 1]), + projection: ol.proj.get('EPSG:3857') + }); + }); + + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + waitForImages([source], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/image-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + waitForImages([source], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/image-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); + }); +}); + +goog.require('goog.array'); +goog.require('goog.object'); +goog.require('ol.proj'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Image'); +goog.require('ol.source.ImageStatic'); +goog.require('ol.tilegrid.XYZ'); diff --git a/test_rendering/spec/ol/layer/tile.test.js b/test_rendering/spec/ol/layer/tile.test.js new file mode 100644 index 0000000000..6d2340d0e7 --- /dev/null +++ b/test_rendering/spec/ol/layer/tile.test.js @@ -0,0 +1,155 @@ +goog.provide('ol.test.rendering.layer.Tile'); + +describe('ol.rendering.layer.Tile', function() { + + var target, map; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + map = new ol.Map({ + target: target, + renderer: renderer, + view: new ol.View({ + center: ol.proj.transform( + [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'), + zoom: 5 + }) + }); + return map; + } + + function waitForTiles(sources, layerOptions, onTileLoaded) { + var tilesLoading = 0; + var tileLoaded = 0; + + var update = function() { + if (tilesLoading === tileLoaded) { + onTileLoaded(); + } + }; + + goog.array.forEach(sources, function(source) { + source.on('tileloadstart', function(event) { + tilesLoading++; + }); + source.on('tileloadend', function(event) { + tileLoaded++; + update(); + }); + source.on('tileloaderror', function(event) { + expect().fail('Tile failed to load'); + }); + + var options = { + source: source + }; + goog.object.extend(options, layerOptions); + map.addLayer(new ol.layer.Tile(options)); + }); + } + + describe('single tile layer', function() { + var source; + + beforeEach(function() { + source = new ol.source.XYZ({ + url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png' + }); + }); + + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + waitForTiles([source], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/osm-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + waitForTiles([source], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/osm-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); + }); + + describe('two tile layers', function() { + var source1, source2; + + beforeEach(function() { + source1 = new ol.source.XYZ({ + url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png' + }); + source2 = new ol.source.XYZ({ + url: 'spec/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png' + }); + }); + + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + waitForTiles([source1, source2], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/2-layers-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + waitForTiles([source1, source2], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/2-layers-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); + }); + + describe('tile layer with opacity', function() { + var source; + + beforeEach(function() { + source = new ol.source.XYZ({ + url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png' + }); + }); + + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + waitForTiles([source], {opacity: 0.2}, function() { + expectResemble(map, 'spec/ol/layer/expected/opacity-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + waitForTiles([source], {opacity: 0.2}, function() { + expectResemble(map, 'spec/ol/layer/expected/opacity-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); + }); +}); + +goog.require('goog.array'); +goog.require('goog.object'); +goog.require('ol.proj'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.XYZ'); diff --git a/test_rendering/spec/ol/map.test.js b/test_rendering/spec/ol/map.test.js new file mode 100644 index 0000000000..424de13691 --- /dev/null +++ b/test_rendering/spec/ol/map.test.js @@ -0,0 +1,124 @@ +goog.provide('ol.test.rendering.Map'); + +describe('ol.rendering.Map', function() { + + var target, map; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + var vectorLayer = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: [new ol.Feature({ + geometry: new ol.geom.Point([0, 0]) + })] + }) + }); + + map = new ol.Map({ + target: target, + renderer: renderer, + layers: [vectorLayer], + view: new ol.View({ + projection: 'EPSG:4326', + center: [0, 0], + resolution: 1 + }) + }); + return map; + } + + describe('#render()', function() { + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + expectResemble( + map, 'spec/ol/expected/render-canvas.png', IMAGE_TOLERANCE, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + expectResemble( + map, 'spec/ol/expected/render-webgl.png', IMAGE_TOLERANCE, done); + }); + }); + + describe('#pan()', function() { + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + map.getView().setCenter([10, 10]); + expectResemble( + map, 'spec/ol/expected/pan-canvas.png', IMAGE_TOLERANCE, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + map.getView().setCenter([10, 10]); + expectResemble( + map, 'spec/ol/expected/pan-webgl.png', IMAGE_TOLERANCE, done); + }); + }); + + describe('#rotate()', function() { + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + map.getView().setRotation(90); + map.getView().setCenter([10, 10]); + expectResemble( + map, 'spec/ol/expected/rotate-canvas.png', IMAGE_TOLERANCE, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + map.getView().setRotation(90); + map.getView().setCenter([10, 10]); + expectResemble( + map, 'spec/ol/expected/rotate-webgl.png', IMAGE_TOLERANCE, done); + }); + }); + + describe('#zoom()', function() { + afterEach(function() { + disposeMap(map); + }); + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + map.getView().setCenter([10, 10]); + map.getView().setResolution(2); + expectResemble( + map, 'spec/ol/expected/zoom-canvas.png', IMAGE_TOLERANCE, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + map.getView().setCenter([10, 10]); + map.getView().setResolution(2); + expectResemble( + map, 'spec/ol/expected/zoom-webgl.png', IMAGE_TOLERANCE, done); + }); + }); +}); + +goog.require('goog.dispose'); +goog.require('ol.Feature'); +goog.require('ol.geom.Point'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); diff --git a/test_rendering/spec/ol/style/circle.test.js b/test_rendering/spec/ol/style/circle.test.js new file mode 100644 index 0000000000..72a53c1eaf --- /dev/null +++ b/test_rendering/spec/ol/style/circle.test.js @@ -0,0 +1,201 @@ +goog.provide('ol.test.rendering.style.Circle'); + +describe('ol.rendering.style.Circle', function() { + + var target, map, vectorSource; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + vectorSource = new ol.source.Vector(); + vectorLayer = new ol.layer.Vector({ + source: vectorSource + }); + + map = new ol.Map({ + target: target, + renderer: renderer, + layers: [vectorLayer], + view: new ol.View({ + projection: 'EPSG:4326', + center: [0, 0], + resolution: 1 + }) + }); + return map; + } + + describe('#render', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures() { + var feature; + feature = new ol.Feature({ + geometry: new ol.geom.Point([-20, 18]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 2, + fill: new ol.style.Fill({ + color: '#91E339' + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-10, 18]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 4, + fill: new ol.style.Fill({ + color: '#5447E6' + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([4, 18]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 6, + fill: new ol.style.Fill({ + color: '#92A8A6' + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-20, 3]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 2, + fill: new ol.style.Fill({ + color: '#91E339' + }), + stroke: new ol.style.Stroke({ + color: '#000000', + width: 1 + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-10, 3]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 4, + fill: new ol.style.Fill({ + color: '#5447E6' + }), + stroke: new ol.style.Stroke({ + color: '#000000', + width: 2 + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([4, 3]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 6, + fill: new ol.style.Fill({ + color: '#92A8A6' + }), + stroke: new ol.style.Stroke({ + color: '#000000', + width: 3 + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-20, -15]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 2, + stroke: new ol.style.Stroke({ + color: '#256308', + width: 1 + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-10, -15]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 4, + fill: new ol.style.Fill({ + color: 'rgba(0, 0, 255, 0.3)' + }), + stroke: new ol.style.Stroke({ + color: '#256308', + width: 2 + }) + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([4, -15]) + }); + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 6, + fill: new ol.style.Fill({ + color: 'rgba(235, 45, 70, 0.6)' + }), + stroke: new ol.style.Stroke({ + color: '#256308', + width: 3 + }) + }) + })); + vectorSource.addFeature(feature); + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(); + expectResemble(map, 'spec/ol/style/expected/circle-canvas.png', + 6.0, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + createFeatures(); + expectResemble(map, 'spec/ol/style/expected/circle-webgl.png', + 7.0, done); + }); + }); +}); + +goog.require('goog.dispose'); +goog.require('ol.Feature'); +goog.require('ol.geom.Point'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Style'); +goog.require('ol.style.Stroke'); diff --git a/test_rendering/spec/ol/style/expected/circle-canvas.png b/test_rendering/spec/ol/style/expected/circle-canvas.png new file mode 100644 index 0000000000..466b5281d1 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/circle-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/circle-webgl.png b/test_rendering/spec/ol/style/expected/circle-webgl.png new file mode 100644 index 0000000000..89c37e992e Binary files /dev/null and b/test_rendering/spec/ol/style/expected/circle-webgl.png differ diff --git a/test_rendering/spec/ol/style/expected/icon-canvas.png b/test_rendering/spec/ol/style/expected/icon-canvas.png new file mode 100644 index 0000000000..cdc0dba6b1 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/icon-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/icon-webgl.png b/test_rendering/spec/ol/style/expected/icon-webgl.png new file mode 100644 index 0000000000..c08cbfdd54 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/icon-webgl.png differ diff --git a/test_rendering/spec/ol/style/expected/linestring-strokes-canvas.png b/test_rendering/spec/ol/style/expected/linestring-strokes-canvas.png new file mode 100644 index 0000000000..0e354d444a Binary files /dev/null and b/test_rendering/spec/ol/style/expected/linestring-strokes-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/polygon-fill-and-strokes-canvas.png b/test_rendering/spec/ol/style/expected/polygon-fill-and-strokes-canvas.png new file mode 100644 index 0000000000..b1b5d9d4d0 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/polygon-fill-and-strokes-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/polygon-types-canvas.png b/test_rendering/spec/ol/style/expected/polygon-types-canvas.png new file mode 100644 index 0000000000..4abfccb058 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/polygon-types-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/polygon-zindex-canvas.png b/test_rendering/spec/ol/style/expected/polygon-zindex-canvas.png new file mode 100644 index 0000000000..931df4a072 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/polygon-zindex-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/regularshape-canvas.png b/test_rendering/spec/ol/style/expected/regularshape-canvas.png new file mode 100644 index 0000000000..75cb343754 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/regularshape-canvas.png differ diff --git a/test_rendering/spec/ol/style/expected/regularshape-webgl.png b/test_rendering/spec/ol/style/expected/regularshape-webgl.png new file mode 100644 index 0000000000..ae51d61dc5 Binary files /dev/null and b/test_rendering/spec/ol/style/expected/regularshape-webgl.png differ diff --git a/test_rendering/spec/ol/style/icon.test.js b/test_rendering/spec/ol/style/icon.test.js new file mode 100644 index 0000000000..d89bbd8a5f --- /dev/null +++ b/test_rendering/spec/ol/style/icon.test.js @@ -0,0 +1,85 @@ +goog.provide('ol.test.rendering.style.Icon'); + +describe('ol.rendering.style.Icon', function() { + + var target, map, vectorSource; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + vectorSource = new ol.source.Vector(); + vectorLayer = new ol.layer.Vector({ + source: vectorSource + }); + + map = new ol.Map({ + target: target, + renderer: renderer, + layers: [vectorLayer], + view: new ol.View({ + projection: 'EPSG:4326', + center: [0, 0], + resolution: 1 + }) + }); + return map; + } + + describe('#render', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures(callback) { + var feature; + feature = new ol.Feature({ + geometry: new ol.geom.Point([0, 0]) + }); + + var img = new Image(); + img.onload = function() { + feature.setStyle(new ol.style.Style({ + image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ + anchor: [0.5, 46], + anchorXUnits: 'fraction', + anchorYUnits: 'pixels', + opacity: 0.75, + scale: 0.5, + img: img, + imgSize: [32, 48] + })) + })); + vectorSource.addFeature(feature); + callback(); + }; + img.src = 'spec/ol/data/icon.png'; + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(function() { + expectResemble(map, 'spec/ol/style/expected/icon-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + createFeatures(function() { + expectResemble(map, 'spec/ol/style/expected/icon-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); + }); +}); + +goog.require('goog.dispose'); +goog.require('ol.Feature'); +goog.require('ol.geom.Point'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Icon'); +goog.require('ol.style.Style'); diff --git a/test_rendering/spec/ol/style/linestring.test.js b/test_rendering/spec/ol/style/linestring.test.js new file mode 100644 index 0000000000..bb8921f4a8 --- /dev/null +++ b/test_rendering/spec/ol/style/linestring.test.js @@ -0,0 +1,102 @@ +goog.provide('ol.test.rendering.style.LineString'); + +describe('ol.rendering.style.LineString', function() { + + var target, map, vectorSource; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + vectorSource = new ol.source.Vector(); + vectorLayer = new ol.layer.Vector({ + source: vectorSource + }); + + map = new ol.Map({ + target: target, + renderer: renderer, + layers: [vectorLayer], + view: new ol.View({ + projection: 'EPSG:4326', + center: [0, 0], + resolution: 1 + }) + }); + return map; + } + + describe('different strokes', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures() { + var feature; + + feature = new ol.Feature({ + geometry: new ol.geom.LineString( + [[-20, 20], [15, 20]] + ) + }); + feature.setStyle(new ol.style.Style({ + stroke: new ol.style.Stroke({color: '#DE213A', width: 3}) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.LineString( + [[-20, 15], [15, 15]] + ) + }); + feature.setStyle(new ol.style.Style({ + stroke: new ol.style.Stroke({color: '#9696EB', width: 1}) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.LineString( + [[-20, 10], [15, 10]] + ) + }); + feature.setStyle([new ol.style.Style({ + stroke: new ol.style.Stroke({color: '#F2F211', width: 5}) + }), new ol.style.Style({ + stroke: new ol.style.Stroke({color: '#292921', width: 1}) + })]); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.LineString( + [[-20, -20], [-2, 0], [15, -20]] + ) + }); + feature.setStyle(new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: '#000000', + width: 2, + lineCap: 'square', + lineJoin: 'round' + }) + })); + vectorSource.addFeature(feature); + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(); + expectResemble( + map, 'spec/ol/style/expected/linestring-strokes-canvas.png', + 3.0, done); + }); + }); +}); + +goog.require('goog.dispose'); +goog.require('ol.Feature'); +goog.require('ol.geom.LineString'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Style'); +goog.require('ol.style.Stroke'); diff --git a/test_rendering/spec/ol/style/polygon.test.js b/test_rendering/spec/ol/style/polygon.test.js new file mode 100644 index 0000000000..29f7a64d2c --- /dev/null +++ b/test_rendering/spec/ol/style/polygon.test.js @@ -0,0 +1,200 @@ +goog.provide('ol.test.rendering.style.Polygon'); + +describe('ol.rendering.style.Polygon', function() { + + var target, map, vectorSource; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + vectorSource = new ol.source.Vector(); + vectorLayer = new ol.layer.Vector({ + source: vectorSource + }); + + map = new ol.Map({ + target: target, + renderer: renderer, + layers: [vectorLayer], + view: new ol.View({ + projection: 'EPSG:4326', + center: [0, 0], + resolution: 1 + }) + }); + return map; + } + + describe('different types', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures() { + var fill = new ol.style.Fill({color: 'red'}); + + var feature; + // rectangle + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-20, 10], [-20, 20], [-5, 20], [-5, 10], [-20, 10]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: fill + })); + vectorSource.addFeature(feature); + + // rectangle with 1 hole + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[0, 10], [0, 20], [15, 20], [15, 10], [0, 10]], + [[5, 13], [10, 13], [10, 17], [5, 17], [5, 13]] + + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: fill + })); + vectorSource.addFeature(feature); + + // rectangle with 2 holes + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-20, -20], [-20, 5], [15, 5], [15, -20], [-20, -20]], + [[-18, -18], [-12, -18], [-12, -12], [-18, -12], [-18, -18]], + [[5, -18], [12, -18], [12, -12], [5, -12], [5, -18]] + + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: fill + })); + vectorSource.addFeature(feature); + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(); + expectResemble(map, 'spec/ol/style/expected/polygon-types-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + describe('z-index', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures() { + var feature; + // rectangle with z-index 2 + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-20, 10], [-20, 20], [-0, 20], [-0, 10], [-20, 10]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: new ol.style.Fill({color: '#E31E10'}), + zIndex: 2 + })); + vectorSource.addFeature(feature); + + // rectangle with z-index 3 + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-15, 5], [-15, 15], [5, 15], [5, 5], [-15, 5]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: new ol.style.Fill({color: '#1A5E42'}), + zIndex: 3 + })); + vectorSource.addFeature(feature); + + // rectangle with z-index 1 + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-10, 0], [-10, 10], [10, 10], [10, 0], [-10, 0]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: new ol.style.Fill({color: '#DEDE21'}), + zIndex: 1 + })); + vectorSource.addFeature(feature); + + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(); + expectResemble(map, 'spec/ol/style/expected/polygon-zindex-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + describe('different fills and strokes', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures() { + var feature; + // rectangle + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-20, 10], [-20, 20], [-5, 20], [-5, 10], [-20, 10]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: new ol.style.Fill({color: '#9696EB'}), + stroke: new ol.style.Stroke({color: '#9696EB', width: 1}) + })); + vectorSource.addFeature(feature); + + // rectangle with 1 hole + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[0, 10], [0, 20], [15, 20], [15, 10], [0, 10]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}), + stroke: new ol.style.Stroke({color: '#DE213A', width: 3}) + })); + vectorSource.addFeature(feature); + + // rectangle with 2 holes + feature = new ol.Feature({ + geometry: new ol.geom.Polygon([ + [[-20, -20], [-20, 5], [15, 5], [15, -20], [-20, -20]] + ]) + }); + feature.setStyle(new ol.style.Style({ + fill: new ol.style.Fill({color: 'rgba(18, 204, 105, 0.3)'}), + stroke: new ol.style.Stroke({color: '#032E17', width: 2}) + })); + vectorSource.addFeature(feature); + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(); + expectResemble( + map, 'spec/ol/style/expected/polygon-fill-and-strokes-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); +}); + +goog.require('goog.dispose'); +goog.require('ol.Feature'); +goog.require('ol.geom.Polygon'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Style'); +goog.require('ol.style.Stroke'); diff --git a/test_rendering/spec/ol/style/regularshape.test.js b/test_rendering/spec/ol/style/regularshape.test.js new file mode 100644 index 0000000000..2eaca4b33e --- /dev/null +++ b/test_rendering/spec/ol/style/regularshape.test.js @@ -0,0 +1,129 @@ +goog.provide('ol.test.rendering.style.RegularShape'); + +describe('ol.rendering.style.RegularShape', function() { + + var target, map, vectorSource; + + function createMap(renderer) { + target = createMapDiv(50, 50); + + vectorSource = new ol.source.Vector(); + vectorLayer = new ol.layer.Vector({ + source: vectorSource + }); + + map = new ol.Map({ + target: target, + renderer: renderer, + layers: [vectorLayer], + view: new ol.View({ + projection: 'EPSG:4326', + center: [0, 0], + resolution: 1 + }) + }); + return map; + } + + describe('#render', function() { + afterEach(function() { + disposeMap(map); + }); + + function createFeatures() { + var stroke = new ol.style.Stroke({color: 'black', width: 2}); + var fill = new ol.style.Fill({color: 'red'}); + + var feature; + feature = new ol.Feature({ + geometry: new ol.geom.Point([-15, 15]) + }); + // square + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + angle: Math.PI / 4 + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([8, 15]) + }); + // triangle + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 3, + radius: 10, + rotation: Math.PI / 4, + angle: 0 + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([-10, -8]) + }); + // star + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 5, + radius: 10, + radius2: 4, + angle: 0 + }) + })); + vectorSource.addFeature(feature); + + feature = new ol.Feature({ + geometry: new ol.geom.Point([12, -8]) + }); + // cross + feature.setStyle(new ol.style.Style({ + image: new ol.style.RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + radius2: 0, + angle: 0 + }) + })); + vectorSource.addFeature(feature); + } + + it('tests the canvas renderer', function(done) { + map = createMap('canvas'); + createFeatures(); + expectResemble(map, 'spec/ol/style/expected/regularshape-canvas.png', + 6.0, done); + }); + + it('tests the WebGL renderer', function(done) { + assertWebGL(); + map = createMap('webgl'); + createFeatures(); + expectResemble(map, 'spec/ol/style/expected/regularshape-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); +}); + +goog.require('goog.dispose'); +goog.require('ol.Feature'); +goog.require('ol.geom.Point'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Fill'); +goog.require('ol.style.RegularShape'); +goog.require('ol.style.Style'); +goog.require('ol.style.Stroke');