From 348909d1df4fee31e3f604436a4bbdbee91d64dc Mon Sep 17 00:00:00 2001 From: ferhatb Date: Tue, 12 May 2020 20:22:27 -0700 Subject: [PATCH 1/2] Fix text positioning --- lib/web_ui/lib/src/engine/bitmap_canvas.dart | 4 +++ .../engine/canvas_image_blend_mode_test.dart | 36 +++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/lib/web_ui/lib/src/engine/bitmap_canvas.dart b/lib/web_ui/lib/src/engine/bitmap_canvas.dart index cc87fdcb2cadb..ea1441a4bfeb1 100644 --- a/lib/web_ui/lib/src/engine/bitmap_canvas.dart +++ b/lib/web_ui/lib/src/engine/bitmap_canvas.dart @@ -714,6 +714,10 @@ class BitmapCanvas extends EngineCanvas { rootElement.append(paragraphElement); } _children.add(paragraphElement); + // If there is a prior sibling such as img prevent left/top shift. + paragraphElement.style + ..left = "0px" + ..top = "0px"; _closeCurrentCanvas(); } diff --git a/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart b/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart index 2753863abe37e..af40cde5d16ee 100644 --- a/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart +++ b/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart @@ -105,8 +105,44 @@ void main() async { maxDiffRatePercent: 8.0); }); } + + // Regression test for https://github.com/flutter/flutter/issues/56971 + test('Draws image and paragraph at same vertical position', () async { + final RecordingCanvas rc = RecordingCanvas( + const Rect.fromLTRB(0, 0, 400, 400)); + rc.save(); + rc.drawRect(Rect.fromLTWH(0, 50, 200, 50), Paint() + ..color = white); + BlendMode blendMode = BlendMode.dstIn; + rc.drawImage(createTestImage(), Offset(0, 50), + Paint() + ..colorFilter = EngineColorFilter.mode(red, blendMode)); + + final Paragraph paragraph = createTestParagraph(); + const double textLeft = 5.0; + const double textTop = 7.0; + const double widthConstraint = 300.0; + paragraph.layout(const ParagraphConstraints(width: widthConstraint)); + rc.drawParagraph(paragraph, const Offset(textLeft, textTop)); + + rc.restore(); + await _checkScreenshot(rc, 'canvas_image_blend_and_text', + maxDiffRatePercent: 8.0); + }); } +Paragraph createTestParagraph() { + final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle( + fontFamily: 'Ahem', + fontStyle: FontStyle.normal, + fontWeight: FontWeight.normal, + fontSize: 14.0, + )); + builder.addText('FOO'); + return builder.build(); +} + + // 50x50 pixel flutter logo image. const String _flutterLogoBase64 = 'iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAKRlWElm' From 399dd7d00aed67ecfc90126b7fa3fe1ad6b13092 Mon Sep 17 00:00:00 2001 From: ferhatb Date: Wed, 13 May 2020 07:48:01 -0700 Subject: [PATCH 2/2] Update golden locks --- lib/web_ui/dev/goldens_lock.yaml | 2 +- .../golden_tests/engine/canvas_image_blend_mode_test.dart | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml index 7fa819ed78870..b3e80abdc2a32 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: b38daf293027908861f16362b378ca6865518ded +revision: 33b24a20bb9717699b847f633278f2b7bffde875 diff --git a/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart b/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart index af40cde5d16ee..ca30387f99319 100644 --- a/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart +++ b/lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart @@ -113,14 +113,13 @@ void main() async { rc.save(); rc.drawRect(Rect.fromLTWH(0, 50, 200, 50), Paint() ..color = white); - BlendMode blendMode = BlendMode.dstIn; rc.drawImage(createTestImage(), Offset(0, 50), Paint() - ..colorFilter = EngineColorFilter.mode(red, blendMode)); + ..colorFilter = EngineColorFilter.mode(red, BlendMode.srcIn)); final Paragraph paragraph = createTestParagraph(); - const double textLeft = 5.0; - const double textTop = 7.0; + const double textLeft = 80.0; + const double textTop = 50.0; const double widthConstraint = 300.0; paragraph.layout(const ParagraphConstraints(width: widthConstraint)); rc.drawParagraph(paragraph, const Offset(textLeft, textTop));