add web functional tests (both CK and Dom)

Author: flar

lib/web_ui/lib/src/engine/canvaskit/canvas.dart

@@ -319,11 +319,13 @@ class CkCanvas {
 
   Float32List getLocalToDevice() {
     final List<dynamic> list = skCanvas.getLocalToDevice();
-    final Float32List matrix = Float32List(16);
-    for (int i = 0; i < 16; i++) {
-      matrix[i] = list[i];
+    final Float32List matrix4 = Float32List(16);
+    for (int r = 0; r < 4; r++) {
+      for (int c = 0; c < 4; c++) {
+        matrix4[c * 4 + r] = list[r * 4 + c].toDouble();
+      }
     }
-    return matrix;
+    return matrix4;
   }
 
   CkPictureSnapshot? get pictureSnapshot => null;

lib/web_ui/lib/src/engine/canvaskit/canvaskit_canvas.dart

@@ -149,7 +149,7 @@ class CanvasKitCanvas implements ui.Canvas {
       // non-invertible transforms collapse space to a line or point
       return ui.Rect.zero;
     }
-    return transformRect(transform, getDestinationClipBounds());
+    return transformRect(transform, _canvas.getDeviceClipBounds());
   }
 
   @override

lib/web_ui/lib/src/engine/html/canvas.dart

@@ -142,6 +142,15 @@ class SurfaceCanvas implements ui.Canvas {
     return _canvas.getDestinationClipBounds() ?? ui.Rect.largest;
   }
 
+  ui.Rect _roundOut(ui.Rect rect) {
+    return ui.Rect.fromLTRB(
+      rect.left.floorToDouble(),
+      rect.top.floorToDouble(),
+      rect.right.ceilToDouble(),
+      rect.bottom.ceilToDouble(),
+    );
+  }
+
   @override
   ui.Rect getLocalClipBounds() {
     final ui.Rect? destBounds = _canvas.getDestinationClipBounds();
@@ -153,7 +162,7 @@ class SurfaceCanvas implements ui.Canvas {
       // non-invertible transforms collapse space to a line or point
       return ui.Rect.zero;
     }
-    return transformRect(transform, destBounds);
+    return transformRect(transform, _roundOut(destBounds));
   }
 
   @override

lib/web_ui/lib/src/engine/html/recording_canvas.dart

@@ -1722,7 +1722,7 @@ class _PaintBounds {
     if (sx != 1.0 || sy != 1.0) {
       _currentMatrixIsIdentity = false;
     }
-    _currentMatrix.scale(sx, sy);
+    _currentMatrix.scale(sx, sy, 1.0);
   }
 
   void rotateZ(double radians) {

lib/web_ui/test/canvaskit/canvas_test.dart

@@ -0,0 +1,30 @@
+// 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.
+
+@TestOn('chrome || safari || firefox')
+
+import 'dart:async';
+
+import 'package:test/bootstrap/browser.dart';
+import 'package:test/test.dart';
+import 'package:ui/src/engine/browser_detection.dart';
+
+import '../engine/canvas_test.dart';
+import 'common.dart';
+
+void main() {
+  internalBootstrapBrowserTest(() => testMain);
+}
+
+// Run the same semantics tests in CanvasKit mode because as of today we do not
+// yet share platform view logic with the HTML renderer, which affects
+// semantics.
+Future<void> testMain() async {
+  group('CanvasKit semantics', () {
+    setUpCanvasKitTest();
+
+    runCanvasTests(deviceClipRoundsOut: true);
+    // TODO(hterkelsen): https://github.com/flutter/flutter/issues/60040
+  }, skip: isIosSafari);
+}

lib/web_ui/test/canvaskit/canvaskit_api_test.dart

@@ -1033,7 +1033,11 @@ void _canvasTests() {
 
   test('clipPath', () {
     canvas.clipPath(
-      _testClosedSkPath(),
+      SkPath()
+        ..moveTo(10.9, 10.9)
+        ..lineTo(19.1, 10.9)
+        ..lineTo(19.1, 19.1)
+        ..lineTo(10.9, 19.1),
       canvasKit.ClipOp.Intersect,
       true,
     );
@@ -1042,7 +1046,7 @@ void _canvasTests() {
 
   test('clipRRect', () {
     canvas.clipRRect(
-      Float32List.fromList(<double>[0, 0, 100, 100, 1, 2, 3, 4, 5, 6, 7, 8]),
+      Float32List.fromList(<double>[0.9, 0.9, 99.1, 99.1, 1, 2, 3, 4, 5, 6, 7, 8]),
       canvasKit.ClipOp.Intersect,
       true,
     );
@@ -1051,7 +1055,7 @@ void _canvasTests() {
 
   test('clipRect', () {
     canvas.clipRect(
-      Float32List.fromList(<double>[0, 0, 100, 100]),
+      Float32List.fromList(<double>[0.9, 0.9, 99.1, 99.1]),
       canvasKit.ClipOp.Intersect,
       true,
     );