Organize tests

test/rendering/cases/circle-style/main.js

@@ -0,0 +1,72 @@
+import Circle from '../../../../src/ol/style/Circle.js';
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+
+const ellipse = new Feature(new Point([-50, -50]));
+
+ellipse.setStyle(
+  new Style({
+    image: new Circle({
+      radius: 30,
+      scale: [1, 0.5],
+      stroke: new Stroke({
+        color: '#00f',
+        width: 3,
+      }),
+    }),
+  })
+);
+
+const vectorSource = new VectorSource();
+
+vectorSource.addFeatures([
+  new Feature({
+    geometry: new Point([-50, 50]),
+    radius: 10,
+  }),
+  new Feature({
+    geometry: new Point([50, -50]),
+    radius: 20,
+  }),
+  new Feature({
+    geometry: new Point([50, 50]),
+    radius: 30,
+  }),
+  ellipse,
+]);
+
+const style = new Style({
+  image: new Circle({
+    radius: 1,
+    stroke: new Stroke({
+      color: '#00f',
+      width: 3,
+    }),
+  }),
+});
+
+new Map({
+  pixelRatio: 2,
+  layers: [
+    new VectorLayer({
+      source: vectorSource,
+      style: function (feature) {
+        style.getImage().setRadius(feature.get('radius'));
+        return style;
+      },
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+  }),
+});
+
+render();

test/rendering/cases/format-mvt-geojson/main.js

@@ -0,0 +1,47 @@
+import {Feature, Map, View} from '../../../../src/ol/index.js';
+import {GeoJSON, MVT} from '../../../../src/ol/format.js';
+import {VectorTile as VectorTileLayer} from '../../../../src/ol/layer.js';
+import {VectorTile as VectorTileSource} from '../../../../src/ol/source.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+const center = fromLonLat([0.26, 24.08]);
+
+const map = new Map({
+  layers: [
+    new VectorTileLayer({
+      source: new VectorTileSource({
+        format: new MVT(),
+        url: '/data/{z}-{x}-{y}.mvt',
+        minZoom: 7,
+        maxZoom: 7,
+      }),
+    }),
+    new VectorTileLayer({
+      source: new VectorTileSource({
+        format: new MVT({
+          featureClass: Feature,
+        }),
+        url: '/data/{z}-{x}-{y}.mvt',
+        minZoom: 7,
+        maxZoom: 7,
+      }),
+    }),
+    new VectorTileLayer({
+      source: new VectorTileSource({
+        format: new GeoJSON(),
+        url: '/data/{z}-{x}-{y}.geojson',
+        minZoom: 7,
+        maxZoom: 7,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 10,
+  }),
+});
+
+map.getTargetElement().style.background = 'gray';
+
+render();

test/rendering/cases/geometry-geographic/main.js

@@ -0,0 +1,44 @@
+import {Circle, Fill, Style} from '../../../../src/ol/style.js';
+import {Feature, Map, View} from '../../../../src/ol/index.js';
+import {Point} from '../../../../src/ol/geom.js';
+import {
+  Tile as TileLayer,
+  Vector as VectorLayer,
+} from '../../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../../src/ol/source.js';
+import {useGeographic} from '../../../../src/ol/proj.js';
+
+useGeographic();
+
+const center = [8.6, 50.1];
+
+const point = new Point(center);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0,
+      }),
+    }),
+    new VectorLayer({
+      source: new VectorSource({
+        features: [new Feature(point)],
+      }),
+      style: new Style({
+        image: new Circle({
+          radius: 5,
+          fill: new Fill({color: 'red'}),
+        }),
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+
+render();

test/rendering/cases/heatmap-layer/main.js

@@ -0,0 +1,44 @@
+import KML from '../../../../src/ol/format/KML.js';
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {Heatmap as HeatmapLayer} from '../../../../src/ol/layer.js';
+
+const vector = new HeatmapLayer({
+  source: new VectorSource({
+    url: '/data/2012_Earthquakes_Mag5.kml',
+    format: new KML({
+      extractStyles: false,
+    }),
+  }),
+  blur: 3,
+  radius: 3,
+});
+
+vector.getSource().on('addfeature', function (event) {
+  const name = event.feature.get('name');
+  const magnitude = parseFloat(name.substr(2));
+  event.feature.set('weight', magnitude - 5);
+});
+
+const raster = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0,
+  }),
+});
+
+new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+
+render({
+  message: 'Heatmap layer renders properly using webgl',
+});

test/rendering/cases/icon-opacity/main.js

@@ -0,0 +1,46 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import View from '../../../../src/ol/View.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
+import {
+  Tile as TileLayer,
+  Vector as VectorLayer,
+} from '../../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../../src/ol/source.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+      }),
+    }),
+    new VectorLayer({
+      style: function () {
+        return new Style({
+          image: new Icon({
+            opacity: 0.5,
+            src: '/data/icon.png',
+            anchor: [0.5, 46],
+            anchorXUnits: 'fraction',
+            anchorYUnits: 'pixels',
+          }),
+        });
+      },
+      source: new VectorSource({
+        features: [new Feature(new Point(center))],
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+
+render();

test/rendering/cases/icon-scale/main.js

@@ -0,0 +1,125 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Icon from '../../../../src/ol/style/Icon.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+
+const features = [
+  new Feature({
+    geometry: new Point([-1, 12]),
+    scale: [-8, -8],
+    anchor: [0.5, 0.5],
+    rotated: 0,
+  }),
+];
+for (let i = 0; i < 2; ++i) {
+  const x = i * 5;
+  features.push(
+    new Feature({
+      geometry: new Point([x + 2, 2]),
+      scale: [1.5, 1],
+      anchor: [1, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 2]),
+      scale: [1.5, 1],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 2]),
+      scale: [1.5, 1],
+      anchor: [0, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 2, 4]),
+      scale: [-1, 1],
+      anchor: [0, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 4]),
+      scale: [-1, 1],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 4]),
+      scale: [-1, 1],
+      anchor: [1, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 2, 6]),
+      scale: [1, -1],
+      anchor: [0.5, 1],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 6]),
+      scale: [1, -1],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 6]),
+      scale: [1, -1],
+      anchor: [0.5, 0],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 2, 8]),
+      scale: [1, 1.5],
+      anchor: [0.5, 0],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 8]),
+      scale: [1, 1.5],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 8]),
+      scale: [1, 1.5],
+      anchor: [0.5, 1],
+      rotated: i,
+    })
+  );
+}
+
+const vectorSource = new VectorSource({
+  features: features,
+});
+
+const style = new Style({
+  image: new Icon({
+    src: '/data/fish.png',
+  }),
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+  style: function (feature) {
+    style.getImage().setScale(feature.get('scale'));
+    style.getImage().setAnchor(feature.get('anchor'));
+    style.getImage().setRotation((feature.get('rotated') * Math.PI) / 4);
+    return style;
+  },
+  renderBuffer: 25,
+});
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [vectorLayer],
+  target: 'map',
+  view: new View(),
+});
+map.getView().fit([0, 0, 11, 11]);
+
+render();

test/rendering/cases/icon-symbol-svg/main.js

@@ -0,0 +1,81 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import View from '../../../../src/ol/View.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
+import {
+  Tile as TileLayer,
+  Vector as VectorLayer,
+} from '../../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../../src/ol/source.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+const center = fromLonLat([8, 50]);
+
+const vectorSource = new VectorSource();
+let feature;
+
+// scales svg correctly
+feature = new Feature({
+  geometry: new Point(fromLonLat([3, 45])),
+});
+feature.setStyle(
+  new Style({
+    image: new Icon({
+      src: '/data/me0.svg',
+      scale: 2,
+    }),
+  })
+);
+vectorSource.addFeature(feature);
+
+// uses offset correctly
+feature = new Feature({
+  geometry: new Point(fromLonLat([3, 55])),
+});
+feature.setStyle(
+  new Style({
+    image: new Icon({
+      src: '/data/me0.svg',
+      offset: [16, 0],
+      scale: 2,
+    }),
+  })
+);
+vectorSource.addFeature(feature);
+
+// uses offset correctly if it is larger than size
+feature = new Feature({
+  geometry: new Point(fromLonLat([8, 55])),
+});
+feature.setStyle(
+  new Style({
+    image: new Icon({
+      src: '/data/me0.svg',
+      offsetOrigin: 'bottom-left',
+      offset: [16, 0],
+      size: [64, 40],
+    }),
+  })
+);
+vectorSource.addFeature(feature);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+      }),
+    }),
+    new VectorLayer({
+      source: vectorSource,
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+
+render();

test/rendering/cases/icon-symbol/main.js

@@ -0,0 +1,45 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import View from '../../../../src/ol/View.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
+import {
+  Tile as TileLayer,
+  Vector as VectorLayer,
+} from '../../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../../src/ol/source.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+      }),
+    }),
+    new VectorLayer({
+      style: function () {
+        return new Style({
+          image: new Icon({
+            src: '/data/icon.png',
+            anchor: [0.5, 46],
+            anchorXUnits: 'fraction',
+            anchorYUnits: 'pixels',
+          }),
+        });
+      },
+      source: new VectorSource({
+        features: [new Feature(new Point(center))],
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+
+render();

test/rendering/cases/image-no-stretch-disable-smoothing/main.js

@@ -0,0 +1,29 @@
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import Static from '../../../../src/ol/source/ImageStatic.js';
+import View from '../../../../src/ol/View.js';
+
+const source = new Static({
+  url: '/data/tiles/osm/5/5/12.png',
+  imageExtent: [-123, 37, -122, 38],
+  imageSmoothing: false,
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new ImageLayer({
+      source: source,
+    }),
+  ],
+  view: new View({
+    center: [-122.39, 37.81],
+    zoom: 12,
+    projection: 'EPSG:4326',
+  }),
+});
+
+render({
+  tolerance: 0.001,
+});

test/rendering/cases/image-stretched-disable-smoothing/main.js

@@ -0,0 +1,29 @@
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import Static from '../../../../src/ol/source/ImageStatic.js';
+import View from '../../../../src/ol/View.js';
+import {fromLonLat, transformExtent} from '../../../../src/ol/proj.js';
+
+const source = new Static({
+  url: '/data/tiles/osm/5/5/12.png',
+  imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+  imageSmoothing: false,
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new ImageLayer({
+      source: source,
+    }),
+  ],
+  view: new View({
+    center: fromLonLat([-122.39, 37.81]),
+    zoom: 12,
+  }),
+});
+
+render({
+  tolerance: 0.001,
+});

test/rendering/cases/immediate-geographic/main.js

@@ -0,0 +1,42 @@
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {Circle, Fill, Style} from '../../../../src/ol/style.js';
+import {Map, View} from '../../../../src/ol/index.js';
+import {Point} from '../../../../src/ol/geom.js';
+import {getVectorContext} from '../../../../src/ol/render.js';
+import {useGeographic} from '../../../../src/ol/proj.js';
+
+useGeographic();
+
+const center = [8.6, 50.1];
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0,
+  }),
+});
+
+layer.on('postrender', (event) => {
+  const context = getVectorContext(event);
+  context.setStyle(
+    new Style({
+      image: new Circle({
+        radius: 5,
+        fill: new Fill({color: 'red'}),
+      }),
+    })
+  );
+  context.drawGeometry(new Point(center));
+});
+
+new Map({
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+
+render();

test/rendering/cases/layer-clipping/main.js

@@ -0,0 +1,77 @@
+import Map from '../../../../src/ol/Map.js';
+import MultiPolygon from '../../../../src/ol/geom/MultiPolygon.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {getVectorContext} from '../../../../src/ol/render.js';
+
+const source = new XYZ({
+  url: '/data/tiles/osm/{z}/{x}/{y}.png',
+  transition: 0,
+});
+
+const layer = new TileLayer({
+  source: source,
+});
+
+const geometry = new MultiPolygon([
+  [
+    [
+      [-80, -40],
+      [-40, 0],
+      [-80, 40],
+      [-120, 0],
+      [-80, -40],
+    ],
+  ],
+  [
+    [
+      [80, -40],
+      [120, 0],
+      [80, 40],
+      [40, 0],
+      [80, -40],
+    ],
+  ],
+]).transform('EPSG:4326', 'EPSG:3857');
+
+const style = new Style({
+  stroke: new Stroke({
+    width: 2,
+    color: 'blue',
+  }),
+});
+
+layer.on('prerender', function (event) {
+  const context = event.context;
+  context.save();
+
+  const vectorContext = getVectorContext(event);
+  vectorContext.setStyle(style);
+  vectorContext.drawGeometry(geometry);
+
+  context.clip();
+});
+
+layer.on('postrender', function (event) {
+  const context = event.context;
+  context.restore();
+
+  const vectorContext = getVectorContext(event);
+  vectorContext.setStyle(style);
+  vectorContext.drawGeometry(geometry);
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+
+render();

test/rendering/cases/layer-group/main.js

@@ -0,0 +1,33 @@
+import Map from '../../../../src/ol/Map.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {
+  Group as LayerGroup,
+  Tile as TileLayer,
+} from '../../../../src/ol/layer.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 3,
+  }),
+  layers: new LayerGroup({
+    opacity: 0.75,
+    layers: [
+      new TileLayer({
+        opacity: 0.25,
+        source: new XYZ({
+          url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        }),
+      }),
+      new TileLayer({
+        source: new XYZ({
+          url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
+        }),
+      }),
+    ],
+  }),
+});
+
+render();

test/rendering/cases/layer-image-extent-rotation-geographic/main.js

@@ -0,0 +1,40 @@
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import Static from '../../../../src/ol/source/ImageStatic.js';
+import View from '../../../../src/ol/View.js';
+import {
+  get as getProjection,
+  transformExtent,
+  useGeographic,
+} from '../../../../src/ol/proj.js';
+
+useGeographic();
+
+const center = [-122.416667, 37.783333];
+const extent = [-123.1, 37.1, -122.1, 37.9];
+
+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'),
+      }),
+      extent,
+    }),
+  ],
+  view: new View({
+    center,
+    zoom: 8,
+    rotation: Math.PI / 4,
+  }),
+});
+
+render();

test/rendering/cases/layer-image-extent-rotation/main.js

@@ -0,0 +1,41 @@
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import Static from '../../../../src/ol/source/ImageStatic.js';
+import View from '../../../../src/ol/View.js';
+import {
+  get as getProjection,
+  transform,
+  transformExtent,
+} from '../../../../src/ol/proj.js';
+const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
+const extent = transformExtent(
+  [-123.1, 37.1, -122.1, 37.9],
+  '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'),
+      }),
+      extent,
+    }),
+  ],
+  view: new View({
+    center,
+    zoom: 8,
+    rotation: Math.PI / 4,
+  }),
+});
+
+render();

test/rendering/cases/layer-image/main.js

@@ -0,0 +1,34 @@
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import Static from '../../../../src/ol/source/ImageStatic.js';
+import View from '../../../../src/ol/View.js';
+import {
+  get as getProjection,
+  transform,
+  transformExtent,
+} from '../../../../src/ol/proj.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();

test/rendering/cases/layer-mapbox-vector/main.js

@@ -0,0 +1,22 @@
+import Map from '../../../../src/ol/Map.js';
+import MapboxVector from '../../../../src/ol/layer/MapboxVector.js';
+import View from '../../../../src/ol/View.js';
+
+new Map({
+  layers: [
+    new MapboxVector({
+      styleUrl: '/data/styles/bright-v9.json',
+      accessToken: 'test-token',
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [1825927.7316762917, 6143091.089223046],
+    zoom: 15,
+  }),
+});
+
+render({
+  message: 'Mapbox vector layer renders',
+  tolerance: 0.025,
+});

test/rendering/cases/layer-tile-extent-geographic/main.js

@@ -0,0 +1,41 @@
+/**
+ * Tile layers get clipped to their extent.
+ */
+
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {useGeographic} from '../../../../src/ol/proj.js';
+
+useGeographic();
+
+const center = [7, 50];
+const extent = [2, 47, 10, 53];
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3,
+      }),
+      extent: extent,
+    }),
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
+        minZoom: 3,
+        maxZoom: 5,
+      }),
+      extent: extent,
+    }),
+  ],
+});
+
+render();

test/rendering/cases/layer-tile-extent/main.js

@@ -0,0 +1,40 @@
+/**
+ * Tile layers get clipped to their extent.
+ */
+
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+import {transformExtent} from '../../../../src/ol/proj.js';
+
+const center = fromLonLat([7, 50]);
+const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3,
+      }),
+      extent: extent,
+    }),
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
+        minZoom: 3,
+        maxZoom: 5,
+      }),
+      extent: extent,
+    }),
+  ],
+});
+
+render();

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

@@ -0,0 +1,30 @@
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+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();

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

@@ -0,0 +1,26 @@
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+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();

test/rendering/cases/layer-tile-render-listener/main.js

@@ -0,0 +1,48 @@
+import CircleStyle from '../../../../src/ol/style/Circle.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {fromLonLat, transform} from '../../../../src/ol/proj.js';
+import {getVectorContext} from '../../../../src/ol/render.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0,
+  }),
+});
+
+const onRender = function (event) {
+  const context = event.context;
+  context.restore();
+  const vectorContext = getVectorContext(event);
+  vectorContext.setImageStyle(
+    new CircleStyle({
+      radius: 12,
+      fill: new Fill({color: 'yellow'}),
+      stroke: new Stroke({color: 'red', width: 1}),
+    })
+  );
+  vectorContext.drawPoint(
+    new Point(transform([13, 37], 'EPSG:4326', 'EPSG:3857'))
+  );
+};
+layer.on('postrender', onRender);
+
+const map = new Map({
+  layers: [],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+map.addLayer(layer);
+
+render();

test/rendering/cases/layer-tile-simple/main.js

@@ -0,0 +1,25 @@
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+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,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3,
+  }),
+});
+
+render();

test/rendering/cases/layer-tile-transition/main.js

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

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

@@ -0,0 +1,35 @@
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
+
+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();

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

@@ -0,0 +1,187 @@
+import CircleStyle from '../../../../src/ol/style/Circle.js';
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import LineString from '../../../../src/ol/geom/LineString.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.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';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.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({
+    zIndex: feature.get('zIndex'),
+    image: new CircleStyle({
+      radius: 15,
+      fill: new Fill({
+        color: 'blue',
+      }),
+    }),
+  });
+});
+map.addLayer(layer1);
+
+center = [center[0] + 500, center[1] + 700];
+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({
+    zIndex: feature.get('zIndex'),
+    text: new Text({
+      text: feature.get('text'),
+      font: 'italic bold 18px Ubuntu',
+    }),
+  });
+});
+map.addLayer(layer2);
+
+center = [center[0] + 500, center[1] + 300];
+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: 10,
+      stroke: new Stroke({
+        color: 'red',
+        width: 8,
+      }),
+    }),
+    text: new Text({
+      text: feature.get('text'),
+      font: 'italic bold 18px Ubuntu',
+      textBaseline: 'bottom',
+      offsetY: -12,
+    }),
+  });
+});
+map.addLayer(layer3);
+
+center = [center[0] - 2000, center[1] - 2000];
+const point = new Feature(new Point(center));
+point.setStyle(
+  new Style({
+    zIndex: 1,
+    image: new CircleStyle({
+      radius: 8,
+      stroke: new Stroke({
+        color: 'blue',
+        width: 4,
+      }),
+    }),
+  })
+);
+const line = new Feature(
+  new LineString([
+    [center[0] - 650, center[1] - 200],
+    [center[0] + 650, center[1] - 200],
+  ])
+);
+line.setStyle(
+  new Style({
+    zIndex: 2,
+    stroke: new Stroke({
+      color: '#CCC',
+      width: 12,
+    }),
+    text: new Text({
+      placement: 'line',
+      text: 'east-west',
+      font: 'italic bold 18px Ubuntu',
+      overflow: true,
+    }),
+  })
+);
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.007});

test/rendering/cases/layer-vector-extent-geographic/main.js

@@ -0,0 +1,27 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {useGeographic} from '../../../../src/ol/proj.js';
+
+useGeographic();
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+  layers: [
+    new VectorLayer({
+      extent: [-50, -45, 50, 45],
+      source: new VectorSource({
+        url: '/data/countries.json',
+        format: new GeoJSON(),
+      }),
+    }),
+  ],
+});
+
+render();

test/rendering/cases/layer-vector-extent-rotation/main.js

@@ -0,0 +1,26 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {transformExtent} from '../../../../src/ol/proj.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+    rotation: Math.PI / 4,
+  }),
+  layers: [
+    new VectorLayer({
+      extent: transformExtent([-50, -45, 50, 45], 'EPSG:4326', 'EPSG:3857'),
+      source: new VectorSource({
+        url: '/data/countries.json',
+        format: new GeoJSON(),
+      }),
+    }),
+  ],
+});
+
+render();

test/rendering/cases/layer-vector-multi-world/main.js

@@ -0,0 +1,69 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import Map from '../../../../src/ol/Map.js';
+import Polygon from '../../../../src/ol/geom/Polygon.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {Projection, addCoordinateTransforms} from '../../../../src/ol/proj.js';
+import {fromEPSG4326, toEPSG4326} from '../../../../src/ol/proj/epsg3857.js';
+
+const projection = new Projection({
+  code: 'custom',
+  units: 'm',
+  global: true,
+  extent: [-40075016.68557849, -20037508.342789244, 0, 20037508.342789244],
+});
+
+addCoordinateTransforms(
+  'EPSG:4326',
+  projection,
+  function (coord) {
+    const converted = fromEPSG4326(coord);
+    converted[0] -= 20037508.342789244;
+    return converted;
+  },
+  function (coord) {
+    return toEPSG4326([coord[0] + 20037508.342789244, coord[1]]);
+  }
+);
+
+const feature = new Feature({
+  geometry: new Polygon([
+    [
+      [-20037508.342789244, 20037508.342789244],
+      [-20037508.342789244, -20037508.342789244],
+      [-16037508.342789244, -20037508.342789244],
+      [-16037508.342789244, 20037508.342789244],
+      [-20037508.342789244, 20037508.342789244],
+    ],
+  ]),
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      renderBuffer: 0,
+      source: new VectorSource({
+        features: [feature],
+      }),
+      style: new Style({
+        fill: new Fill({
+          color: 'black',
+        }),
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    projection: projection,
+    multiWorld: true,
+    maxResolution: 485254.1017841229,
+    zoom: 0,
+    center: [2000000, 0],
+  }),
+});
+
+render();

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

@@ -0,0 +1,54 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {Fill, Stroke, Style, Text} from '../../../../src/ol/style.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [-17465028, 2331736],
+    zoom: 5,
+  }),
+});
+
+const labelStyle = new Style({
+  text: new Text({
+    font: '16px Ubuntu',
+    overflow: true,
+    fill: new Fill({
+      color: '#000',
+    }),
+    stroke: new Stroke({
+      color: '#fff',
+      width: 3,
+    }),
+  }),
+});
+const countryStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1,
+  }),
+});
+const style = [countryStyle, labelStyle];
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    url: '/data/countries.json',
+    format: new GeoJSON(),
+  }),
+  style: function (feature) {
+    labelStyle.getText().setText(feature.get('name'));
+    return style;
+  },
+  declutter: true,
+});
+
+map.addLayer(vectorLayer);
+
+render({tolerance: 0.007});

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

@@ -0,0 +1,53 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import MultiPoint from '../../../../src/ol/geom/MultiPoint.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {Icon, Stroke, Style, Text} from '../../../../src/ol/style.js';
+import {Vector as VectorLayer} from '../../../../src/ol/layer.js';
+
+const vectorLayer = new VectorLayer({
+  declutter: true,
+  renderBuffer: 0,
+  source: new VectorSource({
+    features: [
+      new Feature(
+        new MultiPoint([
+          [0, 0],
+          [0, 1],
+          [0.5, 0.5],
+          [0.9, 0.85],
+          [1, 0],
+          [0.3, 0.5],
+        ])
+      ),
+    ],
+  }),
+  style: new Style({
+    image: new Icon({
+      anchor: [0.5, 46],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'pixels',
+      src: '/data/icon.png',
+    }),
+    text: new Text({
+      text: 'Test',
+      font: 'italic 700 20px Ubuntu',
+      stroke: new Stroke({
+        color: 'red',
+        width: 20,
+      }),
+    }),
+  }),
+});
+
+new Map({
+  layers: [vectorLayer],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0.5, 0.5],
+    resolution: 0.006679631467570084,
+  }),
+});
+
+render({tolerance: 0.007});

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

@@ -0,0 +1,63 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import Map from '../../../../src/ol/Map.js';
+import Polygon from '../../../../src/ol/geom/Polygon.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.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',
+  multiWorld: true,
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view,
+});
+
+render();

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

@@ -0,0 +1,59 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import Map from '../../../../src/ol/Map.js';
+import Polygon from '../../../../src/ol/geom/Polygon.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.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.541],
+      [-28.5317, -9.2705],
+      [-35.2671, -48.541],
+      [0, -30],
+      [35.2671, -48.541],
+      [28.5317, -9.2705],
+      [57.0634, 18.541],
+      [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();

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

@@ -0,0 +1,119 @@
+import Circle from '../../../../src/ol/geom/Circle.js';
+import Feature from '../../../../src/ol/Feature.js';
+import LineString from '../../../../src/ol/geom/LineString.js';
+import Map from '../../../../src/ol/Map.js';
+import Polygon from '../../../../src/ol/geom/Polygon.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.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();

test/rendering/cases/layer-vectorimage-decluttering/main.js

@@ -0,0 +1,187 @@
+import CircleStyle from '../../../../src/ol/style/Circle.js';
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import LineString from '../../../../src/ol/geom/LineString.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.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';
+import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.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 VectorImageLayer({
+  declutter: true,
+  source: source1,
+});
+
+const source2 = new VectorSource();
+const layer2 = new VectorImageLayer({
+  declutter: true,
+  source: source2,
+});
+
+const source3 = new VectorSource();
+const layer3 = new VectorImageLayer({
+  declutter: true,
+  source: source3,
+});
+
+const source4 = new VectorSource();
+const layer4 = new VectorImageLayer({
+  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({
+    zIndex: feature.get('zIndex'),
+    image: new CircleStyle({
+      radius: 15,
+      fill: new Fill({
+        color: 'blue',
+      }),
+    }),
+  });
+});
+map.addLayer(layer1);
+
+center = [center[0] + 500, center[1] + 700];
+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({
+    zIndex: feature.get('zIndex'),
+    text: new Text({
+      text: feature.get('text'),
+      font: 'italic bold 18px Ubuntu',
+    }),
+  });
+});
+map.addLayer(layer2);
+
+center = [center[0] + 500, center[1] + 300];
+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: 10,
+      stroke: new Stroke({
+        color: 'red',
+        width: 8,
+      }),
+    }),
+    text: new Text({
+      text: feature.get('text'),
+      font: 'italic bold 18px Ubuntu',
+      textBaseline: 'bottom',
+      offsetY: -12,
+    }),
+  });
+});
+map.addLayer(layer3);
+
+center = [center[0] - 2000, center[1] - 2000];
+const point = new Feature(new Point(center));
+point.setStyle(
+  new Style({
+    zIndex: 1,
+    image: new CircleStyle({
+      radius: 8,
+      stroke: new Stroke({
+        color: 'blue',
+        width: 4,
+      }),
+    }),
+  })
+);
+const line = new Feature(
+  new LineString([
+    [center[0] - 650, center[1] - 200],
+    [center[0] + 650, center[1] - 200],
+  ])
+);
+line.setStyle(
+  new Style({
+    zIndex: 2,
+    stroke: new Stroke({
+      color: '#CCC',
+      width: 12,
+    }),
+    text: new Text({
+      placement: 'line',
+      text: 'east-west',
+      font: 'italic bold 18px Ubuntu',
+      overflow: true,
+    }),
+  })
+);
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.007});

test/rendering/cases/layer-vectorimage-extent-rotation-intersection/main.js

@@ -0,0 +1,72 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {Fill, RegularShape, Stroke, Style} from '../../../../src/ol/style.js';
+import {fromExtent} from '../../../../src/ol/geom/Polygon.js';
+
+const extent = [
+  1900e3 - 100000,
+  6300e3 - 100000,
+  1900e3 + 100000,
+  6300e3 + 100000,
+];
+
+const pt1 = new Feature({
+  name: 'point',
+  geometry: new Point([1900e3, 6300e3]),
+});
+pt1.setStyle(
+  new Style({
+    image: new RegularShape({
+      points: 4,
+      radius: 20,
+      fill: new Fill({
+        color: 'fuchsia',
+      }),
+    }),
+  })
+);
+
+const border = new Feature({
+  name: 'extent border',
+  geometry: fromExtent(extent),
+});
+
+new Map({
+  layers: [
+    new VectorImageLayer({
+      style: new Style({
+        stroke: new Stroke({
+          color: 'yellow',
+          width: 20,
+        }),
+      }),
+      source: new VectorSource({
+        features: [border],
+      }),
+    }),
+    new VectorImageLayer({
+      style: new Style({
+        stroke: new Stroke({
+          color: 'green',
+          width: 20,
+        }),
+      }),
+      source: new VectorSource({
+        features: [pt1, border],
+      }),
+      extent: extent,
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [1900e3, 6300e3],
+    zoom: 7,
+    rotation: Math.PI / 4,
+  }),
+});
+
+render();

test/rendering/cases/layer-vectorimage-extent-rotation/main.js

@@ -0,0 +1,26 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {transformExtent} from '../../../../src/ol/proj.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+    rotation: Math.PI / 4,
+  }),
+  layers: [
+    new VectorImageLayer({
+      extent: transformExtent([-50, -45, 50, 45], 'EPSG:4326', 'EPSG:3857'),
+      source: new VectorSource({
+        url: '/data/countries.json',
+        format: new GeoJSON(),
+      }),
+    }),
+  ],
+});
+
+render();

test/rendering/cases/layer-vectorimage/main.js

@@ -0,0 +1,119 @@
+import Circle from '../../../../src/ol/geom/Circle.js';
+import Feature from '../../../../src/ol/Feature.js';
+import LineString from '../../../../src/ol/geom/LineString.js';
+import Map from '../../../../src/ol/Map.js';
+import Polygon from '../../../../src/ol/geom/Polygon.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.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});

test/rendering/cases/layer-vectortile-icon-label/main.js

@@ -0,0 +1,22 @@
+import Map from '../../../../src/ol/Map.js';
+import MapboxVector from '../../../../src/ol/layer/MapboxVector.js';
+import View from '../../../../src/ol/View.js';
+
+const mapboxVectorLayer = new MapboxVector({
+  styleUrl: '/data/styles/bright-v9/style.json',
+  accessToken: 'test-token',
+});
+
+new Map({
+  layers: [mapboxVectorLayer],
+  target: 'map',
+  view: new View({
+    center: [1822585.77586262, 6141438.140891937],
+    zoom: 16,
+  }),
+});
+
+render({
+  message: 'Vector tile layer declutters image with text correctly',
+  tolerance: 0.01,
+});

test/rendering/cases/layer-vectortile-opacity-declutter/main.js

@@ -0,0 +1,31 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      declutter: true,
+      opacity: 0.1,
+      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,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders',
+  tolerance: 0.02,
+});

test/rendering/cases/layer-vectortile-opacity/main.js

@@ -0,0 +1,30 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      opacity: 0.1,
+      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,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders',
+  tolerance: 0.02,
+});

test/rendering/cases/layer-vectortile-renderbuffer/main.js

@@ -0,0 +1,59 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {Circle, Fill, Stroke, Style} from '../../../../src/ol/style.js';
+
+const offset = 1380000;
+const points = [
+  [-offset, -offset],
+  [-offset, offset],
+  [offset, offset],
+  [offset, -offset],
+];
+
+const vectorTileSource = new VectorTileSource({
+  tileUrlFunction: (tileCoord) => tileCoord,
+  tileLoadFunction(tile, tileCoord) {
+    const features = points.map(
+      (corner) =>
+        new Feature({
+          geometry: new Point(corner),
+          tileCoord,
+        })
+    );
+    tile.setFeatures(features);
+  },
+});
+
+const vectorTileLayer = new VectorTileLayer({
+  source: vectorTileSource,
+  style: new Style({
+    image: new Circle({
+      radius: 50,
+      fill: new Fill({
+        color: 'rgba(255, 0, 0, 0.5)',
+      }),
+      stroke: new Stroke({
+        width: 1,
+        color: 'black',
+      }),
+    }),
+  }),
+});
+
+new Map({
+  target: 'map',
+  layers: [vectorTileLayer],
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    multiWorld: true,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders tiles from renderBuffer',
+});

test/rendering/cases/layer-vectortile-rendermode-vector-opacity/main.js

@@ -0,0 +1,32 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileRenderType from '../../../../src/ol/layer/VectorTileRenderType.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      renderMode: VectorTileRenderType.VECTOR,
+      opacity: 0.1,
+      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,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders with vector render mode',
+  tolerance: 0.02,
+});

test/rendering/cases/layer-vectortile-rendermode-vector/main.js

@@ -0,0 +1,31 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileRenderType from '../../../../src/ol/layer/VectorTileRenderType.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      renderMode: VectorTileRenderType.VECTOR,
+      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,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders with vector render mode',
+  tolerance: 0.02,
+});

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

@@ -0,0 +1,31 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+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,
+});

test/rendering/cases/layer-vectortile-rotate-text/main.js

@@ -0,0 +1,44 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {Stroke, Style, Text} from '../../../../src/ol/style.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+new Map({
+  layers: [
+    new VectorTileLayer({
+      style: function (feature, resolution) {
+        const name = feature.get('name');
+        if (feature.getGeometry().getType() === 'LineString' && name) {
+          return new Style({
+            stroke: new Stroke({
+              width: 2,
+              color: 'red',
+            }),
+            text: new Text({
+              text: name,
+              font: 'italic bold 18px Ubuntu',
+              placement: 'line',
+            }),
+          });
+        }
+      },
+      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],
+    rotation: Math.PI / 2,
+    zoom: 14,
+  }),
+});
+
+render({message: 'Vector tile layer has upright labels', tolerance: 0.01});

test/rendering/cases/layer-vectortile-rotate-vector/main.js

@@ -0,0 +1,54 @@
+import CircleStyle from '../../../../src/ol/style/Circle.js';
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+const vectorSource = new VectorSource({
+  features: [new Feature(new Point([1825727.7316762917, 6143091.089223046]))],
+});
+const layer = new VectorLayer({
+  zIndex: 1,
+  source: vectorSource,
+  style: new Style({
+    image: new CircleStyle({
+      radius: 10,
+      fill: new Fill({
+        color: 'red',
+      }),
+    }),
+  }),
+});
+
+new Map({
+  layers: [
+    layer,
+    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,
+    rotation: Math.PI / 4,
+  }),
+});
+
+render({
+  message: 'Vector tile layer rotates with vector layer on top',
+  tolerance: 0.01,
+});

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

@@ -0,0 +1,27 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+const map = new Map({
+  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', tolerance: 0.01});

test/rendering/cases/layer-vectortile-simple/main.js

@@ -0,0 +1,29 @@
+import MVT from '../../../../src/ol/format/MVT.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+
+new Map({
+  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,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders',
+  tolerance: 0.02,
+});

test/rendering/cases/linestring-style-css-filter/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="/ol/ol.css" type="text/css">
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+      .bw {
+        filter: grayscale(100%);
+      }
+      .ol-control {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="main.js"></script>
+  </body>
+  </script>
+</html>