[canvaskit] Add ImageFilter.compose (#48546)

Adds ImageFilter.compose support in CanvasKit. Previously this would
crash.

Fixes flutter/flutter#120123

## 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/image_filter.dart

@@ -40,6 +40,9 @@ abstract class CkImageFilter implements CkManagedSkImageFilterConvertible {
   factory CkImageFilter.matrix(
       {required Float64List matrix,
       required ui.FilterQuality filterQuality}) = _CkMatrixImageFilter;
+  factory CkImageFilter.compose(
+      {required CkImageFilter outer,
+      required CkImageFilter inner}) = _CkComposeImageFilter;
 
   CkImageFilter._();
 
@@ -194,3 +197,47 @@ class _CkMatrixImageFilter extends CkImageFilter {
   @override
   Matrix4 get transform => _transform;
 }
+
+class _CkComposeImageFilter extends CkImageFilter {
+  _CkComposeImageFilter({required this.outer, required this.inner})
+      : super._() {
+    outer.imageFilter((SkImageFilter outerFilter) {
+      inner.imageFilter((SkImageFilter innerFilter) {
+        final SkImageFilter skImageFilter = canvasKit.ImageFilter.MakeCompose(
+          outerFilter,
+          innerFilter,
+        );
+        _ref = UniqueRef<SkImageFilter>(
+            this, skImageFilter, 'ImageFilter.compose');
+      });
+    });
+  }
+
+  final CkImageFilter outer;
+  final CkImageFilter inner;
+
+  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 _CkComposeImageFilter &&
+        other.outer == outer &&
+        other.inner == inner;
+  }
+
+  @override
+  int get hashCode => Object.hash(outer, inner);
+
+  @override
+  String toString() {
+    return 'ImageFilter.compose($outer, $inner)';
+  }
+}

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

@@ -192,9 +192,18 @@ class CanvasKitRenderer implements Renderer {
   }) => CkImageFilter.matrix(matrix: matrix4, filterQuality: filterQuality);
 
   @override
-  ui.ImageFilter composeImageFilters({required ui.ImageFilter outer, required ui.ImageFilter inner}) {
-  // TODO(ferhat): add implementation
-    throw UnimplementedError('ImageFilter.compose not implemented for CanvasKit.');
+  ui.ImageFilter composeImageFilters(
+      {required ui.ImageFilter outer, required ui.ImageFilter inner}) {
+    if (outer is EngineColorFilter) {
+      final CkColorFilter colorFilter = createCkColorFilter(outer)!;
+      outer = CkColorFilterImageFilter(colorFilter: colorFilter);
+    }
+    if (inner is EngineColorFilter) {
+      final CkColorFilter colorFilter = createCkColorFilter(inner)!;
+      inner = CkColorFilterImageFilter(colorFilter: colorFilter);
+    }
+    return CkImageFilter.compose(
+          outer: outer as CkImageFilter, inner: inner as CkImageFilter);
   }
 
   @override

lib/web_ui/test/canvaskit/filter_test.dart

@@ -38,12 +38,15 @@ void testMain() {
   }
 
   List<CkImageFilter> createImageFilters() {
-    return <CkImageFilter>[
+    final List<CkImageFilter> filters = <CkImageFilter>[
       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),
       for (final CkColorFilter colorFilter in createColorFilters()) CkImageFilter.color(colorFilter: colorFilter),
     ];
+    filters.add(CkImageFilter.compose(outer: filters[0], inner: filters[1]));
+    filters.add(CkImageFilter.compose(outer: filters[1], inner: filters[3]));
+    return filters;
   }
 
   setUpCanvasKitTest();
@@ -156,7 +159,47 @@ void testMain() {
       builder.addPicture(ui.Offset.zero, redCircle1);
       // The drawn red circle should actually be green with the colorFilter.
 
-      await matchSceneGolden('canvaskit_imageFilter_using_colorFilter.png', builder.build(), region: region);
+      await matchSceneGolden(
+          'canvaskit_imageFilter_using_colorFilter.png', builder.build(),
+          region: region);
+    });
+
+    test('using a compose filter', () async {
+      final CkImageFilter blurFilter = CkImageFilter.blur(
+        sigmaX: 5,
+        sigmaY: 5,
+        tileMode: ui.TileMode.clamp,
+      );
+      final CkColorFilter colorFilter = createCkColorFilter(
+          const EngineColorFilter.mode(
+              ui.Color.fromARGB(255, 0, 255, 0), ui.BlendMode.srcIn))!;
+      final CkImageFilter colorImageFilter =
+          CkImageFilter.color(colorFilter: colorFilter);
+      final CkImageFilter composeFilter =
+          CkImageFilter.compose(outer: blurFilter, inner: colorImageFilter);
+
+      const ui.Rect region = ui.Rect.fromLTRB(0, 0, 500, 250);
+
+      final LayerSceneBuilder builder = LayerSceneBuilder();
+      builder.pushOffset(0, 0);
+
+      builder.pushImageFilter(composeFilter);
+
+      final CkPictureRecorder recorder = CkPictureRecorder();
+      final CkCanvas canvas = recorder.beginRecording(region);
+
+      canvas.drawCircle(
+        const ui.Offset(75, 125),
+        50,
+        CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0),
+      );
+      final CkPicture redCircle1 = recorder.endRecording();
+      builder.addPicture(ui.Offset.zero, redCircle1);
+      // The drawn red circle should actually be green and blurred.
+
+      await matchSceneGolden(
+          'canvaskit_composeImageFilter.png', builder.build(),
+          region: region);
     });
   });
 

lib/web_ui/test/ui/filters_test.dart

@@ -101,7 +101,7 @@ Future<void> testMain() async {
     );
     await drawTestImageWithPaint(ui.Paint()..imageFilter = filter);
     await matchGoldenFile('ui_filter_composed_imagefilters.png', region: region);
-  }, skip: !isSkwasm); // Only Skwasm implements composable filters right now.
+  }, skip: isHtml); // Only Skwasm and CanvasKit implement composable filters right now.
 
   test('compose with colorfilter', () async {
     final ui.ImageFilter filter = ui.ImageFilter.compose(
@@ -116,7 +116,7 @@ Future<void> testMain() async {
     );
     await drawTestImageWithPaint(ui.Paint()..imageFilter = filter);
     await matchGoldenFile('ui_filter_composed_colorfilter.png', region: region);
-  }, skip: !isSkwasm); // Only Skwasm implements composable filters right now.
+  }, skip: isHtml); // Only Skwasm and CanvasKit implements composable filters right now.
 
   test('color filter as image filter', () async {
     const ui.ColorFilter colorFilter = ui.ColorFilter.mode(