Open source canvas tests from flutter_web_ui (flutter/engine#12819)

* Open source canvas tests from flutter_web_ui

Reimplement some painter tests as screenshot tests on canvas.

Needs https://github.com/flutter/goldens/pull/53
Fixes https://github.com/flutter/flutter/issues/42027

* Remove whitespace

* Address PR feedback

* Add latest hash to dev/goldens_lock.yaml
* Rename (with git mv) *scuba_test.dart -> *golden_test.dart

engine/src/flutter/lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 17a42169bbf6739421fce8a0a1695eb3405375b6
+revision: 8859d44913f7e63ff61f1a2662ec5eaa8708fe79

engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_arc_golden_test.dart

@@ -0,0 +1,77 @@
+// 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:html' as html;
+
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+import 'package:test/test.dart';
+
+import 'package:web_engine_tester/golden_tester.dart';
+
+void main() async {
+  final Rect region = Rect.fromLTWH(0, 0, 400, 600);
+
+  BitmapCanvas canvas;
+
+  setUp(() {
+    canvas = BitmapCanvas(region);
+  });
+
+  tearDown(() {
+    canvas.rootElement.remove();
+  });
+
+  test('draws arcs with largeArc , anticlockwise variations', () async {
+    paintArc(canvas, Offset(0, 0),
+        largeArc: false, clockwise: false, distance: 20);
+    paintArc(canvas, Offset(200, 0),
+        largeArc: true, clockwise: false, distance: 20);
+    paintArc(canvas, Offset(0, 150),
+        largeArc: false, clockwise: true, distance: 20);
+    paintArc(canvas, Offset(200, 150),
+        largeArc: true, clockwise: true, distance: 20);
+    paintArc(canvas, Offset(0, 300),
+        largeArc: false, clockwise: false, distance: -20);
+    paintArc(canvas, Offset(200, 300),
+        largeArc: true, clockwise: false, distance: -20);
+    paintArc(canvas, Offset(0, 400),
+        largeArc: false, clockwise: true, distance: -20);
+    paintArc(canvas, Offset(200, 400),
+        largeArc: true, clockwise: true, distance: -20);
+
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_arc_to_point.png', region: region);
+  }, timeout: const Timeout(Duration(seconds: 10)));
+
+}
+
+void paintArc(BitmapCanvas canvas, Offset offset,
+      {bool largeArc = false, bool clockwise = false, double distance = 0}) {
+
+  final Offset startP =
+      Offset(75 - distance + offset.dx, 75 - distance + offset.dy);
+  final Offset endP =
+      Offset(75.0 + distance + offset.dx, 75.0 + distance + offset.dy);
+  canvas.drawRect(
+      Rect.fromLTRB(startP.dx, startP.dy, endP.dx, endP.dy),
+      PaintData()
+        ..strokeWidth = 1
+        ..color = Color(0xFFFF9800) // orange
+        ..style = PaintingStyle.stroke);
+  final Path path = Path();
+  path.moveTo(startP.dx, startP.dy);
+  path.arcToPoint(endP,
+      rotation: 45,
+      radius: const Radius.elliptical(40, 60),
+      largeArc: largeArc,
+      clockwise: clockwise);
+  canvas.drawPath(
+      path,
+      PaintData()
+        ..strokeWidth = 2
+        ..color = Color(0x61000000) // black38
+        ..style = PaintingStyle.stroke);
+}

engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_lines_golden_test.dart

@@ -0,0 +1,66 @@
+// 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:html' as html;
+
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+import 'package:test/test.dart';
+
+import 'package:web_engine_tester/golden_tester.dart';
+
+void main() async {
+  final Rect region = Rect.fromLTWH(0, 0, 300, 300);
+
+  BitmapCanvas canvas;
+
+  setUp(() {
+    canvas = BitmapCanvas(region);
+  });
+
+  tearDown(() {
+    canvas.rootElement.remove();
+  });
+
+  test('draws lines with varying strokeWidth', () async {
+
+    paintLines(canvas);
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_lines_thickness.png', region: region);
+  }, timeout: const Timeout(Duration(seconds: 10)));
+
+}
+
+void paintLines(BitmapCanvas canvas) {
+    final PaintData paint1 = PaintData()
+      ..color = Color(0xFF9E9E9E) // Colors.grey
+      ..strokeWidth = 1.0
+      ..style = PaintingStyle.stroke;
+    final PaintData paint2 = PaintData()
+      ..color = Color(0x7fff0000)
+      ..strokeWidth = 1.0
+      ..style = PaintingStyle.stroke;
+    final PaintData paint3 = PaintData()
+      ..color = Color(0xFF4CAF50) //Colors.green
+      ..strokeWidth = 1.0
+      ..style = PaintingStyle.stroke;
+    // Draw markers around 100x100 box
+    canvas.drawLine(Offset(50, 50), Offset(52, 50), paint1);
+    canvas.drawLine(Offset(150, 50), Offset(148, 50), paint1);
+    canvas.drawLine(Offset(50, 150), Offset(52, 150), paint1);
+    canvas.drawLine(Offset(150, 150), Offset(148, 150), paint1);
+    // Draw diagonal
+    canvas.drawLine(Offset(50, 50), Offset(150, 150), paint2);
+    // Draw horizontal
+    paint3.strokeWidth = 1.0;
+    paint3.color = Color(0xFFFF0000);
+    canvas.drawLine(Offset(50, 55), Offset(150, 55), paint3);
+    paint3.strokeWidth = 2.0;
+    paint3.color = Color(0xFF2196F3); // Colors.blue;
+    canvas.drawLine(Offset(50, 60), Offset(150, 60), paint3);
+    paint3.strokeWidth = 4.0;
+    paint3.color = Color(0xFFFF9800); // Colors.orange;
+    canvas.drawLine(Offset(50, 70), Offset(150, 70), paint3);
+}

engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rect_golden_test.dart

@@ -0,0 +1,62 @@
+// 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:html' as html;
+
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+import 'package:test/test.dart';
+
+import 'package:web_engine_tester/golden_tester.dart';
+
+void main() async {
+  final Rect region = Rect.fromLTWH(0, 0, 150, 420);
+
+  BitmapCanvas canvas;
+
+  setUp(() {
+    canvas = BitmapCanvas(region);
+  });
+
+  tearDown(() {
+    canvas.rootElement.remove();
+  });
+
+  test('draws rect with flipped coordinates L > R, T > B', () async {
+
+    paintRects(canvas);
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_rect_flipped.png', region: region);
+  }, timeout: const Timeout(Duration(seconds: 10)));
+
+}
+
+void paintRects(BitmapCanvas canvas) {
+
+    canvas.drawRect(Rect.fromLTRB(30, 40, 100, 50),
+      PaintData()
+        ..color = Color(0xFF4CAF50) //Colors.green
+        ..strokeWidth = 1.0
+        ..style = PaintingStyle.stroke);
+
+    // swap left and right.
+    canvas.drawRect(Rect.fromLTRB(100, 150, 30, 140),
+      PaintData()
+        ..color = Color(0xFFF44336) //Colors.red
+        ..strokeWidth = 1.0
+        ..style = PaintingStyle.stroke);
+
+    // Repeat above for fill
+    canvas.drawRect(Rect.fromLTRB(30, 240, 100, 250),
+      PaintData()
+        ..color = Color(0xFF4CAF50) //Colors.green
+        ..style = PaintingStyle.fill);
+
+    // swap left and right.
+    canvas.drawRect(Rect.fromLTRB(100, 350, 30, 340),
+      PaintData()
+        ..color = Color(0xFFF44336) //Colors.red
+        ..style = PaintingStyle.fill);
+}

engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_stroke_joins_golden_test.dart

@@ -0,0 +1,70 @@
+// 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:html' as html;
+
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+import 'package:test/test.dart';
+
+import 'package:web_engine_tester/golden_tester.dart';
+
+void main() async {
+  final Rect region = Rect.fromLTWH(0, 0, 300, 300);
+
+  BitmapCanvas canvas;
+
+  setUp(() {
+    canvas = BitmapCanvas(region);
+  });
+
+  tearDown(() {
+    canvas.rootElement.remove();
+  });
+
+  test('draws stroke joins', () async {
+
+    paintStrokeJoins(canvas);
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_stroke_joins.png', region: region);
+  }, timeout: const Timeout(Duration(seconds: 10)));
+
+}
+
+void paintStrokeJoins(BitmapCanvas canvas) {
+  canvas.drawRect(Rect.fromLTRB(0, 0, 300, 300),
+      PaintData()
+        ..color = Color(0xFFFFFFFF)
+        ..style = PaintingStyle.fill); // white
+
+  Offset start = Offset(20, 10);
+  Offset mid = Offset(120, 10);
+  Offset end = Offset(120, 20);
+
+  var strokeCaps = [StrokeCap.butt, StrokeCap.round, StrokeCap.square];
+  for (StrokeCap cap in strokeCaps) {
+    var joints = [StrokeJoin.miter, StrokeJoin.bevel, StrokeJoin.round];
+    var colors = [Color(0xFFF44336), Color(0xFF4CAF50), Color(0xFF2196F3)]; // red, green, blue
+    for (int i = 0; i < joints.length; i++) {
+      var join = joints[i];
+      var color = colors[i % colors.length];
+
+      Path path = new Path();
+      path.moveTo(start.dx, start.dy);
+      path.lineTo(mid.dx, mid.dy);
+      path.lineTo(end.dx, end.dy);
+      canvas.drawPath(path, PaintData()
+            ..style = PaintingStyle.stroke
+            ..strokeWidth = 4
+            ..color = color
+            ..strokeJoin = join
+            ..strokeCap = cap);
+
+      start = start.translate(0, 20);
+      mid = mid.translate(0, 20);
+      end = end.translate(0, 20);
+    }
+  }
+}

engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_stroke_rects_golden_test.dart

@@ -0,0 +1,65 @@
+// 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:html' as html;
+import 'dart:math' as math;
+
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+import 'package:test/test.dart';
+
+import 'package:web_engine_tester/golden_tester.dart';
+
+void main() async {
+  final Rect region = Rect.fromLTWH(0, 0, 300, 300);
+
+  BitmapCanvas canvas;
+
+  setUp(() {
+    canvas = BitmapCanvas(region);
+  });
+
+  tearDown(() {
+    canvas.rootElement.remove();
+  });
+
+  test('draws rects side by side with fill and stroke', () async {
+
+    paintSideBySideRects(canvas);
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_stroke_rects.png', region: region);
+  }, timeout: const Timeout(Duration(seconds: 10)));
+
+}
+
+void paintSideBySideRects(BitmapCanvas canvas) {
+  canvas.drawRect(Rect.fromLTRB(0, 0, 300, 300),
+      PaintData()
+        ..color = Color(0xFFFFFFFF)
+        ..style = PaintingStyle.fill); // white
+
+    canvas.drawRect(Rect.fromLTRB(0, 20, 40, 60),
+        PaintData()
+          ..style = PaintingStyle.fill
+          ..color = Color(0x7f0000ff));
+    canvas.drawRect(Rect.fromLTRB(40, 20, 80, 60),
+        PaintData()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..color = Color(0x7fff0000));
+
+    // Rotate 30 degrees (in rad: deg*pi/180)
+    canvas.transform(new Matrix4.rotationZ(30.0 * math.pi / 180.0).storage);
+
+    canvas.drawRect(Rect.fromLTRB(100, 60, 140, 100),
+        PaintData()
+          ..style = PaintingStyle.fill
+          ..color = Color(0x7fff00ff));
+    canvas.drawRect(Rect.fromLTRB(140, 60, 180, 100),
+        PaintData()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..color = Color(0x7fffff00));
+}