diff --git a/rendering/cases/regularshape-style/expected.png b/rendering/cases/regularshape-style/expected.png
new file mode 100644
index 0000000000..b89511eef3
Binary files /dev/null and b/rendering/cases/regularshape-style/expected.png differ
diff --git a/rendering/cases/regularshape-style/main.js b/rendering/cases/regularshape-style/main.js
new file mode 100644
index 0000000000..9d98bcd573
--- /dev/null
+++ b/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();
diff --git a/test/rendering/ol/style/expected/regularshape-canvas-default-style.png b/test/rendering/ol/style/expected/regularshape-canvas-default-style.png
deleted file mode 100644
index 51e191f943..0000000000
Binary files a/test/rendering/ol/style/expected/regularshape-canvas-default-style.png and /dev/null differ
diff --git a/test/rendering/ol/style/expected/regularshape-canvas-linedash.png b/test/rendering/ol/style/expected/regularshape-canvas-linedash.png
deleted file mode 100644
index b0d7f51993..0000000000
Binary files a/test/rendering/ol/style/expected/regularshape-canvas-linedash.png and /dev/null differ
diff --git a/test/rendering/ol/style/expected/regularshape-canvas-linedashoffset.png b/test/rendering/ol/style/expected/regularshape-canvas-linedashoffset.png
deleted file mode 100644
index 3723123e3d..0000000000
Binary files a/test/rendering/ol/style/expected/regularshape-canvas-linedashoffset.png and /dev/null differ
diff --git a/test/rendering/ol/style/expected/regularshape-canvas.png b/test/rendering/ol/style/expected/regularshape-canvas.png
deleted file mode 100644
index 75cb343754..0000000000
Binary files a/test/rendering/ol/style/expected/regularshape-canvas.png and /dev/null differ
diff --git a/test/rendering/ol/style/regularshape.test.js b/test/rendering/ol/style/regularshape.test.js
deleted file mode 100644
index b582438693..0000000000
--- a/test/rendering/ol/style/regularshape.test.js
+++ /dev/null
@@ -1,150 +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';
-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';
-
-
-describe('ol.rendering.style.RegularShape', 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;
-    }
-  });
-
-  function createFeatures(stroke, fill) {
-    let feature;
-    feature = new Feature({
-      geometry: new Point([-15, 15])
-    });
-    // 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, 15])
-    });
-    // 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, -8])
-    });
-    // 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, -8])
-    });
-    // cross
-    feature.setStyle(new Style({
-      image: new RegularShape({
-        fill: fill,
-        stroke: stroke,
-        points: 4,
-        radius: 10,
-        radius2: 0,
-        angle: 0
-      })
-    }));
-    vectorSource.addFeature(feature);
-  }
-
-
-  describe('#render', function() {
-    const stroke = new Stroke({width: 2});
-    const fill = new Fill({color: 'red'});
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      createFeatures(stroke, fill);
-      expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas.png', 9.4, done);
-    });
-
-    it('supports lineDash', function(done) {
-      createMap('canvas');
-      createFeatures(new Stroke({
-        lineDash: [10, 5]
-      }));
-      expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-linedash.png', 5, done);
-    });
-
-    it('supports lineDashOffset', function(done) {
-      createMap('canvas');
-      createFeatures(new Stroke({
-        lineDash: [10, 5],
-        lineDashOffset: 5
-      }));
-      expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-linedashoffset.png', 5, done);
-    });
-  });
-
-  describe('uses the default fill and stroke color', function() {
-    const stroke = new Stroke();
-    const fill = new Fill();
-
-    it('tests the canvas renderer', function(done) {
-      createMap('canvas');
-      createFeatures(stroke, fill);
-      expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-default-style.png', 3.0, done);
-    });
-  });
-});