haikuwebkit/LayoutTests/fast/layers/overflow-scroll-transform-b...

9 lines
366 B
HTML
Raw Permalink Normal View History

Ensure scrollable transformed elements that are themselves within scrollable elements don't ignore border-radius https://bugs.webkit.org/show_bug.cgi?id=216978 <rdar://69660229> Reviewed by Darin Adler. Source/WebCore: We use ShouldRespectOverflowClip to prevent clips from ancestors from being used when we paint a scrollable layer (when PaintLayerFlag::PaintingOverflowContents is set). We only look at the ShouldRespectOverflowClip value when we're painting a layer we're considering to be a clip rect root layer, and we unconditionally apply ancestor clips for layers that aren't clip rect roots. A non-root layer with a transform is handled by applying the transform and painting the layer as a root layer (since we don't want to handle computing the effect of ancestor clip rects past the transform). When the transformed layer also has a border-radius, we incorrectly skip marking its clip rect as being affected by radius, since we currently do this at the same time as applying ancestor clip rects. This patch splits out the setAffectedByRadius call so that it happens even for transformed non-root layers. Test: fast/layers/overflow-scroll-transform-border-radius.html * rendering/RenderLayer.cpp: (WebCore::ClipRects::setOverflowClipRectAffectedByRadius): (WebCore::RenderLayer::calculateClipRects const): LayoutTests: * fast/layers/overflow-scroll-transform-border-radius-expected.html: Added. * fast/layers/overflow-scroll-transform-border-radius.html: Added. Canonical link: https://commits.webkit.org/237705@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@277462 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-05-13 23:19:48 +00:00
<!DOCTYPE html>
<p>Test passes if the blue rectangle has a rounded top left corner.</p>
<div style="width: 100px; height: 100px; overflow: scroll;">
<div style="transform: translate(10px, 10px);">
<div style="width: 50px; height: 50px; background-color: blue; border-radius: 25px 0 0 0;"></div>
</div>
<div style="width: 200px; height: 1px;"></div>
</div>