Add first rendering tests

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

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.
 

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');

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');

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');

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');

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');

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');

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');

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');