fix bug when picture is clipped out then comes back in

flutter · Sep 25, 2024 · 84d7489 · 84d7489
1 parent 91d631d
commit 84d7489
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/lib/web_ui/lib/src/engine/canvaskit/layer_visitor.dart b/lib/web_ui/lib/src/engine/canvaskit/layer_visitor.dart
@@ -17,8 +17,7 @@ import 'painting.dart';
 
 abstract class LayerVisitor {
   void visitRoot(RootLayer root);
-  void visitBackdropFilter(
-      BackdropFilterEngineLayer backdropFilter);
+  void visitBackdropFilter(BackdropFilterEngineLayer backdropFilter);
   void visitClipPath(ClipPathEngineLayer clipPath);
   void visitClipRect(ClipRectEngineLayer clipRect);
   void visitClipRRect(ClipRRectEngineLayer clipRRect);
@@ -92,8 +91,7 @@ class PrerollVisitor extends LayerVisitor {
   }
 
   @override
-  void visitBackdropFilter(
-      BackdropFilterEngineLayer backdropFilter) {
+  void visitBackdropFilter(BackdropFilterEngineLayer backdropFilter) {
     final ui.Rect childBounds = prerollChildren(backdropFilter);
     backdropFilter.paintBounds = childBounds.expandToInclude(cullRect);
   }
@@ -183,6 +181,9 @@ class PrerollVisitor extends LayerVisitor {
   @override
   void visitPicture(PictureLayer picture) {
     picture.paintBounds = picture.picture.cullRect.shift(picture.offset);
+    // The picture may have been culled on a previous frame, but has since
+    // scrolled back into the clip region. Reset the `isCulled` flag.
+    picture.isCulled = false;
     viewEmbedder?.prerollPicture(picture);
   }
 
@@ -254,8 +255,7 @@ class MeasureVisitor extends LayerVisitor {
   }
 
   @override
-  void visitBackdropFilter(
-      BackdropFilterEngineLayer backdropFilter) {
+  void visitBackdropFilter(BackdropFilterEngineLayer backdropFilter) {
     measureChildren(backdropFilter);
   }
 
@@ -467,8 +467,7 @@ class PaintVisitor extends LayerVisitor {
   }
 
   @override
-  void visitBackdropFilter(
-      BackdropFilterEngineLayer backdropFilter) {
+  void visitBackdropFilter(BackdropFilterEngineLayer backdropFilter) {
     final CkPaint paint = CkPaint()..blendMode = backdropFilter.blendMode;
 
     nWayCanvas.saveLayerWithFilter(

diff --git a/lib/web_ui/test/ui/scene_builder_test.dart b/lib/web_ui/test/ui/scene_builder_test.dart
@@ -334,6 +334,46 @@ Future<void> testMain() async {
       await matchGoldenFile('scene_builder_picture_clipped_out.png',
           region: region);
     });
+
+    test('picture clipped but scrolls back in', () async {
+      // Frame 1: Clip out the right circle
+      final ui.SceneBuilder sceneBuilder = ui.SceneBuilder();
+      sceneBuilder.pushClipRect(const ui.Rect.fromLTRB(0, 0, 125, 300));
+      // Save this offsetLayer to add back in so we are using the same
+      // picture layers on the next scene.
+      final ui.OffsetEngineLayer offsetLayer = sceneBuilder.pushOffset(0, 0);
+      sceneBuilder.addPicture(ui.Offset.zero, drawPicture((ui.Canvas canvas) {
+        canvas.drawCircle(const ui.Offset(50, 150), 50,
+            ui.Paint()..color = const ui.Color(0xFFFF0000));
+      }));
+      sceneBuilder.addPicture(ui.Offset.zero, drawPicture((ui.Canvas canvas) {
+        canvas.drawCircle(const ui.Offset(200, 150), 50,
+            ui.Paint()..color = const ui.Color(0xFFFF0000));
+      }));
+      sceneBuilder.pop();
+      sceneBuilder.pop();
+      await renderScene(sceneBuilder.build());
+
+      // Frame 2: Clip out the left circle
+      final ui.SceneBuilder sceneBuilder2 = ui.SceneBuilder();
+      sceneBuilder2.pushClipRect(const ui.Rect.fromLTRB(150, 0, 300, 300));
+      sceneBuilder2.addRetained(offsetLayer);
+      sceneBuilder2.pop();
+      sceneBuilder2.pop();
+      await renderScene(sceneBuilder2.build());
+
+      // Frame 3: Clip out the right circle again
+      final ui.SceneBuilder sceneBuilder3 = ui.SceneBuilder();
+      sceneBuilder3.pushClipRect(const ui.Rect.fromLTRB(0, 0, 125, 300));
+      sceneBuilder3.addRetained(offsetLayer);
+      sceneBuilder3.pop();
+      sceneBuilder3.pop();
+      await renderScene(sceneBuilder3.build());
+
+      await matchGoldenFile(
+          'scene_builder_picture_clipped_out_then_clipped_in.png',
+          region: region);
+    });
   });
 }