diff --git a/package.json b/package.json
index e9b14e78fa..e2b3a04110 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
"private": true,
"homepage": "https://openlayers.org/",
"scripts": {
- "lint": "eslint tasks test src/ol examples config",
+ "lint": "eslint tasks test rendering src/ol examples config",
"pretest": "npm run lint",
"test-rendering": "node rendering/test.js",
"test": "npm run karma -- --single-run --log-level error && npm run test-rendering -- --force",
diff --git a/rendering/cases/render-toContext/expected.png b/rendering/cases/render-toContext/expected.png
new file mode 100644
index 0000000000..dda51739c8
Binary files /dev/null and b/rendering/cases/render-toContext/expected.png differ
diff --git a/rendering/cases/render-toContext/index.html b/rendering/cases/render-toContext/index.html
new file mode 100644
index 0000000000..04e8fc21f4
--- /dev/null
+++ b/rendering/cases/render-toContext/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/rendering/cases/render-toContext/main.js b/rendering/cases/render-toContext/main.js
new file mode 100644
index 0000000000..0902835534
--- /dev/null
+++ b/rendering/cases/render-toContext/main.js
@@ -0,0 +1,77 @@
+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 {toContext} from '../../../src/ol/render.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';
+
+const canvas = document.getElementById('canvas');
+const vectorContext = toContext(canvas.getContext('2d'), {
+ pixelRatio: 1,
+ size: [200, 200]
+});
+
+vectorContext.setStyle(new Style({
+ image: new CircleStyle({
+ fill: new Fill({
+ color: 'green'
+ }),
+ radius: 10
+ })
+}));
+vectorContext.drawGeometry(new Point([100, 100]));
+
+vectorContext.setStyle(new Style({
+ stroke: new Stroke({
+ lineCap: 'butt',
+ color: 'red',
+ width: 14
+ })
+}));
+vectorContext.drawGeometry(new LineString([
+ [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
+]));
+
+vectorContext.setStyle(new Style({
+ stroke: new Stroke({
+ lineJoin: 'bevel',
+ lineCap: 'butt',
+ color: '#111',
+ width: 14
+ })
+}));
+vectorContext.drawGeometry(new LineString([
+ [10, 140], [30, 120], [50, 140], [70, 120], [90, 140]
+]));
+
+
+vectorContext.setStyle(new Style({
+ stroke: new Stroke({
+ color: 'blue',
+ width: 6
+ }),
+ fill: new Fill({
+ color: 'rgba(0,0,255,0.5)'
+ })
+}));
+
+vectorContext.drawGeometry(new Polygon([
+ [[125, 25], [175, 25], [175, 75], [125, 75], [125, 25]],
+ [[140, 40], [140, 60], [160, 60], [160, 40], [140, 40]]
+]));
+
+vectorContext.setStyle(new Style({
+ stroke: new Stroke({
+ lineDash: [10, 5],
+ lineDashOffset: 5
+ })
+}));
+
+vectorContext.drawGeometry(new Polygon([
+ [[125, 125], [175, 125], [175, 175], [125, 175], [125, 125]],
+ [[140, 140], [140, 160], [160, 160], [160, 140], [140, 140]]
+]));
+
+render();
diff --git a/test/rendering/ol/expected/render-linestring-bevel.png b/test/rendering/ol/expected/render-linestring-bevel.png
deleted file mode 100644
index 596ae5328f..0000000000
Binary files a/test/rendering/ol/expected/render-linestring-bevel.png and /dev/null differ
diff --git a/test/rendering/ol/expected/render-linestring-butt.png b/test/rendering/ol/expected/render-linestring-butt.png
deleted file mode 100644
index 4c99d39ce3..0000000000
Binary files a/test/rendering/ol/expected/render-linestring-butt.png and /dev/null differ
diff --git a/test/rendering/ol/expected/render-linestring.png b/test/rendering/ol/expected/render-linestring.png
deleted file mode 100644
index 978871029c..0000000000
Binary files a/test/rendering/ol/expected/render-linestring.png and /dev/null differ
diff --git a/test/rendering/ol/expected/render-point.png b/test/rendering/ol/expected/render-point.png
deleted file mode 100644
index 68768e64d1..0000000000
Binary files a/test/rendering/ol/expected/render-point.png and /dev/null differ
diff --git a/test/rendering/ol/expected/render-polygon-linedash.png b/test/rendering/ol/expected/render-polygon-linedash.png
deleted file mode 100644
index 73ca5f7402..0000000000
Binary files a/test/rendering/ol/expected/render-polygon-linedash.png and /dev/null differ
diff --git a/test/rendering/ol/expected/render-polygon-linedashoffset.png b/test/rendering/ol/expected/render-polygon-linedashoffset.png
deleted file mode 100644
index c9c9f1b3de..0000000000
Binary files a/test/rendering/ol/expected/render-polygon-linedashoffset.png and /dev/null differ
diff --git a/test/rendering/ol/expected/render-polygon.png b/test/rendering/ol/expected/render-polygon.png
deleted file mode 100644
index 864ecfbf92..0000000000
Binary files a/test/rendering/ol/expected/render-polygon.png and /dev/null differ
diff --git a/test/rendering/ol/render.test.js b/test/rendering/ol/render.test.js
deleted file mode 100644
index 6a516ec91e..0000000000
--- a/test/rendering/ol/render.test.js
+++ /dev/null
@@ -1,209 +0,0 @@
-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 {toContext} from '../../../src/ol/render.js';
-import VectorContext from '../../../src/ol/render/VectorContext.js';
-import CanvasImmediateRenderer from '../../../src/ol/render/canvas/Immediate.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';
-
-function getContext() {
- return document.createElement('canvas').getContext('2d');
-}
-
-describe('ol.render', function() {
-
- describe('ol.render.toContext()', function() {
-
- it('creates a vector context from a Canvas 2d context', function() {
- const vectorContext = toContext(getContext(), {
- pixelRatio: 1,
- size: [100, 100]
- });
- expect(vectorContext).to.be.a(VectorContext);
- expect(vectorContext).to.be.a(CanvasImmediateRenderer);
- });
-
- it('can be used to render a point geometry', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- image: new CircleStyle({
- fill: new Fill({
- color: 'green'
- }),
- radius: 10
- })
- });
-
- vectorContext.setStyle(style);
- vectorContext.drawGeometry(new Point([50, 50]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-point.png', IMAGE_TOLERANCE, done);
-
- });
-
- it('can be used to render a linestring geometry', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- stroke: new Stroke({
- color: 'red',
- width: 14
- })
- });
-
- vectorContext.setStyle(style);
- vectorContext.drawGeometry(new LineString([
- [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
- ]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-linestring.png', IMAGE_TOLERANCE, done);
-
- });
-
- it('respects lineCap for linestring', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- stroke: new Stroke({
- lineCap: 'butt',
- color: 'red',
- width: 14
- })
- });
-
- vectorContext.setStyle(style);
- vectorContext.drawGeometry(new LineString([
- [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
- ]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-linestring-butt.png', IMAGE_TOLERANCE, done);
-
- });
-
- it('respects lineJoin for linestring', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- stroke: new Stroke({
- lineJoin: 'bevel',
- color: 'red',
- width: 14
- })
- });
-
- vectorContext.setStyle(style);
- vectorContext.drawGeometry(new LineString([
- [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
- ]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-linestring-bevel.png', IMAGE_TOLERANCE, done);
-
- });
-
- it('can be used to render a polygon geometry', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- stroke: new Stroke({
- color: 'blue',
- width: 8
- }),
- fill: new Fill({
- color: 'rgba(0,0,255,0.5)'
- })
- });
-
- vectorContext.setStyle(style);
-
- vectorContext.drawGeometry(new Polygon([
- [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
- [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
- ]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-polygon.png', IMAGE_TOLERANCE, done);
-
- });
-
- it('supports lineDash styles', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- stroke: new Stroke({
- lineDash: [10, 5]
- })
- });
-
- vectorContext.setStyle(style);
-
- vectorContext.drawGeometry(new Polygon([
- [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
- [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
- ]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-polygon-linedash.png', IMAGE_TOLERANCE, done);
-
- });
-
- it('supports lineDashOffset', function(done) {
- const context = getContext();
- const vectorContext = toContext(context, {
- pixelRatio: 1,
- size: [100, 100]
- });
-
- const style = new Style({
- stroke: new Stroke({
- lineDash: [10, 5],
- lineDashOffset: 5
- })
- });
-
- vectorContext.setStyle(style);
-
- vectorContext.drawGeometry(new Polygon([
- [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]],
- [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]]
- ]));
-
- resembleCanvas(context.canvas,
- 'rendering/ol/expected/render-polygon-linedashoffset.png', IMAGE_TOLERANCE, done);
-
- });
-
- });
-
-});