Merge pull request #9333 from KaiVolland/unify-rendering-tests

Unify rendering tests

rendering/cases/layer-image/main.js

@@ -0,0 +1,28 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import {
+  get as getProjection,
+  transform,
+  transformExtent
+} from '../../../src/ol/proj';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [new ImageLayer({
+    source: new Static({
+      url: '/data/tiles/osm/5/5/12.png',
+      imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+      projection: getProjection('EPSG:3857')
+    })
+  })],
+  view: new View({
+    center,
+    zoom: 8
+  })
+});
+
+render();

rendering/cases/layer-tile-none-square/main.js

@@ -0,0 +1,30 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import XYZ from '../../../src/ol/source/XYZ';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+
+const center = [-10997148, 4569099];
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/512x256/{z}/{x}/{y}.png',
+    tileGrid: createXYZ({
+      tileSize: [512, 256]
+    }),
+    transition: 0
+  })
+});
+
+const map = new Map({
+  target: 'map',
+  pixelRatio: 1,
+  view: new View({
+    center: center,
+    zoom: 5
+  })
+});
+
+map.addLayer(layer);
+
+render();

rendering/cases/layer-tile-opacity/main.js

@@ -0,0 +1,26 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
+
+const center = fromLonLat([8.6, 50.1]);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0
+      }),
+      opacity: 0.2
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();

rendering/cases/layer-tile-two-layers/main.js

@@ -0,0 +1,35 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
+
+const center = fromLonLat([8.6, 50.1]);
+
+const layer1 = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  }),
+  opacity: 0.2
+});
+const layer2 = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
+    transition: 0
+  })
+});
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [layer1, layer2],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+map.getView().setRotation(Math.PI / 2);
+
+render();

rendering/cases/layer-vector-decluttering/main.js

@@ -0,0 +1,161 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Style from '../../../src/ol/style/Style.js';
+import Text from '../../../src/ol/style/Text.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+let center = [1825927.7316762917, 6143091.089223046];
+const map = new Map({
+  pixelRatio: 1,
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+const source1 = new VectorSource();
+const layer1 = new VectorLayer({
+  declutter: true,
+  source: source1
+});
+
+const source2 = new VectorSource();
+const layer2 = new VectorLayer({
+  declutter: true,
+  source: source2
+});
+
+const source3 = new VectorSource();
+const layer3 = new VectorLayer({
+  declutter: true,
+  source: source3
+});
+
+const source4 = new VectorSource();
+const layer4 = new VectorLayer({
+  declutter: true,
+  source: source4
+});
+
+const feature1 = new Feature({
+  geometry: new Point(center),
+  zIndex: 2
+});
+source1.addFeature(feature1);
+source1.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  zIndex: 3
+}));
+source1.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  zIndex: 1
+}));
+layer1.setStyle(function(feature) {
+  return new Style({
+    image: new CircleStyle({
+      radius: 15,
+      stroke: new Stroke({
+        color: 'blue'
+      })
+    })
+  });
+});
+map.addLayer(layer1);
+
+center = [center[0] + 500, center[1] + 500];
+const feature2 = new Feature({
+  geometry: new Point(center),
+  text: 'center',
+  zIndex: 2
+});
+source2.addFeature(feature2);
+source2.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west',
+  zIndex: 3
+}));
+source2.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east',
+  zIndex: 1
+}));
+layer2.setStyle(function(feature) {
+  return new Style({
+    text: new Text({
+      text: feature.get('text'),
+      font: '12px sans-serif'
+    })
+  });
+});
+map.addLayer(layer2);
+
+center = [center[0] + 500, center[1] + 500];
+source3.addFeature(new Feature({
+  geometry: new Point(center),
+  text: 'center'
+}));
+source3.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source3.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east'
+}));
+layer3.setStyle(function(feature) {
+  return new Style({
+    image: new CircleStyle({
+      radius: 5,
+      stroke: new Stroke({
+        color: 'red'
+      })
+    }),
+    text: new Text({
+      text: feature.get('text'),
+      font: '12px sans-serif',
+      textBaseline: 'bottom',
+      offsetY: -5
+    })
+  });
+});
+map.addLayer(layer3);
+
+center = [center[0] - 2000, center[1] - 2000];
+const point = new Feature(new Point(center));
+point.setStyle(new Style({
+  zIndex: 2,
+  image: new CircleStyle({
+    radius: 8,
+    stroke: new Stroke({
+      color: 'blue'
+    })
+  })
+}));
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  zIndex: 1,
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: '12px sans-serif'
+  })
+}));
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.02});

rendering/cases/layer-vector-polygon-partial/main.js

@@ -0,0 +1,54 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Fill from '../../../src/ol/style/Fill.js';
+
+const src = new VectorSource({
+  features: [
+    new Feature(new Polygon([[
+      [-22, 18],
+      [-22, 78],
+      [-9, 78],
+      [-9, 18],
+      [-22, 18]
+    ]])),
+    new Feature(new Polygon([[
+      [-9, 18],
+      [-9, 78],
+      [4, 78],
+      [4, 18],
+      [-9, 18]
+    ]]))
+  ]
+});
+const layer = new VectorLayer({
+  renderBuffer: 0,
+  source: src,
+  style: new Style({
+    stroke: new Stroke({
+      color: [0, 0, 0, 1],
+      width: 2
+    }),
+    fill: new Fill({
+      color: [255, 0, 0, 1]
+    })
+  })
+});
+const view = new View({
+  center: [-9.5, 78],
+  zoom: 2,
+  projection: 'EPSG:4326'
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view
+});
+
+render();

rendering/cases/layer-vector-polygon/main.js

@@ -0,0 +1,43 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+
+const feature = new Feature({
+  geometry: new Polygon([
+    [[-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]]
+  ])
+});
+
+const src = new VectorSource({
+  features: [
+    feature
+  ]
+});
+const layer = new VectorLayer({
+  renderBuffer: 0,
+  source: src,
+  style: new Style({
+    fill: new Fill({
+      color: 'blue'
+    })
+  })
+});
+const view = new View({
+  center: [0, 0],
+  zoom: 1,
+  projection: 'EPSG:4326'
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view
+});
+
+render();

rendering/cases/layer-vector/main.js

@@ -0,0 +1,110 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer 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';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Circle from '../../../src/ol/geom/Circle.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source1 = new VectorSource();
+const source2 = new VectorSource();
+const vectorLayer1 = new VectorLayer({
+  source: source1,
+  style: new Style({
+    stroke: new Stroke({
+      color: '#3399CC',
+      width: 1.25
+    })
+  })
+});
+const vectorLayer2 = new VectorLayer({
+  source: source2,
+  opacity: 0.6
+});
+
+function addCircle(r, source) {
+  source.addFeature(new Feature(new Circle(center, r)));
+}
+
+function addPolygon(r, source) {
+  source.addFeature(new Feature(new 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]
+    ]
+  ])));
+}
+
+const smallLine = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine.setStyle(new Style({
+  zIndex: -99,
+  stroke: new Stroke({width: 75, color: 'red'})
+}));
+smallLine.getGeometry().translate(-1000, 1000);
+source1.addFeature(smallLine);
+addPolygon(100, source1);
+addCircle(200, source1);
+addPolygon(250, source1);
+addCircle(500, source1);
+addPolygon(600, source1);
+addPolygon(720, source1);
+
+const smallLine2 = new Feature(new LineString([
+  [center[0], center[1] - 1000],
+  [center[0], center[1] + 1000]
+]));
+smallLine2.setStyle([
+  new Style({
+    stroke: new Stroke({width: 35, color: 'blue'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 15, color: 'green'})
+  })
+]);
+smallLine2.getGeometry().translate(1000, 1000);
+source1.addFeature(smallLine2);
+
+const smallLine3 = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine3.setStyle([
+  new Style({
+    stroke: new Stroke({width: 75, color: 'red'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 45, color: 'white'})
+  })
+]);
+smallLine3.getGeometry().translate(-1000, -1000);
+
+addPolygon(400, source2);
+addCircle(400, source2);
+source2.addFeature(smallLine3);
+
+const map = new Map({
+  layers: [
+    vectorLayer1,
+    vectorLayer2
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().setRotation(Math.PI + Math.PI / 4);
+
+render();

rendering/cases/layer-vectorimage/main.js

@@ -0,0 +1,110 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.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';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Circle from '../../../src/ol/geom/Circle.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source1 = new VectorSource();
+const source2 = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+  source: source1,
+  style: new Style({
+    stroke: new Stroke({
+      color: '#3399CC',
+      width: 1.25
+    })
+  })
+});
+const vectorLayer2 = new VectorImageLayer({
+  source: source2,
+  opacity: 0.6
+});
+
+function addCircle(r, source) {
+  source.addFeature(new Feature(new Circle(center, r)));
+}
+
+function addPolygon(r, source) {
+  source.addFeature(new Feature(new 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]
+    ]
+  ])));
+}
+
+const smallLine = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine.setStyle(new Style({
+  zIndex: -99,
+  stroke: new Stroke({width: 75, color: 'red'})
+}));
+smallLine.getGeometry().translate(-1000, 1000);
+source1.addFeature(smallLine);
+addPolygon(100, source1);
+addCircle(200, source1);
+addPolygon(250, source1);
+addCircle(500, source1);
+addPolygon(600, source1);
+addPolygon(720, source1);
+
+const smallLine2 = new Feature(new LineString([
+  [center[0], center[1] - 1000],
+  [center[0], center[1] + 1000]
+]));
+smallLine2.setStyle([
+  new Style({
+    stroke: new Stroke({width: 35, color: 'blue'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 15, color: 'green'})
+  })
+]);
+smallLine2.getGeometry().translate(1000, 1000);
+source1.addFeature(smallLine2);
+
+const smallLine3 = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine3.setStyle([
+  new Style({
+    stroke: new Stroke({width: 75, color: 'red'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 45, color: 'white'})
+  })
+]);
+smallLine3.getGeometry().translate(-1000, -1000);
+
+addPolygon(400, source2);
+addCircle(1000, source2);
+source2.addFeature(smallLine3);
+
+const map = new Map({
+  layers: [
+    vectorLayer1,
+    vectorLayer2
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().setRotation(Math.PI + Math.PI / 4);
+
+render({tolerance: 0.005});

rendering/cases/layer-vectortile-rotate-hidpi/main.js

@@ -0,0 +1,31 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+
+const map = new Map({
+  pixelRatio: 2,
+  layers: [
+    new VectorTileLayer({
+      source: new VectorTileSource({
+        format: new MVT(),
+        tileGrid: createXYZ(),
+        url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
+        transition: 0
+      })
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [1825927.7316762917, 6143091.089223046],
+    zoom: 14
+  })
+});
+
+map.getView().setRotation(Math.PI / 4);
+render({
+  message: 'Vector tile layer rotates (hidip)',
+  tolerance: 0.01
+});

rendering/cases/map-pan/main.js

@@ -0,0 +1,28 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+
+const map = new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new VectorLayer({
+      source: new VectorSource({
+        features: [new Feature({
+          geometry: new Point([0, 0])
+        })]
+      })
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    resolution: 1
+  })
+});
+map.getView().setCenter([10, 10]);
+
+render();

rendering/cases/map/main.js

@@ -0,0 +1,27 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new VectorLayer({
+      source: new VectorSource({
+        features: [new Feature({
+          geometry: new Point([0, 0])
+        })]
+      })
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();

rendering/cases/multipoint-style/main.js

@@ -0,0 +1,169 @@
+import Feature from '../../../src/ol/Feature.js';
+import MultiPoint from '../../../src/ol/geom/MultiPoint.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer 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';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+
+let feature;
+feature = new Feature({
+  geometry: new MultiPoint([[-20, 18]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-10, 18]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[4, 18]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-20, 3]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-10, 3]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[4, 3]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-20, -15]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    stroke: new Stroke({
+      color: '#256308',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-10, -15]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: 'rgba(0, 0, 255, 0.3)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[4, -15]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: 'rgba(235, 45, 70, 0.6)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource
+});
+
+new Map({
+  layers: [
+    vectorLayer
+  ],
+  target: 'map',
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+render();

rendering/cases/point-style/main.js

@@ -0,0 +1,169 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer 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';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+
+let feature;
+feature = new Feature({
+  geometry: new Point([-20, 18])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-10, 18])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([4, 18])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-20, 3])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-10, 3])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([4, 3])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-20, -15])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    stroke: new Stroke({
+      color: '#256308',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-10, -15])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: 'rgba(0, 0, 255, 0.3)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([4, -15])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: 'rgba(235, 45, 70, 0.6)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource
+});
+
+new Map({
+  layers: [
+    vectorLayer
+  ],
+  target: 'map',
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+render();

rendering/cases/regularshape-style/main.js

@@ -0,0 +1,114 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer 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';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+function createFeatures(stroke, fill, offSet = [0, 0]) {
+  let feature;
+  feature = new Feature({
+    geometry: new Point([-15 + offSet[0], 15 + offSet[1]])
+  });
+  // square
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 4,
+      radius: 10,
+      angle: Math.PI / 4
+    })
+  }));
+  vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([8 + offSet[0], 15 + offSet[1]])
+  });
+  // triangle
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 3,
+      radius: 10,
+      rotation: Math.PI / 4,
+      angle: 0
+    })
+  }));
+  vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([-10 + offSet[0], -8 + offSet[1]])
+  });
+  // star
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 5,
+      radius: 10,
+      radius2: 4,
+      angle: 0
+    })
+  }));
+  vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([12 + offSet[0], -8 + offSet[1]])
+  });
+  // cross
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 4,
+      radius: 10,
+      radius2: 0,
+      angle: 0
+    })
+  }));
+  vectorSource.addFeature(feature);
+}
+
+createFeatures(
+  new Stroke({width: 2}),
+  new Fill({color: 'red'})
+);
+createFeatures(
+  new Stroke({
+    lineDash: [10, 5]
+  }),
+  null,
+  [50, 50]
+);
+createFeatures(
+  new Stroke({
+    lineDash: [10, 5],
+    lineDashOffset: 5
+  }),
+  null,
+  [-50, -50]
+);
+
+createFeatures(new Stroke(), new Fill(), [50, -50]);
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource
+});
+
+new Map({
+  target: 'map',
+  layers: [vectorLayer],
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();

rendering/cases/source-raster/main.js

@@ -0,0 +1,32 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+import RasterSource from '../../../src/ol/source/Raster.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+
+const raster = new RasterSource({
+  sources: [new XYZ({
+    url: '/data/tiles/osm/{z}/{x}/{y}.png',
+    transition: 0
+  })],
+  threads: 0, // Avoid using workers to work with puppeteer
+  operation: function(pixels) {
+    const pixel = pixels[0];
+    const red = pixel[0];
+    pixel[0] = pixel[2];
+    pixel[2] = red;
+    return pixel;
+  }
+});
+
+new Map({
+  layers: [new ImageLayer({source: raster})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+
+render();
+

rendering/cases/source-tilewms-gutter0/main.js

@@ -0,0 +1,26 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import TileWMS from '../../../src/ol/source/TileWMS.js';
+
+const tileWms = new TileWMS({
+  params: {
+    'LAYERS': 'layer'
+  },
+  gutter: 0,
+  url: '/data/tiles/wms/wms0.png',
+  transition: 0
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [new TileLayer({source: tileWms})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 5
+  })
+});
+
+render();
+

rendering/cases/source-tilewms-gutter20/main.js

@@ -0,0 +1,26 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import TileWMS from '../../../src/ol/source/TileWMS.js';
+
+const tileWms = new TileWMS({
+  params: {
+    'LAYERS': 'layer'
+  },
+  gutter: 20,
+  url: '/data/tiles/wms/wms20.png',
+  transition: 0
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [new TileLayer({source: tileWms})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 5
+  })
+});
+
+render();
+

rendering/cases/text-style-linestring-nice/main.js

@@ -0,0 +1,130 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+
+const vectorSource = new VectorSource();
+
+const nicePath = [
+  20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
+  180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
+];
+
+const lineString1 = new LineString(nicePath, 'XY');
+const feature1 = new Feature({geometry: lineString1});
+feature1.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Hello world',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature1);
+
+const lineString2 = lineString1.clone();
+lineString2.translate(0, 30);
+const feature2 = new Feature({geometry: lineString2});
+feature2.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Scale 2',
+    scale: 2,
+    textBaseline: 'bottom',
+    textAlign: 'right',
+    placement: 'line',
+    font: 'bold italic 0.8em serif'
+  })
+}));
+vectorSource.addFeature(feature2);
+
+const lineString3 = lineString2.clone();
+lineString3.translate(0, 30);
+const feature3 = new Feature({geometry: lineString3});
+feature3.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Set properties'
+  })
+}));
+feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
+feature3.getStyle().getText().setTextAlign('left');
+feature3.getStyle().getText().setOffsetX(10);
+feature3.getStyle().getText().setOffsetY(-10);
+feature3.getStyle().getText().setPlacement('line');
+feature3.getStyle().getText().setScale(1.1);
+feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
+feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
+
+vectorSource.addFeature(feature3);
+
+const lineString4 = lineString3.clone();
+lineString4.translate(0, 30);
+const feature4 = new Feature({geometry: lineString4});
+feature4.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'negative offsetX',
+    offsetX: -10,
+    textAlign: 'start',
+    textBaseline: 'top',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature4);
+
+const lineString5 = lineString4.clone();
+lineString5.translate(0, 30);
+const feature5 = new Feature({geometry: lineString5});
+feature5.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Small text',
+    offsetY: 5,
+    scale: 0.7,
+    textAlign: 'end',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature5);
+
+const lineString6 = lineString5.clone();
+lineString6.translate(0, 30);
+const feature6 = new Feature({geometry: lineString6});
+feature6.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'FILL AND STROKE',
+    placement: 'line',
+    fill: new Fill({color: '#FFC0CB'}),
+    stroke: new Stroke({
+      color: '#00FF00',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature6);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    rotation: Math.PI / 4
+  })
+});
+map.getView().fit(vectorSource.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style-linestring-ugly/main.js

@@ -0,0 +1,135 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+
+const vectorSource = new VectorSource();
+
+const uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+
+const lineString1 = new LineString(uglyPath, 'XY');
+const feature1 = new Feature({geometry: lineString1});
+feature1.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Hello world',
+    placement: 'line',
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature1);
+
+const lineString2 = lineString1.clone();
+lineString2.translate(0, 30);
+const feature2 = new Feature({geometry: lineString2});
+feature2.setStyle(new Style({
+  stroke: new Stroke({color: 'red'}),
+  text: new Text({
+    text: 'Scale 2',
+    scale: 2,
+    textBaseline: 'bottom',
+    textAlign: 'right',
+    placement: 'line',
+    font: 'bold italic 0.8em serif',
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature2);
+
+const lineString3 = lineString2.clone();
+lineString3.translate(0, 30);
+const feature3 = new Feature({geometry: lineString3});
+feature3.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Set properties'
+  })
+}));
+feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
+feature3.getStyle().getText().setTextAlign('left');
+feature3.getStyle().getText().setOffsetX(10);
+feature3.getStyle().getText().setOffsetY(-10);
+feature3.getStyle().getText().setOverflow(true);
+feature3.getStyle().getText().setPlacement('line');
+feature3.getStyle().getText().setScale(1.2);
+feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
+feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
+feature3.getStyle().getText().setMaxAngle(Math.PI);
+
+vectorSource.addFeature(feature3);
+
+const lineString4 = lineString3.clone();
+lineString4.translate(0, 30);
+const feature4 = new Feature({geometry: lineString4});
+feature4.setStyle(new Style({
+  stroke: new Stroke({color: 'red'}),
+  text: new Text({
+    text: 'PLEASE OMIT ME IM UGLY',
+    offsetX: -10,
+    textAlign: 'start',
+    textBaseline: 'top',
+    placement: 'line',
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature4);
+
+const lineString5 = lineString4.clone();
+lineString5.translate(0, 30);
+const feature5 = new Feature({geometry: lineString5});
+feature5.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Small text',
+    offsetY: 5,
+    scale: 0.7,
+    rotation: 4,
+    textAlign: 'end',
+    placement: 'line',
+    maxAngle: Math.PI,
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature5);
+
+const lineString6 = lineString5.clone();
+lineString6.translate(0, 30);
+const feature6 = new Feature({geometry: lineString6});
+feature6.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'FILL AND STROKE',
+    placement: 'line',
+    overflow: true,
+    fill: new Fill({color: '#FFC0CB'}),
+    stroke: new Stroke({
+      color: '#00FF00'
+    })
+  })
+}));
+vectorSource.addFeature(feature6);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    rotation: -(Math.PI / 4)
+  })
+});
+map.getView().fit(vectorSource.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style-overlap/main.js

@@ -0,0 +1,104 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+const nicePath = [
+  20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
+  180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
+];
+
+const vectorSource = new VectorSource();
+const pointStyle = new Style({
+  text: new Text({
+    text: 'Point Label',
+    fill: new Fill({
+      color: 'red'
+    }),
+    stroke: new Stroke({
+      color: 'black'
+    })
+  })
+});
+const lineStyle = new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Line Label',
+    fill: new Fill({
+      color: 'red'
+    }),
+    stroke: new Stroke({
+      color: 'black'
+    }),
+    placement: 'line'
+  })
+});
+
+const pointFeature1 = new Feature({
+  geometry: new Point([160, 100])
+});
+pointFeature1.setStyle(pointStyle.clone());
+pointFeature1.getStyle().getText().setText('POINT ONE');
+vectorSource.addFeature(pointFeature1);
+
+const pointFeature2 = new Feature({
+  geometry: new Point([170, 105])
+});
+pointFeature2.setStyle(pointStyle.clone());
+pointFeature2.getStyle().getText().setText('POINT TWO');
+pointFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
+vectorSource.addFeature(pointFeature2);
+
+const pointFeature3 = new Feature({
+  geometry: new Point([150, 95])
+});
+pointFeature3.setStyle(pointStyle.clone());
+pointFeature3.getStyle().getText().setText('POINT THREE');
+pointFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
+vectorSource.addFeature(pointFeature3);
+
+const lineString1 = new LineString(nicePath, 'XY');
+const lineFeature1 = new Feature({geometry: lineString1});
+lineFeature1.setStyle(lineStyle);
+lineFeature1.getStyle().getText().setText('LINE ONE');
+vectorSource.addFeature(lineFeature1);
+
+const lineString2 = lineString1.clone();
+lineString2.translate(10, 10);
+const lineFeature2 = new Feature({geometry: lineString2});
+lineFeature2.setStyle(lineStyle.clone());
+lineFeature2.getStyle().getText().setText('LINE TWO');
+lineFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
+vectorSource.addFeature(lineFeature2);
+
+const lineString3 = lineString1.clone();
+lineString3.translate(-10, 10);
+const lineFeature3 = new Feature({geometry: lineString3});
+lineFeature3.setStyle(lineStyle.clone());
+lineFeature3.getStyle().getText().setText('LINE THREE');
+lineFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
+vectorSource.addFeature(lineFeature3);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+map.getView().fit(vectorSource.getExtent());
+
+render({tolerance: 0.02});

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

@@ -1,106 +0,0 @@
-import Map from '../../../../src/ol/Map.js';
-import View from '../../../../src/ol/View.js';
-import ImageLayer 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';
-import {createXYZ} from '../../../../src/ol/tilegrid.js';
-
-
-describe('ol.rendering.layer.Image', function() {
-
-  let map;
-
-  function createMap(renderer) {
-    const MapConstructor = Map;
-    map = new MapConstructor({
-      pixelRatio: 1,
-      target: createMapDiv(50, 50),
-      view: new View({
-        center: transform(
-          [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
-        zoom: 5
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  function waitForImages(renderer, sources, layerOptions, onImagesLoaded) {
-    const LayerConstructor = ImageLayer;
-    let imagesLoading = 0;
-    let imagesLoaded = 0;
-
-    const 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');
-      });
-
-      const options = {
-        source: source
-      };
-      assign(options, layerOptions);
-      map.addLayer(new LayerConstructor(options));
-    });
-  }
-
-  describe('single image layer', function() {
-    let source;
-
-    beforeEach(function() {
-      source = new Static({
-        url: 'rendering/ol/data/tiles/osm/5/5/12.png',
-        imageExtent: createXYZ().getTileCoordExtent(
-          [5, 5, -12 - 1]),
-        projection: getProjection('EPSG:3857')
-      });
-    });
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      waitForImages('canvas', [source], {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/image-canvas.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-  });
-
-  describe('single image layer - scaled', function() {
-    let source;
-
-    beforeEach(function() {
-      source = new Static({
-        url: 'rendering/ol/data/tiles/osm/5/5/12.png',
-        imageExtent: transformExtent(
-          [-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857')
-      });
-    });
-
-    it('renders correctly', function(done) {
-      createMap('canvas');
-      waitForImages('canvas', [source], {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/image-scaled.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-  });
-
-});

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

@@ -1,17 +1,13 @@
 import Map from '../../../../src/ol/Map.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 {assign} from '../../../../src/ol/obj.js';
 import {transform} from '../../../../src/ol/proj.js';
-import TileImage from '../../../../src/ol/source/TileImage.js';
 import XYZ from '../../../../src/ol/source/XYZ.js';
 import CircleStyle from '../../../../src/ol/style/Circle.js';
 import Fill from '../../../../src/ol/style/Fill.js';
 import Stroke from '../../../../src/ol/style/Stroke.js';
-import {createXYZ} from '../../../../src/ol/tilegrid.js';
-
 
 describe('ol.rendering.layer.Tile', function() {
 
@@ -71,140 +67,6 @@ describe('ol.rendering.layer.Tile', function() {
     });
   }
 
-  describe('with tile transition', function() {
-    it('renders correctly after the transition', function(done) {
-      createMap('canvas');
-      const source = new XYZ({
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
-      });
-      waitForTiles('canvas', [source], {}, function() {
-        setTimeout(function() {
-          expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
-            IMAGE_TOLERANCE, done);
-        }, 500);
-      });
-    });
-  });
-
-  describe('single tile layer', function() {
-    let source;
-
-    beforeEach(function() {
-      source = new XYZ({
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
-        transition: 0
-      });
-    });
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      waitForTiles('canvas', [source], {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-  });
-
-  describe('two tile layers', function() {
-    let source1, source2;
-
-    beforeEach(function() {
-      source1 = new XYZ({
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
-        transition: 0
-      });
-      source2 = new XYZ({
-        url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png',
-        transition: 0
-      });
-    });
-
-    function centerExtent(map) {
-      const c = map.getView().calculateExtent(map.getSize());
-      const qw = getSize(c)[0] / 4;
-      const qh = getSize(c)[1] / 4;
-      return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh];
-    }
-
-    it('tests canvas layer extent clipping with rotation', function(done) {
-      createMap('canvas');
-      map.getView().setRotation(Math.PI / 2);
-      waitForTiles('canvas', [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) {
-      createMap('canvas', undefined, undefined, 2);
-      waitForTiles('canvas', [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) {
-      createMap('canvas', undefined, undefined, 2);
-      map.getView().setRotation(Math.PI / 2);
-      waitForTiles('canvas', [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() {
-    let source;
-
-    beforeEach(function() {
-      source = new XYZ({
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
-        transition: 0
-      });
-    });
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      waitForTiles('canvas', [source], {opacity: 0.2}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/opacity-canvas.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-  });
-
-  describe('tile layer with non-square tiles', function() {
-
-    function createSource(tileSize) {
-      return new TileImage({
-        url: 'rendering/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png',
-        tileGrid: createXYZ({
-          tileSize: tileSize.split('x')
-        }),
-        transition: 0
-      });
-    }
-
-    it('512x256 renders correcly using the canvas renderer', function(done) {
-      const source = createSource('512x256');
-      createMap('canvas', [-10997148, 4569099]);
-      waitForTiles('canvas', [source], {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/512x256-canvas.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    it('192x256 renders correcly using the canvas renderer', function(done) {
-      const source = createSource('192x256');
-      createMap('canvas', [-11271098, 3747248], [100, 100], undefined,
-        source.getTileGrid().getResolutions());
-      waitForTiles('canvas', [source], {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/192x256-canvas.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-  });
-
   describe('tile layer with render listener', function() {
     let source, onAddLayer;
 

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

@@ -1,762 +0,0 @@
-import Feature from '../../../../src/ol/Feature.js';
-import Map from '../../../../src/ol/Map.js';
-import View from '../../../../src/ol/View.js';
-import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
-import Circle from '../../../../src/ol/geom/Circle.js';
-import LineString from '../../../../src/ol/geom/LineString.js';
-import Point from '../../../../src/ol/geom/Point.js';
-import Polygon from '../../../../src/ol/geom/Polygon.js';
-import VectorLayer 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';
-import Stroke from '../../../../src/ol/style/Stroke.js';
-import Style from '../../../../src/ol/style/Style.js';
-import Text from '../../../../src/ol/style/Text.js';
-
-
-describe('ol.rendering.layer.Vector', function() {
-
-  const center = [1825927.7316762917, 6143091.089223046];
-
-  let map;
-  function createMap() {
-    map = new Map({
-      pixelRatio: 1,
-      target: createMapDiv(80, 80),
-      view: new View({
-        center: center,
-        zoom: 13
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  let source;
-
-  function addCircle(r) {
-    source.addFeature(new Feature(new Circle(center, r)));
-  }
-
-  function addPolygon(r) {
-    source.addFeature(new Feature(new 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 Feature(new 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 VectorSource();
-    });
-
-    it('renders opacity correctly with the canvas renderer', function(done) {
-      createMap();
-      const smallLine = new Feature(new LineString([
-        [center[0], center[1] - 1],
-        [center[0], center[1] + 1]
-      ]));
-      smallLine.setStyle(new Style({
-        zIndex: -99,
-        stroke: new Stroke({width: 75, color: 'red'})
-      }));
-      source.addFeature(smallLine);
-      addPolygon(100);
-      addCircle(200);
-      addPolygon(250);
-      addCircle(500);
-      addPolygon(600);
-      addPolygon(720);
-      map.addLayer(new VectorLayer({
-        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) {
-      createMap();
-      const smallLine = new Feature(new LineString([
-        [center[0], center[1] - 1],
-        [center[0], center[1] + 1]
-      ]));
-      smallLine.setStyle([
-        new Style({
-          stroke: new Stroke({width: 75, color: 'red'})
-        }),
-        new Style({
-          stroke: new Stroke({width: 45, color: 'white'})
-        })
-      ]);
-      source.addFeature(smallLine);
-      const smallLine2 = new Feature(new LineString([
-        [center[0], center[1] - 1000],
-        [center[0], center[1] + 1000]
-      ]));
-      smallLine2.setStyle([
-        new Style({
-          stroke: new Stroke({width: 35, color: 'blue'})
-        }),
-        new Style({
-          stroke: new Stroke({width: 15, color: 'green'})
-        })
-      ]);
-      source.addFeature(smallLine2);
-
-      map.addLayer(new VectorLayer({
-        source: source,
-        opacity: 0.5
-      }));
-      map.once('postrender', function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-transparent.png',
-          7, done);
-      });
-    });
-
-    it('renders rotation correctly with the canvas renderer', function(done) {
-      createMap();
-      map.getView().setRotation(Math.PI + Math.PI / 4);
-      addPolygon(300);
-      addCircle(500);
-      map.addLayer(new VectorLayer({
-        source: source,
-        style: new Style({
-          stroke: new 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) {
-      createMap();
-      source = new VectorSource({
-        overlaps: false
-      });
-      addPolygon(100);
-      addCircle(200);
-      addPolygon(250);
-      addCircle(500);
-      addPolygon(600);
-      addPolygon(720);
-      map.addLayer(new VectorLayer({
-        source: source,
-        style: new Style({
-          stroke: new 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) {
-      createMap();
-      source = new VectorSource({
-        overlaps: false
-      });
-      addLineString(100);
-      addLineString(250);
-      addLineString(600);
-      addLineString(720);
-      map.addLayer(new VectorLayer({
-        source: source,
-        style: new Style({
-          stroke: new 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) {
-      createMap();
-      let color;
-      function createSource(overlaps) {
-        color = '#3399CC';
-        source = new VectorSource({
-          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;
-      }
-      const layer = new VectorLayer({
-        source: createSource(true),
-        style: function(feature) {
-          alternateColor();
-          return new Style({
-            stroke: new Stroke({
-              color: alternateColor(),
-              width: 1.25
-            }),
-            fill: new Fill({
-              color: alternateColor()
-            })
-          });
-        }
-      });
-      map.addLayer(layer);
-      map.once('postrender', function() {
-        const canvas = map.getRenderer().canvas_;
-        // take a snapshot of this `overlaps: true` image
-        const referenceImage = canvas.toDataURL('image/png');
-        // now render the same with `overlaps: false`
-        layer.setSource(createSource(false));
-        // result should be the same as with `overlaps: true`
-        map.once('postrender', function(e) {
-          expectResemble(map, referenceImage, 1e-9, done);
-        });
-      });
-    });
-
-    it('interrupts stroke batches correctly with the canvas renderer', function(done) {
-      createMap();
-      let color;
-      function createSource(overlaps) {
-        color = '#3399CC';
-        source = new VectorSource({
-          overlaps: overlaps
-        });
-        addLineString(720);
-        addLineString(600);
-        addLineString(250);
-        addLineString(100);
-        return source;
-      }
-      function alternateColor() {
-        if (color == '#3399CC') {
-          color = '#CC9933';
-        } else {
-          color = '#3399CC';
-        }
-        return color;
-      }
-      const layer = new VectorLayer({
-        source: createSource(true),
-        style: function(feature) {
-          alternateColor();
-          return new Style({
-            stroke: new Stroke({
-              color: alternateColor(),
-              width: 1.25
-            }),
-            fill: new Fill({
-              color: alternateColor()
-            })
-          });
-        }
-      });
-      map.addLayer(layer);
-      map.once('postrender', function() {
-        const canvas = map.getRenderer().canvas_;
-        // take a snapshot of this `overlaps: true` image
-        const referenceImage = canvas.toDataURL('image/png');
-        // 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, 1e-9, done);
-        });
-      });
-    });
-  });
-
-  describe('polygon rendering', function() {
-
-    let map2;
-    beforeEach(function() {
-      map2 = new Map({
-        pixelRatio: 1,
-        target: createMapDiv(128, 128),
-        view: new View({
-          center: [0, 0],
-          zoom: 0
-        })
-      });
-    });
-
-    afterEach(function() {
-      disposeMap(map2);
-      map2 = null;
-    });
-
-    it('renders a feature that spans the world', function(done) {
-      const 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: {}
-      };
-
-      const format = new GeoJSON({featureProjection: 'EPSG:3857'});
-      const feature = format.readFeature(json);
-
-      const layer = new VectorLayer({
-        source: new VectorSource({
-          features: [feature]
-        }),
-        style: new Style({
-          fill: new Fill({
-            color: 'blue'
-          })
-        })
-      });
-
-      map2.addLayer(layer);
-
-      map2.once('postrender', function() {
-        expectResemble(map2, 'rendering/ol/layer/expected/inverted-star.png', 1, done);
-      });
-
-    });
-
-  });
-
-  describe('Polygon simplification', function() {
-
-    let layer, map3;
-
-    beforeEach(function() {
-      const src = new VectorSource({
-        features: [
-          new Feature(new Polygon([[
-            [-22, 58],
-            [-22, 78],
-            [-9, 78],
-            [-9, 58],
-            [-22, 58]
-          ]])),
-          new Feature(new Polygon([[
-            [-9, 58],
-            [-9, 78],
-            [4, 78],
-            [4, 58],
-            [-9, 58]
-          ]]))
-        ]
-      });
-      layer = new VectorLayer({
-        renderBuffer: 0,
-        source: src
-      });
-      const view = new View({
-        center: [-9.5, 78],
-        zoom: 2,
-        projection: 'EPSG:4326'
-      });
-
-      map3 = new Map({
-        pixelRatio: 1,
-        layers: [layer],
-        target: createMapDiv(100, 100),
-        view: view
-      });
-    });
-
-    afterEach(function() {
-      disposeMap(map3);
-      map3 = null;
-    });
-
-    it('renders partially out-of-view polygons with a fill and stroke', function(done) {
-      layer.setStyle(new Style({
-        stroke: new Stroke({
-          color: [0, 0, 0, 1],
-          width: 2
-        }),
-        fill: new Fill({
-          color: [255, 0, 0, 1]
-        })
-      }));
-      map3.once('postrender', function() {
-        expectResemble(map3, '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 Style({
-        fill: new Fill({
-          color: [0, 0, 0, 1]
-        })
-      }));
-      map3.once('postrender', function() {
-        expectResemble(map3, '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 Style({
-        stroke: new Stroke({
-          color: [0, 0, 0, 1],
-          width: 2
-        })
-      }));
-      map3.once('postrender', function() {
-        expectResemble(map3, 'rendering/ol/layer/expected/vector-canvas-simplified-stroke.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-  });
-
-  describe('decluttering', function() {
-
-    beforeEach(function() {
-      source = new VectorSource();
-    });
-
-    it('declutters text', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      const centerFeature = new Feature({
-        geometry: new Point(center),
-        text: 'center'
-      });
-      source.addFeature(centerFeature);
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] - 540, center[1]]),
-        text: 'west'
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] + 540, center[1]]),
-        text: 'east'
-      }));
-
-      layer.setStyle(function(feature) {
-        return new Style({
-          text: new Text({
-            text: feature.get('text'),
-            font: '12px sans-serif'
-          })
-        });
-      });
-
-      map.once('postrender', function() {
-        const hitDetected = map.getFeaturesAtPixel([42, 42]);
-        expect(hitDetected).to.have.length(1);
-        expect(hitDetected[0]).to.equal(centerFeature);
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter.png',
-          2.2, done);
-      });
-    });
-
-    it('declutters text and respects z-index', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      source.addFeature(new Feature({
-        geometry: new Point(center),
-        text: 'center',
-        zIndex: 2
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] - 540, center[1]]),
-        text: 'west',
-        zIndex: 3
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] + 540, center[1]]),
-        text: 'east',
-        zIndex: 1
-      }));
-
-      layer.setStyle(function(feature) {
-        return new Style({
-          zIndex: feature.get('zIndex'),
-          text: new Text({
-            text: feature.get('text'),
-            font: '12px sans-serif'
-          })
-        });
-      });
-
-      map.once('postrender', function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-zindex.png',
-          3.9, done);
-      });
-    });
-
-    it('declutters images', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      const centerFeature = new Feature({
-        geometry: new Point(center)
-      });
-      source.addFeature(centerFeature);
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] - 540, center[1]])
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] + 540, center[1]])
-      }));
-
-      layer.setStyle(function(feature) {
-        return new Style({
-          image: new CircleStyle({
-            radius: 15,
-            stroke: new Stroke({
-              color: 'blue'
-            })
-          })
-        });
-      });
-
-      map.once('postrender', function() {
-        const hitDetected = map.getFeaturesAtPixel([40, 40]);
-        expect(hitDetected).to.have.length(1);
-        expect(hitDetected[0]).to.equal(centerFeature);
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    it('declutters images and respects z-index', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      source.addFeature(new Feature({
-        geometry: new Point(center),
-        zIndex: 2
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] - 540, center[1]]),
-        zIndex: 3
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] + 540, center[1]]),
-        zIndex: 1
-      }));
-
-      layer.setStyle(function(feature) {
-        return new Style({
-          zIndex: feature.get('zIndex'),
-          image: new CircleStyle({
-            radius: 15,
-            stroke: new Stroke({
-              color: 'blue'
-            })
-          })
-        });
-      });
-
-      map.once('postrender', function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image-zindex.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    it('declutters image & text groups', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      source.addFeature(new Feature({
-        geometry: new Point(center),
-        text: 'center'
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] - 540, center[1]]),
-        text: 'west'
-      }));
-      source.addFeature(new Feature({
-        geometry: new Point([center[0] + 540, center[1]]),
-        text: 'east'
-      }));
-
-      layer.setStyle(function(feature) {
-        return new Style({
-          image: new CircleStyle({
-            radius: 5,
-            stroke: new Stroke({
-              color: 'blue'
-            })
-          }),
-          text: new Text({
-            text: feature.get('text'),
-            font: '12px sans-serif',
-            textBaseline: 'bottom',
-            offsetY: -5
-          })
-        });
-      });
-
-      map.once('postrender', function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-group.png',
-          2.2, done);
-      });
-    });
-
-    it('declutters text along lines and images', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      const point = new Feature(new Point(center));
-      point.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 8,
-          stroke: new Stroke({
-            color: 'blue'
-          })
-        })
-      }));
-      const line = new Feature(new LineString([
-        [center[0] - 650, center[1] - 200],
-        [center[0] + 650, center[1] - 200]
-      ]));
-      line.setStyle(new Style({
-        stroke: new Stroke({
-          color: '#CCC',
-          width: 12
-        }),
-        text: new Text({
-          placement: 'line',
-          text: 'east-west',
-          font: '12px sans-serif'
-        })
-      }));
-
-      source.addFeature(point);
-      source.addFeature(line);
-
-      map.once('postrender', function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    it('declutters text along lines and images with z-index', function(done) {
-      createMap();
-      const layer = new VectorLayer({
-        declutter: true,
-        source: source
-      });
-      map.addLayer(layer);
-
-      const point = new Feature(new Point(center));
-      point.setStyle(new Style({
-        zIndex: 2,
-        image: new CircleStyle({
-          radius: 8,
-          stroke: new Stroke({
-            color: 'blue'
-          })
-        })
-      }));
-      const line = new Feature(new LineString([
-        [center[0] - 650, center[1] - 200],
-        [center[0] + 650, center[1] - 200]
-      ]));
-      line.setStyle(new Style({
-        zIndex: 1,
-        stroke: new Stroke({
-          color: '#CCC',
-          width: 12
-        }),
-        text: new Text({
-          placement: 'line',
-          text: 'east-west',
-          font: '12px sans-serif'
-        })
-      }));
-
-      source.addFeature(point);
-      source.addFeature(line);
-
-      map.once('postrender', function() {
-        const hitDetected = map.getFeaturesAtPixel([35, 46]);
-        expect(hitDetected).to.have.length(1);
-        expect(hitDetected[0]).to.equal(line);
-        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line-zindex.png',
-          4.1, done);
-      });
-    });
-  });
-
-});

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

@@ -53,91 +53,6 @@ describe('ol.rendering.layer.VectorImage', function() {
     ])));
   }
 
-  it('renders opacity correctly', function(done) {
-    createMap();
-    const smallLine = new Feature(new LineString([
-      [center[0], center[1] - 1],
-      [center[0], center[1] + 1]
-    ]));
-    smallLine.setStyle(new Style({
-      zIndex: -99,
-      stroke: new Stroke({width: 75, color: 'red'})
-    }));
-    source.addFeature(smallLine);
-    addPolygon(100);
-    addCircle(200);
-    addPolygon(250);
-    addCircle(500);
-    addPolygon(600);
-    addPolygon(720);
-    map.addLayer(new VectorImageLayer({
-      source: source
-    }));
-    map.once('postrender', function() {
-      expectResemble(map, 'rendering/ol/layer/expected/vector-canvas.png',
-        17, done);
-    });
-  });
-
-  it('renders transparent layers correctly', function(done) {
-    createMap();
-    const smallLine = new Feature(new LineString([
-      [center[0], center[1] - 1],
-      [center[0], center[1] + 1]
-    ]));
-    smallLine.setStyle([
-      new Style({
-        stroke: new Stroke({width: 75, color: 'red'})
-      }),
-      new Style({
-        stroke: new Stroke({width: 45, color: 'white'})
-      })
-    ]);
-    source.addFeature(smallLine);
-    const smallLine2 = new Feature(new LineString([
-      [center[0], center[1] - 1000],
-      [center[0], center[1] + 1000]
-    ]));
-    smallLine2.setStyle([
-      new Style({
-        stroke: new Stroke({width: 35, color: 'blue'})
-      }),
-      new Style({
-        stroke: new Stroke({width: 15, color: 'green'})
-      })
-    ]);
-    source.addFeature(smallLine2);
-
-    map.addLayer(new VectorImageLayer({
-      source: source,
-      opacity: 0.5
-    }));
-    map.once('postrender', function() {
-      expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-transparent.png',
-        7, done);
-    });
-  });
-
-  it('renders rotation correctly', function(done) {
-    createMap();
-    map.getView().setRotation(Math.PI + Math.PI / 4);
-    addPolygon(300);
-    addCircle(500);
-    map.addLayer(new VectorImageLayer({
-      source: source,
-      style: new Style({
-        stroke: new Stroke({
-          width: 2,
-          color: 'black'
-        })
-      })
-    }));
-    map.once('postrender', function() {
-      expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-rotated.png',
-        2.9, done);
-    });
-  });
-
   it('unskips features correctly', function(done) {
     createMap();
     addCircle(500);

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

@@ -1,122 +0,0 @@
-import Map from '../../../../src/ol/Map.js';
-import View from '../../../../src/ol/View.js';
-import MVT from '../../../../src/ol/format/MVT.js';
-import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
-import {assign} from '../../../../src/ol/obj.js';
-import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
-import CircleStyle from '../../../../src/ol/style/Circle.js';
-import Fill from '../../../../src/ol/style/Fill.js';
-import Style from '../../../../src/ol/style/Style.js';
-import Text from '../../../../src/ol/style/Text.js';
-import {createXYZ} from '../../../../src/ol/tilegrid.js';
-
-
-describe('ol.rendering.layer.VectorTile', function() {
-
-  let map;
-
-  function createMap(opt_pixelRatio, opt_size) {
-    const size = opt_size || 50;
-    map = new Map({
-      pixelRatio: opt_pixelRatio || 1,
-      target: createMapDiv(size, size),
-      view: new View({
-        center: [1825927.7316762917, 6143091.089223046],
-        zoom: 14
-      })
-    });
-  }
-
-  afterEach(function() {
-    disposeMap(map);
-    map = null;
-  });
-
-  function waitForTiles(source, layerOptions, onTileLoaded) {
-    let tilesLoading = 0;
-    let tileLoaded = 0;
-
-    const 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');
-    });
-
-    const options = {
-      source: source
-    };
-    assign(options, layerOptions);
-    map.addLayer(new VectorTileLayer(options));
-  }
-
-  describe('vector tile layer', function() {
-    let source;
-
-    beforeEach(function() {
-      source = new VectorTileSource({
-        format: new MVT(),
-        tileGrid: createXYZ(),
-        url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf',
-        transition: 0
-      });
-    });
-
-    it('renders correctly with the canvas renderer (HiDPI)', function(done) {
-      createMap(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) {
-      createMap(2);
-      map.getView().setRotation(Math.PI / 4);
-      waitForTiles(source, {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-rotated-hidpi.png',
-          14.8, done);
-      });
-    });
-
-    it('declutters text and images', function(done) {
-      createMap(1, 100);
-      map.getView().setZoom(13.8);
-      const style = function(feature, resolution) {
-        const geom = feature.getGeometry();
-        if (geom.getType() == 'Point') {
-          return new Style({
-            image: new CircleStyle({
-              radius: 7,
-              fill: new Fill({
-                color: 'red'
-              })
-            }),
-            text: new Text({
-              text: feature.get('name_en'),
-              font: '12px sans-serif',
-              textBaseline: 'bottom',
-              offsetY: -7
-            })
-          });
-        }
-      };
-      waitForTiles(source, {declutter: true, style: style}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-declutter.png',
-          8.5, done);
-      });
-    });
-
-  });
-
-});

test/rendering/ol/map.test.js

@@ -1,74 +0,0 @@
-import Feature from '../../../src/ol/Feature.js';
-import Point from '../../../src/ol/geom/Point.js';
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import VectorLayer from '../../../src/ol/layer/Vector.js';
-import VectorSource from '../../../src/ol/source/Vector.js';
-
-
-describe('ol.rendering.Map', function() {
-
-  let map;
-  function createMap(renderer) {
-    const MapConstructor = Map;
-    const LayerConstructor = VectorLayer;
-
-    const vectorLayer = new LayerConstructor({
-      source: new VectorSource({
-        features: [new Feature({
-          geometry: new Point([0, 0])
-        })]
-      })
-    });
-
-    map = new MapConstructor({
-      pixelRatio: 1,
-      target: createMapDiv(50, 50),
-      layers: [vectorLayer],
-      view: new View({
-        projection: 'EPSG:4326',
-        center: [0, 0],
-        resolution: 1
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  describe('#updateSize()', function() {
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      map.once('postrender', function() {
-        const initialSize = map.getSize();
-        map.updateSize();
-        expect(map.getSize()).to.eql(initialSize);
-        done();
-      });
-    });
-  });
-
-  describe('#render()', function() {
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      expectResemble(
-        map, 'rendering/ol/expected/render-canvas.png', IMAGE_TOLERANCE, done);
-    });
-  });
-
-  describe('#pan()', function() {
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      map.getView().setCenter([10, 10]);
-      expectResemble(
-        map, 'rendering/ol/expected/pan-canvas.png', IMAGE_TOLERANCE, done);
-    });
-  });
-});

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

@@ -1,83 +0,0 @@
-import Map from '../../../../src/ol/Map.js';
-import View from '../../../../src/ol/View.js';
-import ImageLayer from '../../../../src/ol/layer/Image.js';
-import RasterSource from '../../../../src/ol/source/Raster.js';
-import XYZ from '../../../../src/ol/source/XYZ.js';
-
-where('Uint8ClampedArray').describe('ol.rendering.source.Raster', function() {
-
-  function afterRender(source, raster, callback) {
-    let loading = 0;
-
-    source.on('tileloadstart', function(event) {
-      loading++;
-    });
-    source.on('tileloadend', function(event) {
-      loading--;
-      if (loading == 0) {
-        raster.once('afteroperations', function() {
-          callback();
-        });
-      }
-    });
-    source.on('tileloaderror', function(event) {
-      callback(new Error('Tile failed to load'));
-    });
-
-  }
-
-  let map;
-  function createMap(pixelRatio) {
-    map = new Map({
-      target: createMapDiv(200, 200),
-      pixelRatio: pixelRatio,
-      view: new View({
-        center: [0, 0],
-        zoom: 0
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  describe('raster source rendering', function() {
-    it('renders the result of an operation', function(done) {
-      createMap(1);
-
-      const source = new XYZ({
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
-        transition: 0
-      });
-
-      const raster = new RasterSource({
-        sources: [source],
-        operation: function(pixels) {
-          const pixel = pixels[0];
-          // swap blue and red
-          const red = pixel[0];
-          pixel[0] = pixel[2];
-          pixel[2] = red;
-          return pixel;
-        }
-      });
-
-      afterRender(source, raster, function(err) {
-        if (err) {
-          done(err);
-          return;
-        }
-        expectResemble(map, 'rendering/ol/source/expected/raster-1.png', IMAGE_TOLERANCE, done);
-      });
-
-      const layer = new ImageLayer({source: raster});
-
-      map.addLayer(layer);
-    });
-  });
-
-});

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

@@ -1,112 +0,0 @@
-import Map from '../../../../src/ol/Map.js';
-import View from '../../../../src/ol/View.js';
-import TileLayer from '../../../../src/ol/layer/Tile.js';
-import TileWMS from '../../../../src/ol/source/TileWMS.js';
-
-describe('ol.rendering.source.TileWMS', function() {
-
-  function tilesLoaded(source, callback) {
-    let 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');
-    });
-
-  }
-
-  let map;
-  function createMap(renderer, pixelRatio) {
-    const MapConstructor = Map;
-
-    map = new MapConstructor({
-      target: createMapDiv(200, 200),
-      pixelRatio: pixelRatio,
-      view: new View({
-        center: [0, 0],
-        zoom: 5
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  function createSource(gutter) {
-    return new TileWMS({
-      params: {
-        'LAYERS': 'layer'
-      },
-      gutter: gutter,
-      url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png',
-      transition: 0
-    });
-  }
-
-
-  describe('0px gutter, 1 pixel ratio', function() {
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas', 1);
-      const source = createSource(0);
-      tilesLoaded(source, function() {
-        expectResemble(map, 'rendering/ol/source/expected/0_1.canvas.png', IMAGE_TOLERANCE, done);
-      });
-      map.addLayer(new TileLayer({
-        source: source
-      }));
-    });
-  });
-
-  describe('0px gutter, 2 pixel ratio', function() {
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas', 2);
-      const source = createSource(0);
-      tilesLoaded(source, function() {
-        expectResemble(map, 'rendering/ol/source/expected/0_2.canvas.png', IMAGE_TOLERANCE, done);
-      });
-      map.addLayer(new TileLayer({
-        source: source
-      }));
-    });
-  });
-
-
-  describe('20px gutter, 1 pixel ratio', function() {
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas', 1);
-      const source = createSource(20);
-      tilesLoaded(source, function() {
-        expectResemble(map, 'rendering/ol/source/expected/20_1.canvas.png', IMAGE_TOLERANCE, done);
-      });
-      map.addLayer(new TileLayer({
-        source: source
-      }));
-    });
-  });
-
-  describe('20px gutter, 2 pixel ratio', function() {
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas', 2);
-      const source = createSource(20);
-      tilesLoaded(source, function() {
-        expectResemble(map, 'rendering/ol/source/expected/20_2.canvas.png', IMAGE_TOLERANCE, done);
-      });
-      map.addLayer(new TileLayer({
-        source: source
-      }));
-    });
-  });
-
-});

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

@@ -1,203 +0,0 @@
-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 View from '../../../../src/ol/View.js';
-import VectorLayer 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';
-import Style from '../../../../src/ol/style/Style.js';
-import Stroke from '../../../../src/ol/style/Stroke.js';
-
-
-describe('ol.rendering.style.Circle', function() {
-
-  let map, vectorSource;
-
-  function createMap(renderer) {
-    const MapConstructor = Map;
-    const LayerConstructor = VectorLayer;
-
-    vectorSource = new VectorSource();
-    const vectorLayer = new LayerConstructor({
-      source: vectorSource
-    });
-
-    map = new MapConstructor({
-      pixelRatio: 1,
-      target: createMapDiv(50, 50),
-      layers: [vectorLayer],
-      view: new View({
-        projection: 'EPSG:4326',
-        center: [0, 0],
-        resolution: 1
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-      map = null;
-    }
-  });
-
-  describe('#render', function() {
-
-    function createFeatures(multi) {
-      let feature;
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[-20, 18]]) : new Point([-20, 18])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 2,
-          fill: new Fill({
-            color: '#91E339'
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[-10, 18]]) : new Point([-10, 18])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 4,
-          fill: new Fill({
-            color: '#5447E6'
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[4, 18]]) : new Point([4, 18])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 6,
-          fill: new Fill({
-            color: '#92A8A6'
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[-20, 3]]) : new Point([-20, 3])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 2,
-          fill: new Fill({
-            color: '#91E339'
-          }),
-          stroke: new Stroke({
-            color: '#000000',
-            width: 1
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[-10, 3]]) : new Point([-10, 3])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 4,
-          fill: new Fill({
-            color: '#5447E6'
-          }),
-          stroke: new Stroke({
-            color: '#000000',
-            width: 2
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[4, 3]]) : new Point([4, 3])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 6,
-          fill: new Fill({
-            color: '#92A8A6'
-          }),
-          stroke: new Stroke({
-            color: '#000000',
-            width: 3
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[-20, -15]]) : new Point([-20, -15])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 2,
-          stroke: new Stroke({
-            color: '#256308',
-            width: 1
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[-10, -15]]) : new Point([-10, -15])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 4,
-          fill: new Fill({
-            color: 'rgba(0, 0, 255, 0.3)'
-          }),
-          stroke: new Stroke({
-            color: '#256308',
-            width: 2
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new Feature({
-        geometry: multi ? new MultiPoint([[4, -15]]) : new Point([4, -15])
-      });
-      feature.setStyle(new Style({
-        image: new CircleStyle({
-          radius: 6,
-          fill: new Fill({
-            color: 'rgba(235, 45, 70, 0.6)'
-          }),
-          stroke: new Stroke({
-            color: '#256308',
-            width: 3
-          })
-        })
-      }));
-      vectorSource.addFeature(feature);
-    }
-
-    it('renders point geometries', function(done) {
-      createMap('canvas');
-      createFeatures();
-      expectResemble(map, 'rendering/ol/style/expected/circle-canvas.png',
-        8.0, done);
-    });
-
-    it('renders multipoint geometries', function(done) {
-      createMap('canvas');
-      createFeatures(true);
-      expectResemble(map, 'rendering/ol/style/expected/circle-canvas.png',
-        8.0, done);
-    });
-  });
-});