[web] Fix RRect scaleRadii for negative width/height (#24140)

lib/web_ui/dev/goldens_lock.yaml

 repository: https://github.com/flutter/goldens.git
-revision: 99caeb1bcb8b7a856a78bd8d55816cc97db56112
+revision: 6839c709f859a1abe50e6322dfee17a3a3817c5c

lib/web_ui/lib/src/ui/geometry.dart

@@ -701,10 +701,12 @@ class RRect {
 
   RRect scaleRadii() {
     double scale = 1.0;
-    scale = _getMin(scale, blRadiusY, tlRadiusY, height);
-    scale = _getMin(scale, tlRadiusX, trRadiusX, width);
-    scale = _getMin(scale, trRadiusY, brRadiusY, height);
-    scale = _getMin(scale, brRadiusX, blRadiusX, width);
+    final double absWidth = width.abs();
+    final double absHeight = height.abs();
+    scale = _getMin(scale, blRadiusY, tlRadiusY, absHeight);
+    scale = _getMin(scale, tlRadiusX, trRadiusX, absWidth);
+    scale = _getMin(scale, trRadiusY, brRadiusY, absHeight);
+    scale = _getMin(scale, brRadiusX, blRadiusX, absWidth);
 
     if (scale < 1.0) {
       return RRect._raw(

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

@@ -52,6 +52,20 @@ void testMain() async {
     await matchGoldenFile('canvas_rrect_round_square.png', region: region);
   });
 
+  /// Regression test for https://github.com/flutter/flutter/issues/62631
+  test('round square with flipped left/right coordinates', () async {
+    canvas.translate(35, 320);
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+          Rect.fromLTRB(-30, -100, 30, -300),
+          Radius.circular(30)),
+      niceRRectPaint);
+    canvas.drawPath(Path()..moveTo(0, 0)..lineTo(20, 0), niceRRectPaint);
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_rrect_flipped.png',
+        region: Rect.fromLTWH(0, 0, 100, 200));
+  });
+
   test('round rect with big radius scale down smaller radius', () async {
     for (int i = 0; i < 5; i++) {
       final Radius growingRadius = Radius.circular(rRectRadii[i]);