[web] Fixing clipping not being applied when height is zero (#27771)

Author: mdebbar

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: f1baad46498ce1a754a15d02249827bb042b446b
+revision: 8517dd15b8eb62e07ecde82170f8a4016566ea49

lib/web_ui/lib/src/engine/html/recording_canvas.dart

@@ -1832,19 +1832,19 @@ class _PaintBounds {
     }
 
     if (_clipRectInitialized) {
-      if (transformedPointLeft > _currentClipRight) {
+      if (transformedPointLeft >= _currentClipRight) {
         command.isClippedOut = true;
         return;
       }
-      if (transformedPointRight < _currentClipLeft) {
+      if (transformedPointRight <= _currentClipLeft) {
         command.isClippedOut = true;
         return;
       }
-      if (transformedPointTop > _currentClipBottom) {
+      if (transformedPointTop >= _currentClipBottom) {
         command.isClippedOut = true;
         return;
       }
-      if (transformedPointBottom < _currentClipTop) {
+      if (transformedPointBottom <= _currentClipTop) {
         command.isClippedOut = true;
         return;
       }

lib/web_ui/test/html/clip_op_golden_test.dart

@@ -6,29 +6,30 @@ import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart';
+
+import 'paragraph/helper.dart';
 import 'screenshot.dart';
 
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }
 
 Future<void> testMain() async {
-  setUp(() async {
-    debugEmulateFlutterTesterEnvironment = true;
-  });
+  setUpStableTestFonts();
 
   /// Regression test for https://github.com/flutter/flutter/issues/64734.
   test('Clips using difference', () async {
+    const Offset shift = Offset(8, 8);
     const Rect region = Rect.fromLTRB(0, 0, 400, 300);
     final RecordingCanvas canvas = RecordingCanvas(region);
-    const Rect titleRect = Rect.fromLTWH(20, 0, 50, 20);
+    final Rect titleRect = const Rect.fromLTWH(20, 0, 50, 20).shift(shift);
     final SurfacePaint paint = SurfacePaint()
       ..style = PaintingStyle.stroke
       ..color = const Color(0xff000000)
       ..strokeWidth = 1;
     canvas.save();
     try {
-      final Rect borderRect = Rect.fromLTRB(0, 10, region.width, region.height);
+      final Rect borderRect = Rect.fromLTRB(0, 10, region.width, region.height).shift(shift);
       canvas.clipRect(titleRect, ClipOp.difference);
       canvas.drawRect(borderRect, paint);
     } finally {
@@ -38,4 +39,50 @@ Future<void> testMain() async {
     await canvasScreenshot(canvas, 'clip_op_difference',
         region: const Rect.fromLTRB(0, 0, 420, 360));
   });
+
+  /// Regression test for https://github.com/flutter/flutter/issues/86345
+  test('Clips with zero width or height', () async {
+    const Rect region = Rect.fromLTRB(0, 0, 400, 300);
+    final RecordingCanvas canvas = RecordingCanvas(region);
+
+    final SurfacePaint paint = SurfacePaint()
+      ..style = PaintingStyle.fill
+      ..color = const Color(0xff00ff00);
+    final SurfacePaint borderPaint = SurfacePaint()
+      ..style = PaintingStyle.stroke
+      ..color = const Color(0xffff0000)
+      ..strokeWidth = 1;
+
+    for (int i = 0; i < 3; i++) {
+      for (int j = 0; j < 3; j++) {
+        final double x = 10 + i * 70;
+        final double y = 10 + j * 70;
+        canvas.save();
+        // Clip.
+        canvas.clipRect(
+          Rect.fromLTWH(x, y, i * 25, j * 25),
+          ClipOp.intersect,
+        );
+        // Draw the blue (clipped) rect.
+        canvas.drawRect(
+          Rect.fromLTWH(x, y, 50, 50),
+          paint,
+        );
+        final Paragraph p = plain(
+          EngineParagraphStyle(fontFamily: 'Roboto', fontSize: 34),
+          '23',
+          textStyle: EngineTextStyle.only(color: const Color(0xff0000ff)),
+        );
+        p.layout(const ParagraphConstraints(width: double.infinity));
+        canvas.drawParagraph(p, Offset(x, y));
+        canvas.restore();
+        // Draw the red border.
+        canvas.drawRect(
+          Rect.fromLTWH(x, y, 50, 50),
+          borderPaint,
+        );
+      }
+    }
+    await canvasScreenshot(canvas, 'clip_zero_width_height', region: region);
+  });
 }