[web] Fix paragraph positioning (#18329)
* Fix text positioning
* Update golden locks
diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml
index 7fa819e..b3e80ab 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/lib/src/engine/bitmap_canvas.dart b/lib/web_ui/lib/src/engine/bitmap_canvas.dart
index cc87fdc..ea1441a 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 @@
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 2753863..ca30387 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,43 @@
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);
+ rc.drawImage(createTestImage(), Offset(0, 50),
+ Paint()
+ ..colorFilter = EngineColorFilter.mode(red, BlendMode.srcIn));
+
+ final Paragraph paragraph = createTestParagraph();
+ 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));
+
+ 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'
