Add fixes for some table and intrinsic sizing issues

lib/src/builtins/image_builtin.dart

@@ -93,7 +93,8 @@ class ImageBuiltIn extends HtmlExtension {
     }
 
     return WidgetSpan(
-      alignment: context.style!.verticalAlign.toPlaceholderAlignment(context.style!.display),
+      alignment: context.style!.verticalAlign
+          .toPlaceholderAlignment(context.style!.display),
       baseline: TextBaseline.alphabetic,
       child: CssBoxWidget(
         style: imageStyle,

lib/src/builtins/interactive_element_builtin.dart

@@ -61,13 +61,19 @@ class InteractiveElementBuiltIn extends HtmlExtension {
         children: childSpan.children
             ?.map((e) => _processInteractableChild(context, e))
             .toList(),
+        recognizer: TapGestureRecognizer()..onTap = onTap,
         style: childSpan.style,
         semanticsLabel: childSpan.semanticsLabel,
-        recognizer: TapGestureRecognizer()..onTap = onTap,
+        locale: childSpan.locale,
+        mouseCursor: childSpan.mouseCursor,
+        onEnter: childSpan.onEnter,
+        onExit: childSpan.onExit,
+        spellOut: childSpan.spellOut,
       );
     } else {
       return WidgetSpan(
-        alignment: context.style!.verticalAlign.toPlaceholderAlignment(context.style!.display),
+        alignment: context.style!.verticalAlign
+            .toPlaceholderAlignment(context.style!.display),
         baseline: TextBaseline.alphabetic,
         child: MultipleTapGestureDetector(
           onTap: onTap,

lib/src/builtins/styled_element_builtin.dart

@@ -428,27 +428,26 @@ class StyledElementBuiltIn extends HtmlExtension {
   @override
   InlineSpan build(ExtensionContext context) {
     final style = context.styledElement!.style;
-    final display = style.display;
-    if (display == Display.listItem ||
-        ((display == Display.block || display == Display.inlineBlock) &&
+    final display = style.display ?? Display.inline;
+    if (display.displayListItem ||
+        ((display.isBlock || display == Display.inlineBlock) &&
             (context.styledElement!.children.isNotEmpty ||
                 context.elementName == "hr"))) {
       return WidgetSpan(
         alignment: style.verticalAlign.toPlaceholderAlignment(display),
         baseline: TextBaseline.alphabetic,
         child: CssBoxWidget.withInlineSpanChildren(
           key: AnchorKey.of(context.parser.key, context.styledElement),
-          style: context.styledElement!.style,
+          style: context.style!,
           shrinkWrap: context.parser.shrinkWrap,
-          childIsReplaced: ["iframe", "img", "video", "audio"]
-              .contains(context.styledElement!.name),
+          childIsReplaced:
+              ["iframe", "img", "video", "audio"].contains(context.elementName),
           children: context.builtChildrenMap!.entries
               .expandIndexed((i, child) => [
                     child.value,
                     if (context.parser.shrinkWrap &&
                         i != context.styledElement!.children.length - 1 &&
-                        (child.key.style.display == Display.block ||
-                            child.key.style.display == Display.listItem) &&
+                        (child.key.style.display?.isBlock ?? false) &&
                         child.key.element?.localName != "html" &&
                         child.key.element?.localName != "body")
                       const TextSpan(text: "\n", style: TextStyle(fontSize: 0)),
@@ -464,7 +463,7 @@ class StyledElementBuiltIn extends HtmlExtension {
           .expandIndexed((index, child) => [
                 child.value,
                 if (context.parser.shrinkWrap &&
-                    child.key.style.display == Display.block &&
+                    (child.key.style.display?.isBlock ?? false) &&
                     index != context.styledElement!.children.length - 1 &&
                     child.key.element?.parent?.localName != "th" &&
                     child.key.element?.parent?.localName != "td" &&

lib/src/css_box_widget.dart

@@ -159,10 +159,7 @@ class CssBoxWidget extends StatelessWidget {
   /// width available to it or if it should just let its inner content
   /// determine the content-box's width.
   bool _shouldExpandToFillBlock() {
-    return (style.display == Display.block ||
-            style.display == Display.listItem) &&
-        !childIsReplaced &&
-        !shrinkWrap;
+    return (style.display?.isBlock ?? false) && !childIsReplaced && !shrinkWrap;
   }
 
   TextDirection _checkTextDirection(
@@ -424,42 +421,62 @@ class RenderCSSBox extends RenderBox
     }
   }
 
-  static double getIntrinsicDimension(RenderBox? firstChild,
-      double Function(RenderBox child) mainChildSizeGetter) {
+  static double getIntrinsicDimension(
+      RenderBox? firstChild,
+      double Function(RenderBox child) mainChildSizeGetter,
+      double marginSpaceNeeded) {
     double extent = 0.0;
     RenderBox? child = firstChild;
     while (child != null) {
       final CSSBoxParentData childParentData =
           child.parentData! as CSSBoxParentData;
-      extent = math.max(extent, mainChildSizeGetter(child));
+      try {
+        extent = math.max(extent, mainChildSizeGetter(child));
+      } catch (_) {
+        // See https://github.com/flutter/flutter/issues/65895
+        debugPrint(
+            "Due to Flutter layout restrictions (see https://github.com/flutter/flutter/issues/65895), contents set to `vertical-align: baseline` within an intrinsically-sized layout may not display as expected. If content is cut off or displaying incorrectly, please try setting vertical-align to 'bottom' on the problematic elements");
+      }
       assert(child.parentData == childParentData);
       child = childParentData.nextSibling;
     }
-    return extent;
+    return extent + marginSpaceNeeded;
   }
 
   @override
   double computeMinIntrinsicWidth(double height) {
     return getIntrinsicDimension(
-        firstChild, (RenderBox child) => child.getMinIntrinsicWidth(height));
+      firstChild,
+      (RenderBox child) => child.getMinIntrinsicWidth(height),
+      _calculateIntrinsicMargins().horizontal,
+    );
   }
 
   @override
   double computeMaxIntrinsicWidth(double height) {
     return getIntrinsicDimension(
-        firstChild, (RenderBox child) => child.getMaxIntrinsicWidth(height));
+      firstChild,
+      (RenderBox child) => child.getMaxIntrinsicWidth(height),
+      _calculateIntrinsicMargins().horizontal,
+    );
   }
 
   @override
   double computeMinIntrinsicHeight(double width) {
     return getIntrinsicDimension(
-        firstChild, (RenderBox child) => child.getMinIntrinsicHeight(width));
+      firstChild,
+      (RenderBox child) => child.getMinIntrinsicHeight(width),
+      _calculateIntrinsicMargins().vertical,
+    );
   }
 
   @override
   double computeMaxIntrinsicHeight(double width) {
     return getIntrinsicDimension(
-        firstChild, (RenderBox child) => child.getMaxIntrinsicHeight(width));
+      firstChild,
+      (RenderBox child) => child.getMaxIntrinsicHeight(width),
+      _calculateIntrinsicMargins().vertical,
+    );
   }
 
   @override
@@ -521,31 +538,20 @@ class RenderCSSBox extends RenderBox
 
     //Calculate Width and Height of CSS Box
     height = childSize.height;
-    switch (display) {
-      case Display.block:
-        width = (shrinkWrap || childIsReplaced)
-            ? childSize.width + horizontalMargins
-            : containingBlockSize.width;
-        height = childSize.height + verticalMargins;
-        break;
-      case Display.inline:
-        width = childSize.width + horizontalMargins;
-        height = childSize.height;
-        break;
-      case Display.inlineBlock:
-        width = childSize.width + horizontalMargins;
-        height = childSize.height + verticalMargins;
-        break;
-      case Display.listItem:
-        width = shrinkWrap
-            ? childSize.width + horizontalMargins
-            : containingBlockSize.width;
-        height = childSize.height + verticalMargins;
-        break;
-      case Display.none:
-        width = 0;
-        height = 0;
-        break;
+    if (display.displayBox == DisplayBox.none) {
+      width = 0;
+      height = 0;
+    } else if (display == Display.inlineBlock) {
+      width = childSize.width + horizontalMargins;
+      height = childSize.height + verticalMargins;
+    } else if (display.isBlock) {
+      width = (shrinkWrap || childIsReplaced)
+          ? childSize.width + horizontalMargins
+          : containingBlockSize.width;
+      height = childSize.height + verticalMargins;
+    } else {
+      width = childSize.width + horizontalMargins;
+      height = childSize.height;
     }
 
     return _Sizes(constraints.constrain(Size(width, height)), childSize);
@@ -575,26 +581,14 @@ class RenderCSSBox extends RenderBox
 
     double leftOffset = 0;
     double topOffset = 0;
-    switch (display) {
-      case Display.block:
-        leftOffset = leftMargin;
-        topOffset = topMargin;
-        break;
-      case Display.inline:
-        leftOffset = leftMargin;
-        break;
-      case Display.inlineBlock:
-        leftOffset = leftMargin;
-        topOffset = topMargin;
-        break;
-      case Display.listItem:
-        leftOffset = leftMargin;
-        topOffset = topMargin;
-        break;
-      case Display.none:
-        //No offset
-        break;
+
+    if (display.isBlock || display == Display.inlineBlock) {
+      leftOffset = leftMargin;
+      topOffset = topMargin;
+    } else if (display.displayOutside == DisplayOutside.inline) {
+      leftOffset = leftMargin;
     }
+
     childParentData.offset = Offset(leftOffset, topOffset);
     assert(child.parentData == childParentData);
 
@@ -628,7 +622,7 @@ class RenderCSSBox extends RenderBox
 
   Margins _calculateUsedMargins(Size childSize, Size containingBlockSize) {
     //We assume that margins have already been preprocessed
-    // (i.e. they are non-null and either px units or auto.
+    // (i.e. they are non-null and either px units or auto).
     assert(margins.left != null && margins.right != null);
     assert(margins.left!.unit == Unit.px || margins.left!.unit == Unit.auto);
     assert(margins.right!.unit == Unit.px || margins.right!.unit == Unit.auto);
@@ -737,6 +731,40 @@ class RenderCSSBox extends RenderBox
     );
   }
 
+  Margins _calculateIntrinsicMargins() {
+    //We assume that margins have already been preprocessed
+    // (i.e. they are non-null and either px units or auto).
+    assert(margins.left != null && margins.right != null);
+    assert(margins.left!.unit == Unit.px || margins.left!.unit == Unit.auto);
+    assert(margins.right!.unit == Unit.px || margins.right!.unit == Unit.auto);
+
+    Margin marginLeft = margins.left!;
+    Margin marginRight = margins.right!;
+
+    bool marginLeftIsAuto = marginLeft.unit == Unit.auto;
+    bool marginRightIsAuto = marginRight.unit == Unit.auto;
+
+    if (display.isBlock) {
+      if (marginLeftIsAuto) {
+        marginLeft = Margin(0);
+      }
+
+      if (marginRightIsAuto) {
+        marginRight = Margin(0);
+      }
+    } else {
+      marginLeft = Margin(0);
+      marginRight = Margin(0);
+    }
+
+    return Margins(
+      left: marginLeft,
+      right: marginRight,
+      top: margins.top,
+      bottom: margins.bottom,
+    );
+  }
+
   @override
   bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
     return defaultHitTestChildren(result, position: position);

lib/src/processing/margins.dart

@@ -32,8 +32,10 @@ class MarginProcessing {
     //Collapsing should be depth-first.
     tree.children.forEach(_collapseMargins);
 
-    //The root boxes do not collapse.
-    if (tree.name == '[Tree Root]' || tree.name == 'html') {
+    //The root boxes and table/ruby elements do not collapse.
+    if (tree.name == '[Tree Root]' ||
+        tree.name == 'html' ||
+        tree.style.display?.displayInternal != null) {
       return tree;
     }
 
@@ -67,7 +69,8 @@ class MarginProcessing {
 
     // Handle case (3) from above.
     // Bottom margins cannot collapse if the element has padding
-    if ((tree.style.padding?.bottom ?? tree.style.padding?.blockEnd ?? 0) ==
+    if ((tree.style.padding?.bottom?.value ??
+            tree.style.padding?.blockEnd?.value) ==
         0) {
       final parentBottom = tree.style.margin?.bottom?.value ??
           tree.style.margin?.blockEnd?.value ??

lib/src/style.dart

@@ -689,14 +689,17 @@ enum VerticalAlign {
   /// Converts this [VerticalAlign] to a [PlaceholderAlignment] given the
   /// [Display] type of the current context
   PlaceholderAlignment toPlaceholderAlignment(Display? display) {
-
     // vertical-align only applies to inline context elements.
     // If we aren't in such a context, use the default 'bottom' alignment.
-    if(display != Display.inline && display != Display.inlineBlock) {
+    // Also note that the default display, if it is not set, is inline, so we
+    // treat null `display` values as if they were inline by default.
+    if (display != Display.inline &&
+        display != Display.inlineBlock &&
+        display != null) {
       return PlaceholderAlignment.bottom;
     }
 
-    switch(this) {
+    switch (this) {
       case VerticalAlign.baseline:
       case VerticalAlign.sub:
       case VerticalAlign.sup:
@@ -708,7 +711,6 @@ enum VerticalAlign {
       case VerticalAlign.middle:
         return PlaceholderAlignment.middle;
     }
-
   }
 }