// Copyright (c) 2020, the Dart project authors. Please see the AUTHORS file // for details. All rights reserved. Use of this source code is governed by a // BSD-style license that can be found in the LICENSE file. library canvas_rendering_context_2d_test; import 'dart:html'; import 'dart:math'; import 'canvas_rendering_util.dart'; import 'package:expect/minitest.dart'; main() { setUp(setupFunc); tearDown(tearDownFunc); test('setFillColorRgb', () { context.setFillColorRgb(255, 0, 255, 1); context.fillRect(0, 0, canvas.width, canvas.height); expect(readPixel(2, 2), [255, 0, 255, 255]); }); test('setFillColorHsl hue', () { context.setFillColorHsl(0, 100, 50); context.fillRect(0, 0, canvas.width, canvas.height); checkPixel(readPixel(2, 2), [255, 0, 0, 255]); }); test('setFillColorHsl hue 2', () { context.setFillColorHsl(240, 100, 50); context.fillRect(0, 0, canvas.width, canvas.height); checkPixel(readPixel(2, 2), [0, 0, 255, 255]); }); test('setFillColorHsl sat', () { context.setFillColorHsl(0, 0, 50); context.fillRect(0, 0, canvas.width, canvas.height); checkPixel(readPixel(2, 2), [127, 127, 127, 255]); }); test('setStrokeColorRgb', () { context.setStrokeColorRgb(255, 0, 255, 1); context.lineWidth = 10; context.strokeRect(0, 0, canvas.width, canvas.height); expect(readPixel(2, 2), [255, 0, 255, 255]); }); test('setStrokeColorHsl hue', () { context.setStrokeColorHsl(0, 100, 50); context.lineWidth = 10; context.strokeRect(0, 0, canvas.width, canvas.height); expect(readPixel(2, 2), [255, 0, 0, 255]); }); test('setStrokeColorHsl hue 2', () { context.setStrokeColorHsl(240, 100, 50); context.lineWidth = 10; context.strokeRect(0, 0, canvas.width, canvas.height); expect(readPixel(2, 2), [0, 0, 255, 255]); }); test('setStrokeColorHsl sat', () { context.setStrokeColorHsl(0, 0, 50); context.lineWidth = 10; context.strokeRect(0, 0, canvas.width, canvas.height); checkPixel(readPixel(2, 2), [127, 127, 127, 255]); }); test('fillStyle', () { context.fillStyle = "red"; context.fillRect(0, 0, canvas.width, canvas.height); checkPixel(readPixel(2, 2), [255, 0, 0, 255]); }); test('strokeStyle', () { context.strokeStyle = "blue"; context.lineWidth = 10; context.strokeRect(0, 0, canvas.width, canvas.height); expect(readPixel(2, 2), [0, 0, 255, 255]); }); test('fillStyle linearGradient', () { var gradient = context.createLinearGradient(0, 0, 20, 20); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); expect(context.fillStyle is CanvasGradient, isTrue); }); test('putImageData', () { context.fillStyle = 'green'; context.fillRect(0, 0, canvas.width, canvas.height); ImageData expectedData = context.getImageData(0, 0, 10, 10); expectedData.data[0] = 25; expectedData.data[1] = 65; expectedData.data[2] = 255; // Set alpha to 255 to make the pixels show up. expectedData.data[3] = 255; context.putImageData(expectedData, 0, 0); var resultingData = context.getImageData(0, 0, 10, 10); // Make sure that we read back what we wrote. expect(resultingData.data, expectedData.data); }); test('putImageData dirty rectangle', () { context.fillStyle = 'green'; context.fillRect(0, 0, canvas.width, canvas.height); ImageData drawnData = context.getImageData(0, 0, 10, 10); drawnData.data[0] = 25; drawnData.data[1] = 65; drawnData.data[2] = 255; drawnData.data[3] = 255; // Draw these pixels to the 2nd pixel. drawnData.data[2 * 4 + 0] = 25; drawnData.data[2 * 4 + 1] = 65; drawnData.data[2 * 4 + 2] = 255; drawnData.data[2 * 4 + 3] = 255; // Draw these pixels to the 8th pixel. drawnData.data[7 * 4 + 0] = 25; drawnData.data[7 * 4 + 1] = 65; drawnData.data[7 * 4 + 2] = 255; drawnData.data[7 * 4 + 3] = 255; // Use a dirty rectangle to limit what pixels are drawn. context.putImageData(drawnData, 0, 0, 1, 0, 5, 5); // Expect the data to be all green, as we skip all drawn pixels. ImageData expectedData = context.createImageData(10, 10); for (int i = 0; i < expectedData.data.length; i++) { switch (i % 4) { case 0: expectedData.data[i] = 0; break; case 1: expectedData.data[i] = 128; break; case 2: expectedData.data[i] = 0; break; case 3: expectedData.data[i] = 255; break; } } // Third pixel was copied. expectedData.data[2 * 4 + 0] = 25; expectedData.data[2 * 4 + 1] = 65; expectedData.data[2 * 4 + 2] = 255; expectedData.data[2 * 4 + 3] = 255; // Make sure that our data is all green. var resultingData = context.getImageData(0, 0, 10, 10); expect(resultingData.data, expectedData.data); }); test('putImageData throws with wrong number of arguments', () { ImageData expectedData = context.getImageData(0, 0, 10, 10); // TODO(antonm): in Dartium ArgumentError should be thrown too. expect(() => context.putImageData(expectedData, 0, 0, 1), throws); expect(() => context.putImageData(expectedData, 0, 0, 1, 1), throws); expect(() => context.putImageData(expectedData, 0, 0, 1, 1, 5), throws); }); }