Improve support for background image

packages/core/README.md

@@ -126,17 +126,21 @@ These tags and their contents will be ignored:
 ### Inline stylings
 
 - background: 1 value (color)
-  - background-color
+  - background-color: hex values, `rgb()`, `hsl()` or named colors
+  - background-image: `url()` with support for asset (`asset://`), data uri, local file (`file://`) and network image
+  - background-repeat: no-repeat/repeat/repeat-x/repeat-y
+  - background-position: single or double instances of bottom/center/left/right/top (e.g. `top left`)
+  - background-size: auto/contain/cover
 - border: 3 values (width style color), 2 values (width style) or 1 value (width)
   - border-top, border-right, border-bottom, border-left
   - border-block-start, border-block-end
   - border-inline-start, border-inline-end
-- border-radius: 4, 3, 2 or 1 values with slash support (e.g. `10px / 20px`)
+- border-radius: 4, 3, 2 or 1 value with slash support (e.g. `10px / 20px`)
   - border-top-left-radius: 2 values or 1 value in `em`, `pt` and `px`
   - border-top-right-radius: 2 values or 1 value in `em`, `pt` and `px`
   - border-bottom-right-radius: 2 values or 1 value in `em`, `pt` and `px`
   - border-bottom-left-radius: 2 values or 1 value in `em`, `pt` and `px`
-- color: hex values, `rgb()`, `hsl()` or named colors
+- color (similar to `background-color` inline styling)
 - direction (similar to `dir` attribute)
 - display: block/flex/inline/inline-block/none
   - In `flex` mode:
@@ -171,7 +175,7 @@ These tags and their contents will be ignored:
 
 ## Extensibility
 
-This package implements widget building logic with high testing coverage to ensure correctness. It tries to render an optimal tree by using `RichText` with specific `TextStyle`, merging text spans together, showing images in sized box, etc. The idea is to build a solid foundation for apps to customize.
+This package implements widget building logic with high testing coverage to ensure correctness. It tries to render an optimal tree by using `RichText` with specific `TextStyle`, collapsing margins, proper whitespace handling, etc. The idea is to build a solid foundation for apps to customize.
 
 The [enhanced](https://pub.dev/packages/flutter_widget_from_html) package uses a custom `WidgetFactory` with pre-built mixins for easy usage:
 

packages/core/lib/src/core_widget_factory.dart

@@ -147,12 +147,12 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
     BoxBorder? border,
     BorderRadius? borderRadius,
     Color? color,
-    String? bgImageUrl,
+    DecorationImage? image,
   }) {
     if (border == null &&
         borderRadius == null &&
         color == null &&
-        bgImageUrl == null) {
+        image == null) {
       return child;
     }
 
@@ -164,7 +164,7 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
     var decoration = baseDeco.copyWith(
       border: border,
       color: color,
-      image: buildDecorationImage(bgImageUrl),
+      image: image,
     );
 
     var clipBehavior = Clip.none;
@@ -187,7 +187,13 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
   }
 
   /// Builds decoration image from [url]
-  DecorationImage? buildDecorationImage(String? url) {
+  DecorationImage? buildDecorationImage(
+    BuildTree tree,
+    String? url, {
+    AlignmentGeometry alignment = Alignment.topLeft,
+    BoxFit fit = BoxFit.scaleDown,
+    ImageRepeat repeat = ImageRepeat.noRepeat,
+  }) {
     if (url == null) {
       return null;
     }
@@ -208,7 +214,12 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
       return null;
     }
 
-    return DecorationImage(image: provider);
+    return DecorationImage(
+      alignment: alignment,
+      fit: fit,
+      image: provider,
+      repeat: repeat,
+    );
   }
 
   /// Builds [Flex].
@@ -1026,12 +1037,6 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
   void parseStyle(BuildTree tree, css.Declaration style) {
     final key = style.property;
     switch (key) {
-      case kCssBackground:
-      case kCssBackgroundColor:
-      case kCssBackgroundImage:
-        tree.register(_styleBackground ??= StyleBackground(this).buildOp);
-        break;
-
       case kCssColor:
         final color = tryParseColor(style.value);
         if (color != null) {
@@ -1134,6 +1139,10 @@ class WidgetFactory extends WidgetFactoryResetter with AnchorWidgetFactory {
         break;
     }
 
+    if (key.startsWith(kCssBackground)) {
+      tree.register(_styleBackground ??= StyleBackground(this).buildOp);
+    }
+
     if (key.startsWith(kCssBorder)) {
       tree.register(_styleBorder ??= StyleBorder(this).buildOp);
     }

packages/core/lib/src/internal/ops/priorities.dart

@@ -8,12 +8,16 @@ part of '../core_ops.dart';
 /// User's build op has a default priority of 10 so they should run
 /// after our early ops and before our normal ops.
 class Priority {
+  static const max = 9007199254740991;
+
+  @visibleForTesting
+  static const step = 1000000000;
+
   static const _baseEarly00 = -3000000000000000;
   static const _baseNormal00 = 1000000000000000;
   static const _baseBoxModel = 5000000000000000;
   static const _baseLate0000 = 9000000000000000;
-  static const _step = 1000000000;
-  static const max = 9007199254740991;
+  static const _step = step;
 
   static const first = _baseNormal00;
   static const tagA = first + _step;