tests/lib_2/html/canvasrendering/pixel_manipulation_test.dart

// 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.

// @dart = 2.9

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);
  });
}