diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml index 3bf514f2f14e4..039e231b31e15 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: 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 index 84e38ebb18537..f4d8fc113ea3b 100644 --- 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 index 934fdffefb034..460c67084a550 100644 --- 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'); + }); }