Skip to content
Permalink
Browse files
Transformed element with overflow:hidden fails to clip absolutely pos…
…itioned descendants

https://bugs.webkit.org/show_bug.cgi?id=241641

Reviewed by Simon Fraser.

If an element is a containing block and applied with overflow:hidden,
its absolutely positioned descendants should be clipped by the border
box. However, some properties, for example, transform, perspective,
will-change:transform, contain:paint and contain:layout didn't work as
expected.

* LayoutTests/fast/overflow/containing-block-and-overflow-hidden-expected.html: Added.
* LayoutTests/fast/overflow/containing-block-and-overflow-hidden.html: Added.
* LayoutTests/platform/glib/TestExpectations:
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateClipRects const):

Canonical link: https://commits.webkit.org/252387@main
  • Loading branch information
fujii committed Jul 12, 2022
1 parent 4e0aad1 commit c35d5dd9cfd744d3f19ceda45da12879415431c0
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 5 deletions.
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<style>
div {
display: inline-block;
width: 50px;
height: 50px;
background: green;
}
</style>

<p>You should see no red.</p>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<style>
div {
display: inline-block;
width: 50px;
height: 50px;
}
.parent {
background: green;
overflow: hidden;
}
.child {
position: absolute;
top: 60px;
background: red;
}
</style>

<p>You should see no red.</p>

<div class="parent" style="position:relative"><div class="child"></div></div>
<div class="parent" style="transform:scale(1)"><div class="child"></div></div>
<div class="parent" style="transform:translate(0)"><div class="child"></div></div>
<div class="parent" style="will-change:transform"><div class="child"></div></div>
<div class="parent" style="perspective:0"><div class="child"></div></div>
<div class="parent" style="contain:paint"><div class="child"></div></div>
<div class="parent" style="contain:layout"><div class="child"></div></div>
@@ -671,7 +671,6 @@ webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/composite
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg.html
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/transform-fixed-bg-007.html [ ImageOnlyFailure ]
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/perspective-split-by-zero-w.html [ ImageOnlyFailure ]
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change.html [ ImageOnlyFailure ]
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/perspective-transforms-equivalence.html [ ImageOnlyFailure ]

webkit.org/b/237502 fast/dom/Range/getClientRects.html [ Failure ]
@@ -4691,12 +4691,10 @@ void RenderLayer::calculateClipRects(const ClipRectsContext& clipRectsContext, C

newOverflowClip.setAffectedByRadius(renderer().style().hasBorderRadius());
clipRects.setOverflowClipRect(intersection(newOverflowClip, clipRects.overflowClipRect()));
if (renderer().isPositioned())
clipRects.setPosClipRect(intersection(newOverflowClip, clipRects.posClipRect()));
if (renderer().shouldApplyPaintContainment()) {
if (renderer().canContainAbsolutelyPositionedObjects())
clipRects.setPosClipRect(intersection(newOverflowClip, clipRects.posClipRect()));
if (renderer().shouldApplyPaintContainment())
clipRects.setFixedClipRect(intersection(newOverflowClip, clipRects.fixedClipRect()));
}
}
if (renderer().hasClip() && is<RenderBox>(renderer())) {
LayoutRect newPosClip = downcast<RenderBox>(renderer()).clipRect(offset, nullptr);

0 comments on commit c35d5dd

Please sign in to comment.