Adjust sizing logic for IMG tag (#854)

Author: daohoangson

demo_app/test/goldens.json

@@ -42,6 +42,7 @@
   "IMG/inline_height_only": "Foo <img src=\"asset:images/100x10.png\" height=\"5\" /> bar.",
   "IMG/inline_small": "Foo <img src=\"asset:images/100x10.png\" /> bar.",
   "IMG/inline_small_dimensions": "Foo <img src=\"asset:images/100x10.png\" width=\"100\" height=\"10\" /> bar.",
+  "IMG/inline_small_dimensions_then_padding": "Foo <img src=\"asset:images/100x10.png\" height=\"10\" width=\"100\" style=\"padding-inline-end: 50px\" /> bar.",
   "IMG/inline_width_only": "Foo <img src=\"asset:images/100x10.png\" width=\"50\" /> bar.",
   "IMG/downscale/block_both": "Foo <img src=\"asset:images/2000x200.png\" style=\"display: block; height: 20px; width: 200px\" /> bar.",
   "IMG/downscale/block_height": "Foo <img src=\"asset:images/2000x200.png\" style=\"display: block; height: 20px\" /> bar.",

demo_app/test/goldens/IMG/inline_small_dimensions_then_padding.png

@@ -28,12 +28,10 @@ class WidgetFactory {
 
   BuildOp? _styleBgColor;
   BuildOp? _styleBorder;
-  BuildOp? _styleDisplayBlock;
   BuildOp? _styleDisplayInlineBlock;
   BuildOp? _styleDisplayNone;
   BuildOp? _styleMargin;
   BuildOp? _stylePadding;
-  BuildOp? _styleSizing;
   BuildOp? _styleTextDecoration;
   BuildOp? _styleVerticalAlign;
   BuildOp? _tagA;
@@ -1002,8 +1000,7 @@ class WidgetFactory {
       case kCssMinHeight:
       case kCssMinWidth:
       case kCssWidth:
-        _styleSizing ??= StyleSizing(this).buildOp;
-        meta.register(_styleSizing!);
+        StyleSizing.registerSizing(this, meta);
         break;
 
       case kCssLineHeight:
@@ -1076,10 +1073,11 @@ class WidgetFactory {
 
   /// Parses display inline style.
   void parseStyleDisplay(BuildMetadata meta, String? value) {
+    StyleSizing.registerChild(this, meta);
+
     switch (value) {
       case kCssDisplayBlock:
-        final displayBlock = _styleDisplayBlock ??= DisplayBlockOp(this);
-        meta.register(displayBlock);
+        StyleSizing.registerBlock(this, meta);
         break;
       case kCssDisplayInlineBlock:
         final displayInlineBlock = _styleDisplayInlineBlock ??= BuildOp(

demo_app/test/goldens/inline/sizing/complicated_box.png

@@ -4,6 +4,8 @@ const kCssBackground = 'background';
 const kCssBackgroundColor = 'background-color';
 
 class StyleBgColor {
+  static const kPriorityBoxModel7k5 = 7500;
+
   final WidgetFactory wf;
 
   static final _skipBuilding = Expando<bool>();
@@ -42,7 +44,7 @@ class StyleBgColor {
           );
         },
         onWidgetsIsOptional: true,
-        priority: StyleBorder.kPriorityBoxModel5k + 1,
+        priority: kPriorityBoxModel7k5,
       );
 
   Color? _parseColor(WidgetFactory wf, BuildMetadata meta) {

demo_app/test/li/li_within_li.png

@@ -5,7 +5,7 @@ const kCssBoxSizingContentBox = 'content-box';
 const kCssBoxSizingBorderBox = 'border-box';
 
 class StyleBorder {
-  static const kPriorityBoxModel5k = 5000;
+  static const kPriorityBoxModel7k = 7000;
 
   final WidgetFactory wf;
 
@@ -62,7 +62,7 @@ class StyleBorder {
           ];
         },
         onWidgetsIsOptional: true,
-        priority: kPriorityBoxModel5k,
+        priority: kPriorityBoxModel7k,
       );
 
   Widget? _buildBorder(

demo_app/test/table/aspect_ratio_img.png

@@ -18,7 +18,7 @@ Widget _paddingInlineSizedBox(double? width) =>
     width != null && width > 0 ? SizedBox(width: width) : widget0;
 
 class StylePadding {
-  static const kPriorityBoxModel3k = 3000;
+  static const kPriorityBoxModel5k = 5000;
 
   final WidgetFactory wf;
 
@@ -69,7 +69,7 @@ class StylePadding {
           ];
         },
         onWidgetsIsOptional: true,
-        priority: kPriorityBoxModel3k,
+        priority: kPriorityBoxModel5k,
       );
 
   Widget? _build(