Improve check to render (or not) a DRRect when inner falls outside of outer on RecordingCanvas

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

@@ -228,12 +228,20 @@ class RecordingCanvas {
   }
 
   void drawDRRect(ui.RRect outer, ui.RRect inner, ui.Paint paint) {
-    // If inner rect is not contained inside outer, flutter engine skips
-    // painting rectangle.
-    if (!(outer.contains(ui.Offset(inner.left, inner.top)) &&
-        outer.contains(ui.Offset(inner.right, inner.bottom)))) {
+    // Ensure inner is fully contained within outer, by comparing its
+    // defining points (including its border radius)
+    final ui.RRect scaled = inner.scaleRadii(); // Measure the same rrect that is going to be painted
+    if (!(outer.contains(ui.Offset(scaled.left, scaled.top + scaled.tlRadiusY))
+        && outer.contains(ui.Offset(scaled.left + scaled.tlRadiusX, scaled.top)) // Left-Top
+        && outer.contains(ui.Offset(scaled.right - scaled.trRadiusX, scaled.top))
+        && outer.contains(ui.Offset(scaled.right, scaled.top + scaled.trRadiusY)) // Right-Top
+        && outer.contains(ui.Offset(scaled.right, scaled.bottom - scaled.brRadiusY))
+        && outer.contains(ui.Offset(scaled.right - scaled.brRadiusX, scaled.bottom)) // Right-Bottom
+        && outer.contains(ui.Offset(scaled.left + scaled.blRadiusX, scaled.bottom))
+        && outer.contains(ui.Offset(scaled.left, scaled.bottom - scaled.blRadiusY)))) { // Left-Bottom
       return;
     }
+
     _hasArbitraryPaint = true;
     _didDraw = true;
     final double strokeWidth =

lib/web_ui/test/engine/recording_canvas_test.dart

@@ -0,0 +1,59 @@
+// Copyright 2013 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:ui/ui.dart';
+import 'package:ui/src/engine.dart';
+import 'package:test/test.dart';
+
+import '../mock_engine_canvas.dart';
+
+void main() {
+
+  RecordingCanvas underTest;
+  MockEngineCanvas mockCanvas;
+
+  setUp(() {
+    underTest = RecordingCanvas(Rect.largest);
+    mockCanvas = MockEngineCanvas();
+  });
+
+  group('drawDRRect', () {
+    final RRect rrect = RRect.fromLTRBR(10, 10, 50, 50, Radius.circular(3));
+    final Paint somePaint = Paint()..color = const Color(0xFFFF0000);
+    test('Happy case', () {
+      underTest.drawDRRect(rrect, rrect.deflate(1), somePaint);
+      underTest.apply(mockCanvas);
+      // Expect drawDRRect to be called
+      expect(mockCanvas.methodCallLog.length, equals(1));
+      MockCanvasCall mockCall = mockCanvas.methodCallLog[0];
+      expect(mockCall.methodName, equals('drawDRRect'));
+      expect(mockCall.arguments, equals({
+          'outer': rrect,
+          'inner': rrect.deflate(1),
+          'paint': somePaint.webOnlyPaintData,
+        }));
+    });
+
+    test('Inner RRect > Outer RRect', () {
+      underTest.drawDRRect(rrect, rrect.inflate(1), somePaint);
+      underTest.apply(mockCanvas);
+      // Expect nothing to be called
+      expect(mockCanvas.methodCallLog.length, equals(0));
+    });
+
+    test('Inner RRect not completely inside Outer RRect', () {
+      underTest.drawDRRect(rrect, rrect.deflate(1).shift(const Offset(0.0, 10)), somePaint);
+      underTest.apply(mockCanvas);
+      // Expect nothing to be called
+      expect(mockCanvas.methodCallLog.length, equals(0));
+    });
+
+    test('Inner RRect same as Outer RRect', () {
+      underTest.drawDRRect(rrect, rrect, somePaint);
+      underTest.apply(mockCanvas);
+      // Expect nothing to be called
+      expect(mockCanvas.methodCallLog.length, equals(0));
+    });
+  });
+}