From ff4f468558df8321786cf72f26a1ee900ccb332c Mon Sep 17 00:00:00 2001
From: Kingtous <kingtous@qq.com>
Date: Tue, 22 Aug 2023 14:26:18 +0800
Subject: [PATCH 1/2] fix: shader mask is painted incorrectly on shared
 offscreen canvas

---
 lib/web_ui/lib/src/engine/safe_browser_api.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/web_ui/lib/src/engine/safe_browser_api.dart b/lib/web_ui/lib/src/engine/safe_browser_api.dart
index f2674d93e4058..bce4efe36a86e 100644
--- a/lib/web_ui/lib/src/engine/safe_browser_api.dart
+++ b/lib/web_ui/lib/src/engine/safe_browser_api.dart
@@ -963,7 +963,7 @@ class OffScreenCanvas {
   }
 
   void resize(int requestedWidth, int requestedHeight) {
-    if(requestedWidth != width && requestedHeight != height) {
+    if(requestedWidth != width || requestedHeight != height) {
       width = requestedWidth;
       height = requestedHeight;
       if(offScreenCanvas != null) {

From 4cd4554caa2b19ed6ce67e2e1586e1ad98137ddc Mon Sep 17 00:00:00 2001
From: Kingtous <kingtous@qq.com>
Date: Wed, 23 Aug 2023 18:43:33 +0800
Subject: [PATCH 2/2] opt: add test

---
 .../html/shaders/gradient_golden_test.dart    | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/lib/web_ui/test/html/shaders/gradient_golden_test.dart b/lib/web_ui/test/html/shaders/gradient_golden_test.dart
index 0a67ed766bc2d..7196b6ebcf8c6 100644
--- a/lib/web_ui/test/html/shaders/gradient_golden_test.dart
+++ b/lib/web_ui/test/html/shaders/gradient_golden_test.dart
@@ -635,6 +635,63 @@ Future<void> testMain() async {
       region: region,
     );
   }, skip: isFirefox);
+
+  test('Paints two gradient with same width and different height', () async {
+    final RecordingCanvas canvas =
+        RecordingCanvas(const Rect.fromLTRB(0, 0, 400, 300));
+    canvas.save();
+
+    const List<Color> colors = <Color>[
+      Color(0xFF000000),
+      Color(0xFFFF3C38),
+      Color(0xFFFF8C42),
+      Color(0xFFFFF275),
+      Color(0xFF6699CC),
+      Color(0xFF656D78),
+    ];
+
+    const List<double> stops = <double>[0.0, 0.05, 0.4, 0.6, 0.9, 1.0];
+
+    final Matrix4 transform = Matrix4.identity()
+      ..translate(100, 150)
+      ..scale(0.3, 0.7)
+      ..rotateZ(0.5);
+
+    final GradientSweep sweepGradient = GradientSweep(
+      const Offset(0.5, 0.5),
+      colors,
+      stops,
+      TileMode.clamp,
+      0.0,
+      2 * math.pi,
+      transform.storage,
+    );
+
+    const double kBoxWidth = 150;
+    const double kBoxHeight1 = 40;
+    const double kBoxHeight2 = 80;
+
+    const Rect rectBounds1 = Rect.fromLTWH(10, 20, kBoxWidth, kBoxHeight1);
+    const Rect rectBounds2 = Rect.fromLTWH(10, 80, kBoxWidth, kBoxHeight2);
+    canvas.drawRect(
+      rectBounds1,
+      SurfacePaint()
+        ..shader = engineGradientToShader(sweepGradient, rectBounds1),
+    );
+    canvas.drawRect(
+      rectBounds2,
+      SurfacePaint()
+        ..shader = engineGradientToShader(sweepGradient, rectBounds2),
+    );
+
+    canvas.restore();
+    await canvasScreenshot(
+      canvas,
+      'radial_gradient_double_item',
+      canvasRect: screenRect,
+      region: region,
+    );
+  }, skip: isFirefox);
 }
 
 Shader engineGradientToShader(GradientSweep gradient, Rect rect) {