Switch map and layer constructor in tests

The webgl tests do not run currently (which is why these have not been failing).

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

@@ -1,6 +1,8 @@
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import ImageLayer from '../../../../src/ol/layer/Image.js';
+import WebGLImageLayer from '../../../../src/ol/layer/Image.js';
 import {assign} from '../../../../src/ol/obj.js';
 import {get as getProjection, transform, transformExtent} from '../../../../src/ol/proj.js';
 import Static from '../../../../src/ol/source/ImageStatic.js';
@@ -12,10 +14,10 @@ describe('ol.rendering.layer.Image', function() {
   let map;
 
   function createMap(renderer) {
-    map = new Map({
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    map = new MapConstructor({
       pixelRatio: 1,
       target: createMapDiv(50, 50),
-      renderer: renderer,
       view: new View({
         center: transform(
           [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
@@ -31,7 +33,8 @@ describe('ol.rendering.layer.Image', function() {
     map = null;
   });
 
-  function waitForImages(sources, layerOptions, onImagesLoaded) {
+  function waitForImages(renderer, sources, layerOptions, onImagesLoaded) {
+    const LayerConstructor = renderer === 'webgl' ? WebGLImageLayer : ImageLayer;
     let imagesLoading = 0;
     let imagesLoaded = 0;
 
@@ -57,7 +60,7 @@ describe('ol.rendering.layer.Image', function() {
         source: source
       };
       assign(options, layerOptions);
-      map.addLayer(new ImageLayer(options));
+      map.addLayer(new LayerConstructor(options));
     });
   }
 
@@ -75,7 +78,7 @@ describe('ol.rendering.layer.Image', function() {
 
     it('tests the canvas renderer', function(done) {
       createMap('canvas');
-      waitForImages([source], {}, function() {
+      waitForImages('canvas', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/image-canvas.png',
           IMAGE_TOLERANCE, done);
       });
@@ -84,7 +87,7 @@ describe('ol.rendering.layer.Image', function() {
     where('WebGL').it('tests the WebGL renderer', function(done) {
       assertWebGL();
       createMap('webgl');
-      waitForImages([source], {}, function() {
+      waitForImages('webgl', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/image-webgl.png',
           IMAGE_TOLERANCE, done);
       });
@@ -104,7 +107,7 @@ describe('ol.rendering.layer.Image', function() {
 
     it('renders correctly', function(done) {
       createMap('canvas');
-      waitForImages([source], {}, function() {
+      waitForImages('canvas', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/image-scaled.png',
           IMAGE_TOLERANCE, done);
       });

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

@@ -1,8 +1,10 @@
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import {getSize} from '../../../../src/ol/extent.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import TileLayer from '../../../../src/ol/layer/Tile.js';
+import WebGLTileLayer from '../../../../src/ol/layer/WebGLTile.js';
 import {assign} from '../../../../src/ol/obj.js';
 import {transform} from '../../../../src/ol/proj.js';
 import TileImage from '../../../../src/ol/source/TileImage.js';
@@ -18,12 +20,12 @@ describe('ol.rendering.layer.Tile', function() {
   let map;
 
   function createMap(renderer, opt_center, opt_size, opt_pixelRatio, opt_resolutions) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
     const size = opt_size !== undefined ? opt_size : [50, 50];
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: opt_pixelRatio || 1,
       target: createMapDiv(size[0], size[1]),
-      renderer: renderer,
       view: new View({
         center: opt_center !== undefined ? opt_center : transform(
           [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
@@ -40,7 +42,8 @@ describe('ol.rendering.layer.Tile', function() {
     map = null;
   });
 
-  function waitForTiles(sources, layerOptions, onTileLoaded) {
+  function waitForTiles(renderer, sources, layerOptions, onTileLoaded) {
+    const LayerConstructor = renderer === 'webgl' ? WebGLTileLayer : TileLayer;
     let tilesLoading = 0;
     let tileLoaded = 0;
 
@@ -66,7 +69,7 @@ describe('ol.rendering.layer.Tile', function() {
         source: source
       };
       assign(options, layerOptions[i] || layerOptions);
-      map.addLayer(new TileLayer(options));
+      map.addLayer(new LayerConstructor(options));
     });
   }
 
@@ -76,7 +79,7 @@ describe('ol.rendering.layer.Tile', function() {
       const source = new XYZ({
         url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
       });
-      waitForTiles([source], {}, function() {
+      waitForTiles('canvas', [source], {}, function() {
         setTimeout(function() {
           expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
             IMAGE_TOLERANCE, done);
@@ -97,7 +100,7 @@ describe('ol.rendering.layer.Tile', function() {
 
     it('tests the canvas renderer', function(done) {
       createMap('canvas');
-      waitForTiles([source], {}, function() {
+      waitForTiles('canvas', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
           IMAGE_TOLERANCE, done);
       });
@@ -106,7 +109,7 @@ describe('ol.rendering.layer.Tile', function() {
     where('WebGL').it('tests the WebGL renderer', function(done) {
       assertWebGL();
       createMap('webgl');
-      waitForTiles([source], {}, function() {
+      waitForTiles('webgl', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/osm-webgl.png',
           IMAGE_TOLERANCE, done);
       });
@@ -130,7 +133,7 @@ describe('ol.rendering.layer.Tile', function() {
     where('WebGL').it('tests the WebGL renderer', function(done) {
       assertWebGL();
       createMap('webgl');
-      waitForTiles([source1, source2], {}, function() {
+      waitForTiles('webgl', [source1, source2], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/2-layers-webgl.png',
           IMAGE_TOLERANCE, done);
       });
@@ -145,7 +148,7 @@ describe('ol.rendering.layer.Tile', function() {
 
     it('tests canvas layer extent clipping', function(done) {
       createMap('canvas');
-      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+      waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
         expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent.png',
           IMAGE_TOLERANCE, done);
       });
@@ -154,7 +157,7 @@ describe('ol.rendering.layer.Tile', function() {
     it('tests canvas layer extent clipping with rotation', function(done) {
       createMap('canvas');
       map.getView().setRotation(Math.PI / 2);
-      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+      waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
         expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate.png',
           IMAGE_TOLERANCE, done);
       });
@@ -162,7 +165,7 @@ describe('ol.rendering.layer.Tile', function() {
 
     it('tests canvas layer extent clipping (HiDPI)', function(done) {
       createMap('canvas', undefined, undefined, 2);
-      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+      waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
         expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-hidpi.png',
           IMAGE_TOLERANCE, done);
       });
@@ -171,7 +174,7 @@ describe('ol.rendering.layer.Tile', function() {
     it('tests canvas layer extent clipping with rotation (HiDPI)', function(done) {
       createMap('canvas', undefined, undefined, 2);
       map.getView().setRotation(Math.PI / 2);
-      waitForTiles([source1, source2], [{}, {extent: centerExtent(map)}], function() {
+      waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
         expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate-hidpi.png',
           IMAGE_TOLERANCE, done);
       });
@@ -191,7 +194,7 @@ describe('ol.rendering.layer.Tile', function() {
 
     it('tests the canvas renderer', function(done) {
       createMap('canvas');
-      waitForTiles([source], {opacity: 0.2}, function() {
+      waitForTiles('canvas', [source], {opacity: 0.2}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/opacity-canvas.png',
           IMAGE_TOLERANCE, done);
       });
@@ -200,7 +203,7 @@ describe('ol.rendering.layer.Tile', function() {
     where('WebGL').it('tests the WebGL renderer', function(done) {
       assertWebGL();
       createMap('webgl');
-      waitForTiles([source], {opacity: 0.2}, function() {
+      waitForTiles('webgl', [source], {opacity: 0.2}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/opacity-webgl.png',
           IMAGE_TOLERANCE, done);
       });
@@ -222,7 +225,7 @@ describe('ol.rendering.layer.Tile', function() {
     it('512x256 renders correcly using the canvas renderer', function(done) {
       const source = createSource('512x256');
       createMap('canvas', [-10997148, 4569099]);
-      waitForTiles([source], {}, function() {
+      waitForTiles('canvas', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/512x256-canvas.png',
           IMAGE_TOLERANCE, done);
       });
@@ -232,7 +235,7 @@ describe('ol.rendering.layer.Tile', function() {
       assertWebGL();
       const source = createSource('512x256');
       createMap('webgl', [-10997148, 4569099]);
-      waitForTiles([source], {}, function() {
+      waitForTiles('webgl', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/512x256-webgl.png',
           IMAGE_TOLERANCE, done);
       });
@@ -242,7 +245,7 @@ describe('ol.rendering.layer.Tile', function() {
       const source = createSource('192x256');
       createMap('canvas', [-11271098, 3747248], [100, 100], undefined,
         source.getTileGrid().getResolutions());
-      waitForTiles([source], {}, function() {
+      waitForTiles('canvas', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/192x256-canvas.png',
           IMAGE_TOLERANCE, done);
       });
@@ -253,7 +256,7 @@ describe('ol.rendering.layer.Tile', function() {
       const source = createSource('192x256');
       createMap('webgl', [-11271098, 3747248], [100, 100], undefined,
         source.getTileGrid().getResolutions());
-      waitForTiles([source], {}, function() {
+      waitForTiles('webgl', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/192x256-webgl.png',
           IMAGE_TOLERANCE, done);
       });
@@ -284,7 +287,7 @@ describe('ol.rendering.layer.Tile', function() {
     it('works with the canvas renderer', function(done) {
       createMap('canvas', undefined, [100, 100]);
       map.getLayers().on('add', onAddLayer);
-      waitForTiles([source], {}, function() {
+      waitForTiles('canvas', [source], {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/render-canvas.png',
           IMAGE_TOLERANCE, done);
       });

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

@@ -20,11 +20,10 @@ describe('ol.rendering.layer.Vector', function() {
   const center = [1825927.7316762917, 6143091.089223046];
 
   let map;
-  function createMap(renderer) {
+  function createMap() {
     map = new Map({
       pixelRatio: 1,
       target: createMapDiv(80, 80),
-      renderer: renderer,
       view: new View({
         center: center,
         zoom: 13
@@ -74,7 +73,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('renders opacity correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       const smallLine = new Feature(new LineString([
         [center[0], center[1] - 1],
         [center[0], center[1] + 1]
@@ -100,7 +99,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('renders transparent layers correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       const smallLine = new Feature(new LineString([
         [center[0], center[1] - 1],
         [center[0], center[1] + 1]
@@ -139,7 +138,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('renders rotation correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       map.getView().setRotation(Math.PI + Math.PI / 4);
       addPolygon(300);
       addCircle(500);
@@ -159,7 +158,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('renders fill/stroke batches correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       source = new VectorSource({
         overlaps: false
       });
@@ -185,7 +184,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('renders stroke batches correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       source = new VectorSource({
         overlaps: false
       });
@@ -209,7 +208,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('interrupts fill/stroke batches correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       let color;
       function createSource(overlaps) {
         color = '#3399CC';
@@ -262,7 +261,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('interrupts stroke batches correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       let color;
       function createSource(overlaps) {
         color = '#3399CC';
@@ -469,7 +468,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters text', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });
@@ -509,7 +508,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters text and respects z-index', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });
@@ -549,7 +548,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters images', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });
@@ -588,7 +587,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters images and respects z-index', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });
@@ -627,7 +626,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters image & text groups', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });
@@ -671,7 +670,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters text along lines and images', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });
@@ -714,7 +713,7 @@ describe('ol.rendering.layer.Vector', function() {
     });
 
     it('declutters text along lines and images with z-index', function(done) {
-      createMap('canvas');
+      createMap();
       const layer = new VectorLayer({
         source: source
       });

test/rendering/ol/layer/vectorimage.test.js

@@ -18,12 +18,11 @@ describe('ol.rendering.layer.VectorImage', function() {
   const center = [1825927.7316762917, 6143091.089223046];
 
   let map, source;
-  function createMap(renderer) {
+  function createMap() {
     source = new VectorSource();
     map = new Map({
       pixelRatio: 1,
       target: createMapDiv(80, 80),
-      renderer: renderer,
       view: new View({
         center: center,
         zoom: 13
@@ -55,7 +54,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   }
 
   it('renders opacity correctly', function(done) {
-    createMap('canvas');
+    createMap();
     const smallLine = new Feature(new LineString([
       [center[0], center[1] - 1],
       [center[0], center[1] + 1]
@@ -81,7 +80,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   });
 
   it('renders transparent layers correctly', function(done) {
-    createMap('canvas');
+    createMap();
     const smallLine = new Feature(new LineString([
       [center[0], center[1] - 1],
       [center[0], center[1] + 1]
@@ -120,7 +119,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   });
 
   it('renders rotation correctly', function(done) {
-    createMap('canvas');
+    createMap();
     map.getView().setRotation(Math.PI + Math.PI / 4);
     addPolygon(300);
     addCircle(500);
@@ -140,7 +139,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   });
 
   it('unskips features correctly', function(done) {
-    createMap('canvas');
+    createMap();
     addCircle(500);
     addPolygon(300);
     map.skipFeature(source.getFeatures()[1]);
@@ -165,7 +164,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   });
 
   it('declutters text', function(done) {
-    createMap('canvas');
+    createMap();
     const layer = new VectorImageLayer({
       source: source
     });
@@ -205,7 +204,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   });
 
   it('declutters images', function(done) {
-    createMap('canvas');
+    createMap();
     const layer = new VectorImageLayer({
       source: source
     });
@@ -244,7 +243,7 @@ describe('ol.rendering.layer.VectorImage', function() {
   });
 
   it('declutters text along lines and images', function(done) {
-    createMap('canvas');
+    createMap();
     const layer = new VectorImageLayer({
       source: source
     });

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

@@ -19,12 +19,11 @@ describe('ol.rendering.layer.VectorTile', function() {
 
   let map;
 
-  function createMap(renderer, opt_pixelRatio, opt_size) {
+  function createMap(opt_pixelRatio, opt_size) {
     const size = opt_size || 50;
     map = new Map({
       pixelRatio: opt_pixelRatio || 1,
       target: createMapDiv(size, size),
-      renderer: renderer,
       view: new View({
         center: [1825927.7316762917, 6143091.089223046],
         zoom: 14
@@ -78,7 +77,7 @@ describe('ol.rendering.layer.VectorTile', function() {
     });
 
     it('renders correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       waitForTiles(source, {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas.png',
           22, done);
@@ -86,7 +85,7 @@ describe('ol.rendering.layer.VectorTile', function() {
     });
 
     it('renders rotated view correctly with the canvas renderer', function(done) {
-      createMap('canvas');
+      createMap();
       map.getView().setRotation(Math.PI / 4);
       waitForTiles(source, {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-rotated.png',
@@ -95,7 +94,7 @@ describe('ol.rendering.layer.VectorTile', function() {
     });
 
     it('renders rotated view correctly with vector layer on top', function(done) {
-      createMap('canvas');
+      createMap();
       const vectorSource = new VectorSource({
         features: [
           new Feature(new Point([1825727.7316762917, 6143091.089223046]))
@@ -121,7 +120,7 @@ describe('ol.rendering.layer.VectorTile', function() {
     });
 
     it('renders correctly with the canvas renderer (HiDPI)', function(done) {
-      createMap('canvas', 2);
+      createMap(2);
       waitForTiles(source, {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-hidpi.png',
           11.3, done);
@@ -129,7 +128,7 @@ describe('ol.rendering.layer.VectorTile', function() {
     });
 
     it('renders rotated view correctly with the canvas renderer (HiDPI)', function(done) {
-      createMap('canvas', 2);
+      createMap(2);
       map.getView().setRotation(Math.PI / 4);
       waitForTiles(source, {}, function() {
         expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-rotated-hidpi.png',
@@ -138,7 +137,7 @@ describe('ol.rendering.layer.VectorTile', function() {
     });
 
     it('declutters text and images', function(done) {
-      createMap('canvas', 1, 100);
+      createMap(1, 100);
       map.getView().setZoom(13.8);
       const style = function(feature, resolution) {
         const geom = feature.getGeometry();

test/rendering/ol/map.test.js

@@ -1,8 +1,10 @@
 import Feature from '../../../src/ol/Feature.js';
 import Point from '../../../src/ol/geom/Point.js';
 import Map from '../../../src/ol/Map.js';
+import WebGLMap from '../../../src/ol/WebGLMap.js';
 import View from '../../../src/ol/View.js';
 import VectorLayer from '../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../src/ol/layer/WebGLVector.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
 
 
@@ -10,7 +12,10 @@ describe('ol.rendering.Map', function() {
 
   let map;
   function createMap(renderer) {
-    const vectorLayer = new VectorLayer({
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
+    const vectorLayer = new LayerConstructor({
       source: new VectorSource({
         features: [new Feature({
           geometry: new Point([0, 0])
@@ -18,10 +23,9 @@ describe('ol.rendering.Map', function() {
       })
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: 1,
       target: createMapDiv(50, 50),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',

test/rendering/ol/source/raster.test.js

@@ -27,11 +27,10 @@ where('Uint8ClampedArray').describe('ol.rendering.source.Raster', function() {
   }
 
   let map;
-  function createMap(renderer, pixelRatio) {
+  function createMap(pixelRatio) {
     map = new Map({
       target: createMapDiv(200, 200),
       pixelRatio: pixelRatio,
-      renderer: renderer,
       view: new View({
         center: [0, 0],
         zoom: 0
@@ -48,7 +47,7 @@ where('Uint8ClampedArray').describe('ol.rendering.source.Raster', function() {
 
   describe('raster source rendering', function() {
     it('renders the result of an operation', function(done) {
-      createMap('canvas', 1);
+      createMap(1);
 
       const source = new XYZ({
         url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',

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

@@ -1,6 +1,8 @@
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import Map from '../../../../src/ol/Map.js';
 import View from '../../../../src/ol/View.js';
 import TileLayer from '../../../../src/ol/layer/Tile.js';
+import WebGLTileLayer from '../../../../src/ol/layer/WebGLTile.js';
 import TileWMS from '../../../../src/ol/source/TileWMS.js';
 
 describe('ol.rendering.source.TileWMS', function() {
@@ -25,10 +27,11 @@ describe('ol.rendering.source.TileWMS', function() {
 
   let map;
   function createMap(renderer, pixelRatio) {
-    map = new Map({
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+
+    map = new MapConstructor({
       target: createMapDiv(200, 200),
       pixelRatio: pixelRatio,
-      renderer: renderer,
       view: new View({
         center: [0, 0],
         zoom: 5
@@ -74,7 +77,7 @@ describe('ol.rendering.source.TileWMS', function() {
       tilesLoaded(source, function() {
         expectResemble(map, 'rendering/ol/source/expected/0_1.webgl.png', IMAGE_TOLERANCE, done);
       });
-      map.addLayer(new TileLayer({
+      map.addLayer(new WebGLTileLayer({
         source: source
       }));
     });
@@ -99,7 +102,7 @@ describe('ol.rendering.source.TileWMS', function() {
       tilesLoaded(source, function() {
         expectResemble(map, 'rendering/ol/source/expected/0_2.webgl.png', IMAGE_TOLERANCE, done);
       });
-      map.addLayer(new TileLayer({
+      map.addLayer(new WebGLTileLayer({
         source: source
       }));
     });
@@ -125,7 +128,7 @@ describe('ol.rendering.source.TileWMS', function() {
       tilesLoaded(source, function() {
         expectResemble(map, 'rendering/ol/source/expected/20_1.webgl.png', IMAGE_TOLERANCE, done);
       });
-      map.addLayer(new TileLayer({
+      map.addLayer(new WebGLTileLayer({
         source: source
       }));
     });
@@ -150,7 +153,7 @@ describe('ol.rendering.source.TileWMS', function() {
       tilesLoaded(source, function() {
         expectResemble(map, 'rendering/ol/source/expected/20_2.webgl.png', IMAGE_TOLERANCE, done);
       });
-      map.addLayer(new TileLayer({
+      map.addLayer(new WebGLTileLayer({
         source: source
       }));
     });

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

@@ -2,8 +2,10 @@ import Feature from '../../../../src/ol/Feature.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import MultiPoint from '../../../../src/ol/geom/MultiPoint.js';
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import CircleStyle from '../../../../src/ol/style/Circle.js';
 import Fill from '../../../../src/ol/style/Fill.js';
@@ -16,15 +18,17 @@ describe('ol.rendering.style.Circle', function() {
   let map, vectorSource;
 
   function createMap(renderer) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
     vectorSource = new VectorSource();
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new LayerConstructor({
       source: vectorSource
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: 1,
       target: createMapDiv(50, 50),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',

test/rendering/ol/style/icon.test.js

@@ -1,8 +1,10 @@
 import Feature from '../../../../src/ol/Feature.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Icon from '../../../../src/ol/style/Icon.js';
 import Style from '../../../../src/ol/style/Style.js';
@@ -22,15 +24,17 @@ describe('ol.rendering.style.Icon', function() {
   };
 
   function createMap(renderer, width, height) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
     vectorSource = new VectorSource();
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new LayerConstructor({
       source: vectorSource
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: 1,
       target: createMapDiv(width ? width : 50, height ? height : 50),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',

test/rendering/ol/style/linestring.test.js

@@ -1,8 +1,10 @@
 import Feature from '../../../../src/ol/Feature.js';
 import LineString from '../../../../src/ol/geom/LineString.js';
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Style from '../../../../src/ol/style/Style.js';
 import Stroke from '../../../../src/ol/style/Stroke.js';
@@ -13,15 +15,17 @@ describe('ol.rendering.style.LineString', function() {
   let map, vectorSource;
 
   function createMap(renderer, opt_pixelRatio) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
     vectorSource = new VectorSource();
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new LayerConstructor({
       source: vectorSource
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: opt_pixelRatio || 1,
       target: createMapDiv(50, 50),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',

test/rendering/ol/style/polygon.test.js

@@ -1,8 +1,10 @@
 import Feature from '../../../../src/ol/Feature.js';
 import Polygon from '../../../../src/ol/geom/Polygon.js';
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Fill from '../../../../src/ol/style/Fill.js';
 import Style from '../../../../src/ol/style/Style.js';
@@ -14,17 +16,19 @@ describe('ol.rendering.style.Polygon', function() {
   let map, vectorSource;
 
   function createMap(renderer, opt_size) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
     const size = opt_size || 50;
 
     vectorSource = new VectorSource();
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new LayerConstructor({
       source: vectorSource
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: 1,
       target: createMapDiv(size, size),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',

test/rendering/ol/style/regularshape.test.js

@@ -1,8 +1,10 @@
 import Feature from '../../../../src/ol/Feature.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Fill from '../../../../src/ol/style/Fill.js';
 import RegularShape from '../../../../src/ol/style/RegularShape.js';
@@ -15,15 +17,17 @@ describe('ol.rendering.style.RegularShape', function() {
   let map, vectorSource;
 
   function createMap(renderer) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
     vectorSource = new VectorSource();
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new LayerConstructor({
       source: vectorSource
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: 1,
       target: createMapDiv(50, 50),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',

test/rendering/ol/style/text.test.js

@@ -5,8 +5,10 @@ import MultiPolygon from '../../../../src/ol/geom/MultiPolygon.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import Polygon from '../../../../src/ol/geom/Polygon.js';
 import Map from '../../../../src/ol/Map.js';
+import WebGLMap from '../../../../src/ol/WebGLMap.js';
 import View from '../../../../src/ol/View.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Text from '../../../../src/ol/style/Text.js';
 import Fill from '../../../../src/ol/style/Fill.js';
@@ -18,16 +20,18 @@ describe('ol.rendering.style.Text', function() {
   let map, vectorSource;
 
   function createMap(renderer, opt_pixelRatio) {
+    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
+    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
+
     const pixelRatio = opt_pixelRatio || 1;
     vectorSource = new VectorSource();
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new LayerConstructor({
       source: vectorSource
     });
 
-    map = new Map({
+    map = new MapConstructor({
       pixelRatio: pixelRatio,
       target: createMapDiv(200 / pixelRatio, 200 / pixelRatio),
-      renderer: renderer,
       layers: [vectorLayer],
       view: new View({
         projection: 'EPSG:4326',