[canvaskit] Do not double-apply ImageFilter transform to children (flutter#46336)

harryterkelsen · web-flow · commit 1d2fd46d01da · 2023-09-27T17:12:19.000-07:00
Fixes an issue seen in the "widgets.image_filter_matrix" golden here: https://flutter-gold.skia.org/search?crs=github&issue=135249&patchsets=3 ## 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].  [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
diff --git a/lib/web_ui/lib/src/engine/canvaskit/layer.dart b/lib/web_ui/lib/src/engine/canvaskit/layer.dart
@@ -400,13 +400,14 @@ class ImageFilterEngineLayer extends ContainerLayer
 
   @override
   void preroll(PrerollContext prerollContext, Matrix4 matrix) {
-    final Matrix4 transform =
-        (_filter as CkManagedSkImageFilterConvertible).transform;
-    final Matrix4 childMatrix = matrix.multiplied(transform);
-    prerollContext.mutatorsStack.pushTransform(transform);
+    final Matrix4 childMatrix = Matrix4.copy(matrix);
+    childMatrix.translate(_offset.dx, _offset.dy);
+    prerollContext.mutatorsStack
+        .pushTransform(Matrix4.translationValues(_offset.dx, _offset.dy, 0.0));
     final ui.Rect childPaintBounds =
         prerollChildren(prerollContext, childMatrix);
-    _filter.imageFilter((SkImageFilter filter) {
+    (_filter as CkManagedSkImageFilterConvertible)
+        .imageFilter((SkImageFilter filter) {
       paintBounds =
           rectFromSkIRect(filter.getOutputBounds(toSkRect(childPaintBounds)));
     });
diff --git a/lib/web_ui/test/ui/filters_test.dart b/lib/web_ui/test/ui/filters_test.dart
@@ -78,6 +78,16 @@ Future<void> testMain() async {
     await matchGoldenFile('ui_filter_matrix_imagefilter.png', region: region);
   });
 
+  test('resizing matrix filter', () async {
+    await drawTestImageWithPaint(ui.Paint()
+      ..imageFilter = ui.ImageFilter.matrix(
+        Matrix4.diagonal3Values(0.5, 0.5, 1).toFloat64(),
+        filterQuality: ui.FilterQuality.high,
+      ));
+    await matchGoldenFile('ui_filter_matrix_imagefilter_scaled.png',
+        region: region);
+  });
+
   test('composed filters', () async {
     final ui.ImageFilter filter = ui.ImageFilter.compose(
       outer: ui.ImageFilter.matrix(
