golden tests

Author: mdebbar

lib/web_ui/test/html/drawing/dom_clip_stroke_golden_test.dart

@@ -0,0 +1,142 @@
+// 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 'package:test/bootstrap/browser.dart';
+import 'package:test/test.dart';
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+
+import 'package:web_engine_tester/golden_tester.dart';
+
+void main() {
+  internalBootstrapBrowserTest(() => testMain);
+}
+
+Future<void> testMain() async {
+  test('rect stroke with clip', () async {
+    const Rect region = Rect.fromLTWH(0, 0, 250, 250);
+    // Set `hasParagraphs` to true to force DOM rendering.
+    final BitmapCanvas canvas =
+        BitmapCanvas(region, RenderStrategy()..hasParagraphs = true);
+
+    const Rect rect = Rect.fromLTWH(0, 0, 150, 150);
+
+    canvas.clipRect(rect.inflate(10.0), ClipOp.intersect);
+
+    canvas.drawRect(
+      rect,
+      SurfacePaintData()
+        ..color = const Color(0x6fff0000)
+        ..strokeWidth = 20.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    canvas.drawRect(
+      rect,
+      SurfacePaintData()
+        ..color = const Color(0x6f0000ff)
+        ..strokeWidth = 10.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    canvas.drawRect(
+      rect,
+      SurfacePaintData()
+        ..color = const Color(0xff000000)
+        ..strokeWidth = 1.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    domDocument.body!.style.margin = '0px';
+    domDocument.body!.append(canvas.rootElement);
+    await matchGoldenFile('rect_clip_strokes_dom.png', region: region);
+    canvas.rootElement.remove();
+  });
+
+  test('rrect stroke with clip', () async {
+    const Rect region = Rect.fromLTWH(0, 0, 250, 250);
+    // Set `hasParagraphs` to true to force DOM rendering.
+    final BitmapCanvas canvas =
+        BitmapCanvas(region, RenderStrategy()..hasParagraphs = true);
+
+    final RRect rrect = RRect.fromRectAndRadius(
+      const Rect.fromLTWH(0, 0, 150, 150),
+      const Radius.circular(20),
+    );
+
+    canvas.clipRect(rrect.outerRect.inflate(10.0), ClipOp.intersect);
+
+    canvas.drawRRect(
+      rrect,
+      SurfacePaintData()
+        ..color = const Color(0x6fff0000)
+        ..strokeWidth = 20.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    canvas.drawRRect(
+      rrect,
+      SurfacePaintData()
+        ..color = const Color(0x6f0000ff)
+        ..strokeWidth = 10.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    canvas.drawRRect(
+      rrect,
+      SurfacePaintData()
+        ..color = const Color(0xff000000)
+        ..strokeWidth = 1.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    domDocument.body!.style.margin = '0px';
+    domDocument.body!.append(canvas.rootElement);
+    await matchGoldenFile('rrect_clip_strokes_dom.png', region: region);
+    canvas.rootElement.remove();
+  });
+
+  test('circle stroke with clip', () async {
+    const Rect region = Rect.fromLTWH(0, 0, 250, 250);
+    // Set `hasParagraphs` to true to force DOM rendering.
+    final BitmapCanvas canvas =
+        BitmapCanvas(region, RenderStrategy()..hasParagraphs = true);
+
+    const Rect rect = Rect.fromLTWH(0, 0, 150, 150);
+
+    canvas.clipRect(rect.inflate(10.0), ClipOp.intersect);
+
+    canvas.drawCircle(
+      rect.center,
+      rect.width / 2,
+      SurfacePaintData()
+        ..color = const Color(0x6fff0000)
+        ..strokeWidth = 20.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    canvas.drawCircle(
+      rect.center,
+      rect.width / 2,
+      SurfacePaintData()
+        ..color = const Color(0x6f0000ff)
+        ..strokeWidth = 10.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    canvas.drawCircle(
+      rect.center,
+      rect.width / 2,
+      SurfacePaintData()
+        ..color = const Color(0xff000000)
+        ..strokeWidth = 1.0
+        ..style = PaintingStyle.stroke,
+    );
+
+    domDocument.body!.style.margin = '0px';
+    domDocument.body!.append(canvas.rootElement);
+    await matchGoldenFile('circle_clip_strokes_dom.png', region: region);
+    canvas.rootElement.remove();
+  });
+}