diff --git a/rendering/cases/layer-vectortile-rotate-hidpi/expected.png b/rendering/cases/layer-vectortile-rotate-hidpi/expected.png
new file mode 100644
index 0000000000..75ee66b54b
Binary files /dev/null and b/rendering/cases/layer-vectortile-rotate-hidpi/expected.png differ
diff --git a/rendering/cases/layer-vectortile-rotate-hidpi/main.js b/rendering/cases/layer-vectortile-rotate-hidpi/main.js
new file mode 100644
index 0000000000..2a4061257d
--- /dev/null
+++ b/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
+});
diff --git a/test/rendering/ol/layer/vectortile.test.js b/test/rendering/ol/layer/vectortile.test.js
deleted file mode 100644
index 40b90d374e..0000000000
--- a/test/rendering/ol/layer/vectortile.test.js
+++ /dev/null
@@ -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);
-      });
-    });
-
-  });
-
-});