diff --git a/rendering/cases/webgl-points/expected.png b/rendering/cases/webgl-points/expected.png
new file mode 100644
index 0000000000..8c0e8883b2
Binary files /dev/null and b/rendering/cases/webgl-points/expected.png differ
diff --git a/rendering/cases/webgl-points/main.js b/rendering/cases/webgl-points/main.js
new file mode 100644
index 0000000000..1635dc4ecc
--- /dev/null
+++ b/rendering/cases/webgl-points/main.js
@@ -0,0 +1,47 @@
+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 {Vector as VectorLayer} from '../../../src/ol/layer';
+import VectorSource from '../../../src/ol/source/Vector';
+import KML from '../../../src/ol/format/KML';
+import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer';
+
+class CustomLayer extends VectorLayer {
+  createRenderer() {
+    return new WebGLPointsLayerRenderer(this, {
+      sizeCallback: function() {
+        return 4;
+      }
+    });
+  }
+}
+
+const vector = new CustomLayer({
+  source: new VectorSource({
+    url: '/data/2012_Earthquakes_Mag5.kml',
+    format: new KML({
+      extractStyles: false
+    })
+  })
+});
+
+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: [15180597.9736, 2700366.3807],
+    zoom: 2
+  })
+});
+
+render({
+  message: 'Points are rendered using webgl as 4px pixel squares'
+});