diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml index f813e1b9bdcde..d055e785b7de1 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: 3db2bb2329e7277c34389a92507eacaab774c8e8 +revision: 43254f4abddc2542ece540f222545970caf12908 diff --git a/lib/web_ui/lib/src/engine/dom_renderer.dart b/lib/web_ui/lib/src/engine/dom_renderer.dart index 60727b1277d20..bd5400049211f 100644 --- a/lib/web_ui/lib/src/engine/dom_renderer.dart +++ b/lib/web_ui/lib/src/engine/dom_renderer.dart @@ -343,7 +343,7 @@ flt-glass-pane * { setElementStyle(bodyElement, 'touch-action', 'none'); // These are intentionally outrageous font parameters to make sure that the - // apps fully specifies their text styles. + // apps fully specify their text styles. setElementStyle(bodyElement, 'font', defaultCssFont); setElementStyle(bodyElement, 'color', 'red'); diff --git a/lib/web_ui/test/golden_tests/engine/canvas_draw_image_golden_test.dart b/lib/web_ui/test/golden_tests/engine/canvas_draw_image_golden_test.dart index 04881d5121f32..62beade2a67f7 100644 --- a/lib/web_ui/test/golden_tests/engine/canvas_draw_image_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/canvas_draw_image_golden_test.dart @@ -12,6 +12,8 @@ import 'package:test/test.dart'; import 'package:web_engine_tester/golden_tester.dart'; +import 'scuba.dart'; + void main() async { const double screenWidth = 600.0; const double screenHeight = 800.0; @@ -39,11 +41,10 @@ void main() async { setUp(() async { debugEmulateFlutterTesterEnvironment = true; - await webOnlyInitializePlatform(); - webOnlyFontCollection.debugRegisterTestFonts(); - await webOnlyFontCollection.ensureFontsLoaded(); }); + setUpStableTestFonts(); + test('Paints image', () async { final RecordingCanvas rc = RecordingCanvas(const Rect.fromLTRB(0, 0, 400, 300)); diff --git a/lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart b/lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart index ce3f22b023174..811a06952a626 100644 --- a/lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart @@ -10,6 +10,8 @@ import 'package:test/test.dart'; import 'package:web_engine_tester/golden_tester.dart'; +import 'scuba.dart'; + void main() async { final Rect region = Rect.fromLTWH(0, 0, 500, 100); @@ -22,11 +24,7 @@ void main() async { html.document.querySelector('flt-scene-host').append(testScene); } - setUp(() async { - await webOnlyInitializePlatform(); - webOnlyFontCollection.debugRegisterTestFonts(); - await webOnlyFontCollection.ensureFontsLoaded(); - }); + setUpStableTestFonts(); tearDown(() { html.document.querySelector('flt-scene').remove(); diff --git a/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_golden_test.dart b/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_golden_test.dart index c14ca52550c08..f3d9bbae66998 100644 --- a/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/multiline_text_clipping_golden_test.dart @@ -17,6 +17,8 @@ void main() async { viewportSize: const Size(600, 600), ); + setUpStableTestFonts(); + void paintTest(EngineCanvas canvas, PaintTest painter) { final RecordingCanvas recordingCanvas = RecordingCanvas(const Rect.fromLTWH(0, 0, 600, 600)); @@ -116,7 +118,7 @@ void drawQuickBrownFox(RecordingCanvas canvas) { textStyle: TextStyle( color: const Color(0xFF000000), decoration: TextDecoration.none, - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, background: Paint()..color = const Color.fromRGBO(50, 255, 50, 1.0), ), diff --git a/lib/web_ui/test/golden_tests/engine/scuba.dart b/lib/web_ui/test/golden_tests/engine/scuba.dart index a43afdbb59dc5..d3a8b9527a971 100644 --- a/lib/web_ui/test/golden_tests/engine/scuba.dart +++ b/lib/web_ui/test/golden_tests/engine/scuba.dart @@ -132,7 +132,7 @@ void testEachCanvas(String description, CanvasTest body, final ui.TextStyle _defaultTextStyle = ui.TextStyle( color: const ui.Color(0xFF000000), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 14, ); @@ -149,3 +149,13 @@ ui.Paragraph paragraph( builder.pop(); return builder.build()..layout(ui.ParagraphConstraints(width: maxWidth)); } + +/// Configures the test to use bundled Roboto and Ahem fonts to avoid golden +/// screenshot differences due to differences in the preinstalled system fonts. +void setUpStableTestFonts() { + setUp(() async { + await ui.webOnlyInitializePlatform(); + ui.webOnlyFontCollection.debugRegisterTestFonts(); + await ui.webOnlyFontCollection.ensureFontsLoaded(); + }); +} diff --git a/lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart b/lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart index c155354ede442..1a1e0d88554e6 100644 --- a/lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart @@ -27,10 +27,12 @@ void main() async { final TextStyle warningStyle = TextStyle( color: const Color(0xFFFF0000), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 10, ); + setUpStableTestFonts(); + Paragraph warning(String text) { return paragraph(text, textStyle: warningStyle); } diff --git a/lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart b/lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart index 3017dade360fc..bc3829e00e073 100644 --- a/lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart @@ -2,6 +2,7 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +import 'package:test/test.dart'; import 'package:ui/ui.dart'; import 'package:ui/src/engine.dart'; @@ -12,6 +13,8 @@ void main() async { viewportSize: const Size(800, 800), ); + setUpStableTestFonts(); + void drawLetterAndWordSpacing(EngineCanvas canvas) { Offset offset = Offset.zero; @@ -21,7 +24,7 @@ void main() async { textStyle: TextStyle( color: const Color(0xFF000000), decoration: TextDecoration.none, - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, letterSpacing: spacing)), offset, @@ -32,7 +35,7 @@ void main() async { final TextStyle textStyle = TextStyle( color: const Color(0xFF00FF00), decoration: TextDecoration.none, - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, wordSpacing: spacing); canvas.drawParagraph( @@ -66,7 +69,7 @@ void main() async { decoration: TextDecoration.underline, decorationStyle: decorationStyle, decorationColor: const Color.fromRGBO(50, 50, 50, 1.0), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, ); canvas.drawParagraph( @@ -105,7 +108,7 @@ void main() async { decoration: decoration, decorationStyle: TextDecorationStyle.solid, decorationColor: const Color.fromRGBO(255, 160, 0, 1.0), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 20, ); canvas.drawParagraph( @@ -135,7 +138,7 @@ void main() async { textStyle: TextStyle( color: const Color.fromRGBO(0, 0, 0, 1.0), background: Paint()..color = const Color.fromRGBO(255, 50, 50, 1.0), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, ), ), @@ -150,7 +153,7 @@ void main() async { textStyle: TextStyle( color: const Color.fromRGBO(0, 0, 0, 1.0), background: Paint()..color = const Color.fromRGBO(50, 50, 255, 1.0), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, ), ), @@ -167,7 +170,7 @@ void main() async { textStyle: TextStyle( color: const Color.fromRGBO(0, 0, 0, 1.0), background: Paint()..color = const Color.fromRGBO(255, 50, 50, 1.0), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, shadows: [ Shadow( @@ -189,7 +192,7 @@ void main() async { textStyle: TextStyle( color: const Color.fromRGBO(0, 0, 0, 1.0), background: Paint()..color = const Color.fromRGBO(50, 50, 255, 1.0), - fontFamily: 'Arial', + fontFamily: 'Roboto', fontSize: 30, shadows: [ Shadow(