Background images

packages/core/lib/src/core_widget_factory.dart

@@ -26,7 +26,7 @@ class WidgetFactory {
 
   late AnchorRegistry _anchorRegistry;
 
-  BuildOp? _styleBgColor;
+  BuildOp? _styleBg;
   BuildOp? _styleBorder;
   BuildOp? _styleDisplayInlineBlock;
   BuildOp? _styleDisplayNone;
@@ -155,9 +155,13 @@ class WidgetFactory {
     BoxBorder? border,
     BorderRadius? borderRadius,
     Color? color,
+    String? bgImageUrl,
     bool isBorderBox = true,
   }) {
-    if (border == null && borderRadius == null && color == null) {
+    if (border == null &&
+        borderRadius == null &&
+        color == null &&
+        bgImageUrl == null) {
       return child;
     }
 
@@ -171,6 +175,7 @@ class WidgetFactory {
       border: border,
       borderRadius: borderRadius,
       color: color,
+      image: _buildDecorationImage(bgImageUrl),
     );
 
     if (!isBorderBox || container != null) {
@@ -188,6 +193,31 @@ class WidgetFactory {
     }
   }
 
+  /// Builds decoration image from [url]
+  DecorationImage? _buildDecorationImage(String? url) {
+    if (url == null) {
+      return null;
+    }
+
+    ImageProvider? provider;
+
+    if (url.startsWith('asset:')) {
+      provider = imageProviderFromAsset(url);
+    } else if (url.startsWith('data:image/')) {
+      provider = imageProviderFromDataUri(url);
+    } else if (url.startsWith('file:')) {
+      provider = imageProviderFromFileUri(url);
+    } else {
+      provider = imageProviderFromNetwork(url);
+    }
+
+    if (provider == null) {
+      return null;
+    }
+
+    return DecorationImage(image: provider);
+  }
+
   /// Builds 1-pixel-height divider.
   Widget? buildDivider(BuildMetadata meta) => const DecoratedBox(
         decoration: BoxDecoration(color: Color.fromRGBO(0, 0, 0, 1)),
@@ -952,8 +982,9 @@ class WidgetFactory {
     switch (key) {
       case kCssBackground:
       case kCssBackgroundColor:
-        _styleBgColor ??= StyleBgColor(this).buildOp;
-        meta.register(_styleBgColor!);
+      case kCssBackgroundImage:
+        _styleBg ??= StyleBg(this).buildOp;
+        meta.register(_styleBg!);
         break;
 
       case kCssColor:

packages/core/lib/src/internal/core_ops.dart

@@ -14,7 +14,7 @@ import 'margin_vertical.dart';
 
 part 'ops/anchor.dart';
 part 'ops/column.dart';
-part 'ops/style_bg_color.dart';
+part 'ops/style_bg.dart';
 part 'ops/style_border.dart';
 part 'ops/style_margin.dart';
 part 'ops/style_padding.dart';

packages/core/lib/src/internal/ops/style_bg_color.dart → packages/core/lib/src/internal/ops/style_bg.dart

@@ -2,15 +2,16 @@ part of '../core_ops.dart';
 
 const kCssBackground = 'background';
 const kCssBackgroundColor = 'background-color';
+const kCssBackgroundImage = 'background-image';
 
-class StyleBgColor {
+class StyleBg {
   static const kPriorityBoxModel7k5 = 7500;
 
   final WidgetFactory wf;
 
   static final _skipBuilding = Expando<bool>();
 
-  StyleBgColor(this.wf);
+  StyleBg(this.wf);
 
   BuildOp get buildOp => BuildOp(
         onTreeFlattening: (meta, tree) {
@@ -32,14 +33,21 @@ class StyleBgColor {
           }
 
           final color = _parseColor(wf, meta);
-          if (color == null) {
+          final bgImageUrl = _parseBackgroundImageUrl(wf, meta);
+
+          if (color == null && bgImageUrl == null) {
             return null;
           }
 
           _skipBuilding[meta] = true;
           return listOrNull(
             wf.buildColumnPlaceholder(meta, widgets)?.wrapWith(
-                  (_, child) => wf.buildDecoration(meta, child, color: color),
+                  (_, child) => wf.buildDecoration(
+                    meta,
+                    child,
+                    color: color,
+                    bgImageUrl: bgImageUrl,
+                  ),
                 ),
           );
         },
@@ -65,6 +73,29 @@ class StyleBgColor {
     return color;
   }
 
+  /// Attempts to parse the background image URL from the [meta] styles.
+  String? _parseBackgroundImageUrl(WidgetFactory wf, BuildMetadata meta) {
+    for (final style in meta.styles) {
+      final styleValue = style.value;
+      if (styleValue == null) {
+        continue;
+      }
+
+      switch (style.property) {
+        case kCssBackground:
+        case kCssBackgroundImage:
+          for (final expression in style.values) {
+            if (expression is css.UriTerm) {
+              return expression.text;
+            }
+          }
+          break;
+      }
+    }
+
+    return null;
+  }
+
   static TextStyleHtml _tsb(TextStyleHtml p, Color c) =>
       p.copyWith(style: p.style.copyWith(background: Paint()..color = c));
 }

packages/core/test/_.dart

@@ -284,11 +284,45 @@ class Explainer {
       if (borderRadius != null && borderRadius is BorderRadius) {
         attr.add('radius=${_borderRadius(borderRadius)}');
       }
+
+      final image = d.image;
+      if (image != null) {
+        attr.add("bgimage=${_decorationImage(image)}");
+      }
     }
 
     return attr;
   }
 
+  String _decorationImage(DecorationImage decorationImage) =>
+      '[DecorationImage:image=${_imageProvider(decorationImage.image)}]';
+
+  String _imageProvider(ImageProvider provider) {
+    if (provider is AssetImage) {
+      return _assetImage(provider);
+    }
+    if (provider is FileImage) {
+      return _fileImage(provider);
+    }
+    if (provider is MemoryImage) {
+      return _memoryImage(provider);
+    }
+    if (provider is NetworkImage) {
+      return _networkImage(provider);
+    }
+    return provider.toString();
+  }
+
+  String _assetImage(AssetImage image) =>
+      '[AssetImage:assetName=${image.assetName}]';
+
+  String _fileImage(FileImage image) => '[FileImage:file=${image.file.path}]';
+
+  String _networkImage(NetworkImage image) => '[NetworkImage:url=${image.url}]';
+
+  String _memoryImage(MemoryImage image) =>
+      '[MemoryImage:size=${image.bytes.length}]';
+
   String _color(Color c) => '#${_colorHex(c.alpha)}'
       '${_colorHex(c.red)}'
       '${_colorHex(c.green)}'

packages/core/test/core_test.dart

@@ -663,6 +663,59 @@ Future<void> main() async {
     });
   });
 
+  group('background-image', () {
+    testWidgets('asset', (WidgetTester tester) async {
+      const assetName = 'test/images/logo.png';
+      const html =
+          '<div style="background-image: url(asset:$assetName)">Foo</div>';
+      final explained = await explain(tester, html);
+      expect(
+        explained,
+        equals(
+          '[DecoratedBox:bgimage='
+          '[DecorationImage:image='
+          '[AssetImage:assetName=test/images/logo.png]],child='
+          '[CssBlock:child='
+          '[RichText:(:Foo)]]]',
+        ),
+      );
+    });
+
+    testWidgets('data uri', (WidgetTester tester) async {
+      const html = '<div style="background-image: url($kDataUri)">Foo</div>';
+      final explained = await explain(tester, html);
+
+      expect(
+        explained,
+        equals(
+          '[DecoratedBox:bgimage='
+          '[DecorationImage:image='
+          '[MemoryImage:size=42]],child='
+          '[CssBlock:child='
+          '[RichText:(:Foo)]]]',
+        ),
+      );
+    });
+
+    testWidgets('file', (WidgetTester tester) async {
+      const fileName = 'test/images/logo.png';
+      const html =
+          '<div style="background-image: url(file:$fileName)">Foo</div>';
+      final explained = await explain(tester, html);
+
+      expect(
+        explained,
+        equals(
+          '[DecoratedBox:bgimage='
+          '[DecorationImage:image='
+          '[FileImage:file=/test/images/logo.png]],child='
+          '[CssBlock:child='
+          '[RichText:(:Foo)]]]',
+        ),
+      );
+    });
+  });
+
   group('color (inline style)', () {
     testWidgets('renders hex values', (WidgetTester tester) async {
       const html = '<span style="color: #F00">red</span>'