overflow:hidden失效

[pba-cra]

使用的 Kraken 版本 ｜ What version of kraken are you using

master

重现步骤 ｜ Steps To Reproduce

重现代码 | Code example:

    let box = document.createElement('div');
    document.body.style.background= '#f92';
    document.body.style.width= '300px';
    document.body.style.height= '300px';
    document.body.appendChild(box);

    box.style.width = '82px';
    box.style.height = '82px';
    box.style.marginLeft = '100px';
    box.style.marginTop = '100px';
    box.style.background = '#6ad0e2';
    box.style.overflow = 'hidden';

    const icon = document.createElement('div');
    icon.style.width = '82px';
    icon.style.height = '82px';
    icon.style.zIndex = 0;
    icon.style.background= '#f32'
    icon.style.transform = 'translate(-32px,-32px)';

    box.appendChild(icon);

预期结果 ｜ Expected results:

实际结果 ｜ Actual results:

[pba-cra]

overflow.dart

  bool get clipX {
    RenderBoxModel renderBoxModel = this as RenderBoxModel;

    // Recycler layout not need repaintBoundary and scroll/pointer listeners,
    // ignoring overflowX or overflowY sets, which handle it self.
    if (renderBoxModel is RenderSliverListLayout) {
      return false;
    }

    List<Radius>? borderRadius = renderBoxModel.renderStyle.borderRadius;

    // The content of replaced elements is always trimmed to the content edge curve.
    // https://www.w3.org/TR/css-backgrounds-3/#corner-clipping
    if( borderRadius != null
      && this is RenderReplaced
      && renderStyle.intrinsicRatio != null
    ) {
      return true;
    }

    // Overflow value other than 'visible' always need to clip content.
    // https://www.w3.org/TR/css-overflow-3/#overflow-properties
    CSSOverflowType effectiveOverflowX = renderStyle.effectiveOverflowX;
    if (effectiveOverflowX != CSSOverflowType.visible) {
      Size scrollableSize = renderBoxModel.scrollableSize;
      Size scrollableViewportSize = renderBoxModel.scrollableViewportSize;
      // Border-radius always to clip inner content when overflow is not visible.
      if (scrollableSize.width > scrollableViewportSize.width
        || borderRadius != null
      ) {
        return true;
      }
    }

    return false;
  }

if (scrollableSize.width > scrollableViewportSize.width || borderRadius != null ) 判断条件未考虑到节点负向偏移的情况