effectiveDisplay property

Implementation

@override
CSSDisplay get effectiveDisplay {
  CSSDisplay transformedDisplay = display;

  // Helper function to blockify display values
  CSSDisplay blockifyDisplay(CSSDisplay display) {
    switch (display) {
      case CSSDisplay.inline:
        return CSSDisplay.block;
      case CSSDisplay.inlineBlock:
        return CSSDisplay.block;
      case CSSDisplay.inlineFlex:
        return CSSDisplay.flex;
    // Note: inline-grid and inline-table would go here when supported
      default:
      // Block-level elements remain unchanged
        return display;
    }
  }

  // 1. Absolutely positioned elements are blockified
  // https://www.w3.org/TR/css-display-3/#transformations
  if (position == CSSPositionType.absolute || position == CSSPositionType.fixed) {
    return blockifyDisplay(transformedDisplay);
  }

  // 2. Floated elements are blockified
  // https://www.w3.org/TR/css-display-3/#transformations
  // TODO: Implement when float property is supported in WebF
  // if (float == CSSFloat.left || float == CSSFloat.right) {
  //   return blockifyDisplay(transformedDisplay);
  // }

  // 3. Flex items are blockified (children of flex containers)
  // https://www.w3.org/TR/css-display-3/#transformations
  if (hasRenderBox() && isParentRenderBoxModel()) {
    RenderStyle? parentRenderStyle = getParentRenderStyle();
    if (parentRenderStyle != null) {
      // Check if parent is a flex container
      if (parentRenderStyle.display == CSSDisplay.flex ||
          parentRenderStyle.display == CSSDisplay.inlineFlex) {
        transformedDisplay = blockifyDisplay(transformedDisplay);
      }

      // 4. Grid items are blockified
      if (parentRenderStyle.display == CSSDisplay.grid ||
          parentRenderStyle.display == CSSDisplay.inlineGrid) {
        transformedDisplay = blockifyDisplay(transformedDisplay);
      }
    }
  }

  return transformedDisplay;
}