Run rendering tests with the rest of the tests

test/rendering/ol/data/me0.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="512px"
+   height="512px"
+   viewBox="0 0 512 512"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="me0.svg"><metadata
+   id="metadata3776"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs3774" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1024"
+   inkscape:window-height="1258"
+   id="namedview3772"
+   showgrid="false"
+   inkscape:zoom="0.4609375"
+   inkscape:cx="309.13338"
+   inkscape:cy="256"
+   inkscape:window-x="1016"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3754"
+   style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round;stroke-linecap:round"><path
+     style="stroke:#ffffff;stroke-width:25;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill:#085095;fill-opacity:1;stroke-linejoin:round;stroke-linecap:round"
+     id="path3770"
+     d="m 256,25.6 c -95.4279,0 -172.8,77.3721 -172.8,172.8 0,95.4279 144,288 172.8,288 28.8,0 172.8,-192.5721 172.8,-288 C 428.8,102.9721 351.4279,25.6 256,25.6 z m 0,288 c -63.5346,0 -115.2,-51.6942 -115.2,-115.2 0,-63.5058 51.6654,-115.2 115.2,-115.2 63.5346,0 115.2,51.6942 115.2,115.2 0,63.5058 -51.6654,115.2 -115.2,115.2 z"
+     inkscape:connector-curvature="0" /><polygon
+     style="fill:#085095;stroke:#ffffff;stroke-width:69.44444444;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill-opacity:1"
+     transform="matrix(0.36,0,0,0.36,160.72934,103.79972)"
+     id="polygon3"
+     points="374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 259.216,29.942 330.27,173.919 489.16,197.007 "
+     stroke-miterlimit="10" /></g></svg>

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);
+      });
+    });
+
+  });
+
+});

test/rendering/ol/map.test.js

@@ -0,0 +1,169 @@
+goog.provide('ol.test.rendering.Map');
+
+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');
+
+
+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('#updateSize()', function() {
+    var map, target;
+
+    function createMap(renderer) {
+      target = document.createElement('div');
+      document.body.appendChild(target);
+      map = new ol.Map({
+        renderer: renderer,
+        controls: [],
+        target: target,
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 2
+        })
+      });
+      return map;
+    }
+
+    afterEach(function() {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      map.once('postrender', function() {
+        var initialSize = map.getSize();
+        map.updateSize();
+        expect(map.getSize()).to.eql(initialSize);
+        done();
+      });
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      map.once('postrender', function() {
+        var initialSize = map.getSize();
+        map.updateSize();
+        expect(map.getSize()).to.eql(initialSize);
+        done();
+      });
+    });
+  });
+
+  describe('#render()', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      expectResemble(
+          map, 'rendering/ol/expected/render-canvas.png', IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      expectResemble(
+          map, 'rendering/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, 'rendering/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, 'rendering/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, 'rendering/ol/expected/rotate-canvas.png', 2.8, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      map.getView().setRotation(90);
+      map.getView().setCenter([10, 10]);
+      expectResemble(
+          map, 'rendering/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, 'rendering/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, 'rendering/ol/expected/zoom-webgl.png', IMAGE_TOLERANCE, done);
+    });
+  });
+});

test/rendering/ol/render.test.js

@@ -0,0 +1,183 @@
+goog.provide('ol.test.rendering.render');
+
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.Point');
+goog.require('ol.geom.Polygon');
+goog.require('ol.render');
+goog.require('ol.render.VectorContext');
+goog.require('ol.render.canvas.Immediate');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+describe('ol.render', function() {
+
+  var context;
+
+  beforeEach(function() {
+    context = document.createElement('canvas').getContext('2d');
+  });
+
+  describe('ol.render.toContext()', function() {
+
+    it('creates a vector context from a Canvas 2d context', function() {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+      expect(vectorContext).to.be.a(ol.render.VectorContext);
+      expect(vectorContext).to.be.a(ol.render.canvas.Immediate);
+    });
+
+    it('can be used to render a point geometry', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        image: new ol.style.Circle({
+          fill: new ol.style.Fill({
+            color: 'green'
+          }),
+          radius: 10
+        })
+      });
+
+      vectorContext.setStyle(style);
+      vectorContext.drawGeometry(new ol.geom.Point([50, 50]));
+
+      resembleCanvas(context.canvas,
+          'rendering/ol/expected/render-point.png', IMAGE_TOLERANCE, done);
+
+    });
+
+    it('can be used to render a linestring geometry', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: 'red',
+          width: 14
+        })
+      });
+
+      vectorContext.setStyle(style);
+      vectorContext.drawGeometry(new ol.geom.LineString([
+        [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
+      ]));
+
+      resembleCanvas(context.canvas,
+          'rendering/ol/expected/render-linestring.png', IMAGE_TOLERANCE, done);
+
+    });
+
+    it('respects lineCap for linestring', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          lineCap: 'butt',
+          color: 'red',
+          width: 14
+        })
+      });
+
+      vectorContext.setStyle(style);
+      vectorContext.drawGeometry(new ol.geom.LineString([
+        [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
+      ]));
+
+      resembleCanvas(context.canvas,
+          'rendering/ol/expected/render-linestring-butt.png', IMAGE_TOLERANCE, done);
+
+    });
+
+    it('respects lineJoin for linestring', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          lineJoin: 'bevel',
+          color: 'red',
+          width: 14
+        })
+      });
+
+      vectorContext.setStyle(style);
+      vectorContext.drawGeometry(new ol.geom.LineString([
+        [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
+      ]));
+
+      resembleCanvas(context.canvas,
+          'rendering/ol/expected/render-linestring-bevel.png', IMAGE_TOLERANCE, done);
+
+    });
+
+    it('can be used to render a polygon geometry', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: 'blue',
+          width: 8
+        }),
+        fill: new ol.style.Fill({
+          color: 'rgba(0,0,255,0.5)'
+        })
+      });
+
+      vectorContext.setStyle(style);
+
+      vectorContext.drawGeometry(new ol.geom.Polygon([
+        [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
+        [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
+      ]));
+
+      resembleCanvas(context.canvas,
+          'rendering/ol/expected/render-polygon.png', IMAGE_TOLERANCE, done);
+
+    });
+
+    it('supports lineDash styles', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          lineDash: [10, 5]
+        })
+      });
+
+      vectorContext.setStyle(style);
+
+      vectorContext.drawGeometry(new ol.geom.Polygon([
+        [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
+        [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
+      ]));
+
+      resembleCanvas(context.canvas,
+          'spec/ol/expected/render-polygon-linedash.png', IMAGE_TOLERANCE, done);
+
+    });
+
+    it('supports lineDashOffset', function(done) {
+      var vectorContext = ol.render.toContext(context, {size: [100, 100]});
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          lineDash: [10, 5],
+          lineDashOffset: 5
+        })
+      });
+
+      vectorContext.setStyle(style);
+
+      vectorContext.drawGeometry(new ol.geom.Polygon([
+        [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
+        [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
+      ]));
+
+      resembleCanvas(context.canvas,
+          'spec/ol/expected/render-polygon-linedashoffset.png', IMAGE_TOLERANCE, done);
+
+    });
+
+  });
+
+});

test/rendering/ol/reproj/image.test.js

@@ -0,0 +1,62 @@
+goog.provide('ol.test.rendering.reproj.Image');
+
+goog.require('ol.events');
+goog.require('ol.proj');
+goog.require('ol.proj.EPSG3857');
+goog.require('ol.reproj.Image');
+goog.require('ol.source.ImageStatic');
+goog.require('ol.tilegrid');
+
+
+describe('ol.rendering.reproj.Image', function() {
+
+  function testSingleImage(source, targetProj,
+      targetExtent, targetResolution, pixelRatio, expectedUrl, done) {
+    var sourceProj = source.getProjection();
+
+    var imagesRequested = 0;
+
+    var image = new ol.reproj.Image(sourceProj, ol.proj.get(targetProj),
+        targetExtent, targetResolution, pixelRatio,
+        function(extent, resolution, pixelRatio) {
+          imagesRequested++;
+          return source.getImage(extent, resolution, pixelRatio, sourceProj);
+        });
+    if (image.getState() == 0) { // IDLE
+      ol.events.listen(image, 'change', function(e) {
+        if (image.getState() == 2) { // LOADED
+          expect(imagesRequested).to.be(1);
+          resembleCanvas(image.getImage(), expectedUrl, IMAGE_TOLERANCE, done);
+        }
+      });
+      image.load();
+    }
+  }
+
+  var source;
+
+  describe('image reprojections from EPSG:3857', function() {
+    beforeEach(function() {
+      source = new ol.source.ImageStatic({
+        url: 'rendering/ol/data/tiles/osm/5/5/12.png',
+        imageExtent: ol.tilegrid.createXYZ().getTileCoordExtent([5, 5, -13]),
+        projection: ol.proj.get('EPSG:3857')
+      });
+    });
+
+    it('works for identity reprojection', function(done) {
+      testSingleImage(source, 'EPSG:3857',
+          ol.tilegrid.createXYZ().getTileCoordExtent([5, 5, -13]),
+          2 * ol.proj.EPSG3857.HALF_SIZE / (256 * (1 << 5)), 1,
+          'rendering/ol/data/tiles/osm/5/5/12.png', done);
+    });
+
+    it('to EPSG:4326', function(done) {
+      testSingleImage(source, 'EPSG:4326',
+          ol.tilegrid.createForProjection('EPSG:4326').
+              getTileCoordExtent([6, 10, -10]),
+          360 / (256 * (1 << 4)), 1,
+          'rendering/ol/reproj/expected/image-3857-to-4326.png', done);
+    });
+  });
+});

test/rendering/ol/reproj/tile.test.js

@@ -0,0 +1,182 @@
+goog.provide('ol.test.rendering.reproj.Tile');
+
+goog.require('ol.TileState');
+goog.require('ol.events');
+goog.require('ol.proj');
+goog.require('ol.reproj.Tile');
+goog.require('ol.source.XYZ');
+goog.require('ol.tilegrid');
+
+
+describe('ol.rendering.reproj.Tile', function() {
+
+  function testSingleTile(source, targetProjection, targetTileGrid, z, x, y,
+      pixelRatio, expectedUrl, expectedRequests, done) {
+    var sourceProjection = source.getProjection();
+    var sourceGutter = source.getGutter(sourceProjection);
+
+    var tilesRequested = 0;
+
+    var tile = new ol.reproj.Tile(sourceProjection, source.getTileGrid(),
+        ol.proj.get(targetProjection), targetTileGrid,
+        [z, x, y], null, pixelRatio, sourceGutter,
+        function(z, x, y, pixelRatio) {
+          tilesRequested++;
+          return source.getTile(z, x, y, pixelRatio, sourceProjection);
+        });
+    if (tile.getState() == ol.TileState.IDLE) {
+      ol.events.listen(tile, 'change', function(e) {
+        if (tile.getState() == ol.TileState.LOADED) {
+          expect(tilesRequested).to.be(expectedRequests);
+          resembleCanvas(tile.getImage(), expectedUrl, 7.5, done);
+        }
+      });
+      tile.load();
+    }
+  }
+
+  var source;
+
+  describe('single tile reprojections from EPSG:3857', function() {
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        projection: 'EPSG:3857',
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+    });
+
+    it('works for identity reprojection', function(done) {
+      testSingleTile(source, 'EPSG:3857', source.getTileGrid(), 5, 5, -13, 1,
+          'rendering/ol/data/tiles/osm/5/5/12.png', 1, done);
+    });
+
+    it('to EPSG:4326', function(done) {
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:4326', 7, [64, 64]);
+      testSingleTile(source, 'EPSG:4326', tileGrid, 7, 21, -20, 1,
+          'rendering/ol/reproj/expected/osm4326.png', 1, done);
+    });
+
+    it('to EPSG:5070', function(done) {
+      proj4.defs('EPSG:5070',
+          '+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 ' +
+          '+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+      var proj5070 = ol.proj.get('EPSG:5070');
+      proj5070.setExtent([-6e6, 0, 4e6, 6e6]);
+
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:5070', 5, [64, 64]);
+      testSingleTile(source, 'EPSG:5070', tileGrid, 5, 13, -15, 1,
+          'rendering/ol/reproj/expected/osm5070.png', 1, done);
+    });
+
+    it('to ESRI:54009', function(done) {
+      proj4.defs('ESRI:54009',
+          '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+      var proj54009 = ol.proj.get('ESRI:54009');
+      proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
+
+      var tileGrid = ol.tilegrid.createForProjection('ESRI:54009', 7, [64, 64]);
+      testSingleTile(source, 'ESRI:54009', tileGrid, 7, 27, -16, 1,
+          'rendering/ol/reproj/expected/osm54009.png', 1, done);
+    });
+  });
+
+  describe('stitching several tiles from EPSG:3857', function() {
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        projection: 'EPSG:3857',
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+    });
+
+    it('to EPSG:4326', function(done) {
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:4326', 7, [64, 64]);
+      testSingleTile(source, 'EPSG:4326', tileGrid, 7, 23, -21, 1,
+          'rendering/ol/reproj/expected/stitch-osm4326.png', 2, done);
+    });
+
+    it('to EPSG:3740', function(done) {
+      proj4.defs('EPSG:3740',
+          '+proj=utm +zone=10 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 ' +
+          '+units=m +no_defs');
+      var proj3740 = ol.proj.get('EPSG:3740');
+      proj3740.setExtent([318499.05, 2700792.39, 4359164.89, 7149336.98]);
+
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:3740', 4, [64, 64]);
+      testSingleTile(source, 'EPSG:3740', tileGrid, 4, 4, -13, 1,
+          'rendering/ol/reproj/expected/stitch-osm3740.png', 4, done);
+    });
+  });
+
+  describe('tile projection from EPSG:4326', function() {
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        projection: 'EPSG:4326',
+        maxZoom: 0,
+        url: 'rendering/ol/data/tiles/4326/{z}/{x}/{y}.png'
+      });
+    });
+
+    it('works for identity reprojection', function(done) {
+      testSingleTile(source, 'EPSG:4326', source.getTileGrid(), 0, 0, -1, 1,
+          'rendering/ol/data/tiles/4326/0/0/0.png', 1, done);
+    });
+
+    it('to EPSG:3857', function(done) {
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:3857', 0, [64, 64]);
+      testSingleTile(source, 'EPSG:3857', tileGrid, 0, 0, -1, 1,
+          'rendering/ol/reproj/expected/4326-to-3857.png', 1, done);
+    });
+  });
+
+  describe('non-square source tiles', function() {
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        projection: 'EPSG:3857',
+        url: 'rendering/ol/data/tiles/osm-512x256/{z}/{x}/{y}.png',
+        tileSize: [512, 256]
+      });
+    });
+
+    it('works for identity reprojection', function(done) {
+      testSingleTile(source, 'EPSG:3857', source.getTileGrid(), 5, 3, -13, 1,
+          'rendering/ol/data/tiles/osm-512x256/5/3/12.png', 1, done);
+    });
+
+    it('to 64x128 EPSG:4326', function(done) {
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:4326', 7, [64, 128]);
+      testSingleTile(source, 'EPSG:4326', tileGrid, 7, 27, -10, 1,
+          'rendering/ol/reproj/expected/512x256-to-64x128.png', 1, done);
+    });
+  });
+
+  describe('dateline wrapping', function() {
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        projection: 'EPSG:4326',
+        maxZoom: 0,
+        url: 'rendering/ol/data/tiles/4326/{z}/{x}/{y}.png'
+      });
+    });
+
+    it('wraps X when prime meridian is shifted', function(done) {
+      proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs');
+      var proj_ = ol.proj.get('merc_180');
+      proj_.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]);
+
+      var tileGrid = ol.tilegrid.createForProjection('merc_180', 0, [64, 64]);
+      testSingleTile(source, 'merc_180', tileGrid, 0, 0, -1, 1,
+          'rendering/ol/reproj/expected/dateline-merc-180.png', 2, done);
+    });
+
+    it('displays north pole correctly (EPSG:3413)', function(done) {
+      proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' +
+          '+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+      var proj3413 = ol.proj.get('EPSG:3413');
+      proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
+
+      var tileGrid = ol.tilegrid.createForProjection('EPSG:3413', 0, [64, 64]);
+      testSingleTile(source, 'EPSG:3413', tileGrid, 0, 0, -1, 1,
+          'rendering/ol/reproj/expected/dateline-pole.png', 2, done);
+    });
+  });
+});

test/rendering/ol/source/tilewms.test.js

@@ -0,0 +1,151 @@
+goog.provide('ol.test.rendering.source.TileWMS');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileWMS');
+
+describe('ol.rendering.source.TileWMS', function() {
+
+  function tilesLoaded(source, callback) {
+    var loading = 0;
+
+    source.on('tileloadstart', function(event) {
+      loading++;
+    });
+    source.on('tileloadend', function(event) {
+      loading--;
+      if (loading == 0) {
+        callback();
+      }
+    });
+    source.on('tileloaderror', function(event) {
+      expect().fail('Tile failed to load');
+    });
+
+  }
+
+  function createMap(renderer, pixelRatio) {
+    return new ol.Map({
+      target: createMapDiv(200, 200),
+      pixelRatio: pixelRatio,
+      renderer: renderer,
+      view: new ol.View({
+        center: [0, 0],
+        zoom: 5
+      })
+    });
+  }
+
+  function createSource(gutter) {
+    return new ol.source.TileWMS({
+      params: {
+        'LAYERS': 'layer'
+      },
+      gutter: gutter,
+      url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png'
+    });
+  }
+
+  describe('0px gutter, 1 pixel ratio', function() {
+    it('tests the canvas renderer', function(done) {
+      var map = createMap('canvas', 1);
+      var source = createSource(0);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/0_1.canvas.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      var map = createMap('webgl', 1);
+      var source = createSource(0);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/0_1.webgl.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+  });
+
+  describe('0px gutter, 2 pixel ratio', function() {
+    it('tests the canvas renderer', function(done) {
+      var map = createMap('canvas', 2);
+      var source = createSource(0);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/0_2.canvas.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      var map = createMap('webgl', 2);
+      var source = createSource(0);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/0_2.webgl.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+  });
+
+
+  describe('20px gutter, 1 pixel ratio', function() {
+    it('tests the canvas renderer', function(done) {
+      var map = createMap('canvas', 1);
+      var source = createSource(20);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/20_1.canvas.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      var map = createMap('webgl', 1);
+      var source = createSource(20);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/20_1.webgl.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+  });
+
+  describe('20px gutter, 2 pixel ratio', function() {
+    it('tests the canvas renderer', function(done) {
+      var map = createMap('canvas', 2);
+      var source = createSource(20);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/20_2.canvas.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      var map = createMap('webgl', 2);
+      var source = createSource(20);
+      tilesLoaded(source, function() {
+        expectResemble(map, 'rendering/ol/source/expected/20_2.webgl.png', IMAGE_TOLERANCE, done);
+      });
+      map.addLayer(new ol.layer.Tile({
+        source: source
+      }));
+    });
+  });
+
+});

test/rendering/ol/style/circle.test.js

@@ -0,0 +1,201 @@
+goog.provide('ol.test.rendering.style.Circle');
+
+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');
+
+
+describe('ol.rendering.style.Circle', function() {
+
+  var target, map, vectorSource;
+
+  function createMap(renderer) {
+    target = createMapDiv(50, 50);
+
+    vectorSource = new ol.source.Vector();
+    var 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, 'rendering/ol/style/expected/circle-canvas.png',
+          8.0, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/circle-webgl.png',
+          8.0, done);
+    });
+  });
+});