improve sensitivity of BackdropFilter web tests (#20915)

Author: flar

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 86a069d478c3512e4a91baa07ecb421156e10fce
+revision: 57327a39aba333794a092d4e72777bb37102f8ba

lib/web_ui/test/golden_tests/engine/backdrop_filter_golden_test.dart

@@ -12,8 +12,6 @@ import 'package:ui/src/engine.dart';
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-final Rect region = Rect.fromLTWH(0, 0, 500, 500);
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }
@@ -35,22 +33,24 @@ void testMain() async {
   // the clip boundary around backdrop filter. However there should be only
   // one red dot since the other one should be blurred by filter.
   test('Background should only blur at ancestor clip boundary', () async {
+    final Rect region = Rect.fromLTWH(0, 0, 190, 130);
+
     final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
-    final Picture backgroundPicture = _drawBackground();
+    final Picture backgroundPicture = _drawBackground(region);
     builder.addPicture(Offset.zero, backgroundPicture);
 
     builder.pushClipRect(
-      const Rect.fromLTRB(10, 10, 300, 300),
+      const Rect.fromLTRB(10, 10, 180, 120),
     );
-    final Picture circles1 = _drawTestPictureWithCircles(30, 30);
+    final Picture circles1 = _drawTestPictureWithCircles(region, 30, 30);
     builder.addPicture(Offset.zero, circles1);
 
     builder.pushClipRect(
-      const Rect.fromLTRB(60, 10, 300, 300),
+      const Rect.fromLTRB(60, 10, 180, 120),
     );
     builder.pushBackdropFilter(ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
       oldLayer: null);
-    final Picture circles2 = _drawTestPictureWithCircles(90, 30);
+    final Picture circles2 = _drawTestPictureWithCircles(region, 90, 30);
     builder.addPicture(Offset.zero, circles2);
     builder.pop();
     builder.pop();
@@ -64,21 +64,23 @@ void testMain() async {
   });
 
   test('Background should only blur at ancestor clip boundary after move', () async {
+    final Rect region = Rect.fromLTWH(0, 0, 190, 130);
+
     final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
-    final Picture backgroundPicture = _drawBackground();
+    final Picture backgroundPicture = _drawBackground(region);
     builder.addPicture(Offset.zero, backgroundPicture);
     ClipRectEngineLayer clipEngineLayer = builder.pushClipRect(
-      const Rect.fromLTRB(10, 10, 300, 300),
+      const Rect.fromLTRB(10, 10, 180, 120),
     );
-    final Picture circles1 = _drawTestPictureWithCircles(30, 30);
+    final Picture circles1 = _drawTestPictureWithCircles(region, 30, 30);
     builder.addPicture(Offset.zero, circles1);
     ClipRectEngineLayer clipEngineLayer2 = builder.pushClipRect(
-      const Rect.fromLTRB(60, 10, 300, 300),
+      const Rect.fromLTRB(60, 10, 180, 120),
     );
     BackdropFilterEngineLayer oldBackdropFilterLayer =
         builder.pushBackdropFilter(ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
         oldLayer: null);
-    final Picture circles2 = _drawTestPictureWithCircles(90, 30);
+    final Picture circles2 = _drawTestPictureWithCircles(region, 90, 30);
     builder.addPicture(Offset.zero, circles2);
     builder.pop();
     builder.pop();
@@ -89,12 +91,12 @@ void testMain() async {
     final SurfaceSceneBuilder builder2 = SurfaceSceneBuilder();
     builder2.addPicture(Offset.zero, backgroundPicture);
     builder2.pushClipRect(
-      const Rect.fromLTRB(10, 10, 300, 300),
+      const Rect.fromLTRB(10, 10, 180, 120),
       oldLayer: clipEngineLayer
     );
     builder2.addPicture(Offset.zero, circles1);
     builder2.pushClipRect(
-      const Rect.fromLTRB(10, 75, 300, 300),
+      const Rect.fromLTRB(10, 75, 180, 120),
       oldLayer: clipEngineLayer2
     );
     builder2.pushBackdropFilter(ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
@@ -112,10 +114,10 @@ void testMain() async {
   });
 }
 
-Picture _drawTestPictureWithCircles(double offsetX, double offsetY) {
+Picture _drawTestPictureWithCircles(Rect region, double offsetX, double offsetY) {
   final EnginePictureRecorder recorder = PictureRecorder();
   final RecordingCanvas canvas =
-  recorder.beginRecording(const Rect.fromLTRB(0, 0, 400, 400));
+  recorder.beginRecording(region);
   canvas.drawCircle(
       Offset(offsetX + 10, offsetY + 10), 10, Paint()..style = PaintingStyle.fill);
   canvas.drawCircle(
@@ -139,12 +141,12 @@ Picture _drawTestPictureWithCircles(double offsetX, double offsetY) {
   return recorder.endRecording();
 }
 
-Picture _drawBackground() {
+Picture _drawBackground(Rect region) {
   final EnginePictureRecorder recorder = PictureRecorder();
   final RecordingCanvas canvas =
-  recorder.beginRecording(const Rect.fromLTRB(0, 0, 400, 400));
+  recorder.beginRecording(region);
   canvas.drawRect(
-      Rect.fromLTWH(8, 8, 400.0 - 16, 400.0 - 16),
+      region.deflate(8.0),
       Paint()
         ..style = PaintingStyle.fill
         ..color = Color(0xFFE0FFE0)