[web] Fix mis-aligned widget spans (flutter#21112)

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: f1e5b87249f54998e23a34788e19ec864358e50b
+revision: b6efc75885c23f0b5c485d8bd659ed339feec9ec

lib/web_ui/lib/src/engine/text/paragraph.dart

@@ -1255,6 +1255,8 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
       return EngineParagraph(
         paragraphElement: _paragraphElement,
         geometricStyle: ParagraphGeometricStyle(
+          textDirection: _paragraphStyle._effectiveTextDirection,
+          textAlign: _paragraphStyle._effectiveTextAlign,
           fontFamily: fontFamily,
           fontWeight: fontWeight,
           fontStyle: fontStyle,
@@ -1310,6 +1312,8 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
     return EngineParagraph(
       paragraphElement: _paragraphElement,
       geometricStyle: ParagraphGeometricStyle(
+        textDirection: _paragraphStyle._effectiveTextDirection,
+        textAlign: _paragraphStyle._effectiveTextAlign,
         fontFamily: fontFamily,
         fontWeight: fontWeight,
         fontStyle: fontStyle,
@@ -1364,6 +1368,8 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
     return EngineParagraph(
       paragraphElement: _paragraphElement,
       geometricStyle: ParagraphGeometricStyle(
+        textDirection: _paragraphStyle._effectiveTextDirection,
+        textAlign: _paragraphStyle._effectiveTextAlign,
         fontFamily: _paragraphStyle._fontFamily,
         fontWeight: _paragraphStyle._fontWeight,
         fontStyle: _paragraphStyle._fontStyle,

lib/web_ui/lib/src/engine/text/ruler.dart

@@ -8,6 +8,8 @@ part of engine;
 /// Contains the subset of [ui.ParagraphStyle] properties that affect layout.
 class ParagraphGeometricStyle {
   ParagraphGeometricStyle({
+    required this.textDirection,
+    required this.textAlign,
     this.fontWeight,
     this.fontStyle,
     this.fontFamily,
@@ -21,6 +23,8 @@ class ParagraphGeometricStyle {
     this.shadows,
   });
 
+  final ui.TextDirection textDirection;
+  final ui.TextAlign textAlign;
   final ui.FontWeight? fontWeight;
   final ui.FontStyle? fontStyle;
   final String? fontFamily;
@@ -102,6 +106,8 @@ class ParagraphGeometricStyle {
       return false;
     }
     return other is ParagraphGeometricStyle
+        && other.textDirection == textDirection
+        && other.textAlign == textAlign
         && other.fontWeight == fontWeight
         && other.fontStyle == fontStyle
         && other.fontFamily == fontFamily
@@ -116,6 +122,8 @@ class ParagraphGeometricStyle {
 
   @override
   int get hashCode => _cachedHashCode ??= ui.hashValues(
+        textDirection,
+        textAlign,
         fontWeight,
         fontStyle,
         fontFamily,
@@ -131,7 +139,9 @@ class ParagraphGeometricStyle {
   @override
   String toString() {
     if (assertionsEnabled) {
-      return '$runtimeType(fontWeight: $fontWeight, fontStyle: $fontStyle,'
+      return '$runtimeType(textDirection: $textDirection, textAlign: $textAlign,'
+          ' fontWeight: $fontWeight,'
+          ' fontStyle: $fontStyle,'
           ' fontFamily: $fontFamily, fontSize: $fontSize,'
           ' lineHeight: $lineHeight,'
           ' maxLines: $maxLines,'
@@ -245,6 +255,8 @@ class TextDimensions {
   void applyStyle(ParagraphGeometricStyle style) {
     final html.CssStyleDeclaration elementStyle = _element.style;
     elementStyle
+      ..direction = _textDirectionToCss(style.textDirection)
+      ..textAlign = textAlignToCssValue(style.textAlign, style.textDirection)
       ..fontSize = style.fontSize != null ? '${style.fontSize!.floor()}px' : null
       ..fontFamily = canonicalizeFontFamily(style.effectiveFontFamily)
       ..fontWeight =

lib/web_ui/test/golden_tests/engine/scuba.dart

@@ -47,11 +47,13 @@ class EngineScubaTester {
     String fileName, {
     ui.Rect region,
     double maxDiffRatePercent,
+    bool write = false,
   }) async {
     await matchGoldenFile(
       '$fileName.png',
       region: region ?? viewportRegion,
       maxDiffRatePercent: maxDiffRatePercent,
+      write: write,
     );
   }
 
@@ -64,6 +66,7 @@ class EngineScubaTester {
     String fileName, {
     ui.Rect region,
     double maxDiffRatePercent,
+    bool write = false,
   }) async {
     // Wrap in <flt-scene> so that our CSS selectors kick in.
     final html.Element sceneElement = html.Element.tag('flt-scene');
@@ -78,6 +81,7 @@ class EngineScubaTester {
         screenshotName,
         region: region,
         maxDiffRatePercent: maxDiffRatePercent,
+        write: write,
       );
     } finally {
       // The page is reused across tests, so remove the element after taking the

lib/web_ui/test/golden_tests/engine/text_placeholders_test.dart

@@ -28,14 +28,54 @@ void testMain() async {
     final RecordingCanvas recordingCanvas = RecordingCanvas(screenRect);
 
     Offset offset = Offset.zero;
-    for (PlaceholderAlignment alignment in PlaceholderAlignment.values) {
-      _paintTextWithPlaceholder(recordingCanvas, offset, alignment);
+    for (PlaceholderAlignment placeholderAlignment
+        in PlaceholderAlignment.values) {
+      _paintTextWithPlaceholder(
+        recordingCanvas,
+        offset,
+        before: 'Lorem ipsum',
+        after: 'dolor sit amet, consectetur.',
+        placeholderAlignment: placeholderAlignment,
+      );
       offset = offset.translate(0.0, 80.0);
     }
     recordingCanvas.endRecording();
     recordingCanvas.apply(canvas, screenRect);
     return scuba.diffCanvasScreenshot(canvas, 'text_with_placeholders');
   });
+
+  testEachCanvas('text alignment and placeholders', (EngineCanvas canvas) {
+    final Rect screenRect = const Rect.fromLTWH(0, 0, 600, 600);
+    final RecordingCanvas recordingCanvas = RecordingCanvas(screenRect);
+
+    Offset offset = Offset.zero;
+    _paintTextWithPlaceholder(
+      recordingCanvas,
+      offset,
+      before: 'Lorem',
+      after: 'ipsum.',
+      textAlignment: TextAlign.start,
+    );
+    offset = offset.translate(0.0, 80.0);
+    _paintTextWithPlaceholder(
+      recordingCanvas,
+      offset,
+      before: 'Lorem',
+      after: 'ipsum.',
+      textAlignment: TextAlign.center,
+    );
+    offset = offset.translate(0.0, 80.0);
+    _paintTextWithPlaceholder(
+      recordingCanvas,
+      offset,
+      before: 'Lorem',
+      after: 'ipsum.',
+      textAlignment: TextAlign.end,
+    );
+    recordingCanvas.endRecording();
+    recordingCanvas.apply(canvas, screenRect);
+    return scuba.diffCanvasScreenshot(canvas, 'text_align_with_placeholders');
+  });
 }
 
 const Color black = Color(0xFF000000);
@@ -46,11 +86,19 @@ const Size placeholderSize = Size(80.0, 50.0);
 
 void _paintTextWithPlaceholder(
   RecordingCanvas canvas,
-  Offset offset,
-  PlaceholderAlignment alignment,
-) {
+  Offset offset, {
+  String before,
+  String after,
+  PlaceholderAlignment placeholderAlignment = PlaceholderAlignment.baseline,
+  TextAlign textAlignment = TextAlign.left,
+}) {
   // First let's draw the paragraph.
-  final Paragraph paragraph = _createParagraphWithPlaceholder(alignment);
+  final Paragraph paragraph = _createParagraphWithPlaceholder(
+    before,
+    after,
+    placeholderAlignment,
+    textAlignment,
+  );
   canvas.drawParagraph(paragraph, offset);
 
   // Then fill the placeholders.
@@ -61,19 +109,25 @@ void _paintTextWithPlaceholder(
   );
 }
 
-Paragraph _createParagraphWithPlaceholder(PlaceholderAlignment alignment) {
-  final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle());
+Paragraph _createParagraphWithPlaceholder(
+  String before,
+  String after,
+  PlaceholderAlignment placeholderAlignment,
+  TextAlign textAlignment,
+) {
+  final ParagraphBuilder builder =
+      ParagraphBuilder(ParagraphStyle(textAlign: textAlignment));
   builder
       .pushStyle(TextStyle(color: black, fontFamily: 'Roboto', fontSize: 14));
-  builder.addText('Lorem ipsum');
+  builder.addText(before);
   builder.addPlaceholder(
     placeholderSize.width,
     placeholderSize.height,
-    alignment,
+    placeholderAlignment,
     baselineOffset: 40.0,
     baseline: TextBaseline.alphabetic,
   );
   builder.pushStyle(TextStyle(color: blue, fontFamily: 'Roboto', fontSize: 14));
-  builder.addText('dolor sit amet, consectetur.');
+  builder.addText(after);
   return builder.build()..layout(ParagraphConstraints(width: 200.0));
 }