[Impeller] Fix overdraw in DrawRect geometry (flutter#174735)

Fixes flutter#174579

Vertex lists for stroked rects were fixed by being more careful about
the creation of the vertices so that they have no inherent overdraw.
These operations continue to use the fastest kNormal vertex mode but no
longer create rendering artifacts due to multiple triangles covering the
same area.

Author: flar

engine/src/flutter/impeller/display_list/aiks_dl_basic_unittests.cc

@@ -35,6 +35,75 @@ TEST_P(AiksTest, CanRenderColoredRect) {
   ASSERT_TRUE(OpenPlaygroundHere(builder.Build()));
 }
 
+namespace {
+using DrawRectProc =
+    std::function<void(DisplayListBuilder&, const DlRect&, const DlPaint&)>;
+
+sk_sp<DisplayList> MakeWideStrokedRects(Point scale,
+                                        const DrawRectProc& draw_rect) {
+  DisplayListBuilder builder;
+  builder.Scale(scale.x, scale.y);
+  builder.DrawColor(DlColor::kWhite(), DlBlendMode::kSrc);
+
+  DlPaint paint;
+  paint.setColor(DlColor::kBlue().withAlphaF(0.5));
+  paint.setDrawStyle(DlDrawStyle::kStroke);
+  paint.setStrokeWidth(30.0f);
+
+  // Each of these 3 sets of rects includes (with different join types):
+  // - One rectangle with a gap in the middle
+  // - One rectangle with no gap because it is too narrow
+  // - One rectangle with no gap because it is too short
+  paint.setStrokeJoin(DlStrokeJoin::kBevel);
+  draw_rect(builder, DlRect::MakeXYWH(100.0f, 100.0f, 100.0f, 100.0f), paint);
+  draw_rect(builder, DlRect::MakeXYWH(250.0f, 100.0f, 10.0f, 100.0f), paint);
+  draw_rect(builder, DlRect::MakeXYWH(100.0f, 250.0f, 100.0f, 10.0f), paint);
+
+  paint.setStrokeJoin(DlStrokeJoin::kRound);
+  draw_rect(builder, DlRect::MakeXYWH(350.0f, 100.0f, 100.0f, 100.0f), paint);
+  draw_rect(builder, DlRect::MakeXYWH(500.0f, 100.0f, 10.0f, 100.0f), paint);
+  draw_rect(builder, DlRect::MakeXYWH(350.0f, 250.0f, 100.0f, 10.0f), paint);
+
+  paint.setStrokeJoin(DlStrokeJoin::kMiter);
+  draw_rect(builder, DlRect::MakeXYWH(600.0f, 100.0f, 100.0f, 100.0f), paint);
+  draw_rect(builder, DlRect::MakeXYWH(750.0f, 100.0f, 10.0f, 100.0f), paint);
+  draw_rect(builder, DlRect::MakeXYWH(600.0f, 250.0f, 100.0f, 10.0f), paint);
+
+  // And now draw 3 rectangles with a stroke width so large that that it
+  // overlaps in the middle in both directions (horizontal/vertical).
+  paint.setStrokeWidth(110.0f);
+
+  paint.setStrokeJoin(DlStrokeJoin::kBevel);
+  draw_rect(builder, DlRect::MakeXYWH(100.0f, 400.0f, 100.0f, 100.0f), paint);
+
+  paint.setStrokeJoin(DlStrokeJoin::kRound);
+  draw_rect(builder, DlRect::MakeXYWH(350.0f, 400.0f, 100.0f, 100.0f), paint);
+
+  paint.setStrokeJoin(DlStrokeJoin::kMiter);
+  draw_rect(builder, DlRect::MakeXYWH(600.0f, 400.0f, 100.0f, 100.0f), paint);
+
+  return builder.Build();
+}
+}  // namespace
+
+TEST_P(AiksTest, CanRenderWideStrokedRectWithoutOverlap) {
+  ASSERT_TRUE(OpenPlaygroundHere(MakeWideStrokedRects(
+      GetContentScale(), [](DisplayListBuilder& builder, const DlRect& rect,
+                            const DlPaint& paint) {
+        // Draw the rect directly
+        builder.DrawRect(rect, paint);
+      })));
+}
+
+TEST_P(AiksTest, CanRenderWideStrokedRectPathWithoutOverlap) {
+  ASSERT_TRUE(OpenPlaygroundHere(MakeWideStrokedRects(
+      GetContentScale(), [](DisplayListBuilder& builder, const DlRect& rect,
+                            const DlPaint& paint) {
+        // Draw the rect as a Path
+        builder.DrawPath(DlPath::MakeRect(rect), paint);
+      })));
+}
+
 TEST_P(AiksTest, CanRenderImage) {
   DisplayListBuilder builder;
   DlPaint paint;