effectiveDisplay property

@override CSSDisplay get effectiveDisplay

Some layout effects require blockification or inlinification of the box type https://www.w3.org/TR/css-display-3/#transformations

Implementation

@override
CSSDisplay get effectiveDisplay {
  CSSDisplay transformedDisplay = display;

  // Must take `position` from style because it inited before flush pending properties.
  // Display as inline-block when element is positioned
  if (position == CSSPositionType.absolute || position == CSSPositionType.fixed) {
    return CSSDisplay.inlineBlock;
  }

  if (renderBoxModel != null) {
    if (renderBoxModel!.parent is! RenderBoxModel) {
      return transformedDisplay;
    } else if (renderBoxModel!.parent is RenderFlexLayout) {
      // Margin change in flex layout may affect transformed display
      // https://www.w3.org/TR/css-display-3/#transformations

      // Display as inline-block if parent node is flex
      transformedDisplay = CSSDisplay.inlineBlock;
      RenderBoxModel parent = renderBoxModel!.parent as RenderBoxModel;
      RenderStyle parentRenderStyle = parent.renderStyle;

      bool isVerticalDirection = parentRenderStyle.flexDirection == FlexDirection.column ||
          parentRenderStyle.flexDirection == FlexDirection.columnReverse;
      // Flex item will not stretch in stretch alignment when flex wrap is set to wrap or wrap-reverse
      bool isFlexNoWrap = parentRenderStyle.flexWrap == FlexWrap.nowrap;
      bool isStretchSelf = alignSelf != AlignSelf.auto
        ? alignSelf == AlignSelf.stretch
        : parentRenderStyle.alignItems == AlignItems.stretch;

      // Display as block if flex vertical layout children and stretch children
      if (!marginLeft.isAuto && !marginRight.isAuto && isVerticalDirection && isFlexNoWrap && isStretchSelf) {
        transformedDisplay = CSSDisplay.block;
      }
    }
  }


  return transformedDisplay;
}