[web] Honor background color when rendering text to dom (flutter#26908)

chaselatta · Jun 24, 2021 · 600339b · 600339b
1 parent da33e69
commit 600339b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git 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: f7a59e1cd4dc3800ded4b3df6f3823ac379df40a
+revision: 76ee6c69bf493b4b860e6685d0145ec8ac734f2c
diff --git a/lib/web_ui/lib/src/engine/text/paragraph.dart b/lib/web_ui/lib/src/engine/text/paragraph.dart
@@ -1745,6 +1745,10 @@ void _applyTextStyleToElement({
   if (color != null) {
     cssStyle.color = colorToCssString(color);
   }
+  final ui.Color? background = style._background?.color;
+  if (background != null) {
+    cssStyle.backgroundColor = colorToCssString(background);
+  }
   if (style._height != null) {
     cssStyle.lineHeight = '${style._height}';
   }

diff --git a/lib/web_ui/test/golden_tests/engine/canvas_paragraph/general_test.dart b/lib/web_ui/test/golden_tests/engine/canvas_paragraph/general_test.dart
@@ -466,4 +466,40 @@ void testMain() async {
     testFontFeatures(canvas);
     return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_features_dom');
   });
+
+  void testBackgroundStyle(EngineCanvas canvas) {
+    final CanvasParagraph paragraph = rich(
+      EngineParagraphStyle(fontFamily: 'Roboto', fontSize: 40.0),
+      (CanvasParagraphBuilder builder) {
+        builder.pushStyle(EngineTextStyle.only(color: black));
+        builder.pushStyle(EngineTextStyle.only(background: Paint()..color = blue));
+        builder.addText('Lor');
+        builder.pushStyle(EngineTextStyle.only(background: Paint()..color = black, color: white));
+        builder.addText('em ');
+        builder.pop();
+        builder.pushStyle(EngineTextStyle.only(background: Paint()..color = green));
+        builder.addText('ipsu');
+        builder.pushStyle(EngineTextStyle.only(background: Paint()..color = yellow));
+        builder.addText('m\ndo');
+        builder.pushStyle(EngineTextStyle.only(background: Paint()..color = red));
+        builder.addText('lor sit');
+      },
+    );
+    paragraph.layout(constrain(double.infinity));
+    canvas.drawParagraph(paragraph, Offset.zero);
+  }
+
+  test('background style', () {
+    const Rect bounds = Rect.fromLTWH(0, 0, 300, 200);
+    final canvas = BitmapCanvas(bounds, RenderStrategy());
+    testBackgroundStyle(canvas);
+    return takeScreenshot(canvas, bounds, 'canvas_paragraph_background_style');
+  });
+
+  test('background style (DOM)', () {
+    const Rect bounds = Rect.fromLTWH(0, 0, 300, 200);
+    final canvas = DomCanvas(domRenderer.createElement('flt-picture'));
+    testBackgroundStyle(canvas);
+    return takeScreenshot(canvas, bounds, 'canvas_paragraph_background_style_dom');
+  });
 }