diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml index 7e5c711178cccba67400367fea90be4b6463cc68..9d981a4c66700eca45dc3b9b30f47dae9e242cba 100644 --- a/lib/web_ui/dev/goldens_lock.yaml +++ b/lib/web_ui/dev/goldens_lock.yaml @@ -1,2 +1,2 @@ repository: https://github.com/flutter/goldens.git -revision: 956d4e1862b108b31afd06cbf0a767cefc72f4c5 +revision: 1699ba6fd7093a0a610f82618fa30546e7974777 diff --git a/lib/web_ui/lib/src/engine/surface/recording_canvas.dart b/lib/web_ui/lib/src/engine/surface/recording_canvas.dart index 6cf38cb63462309d287fd7fc631bb9db4a8f3337..2e1d9491739f9808061a20bee867edcb69db00c8 100644 --- a/lib/web_ui/lib/src/engine/surface/recording_canvas.dart +++ b/lib/web_ui/lib/src/engine/surface/recording_canvas.dart @@ -228,7 +228,7 @@ class RecordingCanvas { } void drawRRect(ui.RRect rrect, SurfacePaint paint) { - if (!rrect.webOnlyUniformRadii) { + if (paint.shader != null || !rrect.webOnlyUniformRadii) { _hasArbitraryPaint = true; } _didDraw = true; diff --git a/lib/web_ui/test/golden_tests/engine/linear_gradient_golden_test.dart b/lib/web_ui/test/golden_tests/engine/linear_gradient_golden_test.dart new file mode 100644 index 0000000000000000000000000000000000000000..c081b59d049cd3fb02e7a6090b0b2316eb56c598 --- /dev/null +++ b/lib/web_ui/test/golden_tests/engine/linear_gradient_golden_test.dart @@ -0,0 +1,71 @@ +// 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 'dart:html' as html; + +import 'package:ui/ui.dart' hide TextStyle; +import 'package:ui/src/engine.dart'; +import 'package:test/test.dart'; + +import 'package:web_engine_tester/golden_tester.dart'; + +void main() async { + const double screenWidth = 600.0; + const double screenHeight = 800.0; + const Rect screenRect = Rect.fromLTWH(0, 0, screenWidth, screenHeight); + + // Commit a recording canvas to a bitmap, and compare with the expected + Future _checkScreenshot(RecordingCanvas rc, String fileName, + {Rect region = const Rect.fromLTWH(0, 0, 500, 500), + bool write = false}) async { + final EngineCanvas engineCanvas = BitmapCanvas(screenRect); + rc.apply(engineCanvas); + + // Wrap in so that our CSS selectors kick in. + final html.Element sceneElement = html.Element.tag('flt-scene'); + try { + sceneElement.append(engineCanvas.rootElement); + html.document.body.append(sceneElement); + await matchGoldenFile('$fileName.png', region: region); + } finally { + // The page is reused across tests, so remove the element after taking the + // golden screenshot. + sceneElement.remove(); + } + } + + setUp(() async { + debugEmulateFlutterTesterEnvironment = true; + await webOnlyInitializePlatform(); + webOnlyFontCollection.debugRegisterTestFonts(); + await webOnlyFontCollection.ensureFontsLoaded(); + }); + + test('Should draw linear gradient using rectangle.', () async { + final RecordingCanvas rc = + RecordingCanvas(const Rect.fromLTRB(0, 0, 500, 500)); + Rect shaderRect = const Rect.fromLTRB(50, 50, 300, 300); + final Paint paint = Paint()..shader = Gradient.linear( + Offset(shaderRect.left, shaderRect.top), + Offset(shaderRect.right, shaderRect.bottom), + [Color(0xFFcfdfd2), Color(0xFF042a85)]); + rc.drawRect(shaderRect, paint); + expect(rc.hasArbitraryPaint, isTrue); + await _checkScreenshot(rc, 'linear_gradient_rect'); + }); + + // Regression test for https://github.com/flutter/flutter/issues/50010 + test('Should draw linear gradient using rounded rect.', () async { + final RecordingCanvas rc = + RecordingCanvas(const Rect.fromLTRB(0, 0, 500, 500)); + Rect shaderRect = const Rect.fromLTRB(50, 50, 300, 300); + final Paint paint = Paint()..shader = Gradient.linear( + Offset(shaderRect.left, shaderRect.top), + Offset(shaderRect.right, shaderRect.bottom), + [Color(0xFFcfdfd2), Color(0xFF042a85)]); + rc.drawRRect(RRect.fromRectAndRadius(shaderRect, Radius.circular(16)), paint); + expect(rc.hasArbitraryPaint, isTrue); + await _checkScreenshot(rc, 'linear_gradient_rounded_rect'); + }); +}