Add benchmark for ColorFilter raster cache (#99542)

Author: wangying3426

.ci.yaml

@@ -1515,6 +1515,18 @@ targets:
       task_name: color_filter_and_fade_perf__timeline_summary
     scheduler: luci
 
+  - name: Linux_android color_filter_cache_perf__e2e_summary
+    bringup: true
+    recipe: devicelab/devicelab_drone
+    presubmit: false
+    timeout: 60
+    properties:
+      tags: >
+        ["devicelab","android","linux"]
+      task_name: color_filter_cache_perf__e2e_summary
+      benchmark: "true"
+    scheduler: luci
+
   - name: Linux_android complex_layout_android__compile
     recipe: devicelab/devicelab_drone
     presubmit: false

TESTOWNERS

@@ -23,6 +23,7 @@
 /dev/devicelab/bin/tasks/basic_material_app_android__compile.dart @zanderso @flutter/tool
 /dev/devicelab/bin/tasks/codegen_integration.dart @zanderso @flutter/tool
 /dev/devicelab/bin/tasks/color_filter_and_fade_perf__e2e_summary.dart @zanderso @flutter/engine
+/dev/devicelab/bin/tasks/color_filter_cache_perf__e2e_summary.dart @flar @flutter/engine
 /dev/devicelab/bin/tasks/complex_layout_android__compile.dart @zanderso @flutter/tool
 /dev/devicelab/bin/tasks/complex_layout_android__scroll_smoothness.dart @zanderso @flutter/engine
 /dev/devicelab/bin/tasks/complex_layout_scroll_perf__devtools_memory.dart @zanderso @flutter/engine

dev/benchmarks/macrobenchmarks/lib/common.dart

@@ -15,6 +15,7 @@ const String kTextRouteName = '/text';
 const String kFullscreenTextRouteName = '/fullscreen_text';
 const String kAnimatedPlaceholderRouteName = '/animated_placeholder';
 const String kColorFilterAndFadeRouteName = '/color_filter_and_fade';
+const String kColorFilterCacheRouteName = '/color_filter_cache';
 const String kFadingChildAnimationRouteName = '/fading_child_animation';
 const String kImageFilteredTransformAnimationRouteName = '/imagefiltered_transform_animation';
 const String kMultiWidgetConstructionRouteName = '/multi_widget_construction';

dev/benchmarks/macrobenchmarks/lib/main.dart

@@ -11,6 +11,7 @@ import 'src/animated_placeholder.dart';
 import 'src/animation_with_microtasks.dart';
 import 'src/backdrop_filter.dart';
 import 'src/color_filter_and_fade.dart';
+import 'src/color_filter_cache.dart';
 import 'src/cubic_bezier.dart';
 import 'src/cull_opacity.dart';
 import 'src/filtered_child_animation.dart';
@@ -55,6 +56,7 @@ class MacrobenchmarksApp extends StatelessWidget {
         kFullscreenTextRouteName: (BuildContext context) => const TextFieldPage(),
         kAnimatedPlaceholderRouteName: (BuildContext context) => const AnimatedPlaceholderPage(),
         kColorFilterAndFadeRouteName: (BuildContext context) => const ColorFilterAndFadePage(),
+        kColorFilterCacheRouteName: (BuildContext context) => const ColorFilterCachePage(),
         kFadingChildAnimationRouteName: (BuildContext context) => const FilteredChildAnimationPage(FilterType.opacity),
         kImageFilteredTransformAnimationRouteName: (BuildContext context) => const FilteredChildAnimationPage(FilterType.rotateFilter),
         kMultiWidgetConstructionRouteName: (BuildContext context) => const MultiWidgetConstructTable(10, 20),
@@ -166,6 +168,13 @@ class HomePage extends StatelessWidget {
               Navigator.pushNamed(context, kColorFilterAndFadeRouteName);
             },
           ),
+          ElevatedButton(
+            key: const Key(kColorFilterCacheRouteName),
+            child: const Text('Color Filter Cache'),
+            onPressed: () {
+              Navigator.pushNamed(context, kColorFilterCacheRouteName);
+            },
+          ),
           ElevatedButton(
             key: const Key(kFadingChildAnimationRouteName),
             child: const Text('Fading Child Animation'),

dev/benchmarks/macrobenchmarks/lib/src/color_filter_cache.dart

@@ -0,0 +1,77 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+class ColorFilterCachePage extends StatefulWidget {
+  const ColorFilterCachePage({Key? key}) : super(key: key);
+  @override
+  State<ColorFilterCachePage> createState() => _ColorFilterCachePageState();
+}
+
+class _ColorFilterCachePageState extends State<ColorFilterCachePage>
+    with TickerProviderStateMixin {
+  final ScrollController _controller = ScrollController();
+  @override
+  void initState() {
+    super.initState();
+    _controller.addListener(() {
+      if (_controller.offset < 20) {
+        _controller.animateTo(150, duration: const Duration(milliseconds: 1000), curve: Curves.ease);
+      } else if (_controller.offset > 130) {
+        _controller.animateTo(0, duration: const Duration(milliseconds: 1000), curve: Curves.ease);
+      }
+    });
+    Timer(const Duration(milliseconds: 1000), () {
+      _controller.animateTo(150, duration: const Duration(milliseconds: 1000), curve: Curves.ease);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.lightBlue,
+      body: ListView(
+        controller: _controller,
+        children: <Widget>[
+          const SizedBox(height: 150),
+          ColorFiltered(
+            colorFilter: ColorFilter.mode(Colors.green[300]!, BlendMode.luminosity),
+            child: Container(
+              clipBehavior: Clip.antiAlias,
+              decoration: const BoxDecoration(boxShadow: <BoxShadow>[
+                BoxShadow(
+                  color: Colors.red,
+                  blurRadius: 5.0,
+                ),
+              ], color: Colors.blue, backgroundBlendMode: BlendMode.luminosity),
+              child: Column(
+                children: <Widget>[
+                  const Text('Color Filter Cache Pref Test'),
+                  Image.asset(
+                    'food/butternut_squash_soup.png',
+                    package: 'flutter_gallery_assets',
+                    fit: BoxFit.cover,
+                    width: 330,
+                    height: 210,
+                  ),
+                  const Text('Color Filter Cache Pref Test'),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(height: 1000),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}

dev/benchmarks/macrobenchmarks/test/color_filter_cache_perf_e2e.dart

@@ -0,0 +1,16 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:macrobenchmarks/common.dart';
+
+import 'util.dart';
+
+void main() {
+  macroPerfTestE2E(
+    'color_filter_cache_perf',
+    kColorFilterCacheRouteName,
+    pageDelay: const Duration(seconds: 1),
+    duration: const Duration(seconds: 10),
+  );
+}

dev/devicelab/bin/tasks/color_filter_cache_perf__e2e_summary.dart

@@ -0,0 +1,14 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+
+import 'package:flutter_devicelab/framework/devices.dart';
+import 'package:flutter_devicelab/framework/framework.dart';
+import 'package:flutter_devicelab/tasks/perf_tests.dart';
+
+Future<void> main() async {
+  deviceOperatingSystem = DeviceOperatingSystem.android;
+  await task(createColorFilterCachePerfE2ETest());
+}

dev/devicelab/lib/tasks/perf_tests.dart

@@ -371,6 +371,13 @@ TaskFunction createColorFilterAndFadePerfE2ETest() {
   ).run;
 }
 
+TaskFunction createColorFilterCachePerfE2ETest() {
+  return PerfTest.e2e(
+    '${flutterDirectory.path}/dev/benchmarks/macrobenchmarks',
+    'test/color_filter_cache_perf_e2e.dart',
+  ).run;
+}
+
 TaskFunction createFadingChildAnimationPerfTest() {
   return PerfTest(
     '${flutterDirectory.path}/dev/benchmarks/macrobenchmarks',