diff --git a/engine/src/flutter/lib/web_ui/dev/goldens_lock.yaml b/engine/src/flutter/lib/web_ui/dev/goldens_lock.yaml index 004237536a3..30c9fa90437 100644 --- a/engine/src/flutter/lib/web_ui/dev/goldens_lock.yaml +++ b/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 diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_arc_golden_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_arc_golden_test.dart new file mode 100644 index 00000000000..64d83a694d1 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_lines_golden_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_lines_golden_test.dart new file mode 100644 index 00000000000..6890d38654d --- /dev/null +++ b/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); +} diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rect_golden_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rect_golden_test.dart new file mode 100644 index 00000000000..b226952f3c3 --- /dev/null +++ b/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); +} diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rrect_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rrect_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rrect_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_rrect_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_stroke_joins_golden_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_stroke_joins_golden_test.dart new file mode 100644 index 00000000000..4d06d6b6b14 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_stroke_rects_golden_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_stroke_rects_golden_test.dart new file mode 100644 index 00000000000..9712e234e7d --- /dev/null +++ b/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)); +} \ No newline at end of file diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/compositing_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/compositing_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/conic_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/conic_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/conic_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/conic_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/path_to_svg_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/path_to_svg_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/recording_canvas_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/recording_canvas_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/recording_canvas_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/recording_canvas_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_overflow_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_overflow_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart diff --git a/engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_style_scuba_test.dart b/engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart similarity index 100% rename from engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_style_scuba_test.dart rename to engine/src/flutter/lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart