material_test.dart 25.2 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
// @dart = 2.8

7
import 'package:flutter/material.dart';
8
import 'package:flutter/painting.dart';
9
import 'package:flutter/rendering.dart';
10 11
import 'package:flutter_test/flutter_test.dart';

12
import '../rendering/mock_canvas.dart';
13
import '../widgets/test_border.dart' show TestBorder;
14

15
class NotifyMaterial extends StatelessWidget {
16
  const NotifyMaterial({ Key key }) : super(key: key);
17 18
  @override
  Widget build(BuildContext context) {
19 20
    LayoutChangedNotification().dispatch(context);
    return Container();
21 22 23
  }
}

24 25 26
Widget buildMaterial({
  double elevation = 0.0,
  Color shadowColor = const Color(0xFF00FF00),
27
  Color color = const Color(0xFF0000FF),
28
}) {
29 30
  return Center(
    child: SizedBox(
31 32
      height: 100.0,
      width: 100.0,
33
      child: Material(
34
        color: color,
35
        shadowColor: shadowColor,
36
        elevation: elevation,
37
        shape: const CircleBorder(),
38 39 40 41 42
      ),
    ),
  );
}

43
RenderPhysicalShape getModel(WidgetTester tester) {
44
  return tester.renderObject(find.byType(PhysicalShape));
45 46
}

47 48 49
class PaintRecorder extends CustomPainter {
  PaintRecorder(this.log);

50
  final List<Size> log;
51 52 53 54

  @override
  void paint(Canvas canvas, Size size) {
    log.add(size);
55
    final Paint paint = Paint()..color = const Color(0xFF0000FF);
56
    canvas.drawRect(Offset.zero & size, paint);
57 58 59 60 61 62
  }

  @override
  bool shouldRepaint(PaintRecorder oldDelegate) => false;
}

63 64 65 66 67 68
class ElevationColor {
  const ElevationColor(this.elevation, this.color);
  final double elevation;
  final Color color;
}

69
void main() {
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
  testWidgets('default Material debugFillProperties', (WidgetTester tester) async {
    final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
    const Material().debugFillProperties(builder);

    final List<String> description = builder.properties
      .where((DiagnosticsNode node) => !node.isFiltered(DiagnosticLevel.info))
      .map((DiagnosticsNode node) => node.toString())
      .toList();

    expect(description, <String>['type: canvas']);
  });

  testWidgets('Material implements debugFillProperties', (WidgetTester tester) async {
    final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
    const Material(
      type: MaterialType.canvas,
      color: Color(0xFFFFFFFF),
      textStyle: TextStyle(color: Color(0xff00ff00)),
      borderRadius: BorderRadiusDirectional.all(Radius.circular(10)),
    ).debugFillProperties(builder);

    final List<String> description = builder.properties
      .where((DiagnosticsNode node) => !node.isFiltered(DiagnosticLevel.info))
      .map((DiagnosticsNode node) => node.toString())
      .toList();

    expect(description, <String>[
      'type: canvas',
      'color: Color(0xffffffff)',
      'textStyle.inherit: true',
      'textStyle.color: Color(0xff00ff00)',
101
      'borderRadius: BorderRadiusDirectional.circular(10.0)',
102 103 104
    ]);
  });

105
  testWidgets('LayoutChangedNotification test', (WidgetTester tester) async {
106
    await tester.pumpWidget(
107
      const Material(
108
        child: NotifyMaterial(),
109
      ),
110 111
    );
  });
112 113

  testWidgets('ListView scroll does not repaint', (WidgetTester tester) async {
114
    final List<Size> log = <Size>[];
115 116

    await tester.pumpWidget(
117
      Directionality(
118
        textDirection: TextDirection.ltr,
119
        child: Column(
120
          children: <Widget>[
121
            SizedBox(
122 123
              width: 150.0,
              height: 150.0,
124 125
              child: CustomPaint(
                painter: PaintRecorder(log),
126
              ),
127
            ),
128 129 130
            Expanded(
              child: Material(
                child: Column(
131
                  children: <Widget>[
132 133
                    Expanded(
                      child: ListView(
134
                        children: <Widget>[
135
                          Container(
136 137 138 139 140
                            height: 2000.0,
                            color: const Color(0xFF00FF00),
                          ),
                        ],
                      ),
141
                    ),
142
                    SizedBox(
143 144
                      width: 100.0,
                      height: 100.0,
145 146
                      child: CustomPaint(
                        painter: PaintRecorder(log),
147
                      ),
148
                    ),
149 150
                  ],
                ),
151 152
              ),
            ),
153 154
          ],
        ),
155 156 157 158 159 160 161 162 163 164 165
      ),
    );

    // We paint twice because we have two CustomPaint widgets in the tree above
    // to test repainting both inside and outside the Material widget.
    expect(log, equals(<Size>[
      const Size(150.0, 150.0),
      const Size(100.0, 100.0),
    ]));
    log.clear();

166
    await tester.drag(find.byType(ListView), const Offset(0.0, -300.0));
167 168 169 170
    await tester.pump();

    expect(log, isEmpty);
  });
171 172

  testWidgets('Shadows animate smoothly', (WidgetTester tester) async {
173 174
    // This code verifies that the PhysicalModel's elevation animates over
    // a kThemeChangeDuration time interval.
175

176
    await tester.pumpWidget(buildMaterial(elevation: 0.0));
177
    final RenderPhysicalShape modelA = getModel(tester);
178 179
    expect(modelA.elevation, equals(0.0));

180
    await tester.pumpWidget(buildMaterial(elevation: 9.0));
181
    final RenderPhysicalShape modelB = getModel(tester);
182
    expect(modelB.elevation, equals(0.0));
183 184

    await tester.pump(const Duration(milliseconds: 1));
185
    final RenderPhysicalShape modelC = getModel(tester);
186
    expect(modelC.elevation, closeTo(0.0, 0.001));
187 188

    await tester.pump(kThemeChangeDuration ~/ 2);
189
    final RenderPhysicalShape modelD = getModel(tester);
190
    expect(modelD.elevation, isNot(closeTo(0.0, 0.001)));
191 192

    await tester.pump(kThemeChangeDuration);
193
    final RenderPhysicalShape modelE = getModel(tester);
194
    expect(modelE.elevation, equals(9.0));
195
  });
196 197

  testWidgets('Shadow colors animate smoothly', (WidgetTester tester) async {
198
    // This code verifies that the PhysicalModel's shadowColor animates over
199 200 201
    // a kThemeChangeDuration time interval.

    await tester.pumpWidget(buildMaterial(shadowColor: const Color(0xFF00FF00)));
202
    final RenderPhysicalShape modelA = getModel(tester);
203 204 205
    expect(modelA.shadowColor, equals(const Color(0xFF00FF00)));

    await tester.pumpWidget(buildMaterial(shadowColor: const Color(0xFFFF0000)));
206
    final RenderPhysicalShape modelB = getModel(tester);
207 208 209
    expect(modelB.shadowColor, equals(const Color(0xFF00FF00)));

    await tester.pump(const Duration(milliseconds: 1));
210
    final RenderPhysicalShape modelC = getModel(tester);
211
    expect(modelC.shadowColor, within<Color>(distance: 1, from: const Color(0xFF00FF00)));
212 213

    await tester.pump(kThemeChangeDuration ~/ 2);
214
    final RenderPhysicalShape modelD = getModel(tester);
215
    expect(modelD.shadowColor, isNot(within<Color>(distance: 1, from: const Color(0xFF00FF00))));
216 217

    await tester.pump(kThemeChangeDuration);
218
    final RenderPhysicalShape modelE = getModel(tester);
219 220
    expect(modelE.shadowColor, equals(const Color(0xFFFF0000)));
  });
221

222 223 224 225 226 227 228 229 230
  group('Elevation Overlay', () {

    testWidgets('applyElevationOverlayColor set to false does not change surface color', (WidgetTester tester) async {
      const Color surfaceColor = Color(0xFF121212);
      await tester.pumpWidget(Theme(
          data: ThemeData(
            applyElevationOverlayColor: false,
            colorScheme: const ColorScheme.dark().copyWith(surface: surfaceColor),
          ),
231 232
          child: buildMaterial(color: surfaceColor, elevation: 8.0),
      ));
233 234 235 236
      final RenderPhysicalShape model = getModel(tester);
      expect(model.color, equals(surfaceColor));
    });

237 238 239 240
    testWidgets('applyElevationOverlayColor set to true applies a semi-transparent onSurface color to the surface color', (WidgetTester tester) async {
      const Color surfaceColor = Color(0xFF121212);
      const Color onSurfaceColor = Colors.greenAccent;

241
      // The colors we should get with a base surface color of 0xFF121212 for
242
      // and a given elevation
243 244
      const List<ElevationColor> elevationColors = <ElevationColor>[
        ElevationColor(0.0, Color(0xFF121212)),
245 246 247 248 249 250 251 252 253
        ElevationColor(1.0, Color(0xFF161D19)),
        ElevationColor(2.0, Color(0xFF18211D)),
        ElevationColor(3.0, Color(0xFF19241E)),
        ElevationColor(4.0, Color(0xFF1A2620)),
        ElevationColor(6.0, Color(0xFF1B2922)),
        ElevationColor(8.0, Color(0xFF1C2C24)),
        ElevationColor(12.0, Color(0xFF1D3027)),
        ElevationColor(16.0, Color(0xFF1E3329)),
        ElevationColor(24.0, Color(0xFF20362B)),
254 255
      ];

256
      for (final ElevationColor test in elevationColors) {
257 258 259 260
        await tester.pumpWidget(
            Theme(
              data: ThemeData(
                applyElevationOverlayColor: true,
261 262 263 264
                colorScheme: const ColorScheme.dark().copyWith(
                  surface: surfaceColor,
                  onSurface: onSurfaceColor,
                ),
265 266 267 268 269
              ),
              child: buildMaterial(
                color: surfaceColor,
                elevation: test.elevation,
              ),
270
            ),
271 272 273 274 275 276 277
        );
        await tester.pumpAndSettle(); // wait for the elevation animation to finish
        final RenderPhysicalShape model = getModel(tester);
        expect(model.color, equals(test.color));
      }
    });

278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295
    testWidgets('overlay will not apply to materials using a non-surface color', (WidgetTester tester) async {
      await tester.pumpWidget(
        Theme(
          data: ThemeData(
            applyElevationOverlayColor: true,
            colorScheme: const ColorScheme.dark(),
          ),
          child: buildMaterial(
            color: Colors.cyan,
            elevation: 8.0,
          ),
        ),
      );
      final RenderPhysicalShape model = getModel(tester);
      // Shouldn't change, as it is not using a ColorScheme.surface color
      expect(model.color, equals(Colors.cyan));
    });

296
    testWidgets('overlay will not apply to materials using a light theme', (WidgetTester tester) async {
297 298 299 300
      await tester.pumpWidget(
          Theme(
            data: ThemeData(
              applyElevationOverlayColor: true,
301
              colorScheme: const ColorScheme.light(),
302 303
            ),
            child: buildMaterial(
304 305
              color: Colors.cyan,
              elevation: 8.0,
306
            ),
307
          ),
308 309
      );
      final RenderPhysicalShape model = getModel(tester);
310
      // Shouldn't change, as it was under a light color scheme.
311 312 313 314 315
      expect(model.color, equals(Colors.cyan));
    });

  });

316
  group('Transparency clipping', () {
317
    testWidgets('No clip by default', (WidgetTester tester) async {
318
      final GlobalKey materialKey = GlobalKey();
319
      await tester.pumpWidget(
320
          Material(
321 322 323
            key: materialKey,
            type: MaterialType.transparency,
            child: const SizedBox(width: 100.0, height: 100.0),
324
          ),
325 326 327
      );

      expect(find.byKey(materialKey), hasNoImmediateClip);
328
    });
329

330 331 332 333 334 335 336 337 338
    testWidgets('Null clipBehavior asserts', (WidgetTester tester) async {
      final GlobalKey materialKey = GlobalKey();
      Future<void> doPump() async {
        await tester.pumpWidget(
            Material(
              key: materialKey,
              type: MaterialType.transparency,
              child: const SizedBox(width: 100.0, height: 100.0),
              clipBehavior: null,
339
            ),
340 341 342 343 344 345
        );
      }

      expect(() async => doPump(), throwsAssertionError);
    });

346
    testWidgets('clips to bounding rect by default given Clip.antiAlias', (WidgetTester tester) async {
347
      final GlobalKey materialKey = GlobalKey();
348
      await tester.pumpWidget(
349
        Material(
350 351
          key: materialKey,
          type: MaterialType.transparency,
352 353
          child: const SizedBox(width: 100.0, height: 100.0),
          clipBehavior: Clip.antiAlias,
354
        ),
355 356
      );

357
      expect(find.byKey(materialKey), clipsWithBoundingRect);
358 359
    });

360
    testWidgets('clips to rounded rect when borderRadius provided given Clip.antiAlias', (WidgetTester tester) async {
361
      final GlobalKey materialKey = GlobalKey();
362
      await tester.pumpWidget(
363
        Material(
364 365
          key: materialKey,
          type: MaterialType.transparency,
366
          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
367 368
          child: const SizedBox(width: 100.0, height: 100.0),
          clipBehavior: Clip.antiAlias,
369
        ),
370 371 372 373 374
      );

      expect(
        find.byKey(materialKey),
        clipsWithBoundingRRect(
375
          borderRadius: const BorderRadius.all(Radius.circular(10.0))
376 377 378
        ),
      );
    });
379

380
    testWidgets('clips to shape when provided given Clip.antiAlias', (WidgetTester tester) async {
381
      final GlobalKey materialKey = GlobalKey();
382
      await tester.pumpWidget(
383
        Material(
384 385 386
          key: materialKey,
          type: MaterialType.transparency,
          shape: const StadiumBorder(),
387 388
          child: const SizedBox(width: 100.0, height: 100.0),
          clipBehavior: Clip.antiAlias,
389
        ),
390 391 392 393 394 395 396 397 398
      );

      expect(
        find.byKey(materialKey),
        clipsWithShapeBorder(
          shape: const StadiumBorder(),
        ),
      );
    });
399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461

    testWidgets('supports directional clips', (WidgetTester tester) async {
      final List<String> logs = <String>[];
      final ShapeBorder shape = TestBorder((String message) { logs.add(message); });
      Widget buildMaterial() {
        return Material(
          type: MaterialType.transparency,
          shape: shape,
          child: const SizedBox(width: 100.0, height: 100.0),
          clipBehavior: Clip.antiAlias,
        );
      }
      final Widget material = buildMaterial();
      // verify that a regular clip works as one would expect
      logs.add('--0');
      await tester.pumpWidget(material);
      // verify that pumping again doesn't recompute the clip
      // even though the widget itself is new (the shape doesn't change identity)
      logs.add('--1');
      await tester.pumpWidget(buildMaterial());
      // verify that Material passes the TextDirection on to its shape when it's transparent
      logs.add('--2');
      await tester.pumpWidget(Directionality(
        textDirection: TextDirection.ltr,
        child: material,
      ));
      // verify that changing the text direction from LTR to RTL has an effect
      // even though the widget itself is identical
      logs.add('--3');
      await tester.pumpWidget(Directionality(
        textDirection: TextDirection.rtl,
        child: material,
      ));
      // verify that pumping again with a text direction has no effect
      logs.add('--4');
      await tester.pumpWidget(Directionality(
        textDirection: TextDirection.rtl,
        child: buildMaterial(),
      ));
      logs.add('--5');
      // verify that changing the text direction and the widget at the same time
      // works as expected
      await tester.pumpWidget(Directionality(
        textDirection: TextDirection.ltr,
        child: material,
      ));
      expect(logs, <String>[
        '--0',
        'getOuterPath Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) null',
        'paint Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) null',
        '--1',
        '--2',
        'getOuterPath Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) TextDirection.ltr',
        'paint Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) TextDirection.ltr',
        '--3',
        'getOuterPath Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) TextDirection.rtl',
        'paint Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) TextDirection.rtl',
        '--4',
        '--5',
        'getOuterPath Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) TextDirection.ltr',
        'paint Rect.fromLTRB(0.0, 0.0, 800.0, 600.0) TextDirection.ltr',
      ]);
    });
462 463 464 465
  });

  group('PhysicalModels', () {
    testWidgets('canvas', (WidgetTester tester) async {
466
      final GlobalKey materialKey = GlobalKey();
467
      await tester.pumpWidget(
468
        Material(
469 470
          key: materialKey,
          type: MaterialType.canvas,
471
          child: const SizedBox(width: 100.0, height: 100.0),
472
        ),
473 474 475 476 477 478 479 480 481 482
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.zero,
          elevation: 0.0,
      ));
    });

    testWidgets('canvas with borderRadius and elevation', (WidgetTester tester) async {
483
      final GlobalKey materialKey = GlobalKey();
484
      await tester.pumpWidget(
485
        Material(
486 487
          key: materialKey,
          type: MaterialType.canvas,
488
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
489 490
          child: const SizedBox(width: 100.0, height: 100.0),
          elevation: 1.0,
491
        ),
492 493 494 495
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.rectangle,
496
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
497 498 499 500
          elevation: 1.0,
      ));
    });

501
    testWidgets('canvas with shape and elevation', (WidgetTester tester) async {
502
      final GlobalKey materialKey = GlobalKey();
503
      await tester.pumpWidget(
504
        Material(
505 506 507 508 509
          key: materialKey,
          type: MaterialType.canvas,
          shape: const StadiumBorder(),
          child: const SizedBox(width: 100.0, height: 100.0),
          elevation: 1.0,
510
        ),
511 512 513 514 515 516 517 518
      );

      expect(find.byKey(materialKey), rendersOnPhysicalShape(
          shape: const StadiumBorder(),
          elevation: 1.0,
      ));
    });

519
    testWidgets('card', (WidgetTester tester) async {
520
      final GlobalKey materialKey = GlobalKey();
521
      await tester.pumpWidget(
522
        Material(
523 524 525
          key: materialKey,
          type: MaterialType.card,
          child: const SizedBox(width: 100.0, height: 100.0),
526
        ),
527 528 529 530
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.rectangle,
531
          borderRadius: const BorderRadius.all(Radius.circular(2.0)),
532 533 534 535 536
          elevation: 0.0,
      ));
    });

    testWidgets('card with borderRadius and elevation', (WidgetTester tester) async {
537
      final GlobalKey materialKey = GlobalKey();
538
      await tester.pumpWidget(
539
        Material(
540 541
          key: materialKey,
          type: MaterialType.card,
542
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
543 544
          elevation: 5.0,
          child: const SizedBox(width: 100.0, height: 100.0),
545
        ),
546 547 548 549
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.rectangle,
550
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
551 552 553 554
          elevation: 5.0,
      ));
    });

555
    testWidgets('card with shape and elevation', (WidgetTester tester) async {
556
      final GlobalKey materialKey = GlobalKey();
557
      await tester.pumpWidget(
558
        Material(
559 560 561 562 563
          key: materialKey,
          type: MaterialType.card,
          shape: const StadiumBorder(),
          elevation: 5.0,
          child: const SizedBox(width: 100.0, height: 100.0),
564
        ),
565 566 567 568 569 570 571 572
      );

      expect(find.byKey(materialKey), rendersOnPhysicalShape(
          shape: const StadiumBorder(),
          elevation: 5.0,
      ));
    });

573
    testWidgets('circle', (WidgetTester tester) async {
574
      final GlobalKey materialKey = GlobalKey();
575
      await tester.pumpWidget(
576
        Material(
577 578 579 580
          key: materialKey,
          type: MaterialType.circle,
          child: const SizedBox(width: 100.0, height: 100.0),
          color: const Color(0xFF0000FF),
581
        ),
582 583 584 585 586 587 588 589 590
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.circle,
          elevation: 0.0,
      ));
    });

    testWidgets('button', (WidgetTester tester) async {
591
      final GlobalKey materialKey = GlobalKey();
592
      await tester.pumpWidget(
593
        Material(
594 595 596 597
          key: materialKey,
          type: MaterialType.button,
          child: const SizedBox(width: 100.0, height: 100.0),
          color: const Color(0xFF0000FF),
598
        ),
599 600 601 602
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.rectangle,
603
          borderRadius: const BorderRadius.all(Radius.circular(2.0)),
604 605 606 607 608
          elevation: 0.0,
      ));
    });

    testWidgets('button with elevation and borderRadius', (WidgetTester tester) async {
609
      final GlobalKey materialKey = GlobalKey();
610
      await tester.pumpWidget(
611
        Material(
612 613 614 615
          key: materialKey,
          type: MaterialType.button,
          child: const SizedBox(width: 100.0, height: 100.0),
          color: const Color(0xFF0000FF),
616
          borderRadius: const BorderRadius.all(Radius.circular(6.0)),
617
          elevation: 4.0,
618
        ),
619 620 621 622
      );

      expect(find.byKey(materialKey), rendersOnPhysicalModel(
          shape: BoxShape.rectangle,
623
          borderRadius: const BorderRadius.all(Radius.circular(6.0)),
624 625 626
          elevation: 4.0,
      ));
    });
627 628

    testWidgets('button with elevation and shape', (WidgetTester tester) async {
629
      final GlobalKey materialKey = GlobalKey();
630
      await tester.pumpWidget(
631
        Material(
632 633 634 635 636 637
          key: materialKey,
          type: MaterialType.button,
          child: const SizedBox(width: 100.0, height: 100.0),
          color: const Color(0xFF0000FF),
          shape: const StadiumBorder(),
          elevation: 4.0,
638
        ),
639 640 641 642 643 644 645
      );

      expect(find.byKey(materialKey), rendersOnPhysicalShape(
          shape: const StadiumBorder(),
          elevation: 4.0,
      ));
    });
646
  });
647 648 649

  group('Border painting', () {
    testWidgets('border is painted on physical layers', (WidgetTester tester) async {
650
      final GlobalKey materialKey = GlobalKey();
651
      await tester.pumpWidget(
652
        Material(
653 654 655 656 657
          key: materialKey,
          type: MaterialType.button,
          child: const SizedBox(width: 100.0, height: 100.0),
          color: const Color(0xFF0000FF),
          shape: const CircleBorder(
658
            side: BorderSide(
659
              width: 2.0,
660
              color: Color(0xFF0000FF),
661
            ),
662
          ),
663
        ),
664 665 666 667 668 669 670
      );

      final RenderBox box = tester.renderObject(find.byKey(materialKey));
      expect(box, paints..circle());
    });

    testWidgets('border is painted for transparent material', (WidgetTester tester) async {
671
      final GlobalKey materialKey = GlobalKey();
672
      await tester.pumpWidget(
673
        Material(
674 675 676 677
          key: materialKey,
          type: MaterialType.transparency,
          child: const SizedBox(width: 100.0, height: 100.0),
          shape: const CircleBorder(
678
            side: BorderSide(
679
              width: 2.0,
680
              color: Color(0xFF0000FF),
681
            ),
682
          ),
683
        ),
684 685 686 687 688 689 690
      );

      final RenderBox box = tester.renderObject(find.byKey(materialKey));
      expect(box, paints..circle());
    });

    testWidgets('border is not painted for when border side is none', (WidgetTester tester) async {
691
      final GlobalKey materialKey = GlobalKey();
692
      await tester.pumpWidget(
693
        Material(
694 695 696 697
          key: materialKey,
          type: MaterialType.transparency,
          child: const SizedBox(width: 100.0, height: 100.0),
          shape: const CircleBorder(),
698
        ),
699 700 701 702 703
      );

      final RenderBox box = tester.renderObject(find.byKey(materialKey));
      expect(box, isNot(paints..circle()));
    });
704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727

    testWidgets('border is painted above child by default', (WidgetTester tester) async {
      final Key painterKey = UniqueKey();

      await tester.pumpWidget(MaterialApp(
        home: Scaffold(
          body: RepaintBoundary(
            key: painterKey,
            child: Card(
              child: SizedBox(
                width: 200,
                height: 300,
                child: Material(
                  clipBehavior: Clip.hardEdge,
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                    side: const BorderSide(color: Colors.grey, width: 6),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    children: <Widget>[
                      Container(
                        color: Colors.green,
                        height: 150,
728
                      ),
729 730 731 732
                    ],
                  ),
                ),
              ),
733 734
            ),
          ),
735 736 737 738 739
        ),
      ));

      await expectLater(
        find.byKey(painterKey),
740
        matchesGoldenFile('material.border_paint_above.png'),
741
      );
742
    });
743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767

    testWidgets('border is painted below child when specified', (WidgetTester tester) async {
      final Key painterKey = UniqueKey();

      await tester.pumpWidget(MaterialApp(
        home: Scaffold(
          body: RepaintBoundary(
            key: painterKey,
            child: Card(
              child: SizedBox(
                width: 200,
                height: 300,
                child: Material(
                  clipBehavior: Clip.hardEdge,
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                    side: const BorderSide(color: Colors.grey, width: 6),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  borderOnForeground: false,
                  child: Column(
                    children: <Widget>[
                      Container(
                        color: Colors.green,
                        height: 150,
768
                      ),
769 770 771 772
                    ],
                  ),
                ),
              ),
773 774
            ),
          ),
775 776 777 778 779
        ),
      ));

      await expectLater(
        find.byKey(painterKey),
780
        matchesGoldenFile('material.border_paint_below.png'),
781
      );
782
    });
783
  });
784
}