skip painting clipped out pictures (flutter#18204)

yjbanov · web-flow · commit 68bf137634b5 · 2020-05-08T11:14:30.000-07:00
diff --git a/lib/web_ui/lib/src/engine/surface/picture.dart b/lib/web_ui/lib/src/engine/surface/picture.dart
@@ -180,7 +180,11 @@ class PersistedStandardPicture extends PersistedPicture {
       return 1.0;
     } else {
       final BitmapCanvas oldCanvas = existingSurface._canvas;
-      if (!oldCanvas.doesFitBounds(_exactLocalCullRect)) {
+      if (oldCanvas == null) {
+        // We did not allocate a canvas last time. This can happen when the
+        // picture is completely clipped out of the view.
+        return 1.0;
+      } else if (!oldCanvas.doesFitBounds(_exactLocalCullRect)) {
         // The canvas needs to be resized before painting.
         return 1.0;
       } else {
@@ -547,7 +551,10 @@ abstract class PersistedPicture extends PersistedLeafSurface {
 
   void _applyPaint(PersistedPicture oldSurface) {
     final EngineCanvas oldCanvas = oldSurface?._canvas;
-    if (!picture.recordingCanvas.didDraw) {
+    if (!picture.recordingCanvas.didDraw || _optimalLocalCullRect.isEmpty) {
+      // The picture is empty, or it has been completely clipped out. Skip
+      // painting. This removes all the setup work and scaffolding objects
+      // that won't be useful for anything anyway.
       _recycleCanvas(oldCanvas);
       domRenderer.clearDom(rootElement);
       return;
@@ -642,7 +649,7 @@ abstract class PersistedPicture extends PersistedLeafSurface {
     super.debugValidate(validationErrors);
 
     if (picture.recordingCanvas.didDraw) {
-      if (debugCanvas == null) {
+      if (!_optimalLocalCullRect.isEmpty && debugCanvas == null) {
         validationErrors
             .add('$runtimeType has non-trivial picture but it has null canvas');
       }
diff --git a/lib/web_ui/test/engine/surface/scene_builder_test.dart b/lib/web_ui/test/engine/surface/scene_builder_test.dart
@@ -10,7 +10,7 @@ import 'package:ui/ui.dart';
 
 import 'package:test/test.dart';
 
-import 'matchers.dart';
+import '../../matchers.dart';
 
 void main() {
   group('SceneBuilder', () {
@@ -239,6 +239,31 @@ void main() {
     });
   });
 
+  test('skips painting picture when picture fully clipped out', () async {
+    final Picture picture = _drawPicture();
+
+    // Picture not clipped out, so we should see a `<flt-canvas>`
+    {
+      final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
+      builder.pushOffset(0, 0);
+      builder.addPicture(Offset.zero, picture);
+      builder.pop();
+      html.HtmlElement content = builder.build().webOnlyRootElement;
+      expect(content.querySelectorAll('flt-picture').single.children, isNotEmpty);
+    }
+
+    // Picture fully clipped out, so we should not see a `<flt-canvas>`
+    {
+      final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
+      builder.pushOffset(0, 0);
+      builder.pushClipRect(const Rect.fromLTRB(1000, 1000, 2000, 2000));
+      builder.addPicture(Offset.zero, picture);
+      builder.pop();
+      builder.pop();
+      html.HtmlElement content = builder.build().webOnlyRootElement;
+      expect(content.querySelectorAll('flt-picture').single.children, isEmpty);
+    }
+  });
 }
 
 typedef TestLayerBuilder = EngineLayer Function(
