Skip to content

GitLab

T
tangled
Commit 6decaed2 authored by Scott Violet's avatar Scott Violet Committed by Commit Bot
Browse files
Options

blink: make LayoutBox adjust visual-overflow of children 

This is necessary if one axis is visible and the other clipped.

BUG=1087667
TEST=wpt/css/css-overflow/overflow-clip-content-visual-overflow.html

Change-Id: I854fb2031c7d9149cbac6493f69c46ac22f14a39
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2450793Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Scott Violet <sky@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814495}
parent 962fa24a
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 12 deletions
third_party/blink/renderer/core/layout/layout_box.cc
View file @ 6decaed2
...@@ -347,7 +347,23 @@ inline void CheckDidAddFragment(const LayoutBox& box, ...@@ -347,7 +347,23 @@ inline void CheckDidAddFragment(const LayoutBox& box,
const NGPhysicalBoxFragment& fragment) {} const NGPhysicalBoxFragment& fragment) {}
#endif #endif
} // anonymous namespace // Applies the overflow clip to |result|. For any axis that is clipped, |result|
// is reset to |no_overflow_rect|. If neither axis is clipped, nothing is
// changed.
void ApplyOverflowClip(OverflowClipAxes overflow_clip_axes,
const LayoutRect& no_overflow_rect,
LayoutRect& result) {
if (overflow_clip_axes & kOverflowClipX) {
result.SetX(no_overflow_rect.X());
result.SetWidth(no_overflow_rect.Width());
}
if (overflow_clip_axes & kOverflowClipY) {
result.SetY(no_overflow_rect.Y());
result.SetHeight(no_overflow_rect.Height());
}
}
} // namespace
BoxLayoutExtraInput::BoxLayoutExtraInput(LayoutBox& box) : box(box) { BoxLayoutExtraInput::BoxLayoutExtraInput(LayoutBox& box) : box(box) {
box.SetBoxLayoutExtraInput(this); box.SetBoxLayoutExtraInput(this);
...@@ -7212,10 +7228,15 @@ LayoutRect LayoutBox::VisualOverflowRect() const { ...@@ -7212,10 +7228,15 @@ LayoutRect LayoutBox::VisualOverflowRect() const {
NOT_DESTROYED(); NOT_DESTROYED();
if (!VisualOverflowIsSet()) if (!VisualOverflowIsSet())
return BorderBoxRect(); return BorderBoxRect();
if (ShouldClipOverflowAlongEitherAxis() || HasMask()) const OverflowClipAxes overflow_clip_axes = GetOverflowClipAxes();
if (overflow_clip_axes == kOverflowClipBothAxis || HasMask())
return overflow_->visual_overflow->SelfVisualOverflowRect(); return overflow_->visual_overflow->SelfVisualOverflowRect();
return UnionRect(overflow_->visual_overflow->SelfVisualOverflowRect(), const LayoutRect& self_visual_overflow_rect =
overflow_->visual_overflow->ContentsVisualOverflowRect()); overflow_->visual_overflow->SelfVisualOverflowRect();
LayoutRect result = overflow_->visual_overflow->ContentsVisualOverflowRect();
result.Unite(self_visual_overflow_rect);
ApplyOverflowClip(overflow_clip_axes, self_visual_overflow_rect, result);
return result;
} }
PhysicalOffset LayoutBox::OffsetPoint(const Element* parent) const { PhysicalOffset LayoutBox::OffsetPoint(const Element* parent) const {
...@@ -7671,14 +7692,7 @@ void LayoutBox::ApplyOverflowClipToLayoutOverflowRect() { ...@@ -7671,14 +7692,7 @@ void LayoutBox::ApplyOverflowClipToLayoutOverflowRect() {
const LayoutRect no_overflow_rect = NoOverflowRect(); const LayoutRect no_overflow_rect = NoOverflowRect();
LayoutRect overflow_rect = overflow_->layout_overflow->LayoutOverflowRect(); LayoutRect overflow_rect = overflow_->layout_overflow->LayoutOverflowRect();
if (overflow_clip_axes & kOverflowClipX) { ApplyOverflowClip(overflow_clip_axes, no_overflow_rect, overflow_rect);
overflow_rect.SetX(no_overflow_rect.X());
overflow_rect.SetWidth(no_overflow_rect.Width());
}
if (overflow_clip_axes & kOverflowClipY) {
overflow_rect.SetY(no_overflow_rect.Y());
overflow_rect.SetHeight(no_overflow_rect.Height());
}
overflow_->layout_overflow->SetLayoutOverflow(overflow_rect); overflow_->layout_overflow->SetLayoutOverflow(overflow_rect);
} }
......
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-content-visual-overflow-ref.html 0 → 100644
View file @ 6decaed2
<!doctype html>
<meta charset="utf-8">
<title>Overflow: verifies content visual overflow is shown</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<style>
body {
margin: 0
}
.shadow {
width: 100px;
height: 100px;
will-change: transform;
background: black;
box-shadow: 10px 50px 5px red;
}
.cover {
width: 200px;
height: 200px;
background: white;
position: absolute;
}
.spacer {
width: 100px;
height: 150px;
}
</style>
<div class="shadow"></div>
<div class="cover" style="left: 100px; top: 0"></div>
<div class="spacer"></div>
<div class="shadow"></div>
<div class="cover" style="top: 350px"></div>
</script>
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-content-visual-overflow.html 0 → 100644
View file @ 6decaed2
<!doctype html>
<meta charset="utf-8">
<title>Overflow: verifies content visual overflow is shown</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<link rel="match" href="overflow-clip-content-visual-overflow-ref.html">
<style>
body {
margin: 0
}
.parent {
width: 100px;
height: 100px;
will-change: transform;
}
.child {
width: 100px;
height: 100px;
background: black;
box-shadow: 10px 50px 5px red;
}
.spacer {
width: 100px;
height: 150px;
}
</style>
<div class="parent" style="overflow-x: clip; overflow-y: visible">
<div class="child"></div>
</div>
<div class="spacer"></div>
<div class="parent" style="overflow-x: visible; overflow-y: clip">
<div class="child"></div>
</div>
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment