[web] Fix text alignment when transform + tight constraints + DOM rendering (#24036)

Author: mdebbar

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 44f00682eee2afd7042c02ce802199c1c4ff223e
+revision: 99caeb1bcb8b7a856a78bd8d55816cc97db56112

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

@@ -128,14 +128,6 @@ class CanvasParagraph implements EngineParagraph {
     return domElement.clone(true) as html.HtmlElement;
   }
 
-  double _getParagraphAlignOffset() {
-    final EngineLineMetrics? longestLine = _layoutService.longestLine;
-    if (longestLine != null) {
-      return longestLine.left;
-    }
-    return 0.0;
-  }
-
   html.HtmlElement _createDomElement() {
     final html.HtmlElement rootElement =
         domRenderer.createElement('p') as html.HtmlElement;
@@ -149,9 +141,13 @@ class CanvasParagraph implements EngineParagraph {
       // to insert our own <BR> breaks based on layout results.
       ..whiteSpace = 'pre';
 
-    final double alignOffset = _getParagraphAlignOffset();
-    if (alignOffset != 0.0) {
-      cssStyle.marginLeft = '${alignOffset}px';
+    if (width > longestLine) {
+      // In this case, we set the width so that the CSS text-align property
+      // works correctly.
+      // When `longestLine` is >= `paragraph.width` that means the DOM element
+      // will automatically size itself to fit the longest line, so there's no
+      // need to set an explicit width.
+      cssStyle.width = '${width}px';
     }
 
     if (paragraphStyle._maxLines != null || paragraphStyle._ellipsis != null) {

lib/web_ui/test/golden_tests/engine/canvas_paragraph/general_test.dart

@@ -4,6 +4,7 @@
 
 // @dart = 2.6
 import 'dart:async';
+import 'dart:math' as math;
 
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
@@ -153,6 +154,50 @@ void testMain() async {
     return takeScreenshot(canvas, bounds, 'canvas_paragraph_align_dom');
   });
 
+  void testAlignAndTransform(EngineCanvas canvas) {
+    CanvasParagraph paragraph;
+
+    void build(CanvasParagraphBuilder builder) {
+      builder.pushStyle(EngineTextStyle.only(color: white));
+      builder.addText('Lorem ');
+      builder.pushStyle(EngineTextStyle.only(color: red));
+      builder.addText('ipsum\n');
+      builder.pushStyle(EngineTextStyle.only(color: yellow));
+      builder.addText('dolor');
+    }
+
+    void drawParagraphAt(Offset offset, TextAlign align) {
+      paragraph = rich(
+        ParagraphStyle(fontFamily: 'Roboto', fontSize: 20.0, textAlign: align),
+        build,
+      )..layout(constrain(150.0));
+      canvas.save();
+      canvas.translate(offset.dx, offset.dy);
+      canvas.rotate(math.pi / 4);
+      final Rect rect =
+          Rect.fromLTRB(0.0, 0.0, 150.0, paragraph.height);
+      canvas.drawRect(rect, SurfacePaintData()..color = black);
+      canvas.drawParagraph(paragraph, Offset.zero);
+      canvas.restore();
+    }
+
+    drawParagraphAt(Offset(50.0, 0.0), TextAlign.left);
+    drawParagraphAt(Offset(150.0, 0.0), TextAlign.center);
+    drawParagraphAt(Offset(250.0, 0.0), TextAlign.right);
+  }
+
+  test('alignment and transform', () {
+    final canvas = BitmapCanvas(bounds, RenderStrategy());
+    testAlignAndTransform(canvas);
+    return takeScreenshot(canvas, bounds, 'canvas_paragraph_align_transform');
+  });
+
+  test('alignment and transform (DOM)', () {
+    final canvas = DomCanvas(domRenderer.createElement('flt-picture'));
+    testAlignAndTransform(canvas);
+    return takeScreenshot(canvas, bounds, 'canvas_paragraph_align_transform_dom');
+  });
+
   test('paints spans with varying heights/baselines', () {
     final canvas = BitmapCanvas(bounds, RenderStrategy());
 

lib/web_ui/test/text/canvas_paragraph_builder_test.dart

@@ -217,10 +217,10 @@ void testMain() async {
     );
 
     // Should break "Hello world" into "Hello" and " world".
-    paragraph.layout(ParagraphConstraints(width: 70.0));
+    paragraph.layout(ParagraphConstraints(width: 75.0));
     expect(
       paragraph.toDomElement().outerHtml,
-      '<p style="font-size: 13px; $paragraphStyle">'
+      '<p style="font-size: 13px; $paragraphStyle width: 75px;">'
       '<span style="$defaultColor font-size: 13px; font-weight: bold; $defaultFontFamily">'
       'Hello'
       '</span>'
@@ -349,7 +349,7 @@ void testMain() async {
     paragraph.layout(ParagraphConstraints(width: 180.0));
     expect(
       paragraph.toDomElement().outerHtml,
-      '<p style="font-size: 13px; $paragraphStyle">'
+      '<p style="font-size: 13px; $paragraphStyle width: 180px;">'
       '<span style="$defaultColor font-size: 13px; $defaultFontFamily">'
       'First<br>Second <br>'
       '</span>'