lib/web_ui/test/canvaskit/shader_mask_golden_test.dart

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:math' as math;
import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
import 'package:ui/ui.dart' as ui;

import 'common.dart';

void main() {
  internalBootstrapBrowserTest(() => testMain);
}

const ui.Rect region = ui.Rect.fromLTRB(0, 0, 500, 250);

void testMain() {
  group('ShaderMask', () {
    setUpCanvasKitTest();

    test('Renders sweep gradient with color blend', () async {
      final LayerSceneBuilder builder = LayerSceneBuilder();

      builder.pushOffset(0, 0);

      // Draw a red circle and apply it to the scene.
      final CkPictureRecorder recorder = CkPictureRecorder();
      final CkCanvas canvas = recorder.beginRecording(region);

      canvas.drawCircle(
        const ui.Offset(425, 125),
        50,
        CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0),
      );
      final CkPicture redCircle = recorder.endRecording();

      builder.addPicture(ui.Offset.zero, redCircle);

      final CkGradientSweep shader = CkGradientSweep(
          const ui.Offset(250, 125),
          const <ui.Color>[
            ui.Color(0xFF4285F4),
            ui.Color(0xFF34A853),
            ui.Color(0xFFFBBC05),
            ui.Color(0xFFEA4335),
            ui.Color(0xFF4285F4),
          ],
          const <double>[
            0.0,
            0.25,
            0.5,
            0.75,
            1.0,
          ],
          ui.TileMode.clamp,
          -(math.pi / 2),
          math.pi * 2 - (math.pi / 2),
          null);

      final ui.Path clipPath = ui.Path()
        ..addOval(const ui.Rect.fromLTWH(25, 75, 100, 100));
      builder.pushClipPath(clipPath);

      // Apply a shader mask.
      builder.pushShaderMask(shader, const ui.Rect.fromLTRB(0, 0, 200, 250),
          ui.BlendMode.color);

      // Draw another red circle and apply it to the scene.
      // This one should be grey since we have the color filter.
      final CkPictureRecorder recorder2 = CkPictureRecorder();
      final CkCanvas canvas2 = recorder2.beginRecording(region);

      canvas2.drawRect(const ui.Rect.fromLTWH(25, 75, 100, 100),
        CkPaint()..color = const ui.Color.fromARGB(255, 0, 255, 0),
      );

      final CkPicture sweepCircle = recorder2.endRecording();

      builder.addPicture(ui.Offset.zero, sweepCircle);

      await matchSceneGolden(
        'canvaskit_shadermask_linear.png',
        builder.build(),
        region: region,
      );
    });

    /// Regression test for https://github.com/flutter/flutter/issues/78959
    test('Renders sweep gradient with color blend translated', () async {
      final LayerSceneBuilder builder = LayerSceneBuilder();

      builder.pushOffset(0, 0);

      // Draw a red circle and apply it to the scene.
      final CkPictureRecorder recorder = CkPictureRecorder();
      final CkCanvas canvas = recorder.beginRecording(region);

      canvas.drawCircle(
        const ui.Offset(425, 125),
        50,
        CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0),
      );
      final CkPicture redCircle = recorder.endRecording();

      builder.addPicture(ui.Offset.zero, redCircle);

      final CkGradientSweep shader = CkGradientSweep(
          const ui.Offset(250, 125),
          const <ui.Color>[
            ui.Color(0xFF4285F4),
            ui.Color(0xFF34A853),
            ui.Color(0xFFFBBC05),
            ui.Color(0xFFEA4335),
            ui.Color(0xFF4285F4),
          ],
          const <double>[
            0.0,
            0.25,
            0.5,
            0.75,
            1.0,
          ],
          ui.TileMode.clamp,
          -(math.pi / 2),
          math.pi * 2 - (math.pi / 2),
          null);

      final ui.Path clipPath = ui.Path()
        ..addOval(const ui.Rect.fromLTWH(25, 75, 100, 100));
      builder.pushClipPath(clipPath);

      // Apply a shader mask.
      builder.pushShaderMask(shader, const ui.Rect.fromLTRB(50, 50, 200, 250),
          ui.BlendMode.color);

      // Draw another red circle and apply it to the scene.
      // This one should be grey since we have the color filter.
      final CkPictureRecorder recorder2 = CkPictureRecorder();
      final CkCanvas canvas2 = recorder2.beginRecording(region);

      canvas2.drawRect(const ui.Rect.fromLTWH(25, 75, 100, 100),
        CkPaint()..color = const ui.Color.fromARGB(255, 0, 255, 0),
      );

      final CkPicture sweepCircle = recorder2.endRecording();

      builder.addPicture(ui.Offset.zero, sweepCircle);

      await matchSceneGolden(
        'canvaskit_shadermask_linear_translated.png',
        builder.build(),
        region: region,
      );
    });
    // TODO(hterkelsen): https://github.com/flutter/flutter/issues/71520
  }, skip: isSafari || isFirefox);
}