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;

  // 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;
      case CSSDisplay.inlineGrid:
        return CSSDisplay.grid;
      // Note: 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
  // Do not rely on the Flutter render tree shape here: style/render wrappers
  // (e.g., overflow clips, event listeners, semantics) can sit between an item
  // and its container, but the CSS item relationship is defined by the DOM.
  final RenderStyle? parentRenderStyle = getAttachedRenderParentRenderStyle<RenderStyle>();
  if (parentRenderStyle != null) {
    final CSSDisplay parentDisplay = parentRenderStyle.display;
    // Check if parent is a flex container
    if (parentDisplay == CSSDisplay.flex || parentDisplay == CSSDisplay.inlineFlex) {
      transformedDisplay = blockifyDisplay(transformedDisplay);
    }

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

  return transformedDisplay;
}