[canvaskit] Add dilate and erode imagefilters (#48553)

Adds `dilate` and `erode` ImageFilters.

Fixes flutter/flutter#101085

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide] and the [C++,
Objective-C, Java style guides].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I added new tests to check the change I am making or feature I am
adding, or the PR is [test-exempt]. See [testing the engine] for
instructions on writing and running engine tests.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I signed the [CLA].
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#overview
[Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene
[test-exempt]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[C++, Objective-C, Java style guides]:
https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
[testing the engine]:
https://github.com/flutter/flutter/wiki/Testing-the-engine
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
[Discord]: https://github.com/flutter/flutter/wiki/Chat

Author: harryterkelsen

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

@@ -1493,6 +1493,18 @@ extension SkImageFilterNamespaceExtension on SkImageFilterNamespace {
     SkImageFilter outer,
     SkImageFilter inner,
   );
+
+  external SkImageFilter MakeDilate(
+    double radiusX,
+    double radiusY,
+    void input, // we don't use this yet
+  );
+
+  external SkImageFilter MakeErode(
+    double radiusX,
+    double radiusY,
+    void input, // we don't use this yet
+  );
 }
 
 @JS()

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

@@ -40,6 +40,11 @@ abstract class CkImageFilter implements CkManagedSkImageFilterConvertible {
   factory CkImageFilter.matrix(
       {required Float64List matrix,
       required ui.FilterQuality filterQuality}) = _CkMatrixImageFilter;
+  factory CkImageFilter.dilate(
+      {required double radiusX,
+      required double radiusY}) = _CkDilateImageFilter;
+  factory CkImageFilter.erode(
+      {required double radiusX, required double radiusY}) = _CkErodeImageFilter;
   factory CkImageFilter.compose(
       {required CkImageFilter outer,
       required CkImageFilter inner}) = _CkComposeImageFilter;
@@ -94,10 +99,9 @@ class _CkBlurImageFilter extends CkImageFilter {
     final SkImageFilter skImageFilter;
     if (sigmaX == 0 && sigmaY == 0) {
       skImageFilter = canvasKit.ImageFilter.MakeMatrixTransform(
-        toSkMatrixFromFloat32(Matrix4.identity().storage),
-        toSkFilterOptions(ui.FilterQuality.none),
-        null
-      );
+          toSkMatrixFromFloat32(Matrix4.identity().storage),
+          toSkFilterOptions(ui.FilterQuality.none),
+          null);
     } else {
       skImageFilter = canvasKit.ImageFilter.MakeBlur(
         sigmaX,
@@ -146,7 +150,8 @@ class _CkMatrixImageFilter extends CkImageFilter {
       : matrix = Float64List.fromList(matrix),
         _transform = Matrix4.fromFloat32List(toMatrix32(matrix)),
         super._() {
-    final SkImageFilter skImageFilter = canvasKit.ImageFilter.MakeMatrixTransform(
+    final SkImageFilter skImageFilter =
+        canvasKit.ImageFilter.MakeMatrixTransform(
       toSkMatrixFromFloat64(matrix),
       toSkFilterOptions(filterQuality),
       null,
@@ -185,6 +190,86 @@ class _CkMatrixImageFilter extends CkImageFilter {
   Matrix4 get transform => _transform;
 }
 
+class _CkDilateImageFilter extends CkImageFilter {
+  _CkDilateImageFilter({required this.radiusX, required this.radiusY})
+      : super._() {
+    final SkImageFilter skImageFilter = canvasKit.ImageFilter.MakeDilate(
+      radiusX,
+      radiusY,
+      null,
+    );
+    _ref = UniqueRef<SkImageFilter>(this, skImageFilter, 'ImageFilter.dilate');
+  }
+
+  final double radiusX;
+  final double radiusY;
+
+  late final UniqueRef<SkImageFilter> _ref;
+
+  @override
+  void imageFilter(SkImageFilterBorrow borrow) {
+    borrow(_ref.nativeObject);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (runtimeType != other.runtimeType) {
+      return false;
+    }
+    return other is _CkDilateImageFilter &&
+        other.radiusX == radiusX &&
+        other.radiusY == radiusY;
+  }
+
+  @override
+  int get hashCode => Object.hash(radiusX, radiusY);
+
+  @override
+  String toString() {
+    return 'ImageFilter.dilate($radiusX, $radiusY)';
+  }
+}
+
+class _CkErodeImageFilter extends CkImageFilter {
+  _CkErodeImageFilter({required this.radiusX, required this.radiusY})
+      : super._() {
+    final SkImageFilter skImageFilter = canvasKit.ImageFilter.MakeErode(
+      radiusX,
+      radiusY,
+      null,
+    );
+    _ref = UniqueRef<SkImageFilter>(this, skImageFilter, 'ImageFilter.erode');
+  }
+
+  final double radiusX;
+  final double radiusY;
+
+  late final UniqueRef<SkImageFilter> _ref;
+
+  @override
+  void imageFilter(SkImageFilterBorrow borrow) {
+    borrow(_ref.nativeObject);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (runtimeType != other.runtimeType) {
+      return false;
+    }
+    return other is _CkErodeImageFilter &&
+        other.radiusX == radiusX &&
+        other.radiusY == radiusY;
+  }
+
+  @override
+  int get hashCode => Object.hash(radiusX, radiusY);
+
+  @override
+  String toString() {
+    return 'ImageFilter.erode($radiusX, $radiusY)';
+  }
+}
+
 class _CkComposeImageFilter extends CkImageFilter {
   _CkComposeImageFilter({required this.outer, required this.inner})
       : super._() {

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

@@ -188,19 +188,13 @@ class CanvasKitRenderer implements Renderer {
 
   @override
   ui.ImageFilter createDilateImageFilter(
-      {double radiusX = 0.0, double radiusY = 0.0}) {
-    // TODO(fzyzcjy): implement dilate. https://github.com/flutter/flutter/issues/101085
-    throw UnimplementedError(
-        'ImageFilter.dilate not implemented for CanvasKit.');
-  }
+          {double radiusX = 0.0, double radiusY = 0.0}) =>
+      CkImageFilter.dilate(radiusX: radiusX, radiusY: radiusY);
 
   @override
   ui.ImageFilter createErodeImageFilter(
-      {double radiusX = 0.0, double radiusY = 0.0}) {
-    // TODO(fzyzcjy): implement erode. https://github.com/flutter/flutter/issues/101085
-    throw UnimplementedError(
-        'ImageFilter.erode not implemented for CanvasKit.');
-  }
+          {double radiusX = 0.0, double radiusY = 0.0}) =>
+      CkImageFilter.erode(radiusX: radiusX, radiusY: radiusY);
 
   @override
   ui.ImageFilter createMatrixImageFilter(Float64List matrix4,

lib/web_ui/test/canvaskit/canvaskit_api_test.dart

@@ -529,6 +529,20 @@ void _imageFilterTests() {
       isNotNull,
     );
   });
+
+  test('MakeDilate', () {
+    expect(
+      canvasKit.ImageFilter.MakeDilate(1, 2, null),
+      isNotNull,
+    );
+  });
+
+  test('MakeErode', () {
+    expect(
+      canvasKit.ImageFilter.MakeErode(1, 2, null),
+      isNotNull,
+    );
+  });
 }
 
 void _mallocTests() {

lib/web_ui/test/canvaskit/filter_test.dart

@@ -42,6 +42,8 @@ void testMain() {
       CkImageFilter.blur(sigmaX: 5, sigmaY: 6, tileMode: ui.TileMode.clamp),
       CkImageFilter.blur(sigmaX: 6, sigmaY: 5, tileMode: ui.TileMode.clamp),
       CkImageFilter.blur(sigmaX: 6, sigmaY: 5, tileMode: ui.TileMode.decal),
+      CkImageFilter.dilate(radiusX: 5, radiusY: 6),
+      CkImageFilter.erode(radiusX: 7, radiusY: 8),
       for (final CkColorFilter colorFilter in createColorFilters()) CkImageFilter.color(colorFilter: colorFilter),
     ];
     filters.add(CkImageFilter.compose(outer: filters[0], inner: filters[1]));

lib/web_ui/test/ui/filters_test.dart

@@ -61,15 +61,15 @@ Future<void> testMain() async {
         radiusY: 5.0,
     ));
     await matchGoldenFile('ui_filter_dilate_imagefilter.png', region: region);
-  }, skip: !isSkwasm); // Only skwasm supports dilate filter right now
+  }, skip: isHtml); // HTML renderer does not support the dilate filter
 
   test('erode filter', () async {
     await drawTestImageWithPaint(ui.Paint()..imageFilter = ui.ImageFilter.erode(
         radiusX: 5.0,
         radiusY: 5.0,
     ));
     await matchGoldenFile('ui_filter_erode_imagefilter.png', region: region);
-  }, skip: !isSkwasm); // Only skwasm supports erode filter
+  }, skip: isHtml); // HTML renderer does not support the erode filter
 
   test('matrix filter', () async {
     await drawTestImageWithPaint(ui.Paint()..imageFilter = ui.ImageFilter.matrix(