Run rendering tests with the rest of the tests

test/rendering/ol/layer/clip.test.js

@@ -0,0 +1,110 @@
+goog.provide('layer clipping');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.MultiPolygon');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.XYZ');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+describe('layer clipping', function() {
+
+  function onLoad(source, callback) {
+    var loading = 0;
+    var loaded = 0;
+    var called = false;
+
+    function check() {
+      if (!called && loading > 0 && loaded === loading) {
+        callback();
+      }
+    }
+
+    source.on('tileloadstart', function() {
+      ++loading;
+    });
+    source.on('tileloadend', function() {
+      ++loaded;
+      setTimeout(check, 10);
+    });
+    source.on('tileloaderror', function() {
+      callback(new Error('Tile loading failed'));
+      called = true;
+    });
+  }
+
+
+  describe('MultiPolygon clipping', function() {
+
+    var map = null;
+    beforeEach(function() {
+      map = new ol.Map({
+        target: createMapDiv(256, 256),
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 0
+        })
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+      map = null;
+    });
+
+    it('clips to all parts of the MultiPolygon', function(done) {
+
+      var source = new ol.source.XYZ({
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+
+      var layer = new ol.layer.Tile({
+        source: source
+      });
+
+      var geometry = new ol.geom.MultiPolygon([
+        [[[-80, -40], [-40, 0], [-80, 40], [-120, 0], [-80, -40]]],
+        [[[80, -40], [120, 0], [80, 40], [40, 0], [80, -40]]]
+      ]).transform('EPSG:4326', 'EPSG:3857');
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          width: 2,
+          color: 'blue'
+        })
+      });
+
+      layer.on('precompose', function(event) {
+        var context = event.context;
+        context.save();
+
+        var vectorContext = event.vectorContext;
+        vectorContext.setStyle(style);
+        vectorContext.drawGeometry(geometry);
+
+        context.clip();
+      });
+
+      layer.on('postcompose', function(event) {
+        var context = event.context;
+        context.restore();
+
+        var vectorContext = event.vectorContext;
+        vectorContext.setStyle(style);
+        vectorContext.drawGeometry(geometry);
+      });
+
+      onLoad(source, function(err) {
+        if (err) {
+          return done(err);
+        }
+        expectResemble(map, 'rendering/ol/layer/expected/multipolygon-clip.png', IMAGE_TOLERANCE, done);
+      });
+
+      map.addLayer(layer);
+
+    });
+  });
+});

test/rendering/ol/layer/image.test.js

@@ -0,0 +1,119 @@
+goog.provide('ol.test.rendering.layer.Image');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.obj');
+goog.require('ol.proj');
+goog.require('ol.source.ImageStatic');
+goog.require('ol.tilegrid');
+
+
+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();
+      }
+    };
+
+    sources.forEach(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
+      };
+      ol.obj.assign(options, layerOptions);
+      map.addLayer(new ol.layer.Image(options));
+    });
+  }
+
+  describe('single image layer', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.ImageStatic({
+        url: 'rendering/ol/data/tiles/osm/5/5/12.png',
+        imageExtent: ol.tilegrid.createXYZ().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, 'rendering/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, 'rendering/ol/layer/expected/image-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+
+  describe('single image layer - scaled', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.ImageStatic({
+        url: 'rendering/ol/data/tiles/osm/5/5/12.png',
+        imageExtent: ol.proj.transformExtent(
+            [-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857')
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('renders correctly', function(done) {
+      map = createMap('canvas');
+      waitForImages([source], {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/image-scaled.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+
+});

test/rendering/ol/layer/tile.test.js

@@ -0,0 +1,298 @@
+goog.provide('ol.test.rendering.layer.Tile');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Tile');
+goog.require('ol.obj');
+goog.require('ol.proj');
+goog.require('ol.source.TileImage');
+goog.require('ol.source.XYZ');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.tilegrid');
+
+
+describe('ol.rendering.layer.Tile', function() {
+
+  var target, map;
+
+  function createMap(renderer, opt_center, opt_size, opt_pixelRatio, opt_resolutions) {
+    var size = opt_size !== undefined ? opt_size : [50, 50];
+    target = createMapDiv(size[0], size[1]);
+
+    map = new ol.Map({
+      pixelRatio: opt_pixelRatio || 1,
+      target: target,
+      renderer: renderer,
+      view: new ol.View({
+        center: opt_center !== undefined ? opt_center : ol.proj.transform(
+            [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
+        resolutions: opt_resolutions,
+        zoom: 5
+      })
+    });
+    return map;
+  }
+
+  function waitForTiles(sources, layerOptions, onTileLoaded) {
+    var tilesLoading = 0;
+    var tileLoaded = 0;
+
+    var update = function() {
+      if (tilesLoading === tileLoaded) {
+        onTileLoaded();
+      }
+    };
+
+    sources.forEach(function(source, i) {
+      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
+      };
+      ol.obj.assign(options, layerOptions[i] || layerOptions);
+      map.addLayer(new ol.layer.Tile(options));
+    });
+  }
+
+  describe('single tile layer', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        url: 'rendering/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, 'rendering/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, 'rendering/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: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+      source2 = new ol.source.XYZ({
+        url: 'rendering/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, 'rendering/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, 'rendering/ol/layer/expected/2-layers-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    function centerExtent(map) {
+      var c = map.getView().calculateExtent(map.getSize());
+      var qw = ol.extent.getSize(c)[0] / 4;
+      var qh = ol.extent.getSize(c)[1] / 4;
+      return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh];
+    }
+
+    it('tests canvas layer extent clipping', function(done) {
+      map = createMap('canvas');
+      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+        expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests canvas layer extent clipping with rotation', function(done) {
+      map = createMap('canvas');
+      map.getView().setRotation(Math.PI / 2);
+      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+        expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests canvas layer extent clipping (HiDPI)', function(done) {
+      map = createMap('canvas', undefined, undefined, 2);
+      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+        expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-hidpi.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests canvas layer extent clipping with rotation (HiDPI)', function(done) {
+      map = createMap('canvas', undefined, undefined, 2);
+      map.getView().setRotation(Math.PI / 2);
+      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+        expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate-hidpi.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+  });
+
+  describe('tile layer with opacity', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        url: 'rendering/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, 'rendering/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, 'rendering/ol/layer/expected/opacity-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+
+  describe('tile layer with non-square tiles', function() {
+
+    function createSource(tileSize) {
+      return new ol.source.TileImage({
+        url: 'rendering/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png',
+        tileGrid: ol.tilegrid.createXYZ({
+          tileSize: tileSize.split('x')
+        })
+      });
+    }
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('512x256 renders correcly using the canvas renderer', function(done) {
+      var source = createSource('512x256');
+      map = createMap('canvas', [-10997148, 4569099]);
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/512x256-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('512x256 renders correcly using the webgl renderer', function(done) {
+      assertWebGL();
+      var source = createSource('512x256');
+      map = createMap('webgl', [-10997148, 4569099]);
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/512x256-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('192x256 renders correcly using the canvas renderer', function(done) {
+      var source = createSource('192x256');
+      map = createMap('canvas', [-11271098, 3747248], [100, 100], undefined,
+          source.getTileGrid().getResolutions());
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/192x256-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('192x256 renders correcly using the webgl renderer', function(done) {
+      assertWebGL();
+      var source = createSource('192x256');
+      map = createMap('webgl', [-11271098, 3747248], [100, 100], undefined,
+          source.getTileGrid().getResolutions());
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/192x256-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+
+  describe('tile layer with render listener', function() {
+    var source, onAddLayer;
+
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+      onAddLayer = function(evt) {
+        evt.element.on('render', function(e) {
+          e.vectorContext.setImageStyle(new ol.style.Circle({
+            radius: 5,
+            snapToPixel: false,
+            fill: new ol.style.Fill({color: 'yellow'}),
+            stroke: new ol.style.Stroke({color: 'red', width: 1})
+          }));
+          e.vectorContext.drawPoint(new ol.geom.Point(
+              ol.proj.transform([-123, 38], 'EPSG:4326', 'EPSG:3857')));
+        });
+      };
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('works with the canvas renderer', function(done) {
+      map = createMap('canvas', undefined, [100, 100]);
+      map.getLayers().on('add', onAddLayer);
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/render-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+});

test/rendering/ol/layer/vector.test.js

@@ -0,0 +1,459 @@
+goog.provide('ol.test.rendering.layer.Vector');
+
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.geom.Circle');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.Polygon');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+describe('ol.rendering.layer.Vector', function() {
+
+  var center, target, map;
+
+  function createMap(renderer) {
+    target = createMapDiv(80, 80);
+    center = [1825927.7316762917, 6143091.089223046];
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      view: new ol.View({
+        center: center,
+        zoom: 13
+      })
+    });
+    return map;
+  }
+
+  var source;
+
+  function addCircle(r) {
+    source.addFeature(new ol.Feature(new ol.geom.Circle(center, r)));
+  }
+
+  function addPolygon(r) {
+    source.addFeature(new ol.Feature(new ol.geom.Polygon([
+      [
+        [center[0] - r, center[1] - r],
+        [center[0] + r, center[1] - r],
+        [center[0] + r, center[1] + r],
+        [center[0] - r, center[1] + r],
+        [center[0] - r, center[1] - r]
+      ]
+    ])));
+  }
+
+  function addLineString(r) {
+    source.addFeature(new ol.Feature(new ol.geom.LineString([
+      [center[0] - r, center[1] - r],
+      [center[0] + r, center[1] - r],
+      [center[0] + r, center[1] + r],
+      [center[0] - r, center[1] + r],
+      [center[0] - r, center[1] - r]
+    ])));
+  }
+
+  describe('vector layer', function() {
+
+    beforeEach(function() {
+      source = new ol.source.Vector();
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('renders opacity correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      var smallLine = new ol.Feature(new ol.geom.LineString([
+        [center[0], center[1] - 1],
+        [center[0], center[1] + 1]
+      ]));
+      smallLine.setStyle(new ol.style.Style({
+        zIndex: -99,
+        stroke: new ol.style.Stroke({width: 75, color: 'red'})
+      }));
+      source.addFeature(smallLine);
+      addPolygon(100);
+      addCircle(200);
+      addPolygon(250);
+      addCircle(500);
+      addPolygon(600);
+      addPolygon(720);
+      map.addLayer(new ol.layer.Vector({
+        source: source
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas.png',
+            17, done);
+      });
+    });
+
+    it('renders transparent layers correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      var smallLine = new ol.Feature(new ol.geom.LineString([
+        [center[0], center[1] - 1],
+        [center[0], center[1] + 1]
+      ]));
+      smallLine.setStyle([
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 75, color: 'red'})
+        }),
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 45, color: 'white'})
+        })
+      ]);
+      source.addFeature(smallLine);
+      var smallLine2 = new ol.Feature(new ol.geom.LineString([
+        [center[0], center[1] - 1000],
+        [center[0], center[1] + 1000]
+      ]));
+      smallLine2.setStyle([
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 35, color: 'blue'})
+        }),
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 15, color: 'green'})
+        })
+      ]);
+      source.addFeature(smallLine2);
+
+      map.addLayer(new ol.layer.Vector({
+        source: source,
+        opacity: 0.5
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'spec/ol/layer/expected/vector-canvas-transparent.png',
+            7, done);
+      });
+    });
+
+    it('renders rotation correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      map.getView().setRotation(Math.PI + Math.PI / 4);
+      addPolygon(300);
+      addCircle(500);
+      map.addLayer(new ol.layer.Vector({
+        source: source,
+        style: new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            width: 2,
+            color: 'black'
+          })
+        })
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-rotated.png',
+            1.7, done);
+      });
+    });
+
+    it('renders fill/stroke batches correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      source = new ol.source.Vector({
+        overlaps: false
+      });
+      addPolygon(100);
+      addCircle(200);
+      addPolygon(250);
+      addCircle(500);
+      addPolygon(600);
+      addPolygon(720);
+      map.addLayer(new ol.layer.Vector({
+        source: source,
+        style: new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#3399CC',
+            width: 1.25
+          })
+        })
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-opaque.png',
+            24.34, done);
+      });
+    });
+
+    it('renders stroke batches correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      source = new ol.source.Vector({
+        overlaps: false
+      });
+      addLineString(100);
+      addLineString(250);
+      addLineString(600);
+      addLineString(720);
+      map.addLayer(new ol.layer.Vector({
+        source: source,
+        style: new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#3399CC',
+            width: 1.25
+          })
+        })
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-stroke.png',
+            7, done);
+      });
+    });
+
+    it('interrupts fill/stroke batches correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      var color;
+      function createSource(overlaps) {
+        color = '#3399CC';
+        source = new ol.source.Vector({
+          overlaps: overlaps
+        });
+        addPolygon(720);
+        addPolygon(600);
+        addCircle(500);
+        addPolygon(250);
+        addCircle(200);
+        addPolygon(100);
+        return source;
+      }
+      function alternateColor() {
+        if (color == '#3399CC') {
+          color = '#CC9933';
+        } else {
+          color = '#3399CC';
+        }
+        return color;
+      }
+      var layer = new ol.layer.Vector({
+        source: createSource(true),
+        style: function(feature) {
+          alternateColor();
+          return new ol.style.Style({
+            stroke: new ol.style.Stroke({
+              color: alternateColor(),
+              width: 1.25
+            }),
+            fill: new ol.style.Fill({
+              color: alternateColor()
+            })
+          });
+        }
+      });
+      map.addLayer(layer);
+      map.once('postrender', function() {
+        var canvas = map.getRenderer().canvas_;
+        // take a snapshot of this `overlaps: true` image
+        var referenceImage = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+        // now render the same with `overlaps: false`
+        layer.setSource(createSource(false));
+        // result should be similar to `overlaps: true`
+        map.once('postrender', function() {
+          expectResemble(map, referenceImage, 2, done);
+        });
+      });
+    });
+
+    it('interrupts stroke batches correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      var color;
+      function createSource(overlaps) {
+        color = '#3399CC';
+        source = new ol.source.Vector({
+          overlaps: overlaps
+        });
+        addLineString(720);
+        addLineString(600);
+        addLineString(250);
+        addLineString(100);
+        return source;
+      }
+      function alternateColor() {
+        if (color == '#3399CC') {
+          color = '#CC9933';
+        } else {
+          color = '#3399CC';
+        }
+        return color;
+      }
+      var layer = new ol.layer.Vector({
+        source: createSource(true),
+        style: function(feature) {
+          alternateColor();
+          return new ol.style.Style({
+            stroke: new ol.style.Stroke({
+              color: alternateColor(),
+              width: 1.25
+            }),
+            fill: new ol.style.Fill({
+              color: alternateColor()
+            })
+          });
+        }
+      });
+      map.addLayer(layer);
+      map.once('postrender', function() {
+        var canvas = map.getRenderer().canvas_;
+        // take a snapshot of this `overlaps: true` image
+        var referenceImage = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+        // now render the same with `overlaps: false`
+        layer.setSource(createSource(false));
+        // result should be exactly the same as with `overlaps: true`
+        map.once('postrender', function() {
+          expectResemble(map, referenceImage, 0, done);
+        });
+      });
+    });
+  });
+
+  describe('polygon rendering', function() {
+
+    var map;
+    beforeEach(function() {
+      map = new ol.Map({
+        target: createMapDiv(128, 128),
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 0
+        })
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('renders a feature that spans the world', function(done) {
+      var json = {
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              [-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]
+            ],
+            [
+              [0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]
+            ]
+          ]
+        },
+        properties: {}
+      };
+
+      var format = new ol.format.GeoJSON({featureProjection: 'EPSG:3857'});
+      var feature = format.readFeature(json);
+
+      var layer = new ol.layer.Vector({
+        source: new ol.source.Vector({
+          features: [feature]
+        }),
+        style: new ol.style.Style({
+          fill: new ol.style.Fill({
+            color: 'blue'
+          })
+        })
+      });
+
+      map.addLayer(layer);
+
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/inverted-star.png', 1, done);
+      });
+
+    });
+
+  });
+
+  describe('Polygon simplification', function() {
+
+    var layer, map;
+
+    beforeEach(function() {
+      var src = new ol.source.Vector({
+        features: [
+          new ol.Feature(new ol.geom.Polygon([[
+            [-22, 58],
+            [-22, 78],
+            [-9, 78],
+            [-9, 58],
+            [-22, 58]
+          ]])),
+          new ol.Feature(new ol.geom.Polygon([[
+            [-9, 58],
+            [-9, 78],
+            [4, 78],
+            [4, 58],
+            [-9, 58]
+          ]]))
+        ]
+      });
+      layer = new ol.layer.Vector({
+        renderBuffer: 0,
+        source: src
+      });
+      var view = new ol.View({
+        center: [-9.5, 78],
+        zoom: 2,
+        projection: 'EPSG:4326'
+      });
+
+      map = new ol.Map({
+        layers: [layer],
+        target: createMapDiv(100, 100),
+        view: view
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('renders partially out-of-view polygons with a fill and stroke', function(done) {
+      layer.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: [0, 0, 0, 1],
+          width: 2
+        }),
+        fill: new ol.style.Fill({
+          color: [255, 0, 0, 1]
+        })
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-simplified.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('renders partially out-of-view polygons with a fill', function(done) {
+      layer.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({
+          color: [0, 0, 0, 1]
+        })
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-simplified-fill.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('renders partially out-of-view polygons with a stroke', function(done) {
+      layer.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: [0, 0, 0, 1],
+          width: 2
+        })
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-simplified-stroke.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+  });
+
+});

test/rendering/ol/layer/vectortile.test.js

@@ -0,0 +1,111 @@
+goog.provide('ol.test.rendering.layer.VectorTile');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.obj');
+goog.require('ol.source.VectorTile');
+goog.require('ol.tilegrid');
+
+
+describe('ol.rendering.layer.VectorTile', function() {
+
+  var target, map;
+
+  function createMap(renderer, opt_pixelRatio) {
+    target = createMapDiv(50, 50);
+
+    map = new ol.Map({
+      pixelRatio: opt_pixelRatio,
+      target: target,
+      renderer: renderer,
+      view: new ol.View({
+        center: [1825927.7316762917, 6143091.089223046],
+        zoom: 14
+      })
+    });
+    return map;
+  }
+
+  function waitForTiles(source, layerOptions, onTileLoaded) {
+    var tilesLoading = 0;
+    var tileLoaded = 0;
+
+    var update = function() {
+      if (tilesLoading === tileLoaded) {
+        onTileLoaded();
+      }
+    };
+
+    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
+    };
+    ol.obj.assign(options, layerOptions);
+    map.addLayer(new ol.layer.VectorTile(options));
+  }
+
+  describe('vector tile layer', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.VectorTile({
+        format: new ol.format.MVT(),
+        tileGrid: ol.tilegrid.createXYZ(),
+        tilePixelRatio: 16,
+        url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf'
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('renders correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas.png',
+            11.7, done);
+      });
+    });
+
+    it('renders rotated view correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      map.getView().setRotation(Math.PI / 4);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-rotated.png',
+            13.4, done);
+      });
+    });
+
+    it('renders correctly with the canvas renderer (HiDPI)', function(done) {
+      map = createMap('canvas', 2);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-hidpi.png',
+            11.3, done);
+      });
+    });
+
+    it('renders rotated view correctly with the canvas renderer (HiDPI)', function(done) {
+      map = createMap('canvas', 2);
+      map.getView().setRotation(Math.PI / 4);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-rotated-hidpi.png',
+            14.8, done);
+      });
+    });
+
+  });
+
+});