Add tests for rendering to offscreen canvas (#7175)

Add tests for using an offscreen canvas for Chart.js. These tests are
almost identical to existing tests, but with offscreen canvas enabled.

Co-authored-by: David Winegar <david.winegar@getcruise.com>

karma.conf.js

@@ -2,7 +2,9 @@
 
 const babel = require('rollup-plugin-babel');
 const commonjs = require('@rollup/plugin-commonjs');
+const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve');
+const webWorkerLoader = require('rollup-plugin-web-worker-loader');
 const builds = require('./rollup.config');
 
 module.exports = function(karma) {
@@ -67,9 +69,11 @@ module.exports = function(karma) {
 
 		rollupPreprocessor: {
 			plugins: [
+				json(),
 				resolve(),
 				babel({exclude: 'node_modules/**'}), // use babel since we have ES proposal features
-				commonjs({exclude: ['src/**', 'test/**']})
+				commonjs({exclude: ['src/**', 'test/**']}),
+				webWorkerLoader()
 			],
 			output: {
 				name: 'test',

package.json

@@ -76,6 +76,7 @@
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-cleanup": "^3.1.1",
     "rollup-plugin-terser": "^5.2.0",
+    "rollup-plugin-web-worker-loader": "^0.8.1",
     "typedoc": "^0.16.10",
     "typescript": "^3.8.2",
     "yargs": "^14.2.2"

test/BasicChartWebWorker.js

@@ -0,0 +1,26 @@
+// This file is a basic example of using a chart inside a web worker.
+// All it creates a new chart from a transferred OffscreenCanvas and then assert that the correct platform type was
+// used.
+
+// Receives messages with data of type: { type: 'initialize', canvas: OffscreenCanvas }
+// Sends messages with data of types: { type: 'success' } | { type: 'error', errorMessage: string }
+
+import Chart from '../src';
+
+onmessage = function(event) {
+	try {
+		const {type, canvas} = event.data;
+		if (type !== 'initialize') {
+			throw new Error('invalid message type received by worker: ' + type);
+		}
+
+		const chart = new Chart(canvas);
+		if (!(chart.platform instanceof Chart.platforms.BasicPlatform)) {
+			throw new Error('did not use basic platform for chart in web worker');
+		}
+
+		postMessage({type: 'success'});
+	} catch (error) {
+		postMessage({type: 'error', errorMessage: error.stack});
+	}
+};

test/fixtures/controller.line/point-style-offscreen-canvas.json

@@ -0,0 +1,97 @@
+{
+	"config": {
+		"type": "line",
+		"data": {
+			"labels": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+			"datasets": [{
+				"borderColor": "transparent",
+				"data": [3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
+				"pointBackgroundColor": "#00ff00",
+				"pointBorderColor": "transparent",
+				"pointBorderWidth": 0,
+				"pointStyle": [
+					"circle",
+					"cross",
+					"crossRot",
+					"dash",
+					"line",
+					"rect",
+					"rectRounded",
+					"rectRot",
+					"star",
+					"triangle"
+				]
+			}, {
+				"borderColor": "transparent",
+				"data": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
+				"pointBackgroundColor": "transparent",
+				"pointBorderColor": "#0000ff",
+				"pointBorderWidth": 1,
+				"pointStyle": [
+					"circle",
+					"cross",
+					"crossRot",
+					"dash",
+					"line",
+					"rect",
+					"rectRounded",
+					"rectRot",
+					"star",
+					"triangle"
+				]
+			}, {
+				"borderColor": "transparent",
+				"data": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+				"pointBackgroundColor": "#00ff00",
+				"pointBorderColor": "#0000ff",
+				"pointBorderWidth": 1,
+				"pointStyle": [
+					"circle",
+					"cross",
+					"crossRot",
+					"dash",
+					"line",
+					"rect",
+					"rectRounded",
+					"rectRot",
+					"star",
+					"triangle"
+				]
+			}]
+		},
+		"options": {
+			"responsive": false,
+			"legend": false,
+			"title": false,
+			"scales": {
+				"x": {"display": false},
+				"y": {
+					"display": false,
+					"min": 0,
+					"max": 4
+				}
+			},
+			"elements": {
+				"line": {
+					"fill": false
+				},
+				"point": {
+					"radius": 16
+				}
+			},
+			"layout": {
+				"padding": {
+					"left": 24,
+					"right": 24
+				}
+			}
+		}
+	},
+	"options": {
+		"canvas": {
+			"height": 256,
+			"width": 512
+		},
+		"useOffscreenCanvas": true
+	}
+}

test/specs/platform.basic.tests.js

@@ -0,0 +1,93 @@
+import BasicChartWebWorker from 'web-worker:../BasicChartWebWorker'; // eslint-disable-line import/no-unresolved
+
+describe('Platform.basic', function() {
+
+	it('should automatically choose the BasicPlatform for offscreen canvas', function() {
+		const chart = acquireChart({type: 'line'}, {useOffscreenCanvas: true});
+
+		expect(chart.platform).toBeInstanceOf(Chart.platforms.BasicPlatform);
+
+		chart.destroy();
+	});
+
+	it('supports choosing the BasicPlatform in a web worker', function(done) {
+		const canvas = document.createElement('canvas');
+		if (!canvas.transferControlToOffscreen) {
+			pending();
+		}
+		const offscreenCanvas = canvas.transferControlToOffscreen();
+
+		const worker = new BasicChartWebWorker();
+		worker.onmessage = (event) => {
+			worker.terminate();
+			const {type, errorMessage} = event.data;
+			if (type === 'error') {
+				done.fail(errorMessage);
+			} else if (type === 'success') {
+				expect(type).toEqual('success');
+				done();
+			} else {
+				done.fail('invalid message type sent by worker: ' + type);
+			}
+		};
+
+		worker.postMessage({type: 'initialize', canvas: offscreenCanvas}, [offscreenCanvas]);
+	});
+
+	describe('with offscreenCanvas', function() {
+		it('supports laying out a simple chart', function() {
+			const chart = acquireChart({
+				type: 'bar',
+				data: {
+					datasets: [
+						{data: [10, 5, 0, 25, 78, -10]}
+					],
+					labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
+				}
+			}, {
+				canvas: {
+					height: 150,
+					width: 250
+				},
+				useOffscreenCanvas: true,
+			});
+
+			expect(chart.platform).toBeInstanceOf(Chart.platforms.BasicPlatform);
+
+			expect(chart.chartArea.bottom).toBeCloseToPixel(120);
+			expect(chart.chartArea.left).toBeCloseToPixel(34);
+			expect(chart.chartArea.right).toBeCloseToPixel(247);
+			expect(chart.chartArea.top).toBeCloseToPixel(32);
+		});
+
+		it('supports resizing a chart', function() {
+			const chart = acquireChart({
+				type: 'bar',
+				data: {
+					datasets: [
+						{data: [10, 5, 0, 25, 78, -10]}
+					],
+					labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
+				}
+			}, {
+				canvas: {
+					height: 150,
+					width: 250
+				},
+				useOffscreenCanvas: true,
+			});
+
+			expect(chart.platform).toBeInstanceOf(Chart.platforms.BasicPlatform);
+
+			const canvasElement = chart.canvas;
+			canvasElement.height = 200;
+			canvasElement.width = 300;
+			chart.resize();
+
+			expect(chart.chartArea.bottom).toBeCloseToPixel(150);
+			expect(chart.chartArea.left).toBeCloseToPixel(34);
+			expect(chart.chartArea.right).toBeCloseToPixel(297);
+			expect(chart.chartArea.top).toBeCloseToPixel(32);
+		});
+	});
+});

test/specs/platform.dom.tests.js

@@ -13,6 +13,14 @@ describe('Platform.dom', function() {
 			document.getElementById(canvasId).remove();
 		});
 
+		it('should use the DomPlatform by default', function() {
+			var chart = acquireChart({type: 'line'});
+
+			expect(chart.platform).toBeInstanceOf(Chart.platforms.DomPlatform);
+
+			chart.destroy();
+		});
+
 		// see https://github.com/chartjs/Chart.js/issues/2807
 		it('should gracefully handle invalid item', function() {
 			var chart = new Chart('foobar');

test/utils.js

@@ -29,6 +29,7 @@ function readImageData(url, callback) {
  * @param {object} options - Chart acquisition options.
  * @param {object} options.canvas - Canvas attributes.
  * @param {object} options.wrapper - Canvas wrapper attributes.
+ * @param {boolean} options.useOffscreenCanvas - use an OffscreenCanvas instead of the normal HTMLCanvasElement.
  * @param {boolean} options.persistent - If true, the chart will not be released after the spec.
  */
 function acquireChart(config, options) {
@@ -64,7 +65,21 @@ function acquireChart(config, options) {
 	window.document.body.appendChild(wrapper);
 
 	try {
-		var ctx = canvas.getContext('2d');
+		var ctx;
+		if (options.useOffscreenCanvas) {
+			if (!canvas.transferControlToOffscreen) {
+				// If this browser does not support offscreen canvas, mark the test as 'pending', which will skip the
+				// test.
+				// TODO: switch to skip() once it's implemented (https://github.com/jasmine/jasmine/issues/1709), or
+				// remove if all browsers implement `transferControlToOffscreen`
+				pending();
+				return;
+			}
+			var offscreenCanvas = canvas.transferControlToOffscreen();
+			ctx = offscreenCanvas.getContext('2d');
+		} else {
+			ctx = canvas.getContext('2d');
+		}
 		if (options.spriteText) {
 			spritingOn(ctx);
 		}