Skip to content

GitLab

T
tangled
Commit 50089e62 authored by Scott Violet's avatar Scott Violet Committed by Chromium LUCI CQ
Browse files
Options

blink: makes contain: paint honor overflow-clip-margin 

This gives the same logic as that of 'overflow: clip.'

BUG=1159155
TEST=overflow-clip-margin-00[456].html

Change-Id: I1396fad5fbf4464daee8d021191797ba7d01856c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2596828Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Scott Violet <sky@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841477}
parent b4b6e3ec
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 6 deletions
third_party/blink/renderer/core/css/resolver/style_adjuster.cc
View file @ 50089e62
......@@ -734,10 +734,11 @@ void StyleAdjuster::AdjustComputedStyle(StyleResolverState& state,
AdjustOverflow(style);
// overflow-clip-margin only applies if 'overflow: clip' is set along both
// axis.
if (style.OverflowX() != EOverflow::kClip ||
style.OverflowY() != EOverflow::kClip) {
style.SetOverflowClipMargin(LayoutUnit());
// axis or 'contain: paint'.
if (!style.ContainsPaint() && !(style.OverflowX() == EOverflow::kClip &&
style.OverflowY() == EOverflow::kClip)) {
style.SetOverflowClipMargin(
ComputedStyleInitialValues::InitialOverflowClipMargin());
}
if (StopPropagateTextDecorations(style, element))
......
third_party/blink/renderer/core/css/resolver/style_adjuster_test.cc
View file @ 50089e62
......@@ -128,6 +128,7 @@ TEST_F(StyleAdjusterTest, AdjustOverflow) {
overflow-clip-margin: 1px;'>
<div id='vishidden' style='overflow-x: visible; overflow-y: hidden;
overflow-clip-margin: 1px;'>
<div id='containpaint' style='contain: paint; overflow-clip-margin: 1px;'>
</div>
)HTML");
UpdateAllLifecyclePhasesForTest();
......@@ -173,6 +174,11 @@ TEST_F(StyleAdjusterTest, AdjustOverflow) {
EXPECT_EQ(EOverflow::kHidden, target->GetComputedStyle()->OverflowX());
EXPECT_EQ(EOverflow::kAuto, target->GetComputedStyle()->OverflowY());
EXPECT_EQ(LayoutUnit(), target->GetComputedStyle()->OverflowClipMargin());
target = GetDocument().getElementById("containpaint");
ASSERT_TRUE(target);
EXPECT_TRUE(target->GetComputedStyle()->ContainsPaint());
EXPECT_EQ(LayoutUnit(1), target->GetComputedStyle()->OverflowClipMargin());
}
TEST_F(StyleAdjusterTest, TouchActionContentEditableArea) {
......
third_party/blink/renderer/core/layout/layout_block.cc
View file @ 50089e62
......@@ -251,8 +251,12 @@ void LayoutBlock::UpdateFromStyle() {
NOT_DESTROYED();
LayoutBox::UpdateFromStyle();
bool should_clip_overflow = !StyleRef().IsOverflowVisibleAlongBothAxes() &&
AllowsNonVisibleOverflow();
// OverflowClipMargin() is only set if overflow is 'clip' along both axis, or
// 'contain: paint'. The later implies clipping along both axis.
bool should_clip_overflow =
(!StyleRef().IsOverflowVisibleAlongBothAxes() ||
StyleRef().OverflowClipMargin() != LayoutUnit()) &&
AllowsNonVisibleOverflow();
if (should_clip_overflow != HasNonVisibleOverflow()) {
if (GetScrollableArea())
GetScrollableArea()->InvalidateAllStickyConstraints();
......
third_party/blink/renderer/core/layout/layout_box_test.cc
View file @ 50089e62
......@@ -524,6 +524,7 @@ TEST_P(LayoutBoxTest, VisualOverflowRectWithOverflowClipMargin) {
SetBodyInnerHTML(R"HTML(
<style>
.parent { width: 100px; height: 50px; overflow: clip; }
.parent2 { width: 100px; height: 50px; contain: paint; }
.child { width: 110px; height: 55px; }
</style>
<div id="clip1" style="overflow-clip-margin: 4px" class="parent">
......@@ -532,6 +533,9 @@ TEST_P(LayoutBoxTest, VisualOverflowRectWithOverflowClipMargin) {
<div id="clip2" style="overflow-clip-margin: 11px" class="parent">
<div class="child"></div>
</div>
<div id="clip3" style="overflow-clip-margin: 11px" class="parent2">
<div class="child"></div>
</div>
)HTML");
LayoutBox* clip1 = GetLayoutBoxByElementId("clip1");
......@@ -543,12 +547,18 @@ TEST_P(LayoutBoxTest, VisualOverflowRectWithOverflowClipMargin) {
EXPECT_FALSE(clip2->IsScrollContainer());
EXPECT_TRUE(clip2->ShouldClipOverflowAlongBothAxis());
EXPECT_EQ(LayoutRect(0, 0, 110, 55), clip2->VisualOverflowRect());
LayoutBox* clip3 = GetLayoutBoxByElementId("clip3");
EXPECT_FALSE(clip3->IsScrollContainer());
EXPECT_TRUE(clip3->ShouldClipOverflowAlongBothAxis());
EXPECT_EQ(LayoutRect(0, 0, 110, 55), clip3->VisualOverflowRect());
}
TEST_P(LayoutBoxTest, LayoutOverflowRectWithOverflowClipMargin) {
SetBodyInnerHTML(R"HTML(
<style>
.parent { width: 100px; height: 50px; overflow: clip; }
.parent2 { width: 100px; height: 50px; contain: paint; }
.child { position: relative; top: -5px; left: -6px; width: 110px;
height: 112px; }
</style>
......@@ -558,6 +568,9 @@ TEST_P(LayoutBoxTest, LayoutOverflowRectWithOverflowClipMargin) {
<div id="clip2" style="overflow-clip-margin: 10px" class="parent">
<div class="child"></div>
</div>
<div id="clip3" style="overflow-clip-margin: 10px" class="parent2">
<div class="child"></div>
</div>
)HTML");
LayoutBox* clip1 = GetLayoutBoxByElementId("clip1");
......@@ -571,6 +584,12 @@ TEST_P(LayoutBoxTest, LayoutOverflowRectWithOverflowClipMargin) {
EXPECT_TRUE(clip2->ShouldClipOverflowAlongBothAxis());
EXPECT_EQ(LayoutRect(-6, -5, 110, 65),
clip2->LayoutOverflowRectForPropagation(clip2->Parent()));
LayoutBox* clip3 = GetLayoutBoxByElementId("clip3");
EXPECT_FALSE(clip3->IsScrollContainer());
EXPECT_TRUE(clip3->ShouldClipOverflowAlongBothAxis());
EXPECT_EQ(LayoutRect(-6, -5, 110, 65),
clip3->LayoutOverflowRectForPropagation(clip3->Parent()));
}
TEST_P(LayoutBoxTest, ContentsVisualOverflowPropagation) {
......
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-margin-004-ref.html 0 → 100644
View file @ 50089e62
<!doctype html>
<meta charset="utf-8">
<title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<style>
.container {
display: flex;
}
.parent {
position: relative;
top: -10px;
left: -10px;
width: 120px;
height: 120px;
flex: none;
background-color: green;
}
.spacer {
flex: none;
height: 100px;
width: 100px;
}
</style>
<p>You should see two green squares touching each other. The one on the
right should be slightly larger.</p>
<div class="spacer"></div>
<div class="container">
<div class="spacer" style="background-color: green"></div>
<div class="parent"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-margin-004.html 0 → 100644
View file @ 50089e62
<!doctype html>
<meta charset="utf-8">
<title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<link rel="match" href="overflow-clip-margin-004-ref.html">
<style>
.container {
display: flex;
}
.parent {
width: 100px;
height: 100px;
flex: none;
contain: paint;
overflow-clip-margin: 10px;
}
.child {
width: 200px;
height: 200px;
position: relative;
top: -50px;
left: -50px;
background-color: green;
}
.spacer {
flex: none;
height: 100px;
width: 100px;
}
</style>
<p>You should see two green squares touching each other. The one on the
right should be slightly larger.</p>
<div class="spacer"></div>
<div class="container">
<div class="spacer" style="width: 90px; background-color: green"></div>
<div class="spacer" style="width: 10px"></div>
<div class="parent">
<div class="child"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-margin-005-ref.html 0 → 100644
View file @ 50089e62
<!doctype html>
<meta charset="utf-8">
<title>Verifies overflow-clip-margin impacts layout</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<style>
.scroller {
overflow: auto;
width: 100px;
height: 100px;
}
.child {
position: relative;
width: 110px;
height: 110px;
background-color: green;
}
</style>
<p>You should see a green box with scrollbars.</p>
<div class="scroller">
<div class="child"></div>
</div>
<p>You should see a green box with scrollbars.</p>
<div class="scroller">
<div class="child" style="width: 150px; height: 150px"></div>
</div>
<p>You should see a green box with no scrollbars.</p>
<div class="scroller" style="background-color: green">
</div>
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-margin-005.html 0 → 100644
View file @ 50089e62
<!doctype html>
<meta charset="utf-8">
<title>Verifies overflow-clip-margin impacts layout</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<link rel="match" href="overflow-clip-margin-005-ref.html">
<style>
.scroller {
overflow: auto;
width: 100px;
height: 100px;
}
.parent {
width: 100px;
height: 100px;
contain: paint;
overflow-clip-margin: 10px;
}
.child {
width: 200px;
height: 200px;
position: relative;
top: -50px;
left: -50px;
background-color: green;
}
</style>
<p>You should see a green box with scrollbars.</p>
<div class="scroller">
<div class="parent">
<div class="child"></div>
</div>
</div>
<p>You should see a green box with scrollbars.</p>
<div class="scroller">
<div class="parent" style="overflow-clip-margin: 100px">
<div class="child"></div>
</div>
</div>
<p>You should see a green box with no scrollbars.</p>
<div class="scroller">
<div class="parent" style="background-color: green">
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-margin-006-ref.html 0 → 100644
View file @ 50089e62
<!doctype html>
<meta charset="utf-8">
<title>Verifies overflow-clip-margin doesn't impact paint effects</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<style>
.parent {
width: 100px;
height: 100px;
background-color: green;
box-shadow: 20px 20px 5px red;
}
</style>
<p>You should see a green box with a red box shadow.
<div class="parent"></div>
third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-clip-margin-006.html 0 → 100644
View file @ 50089e62
<!doctype html>
<meta charset="utf-8">
<title>Verifies overflow-clip-margin doesn't impact paint effects</title>
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
<link rel="match" href="overflow-clip-margin-006-ref.html">
<style>
.parent {
width: 100px;
height: 100px;
background-color: green;
contain: paint;
overflow-clip-margin: 1px;
box-shadow: 20px 20px 5px red;
}
</style>
<p>You should see a green box with a red box shadow.
<div class="parent"></div>
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