Paint SelectableFragments before text (#128375)

fixes: #104703

packages/flutter/lib/src/rendering/paragraph.dart

@@ -865,6 +865,13 @@ class RenderParagraph extends RenderBox with ContainerRenderObjectMixin<RenderBo
       }
       context.canvas.clipRect(bounds);
     }
+
+    if (_lastSelectableFragments != null) {
+      for (final _SelectableFragment fragment in _lastSelectableFragments!) {
+        fragment.paint(context, offset);
+      }
+    }
+
     _textPainter.paint(context.canvas, offset);
 
     paintInlineChildren(context, offset);
@@ -879,11 +886,6 @@ class RenderParagraph extends RenderBox with ContainerRenderObjectMixin<RenderBo
       }
       context.canvas.restore();
     }
-    if (_lastSelectableFragments != null) {
-      for (final _SelectableFragment fragment in _lastSelectableFragments!) {
-        fragment.paint(context, offset);
-      }
-    }
   }
 
   /// Returns the offset at which to paint the caret.

packages/flutter/test/rendering/paragraph_test.dart

@@ -805,10 +805,14 @@ void main() {
       expect(paintingContext.canvas.drawnRect, isNull);
       expect(paintingContext.canvas.drawnRectPaint, isNull);
       selectionParagraph(paragraph, const TextPosition(offset: 1), const TextPosition(offset: 5));
+
+      paintingContext.canvas.clear();
       paragraph.paint(paintingContext, Offset.zero);
       expect(paintingContext.canvas.drawnRect, const Rect.fromLTWH(14.0, 0.0, 56.0, 14.0));
       expect(paintingContext.canvas.drawnRectPaint!.style, PaintingStyle.fill);
       expect(paintingContext.canvas.drawnRectPaint!.color, selectionColor);
+      // Selection highlight is painted before text.
+      expect(paintingContext.canvas.drawnItemTypes, <Type>[Rect, ui.Paragraph]);
 
       selectionParagraph(paragraph, const TextPosition(offset: 2), const TextPosition(offset: 4));
       paragraph.paint(paintingContext, Offset.zero);
@@ -1293,15 +1297,24 @@ void main() {
 class MockCanvas extends Fake implements Canvas {
   Rect? drawnRect;
   Paint? drawnRectPaint;
+  List<Type> drawnItemTypes=<Type>[];
 
   @override
   void drawRect(Rect rect, Paint paint) {
     drawnRect = rect;
     drawnRectPaint = paint;
+    drawnItemTypes.add(Rect);
   }
 
   @override
-  void drawParagraph(ui.Paragraph paragraph, Offset offset) { }
+  void drawParagraph(ui.Paragraph paragraph, Offset offset) {
+    drawnItemTypes.add(ui.Paragraph);
+  }
+  void clear() {
+    drawnRect = null;
+    drawnRectPaint = null;
+    drawnItemTypes.clear();
+  }
 }
 
 class MockPaintingContext extends Fake implements PaintingContext {

packages/flutter/test/widgets/default_colors_test.dart

@@ -83,7 +83,7 @@ void main() {
                     child: Align(
                       key: key,
                       alignment: Alignment.topLeft,
-                      child: const Text('Éxp', textDirection: TextDirection.ltr, style: TextStyle(fontSize: _crispText)),
+                      child: const Text('Éxp', textDirection: TextDirection.ltr, style: TextStyle(fontSize: _crispText, color: Color(0xFF000000))),
                     ),
                   ),
                 ),
@@ -97,7 +97,7 @@ void main() {
     await _expectColors(
       tester,
       find.byType(Align),
-      <Color>{ const Color(0xFFFFFFFF) },
+      <Color>{ const Color(0xFFFFFFFF), const Color(0xFF000000) },
     );
     // fake a "select all" event to select the text
     Actions.invoke(key.currentContext!, const SelectAllTextIntent(SelectionChangedCause.keyboard));
@@ -105,13 +105,13 @@ void main() {
     await _expectColors(
       tester,
       find.byType(Align),
-      <Color>{ const Color(0xFFFFFFFF), const Color(0xFFBFBFBF) }, // 0x80808080 blended with 0xFFFFFFFF
+      <Color>{ const Color(0xFFFFFFFF), const Color(0xFF000000), const Color(0xFFBFBFBF) }, // 0x80808080 blended with 0xFFFFFFFF
       <Offset, Color>{
-        Offset.zero: const Color(0xFFBFBFBF), // the selected text
-        const Offset(10, 10): const Color(0xFFBFBFBF), // the selected text
+        Offset.zero: const Color(0xFF000000), // the selected text
+        const Offset(10, 10): const Color(0xFF000000), // the selected text
         const Offset(50, 95): const Color(0xFFBFBFBF), // the selected background (under the É)
         const Offset(250, 50): const Color(0xFFBFBFBF), // the selected background (above the p)
-        const Offset(250, 95): const Color(0xFFBFBFBF), // the selected text (the p)
+        const Offset(250, 95): const Color(0xFF000000), // the selected text (the p)
         const Offset(400, 400): const Color(0xFFFFFFFF), // the background
         const Offset(799, 599): const Color(0xFFFFFFFF), // the background
       },