Skip to content

GitLab

T
tangled
Commit 18d5149f authored by Felipe Erias's avatar Felipe Erias Committed by Chromium LUCI CQ
Browse files
Options

scrollbar-gutter: fix background paint 

Fix a paint bug when a scrolling container has a solid color
background and a scrollbar-gutter value other than "auto".

In that scenario, the container's background color was being
painted on the scrolling contents layer, which may be smaller
than expected depending on the value of scrollbar-gutter.

Bug: 710214
Change-Id: I43b842c5bebe13843f7a6ef955e0726f1bc9a16e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2563387
Commit-Queue: Felipe Erias Morandeira <felipeerias@gmail.com>
Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833009}
parent 1ba818ae
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 1 deletion
third_party/blink/renderer/core/layout/layout_box_model_object.cc
View file @ 18d5149f
......@@ -156,7 +156,8 @@ LayoutBoxModelObject::ComputeBackgroundPaintLocationIfComposited() const {
// Solid color layers with an effective background clip of the padding box
// can be treated as local.
if (!layer->GetImage() && !layer->Next() &&
ResolveColor(GetCSSPropertyBackgroundColor()).Alpha() > 0) {
ResolveColor(GetCSSPropertyBackgroundColor()).Alpha() > 0 &&
StyleRef().IsScrollbarGutterAuto()) {
EFillBox clip = layer->Clip();
if (clip == EFillBox::kPadding)
continue;
......
third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-background-paint-ref.html 0 → 100644
View file @ 18d5149f
<!DOCTYPE html>
<title>Test background painting with scrollbar-gutter</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<style>
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-flow: row wrap;
}
.container {
overflow: auto;
height: 185px;
width: 185px;
margin: 6px;
border: 1px solid black;
}
.container.color {
background-color: #00AA00;
}
.container.image {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAIAAAAt/+nTAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfSCgoXAAxz8fXvAAAAB3RJTUUH0goKFwIoqMWQzAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAE5JREFUeNrtzzENACAAwDDAEP5F4QERHA3JpqCbZ+zxc0sDGtCABjSgAQ1oQAMa0IAGNKABDWhAAxrQgAY0oAENaEADGtCABjSgAQ147QLf2QFclo3aNQAAAABJRU5ErkJggg==");
}
.container.gradient {
background-image: linear-gradient(#0000FF, #0000FF);
}
.container.ltr {
direction: ltr;
}
.container.rtl {
direction: rtl;
}
.container.vertical {
writing-mode: vertical-rl;
}
.content {
width: 100px;
height: 250px;
}
.vertical > .content {
width: 250px;
height: 100px;
}
</style>
<body>
<div class="row">
<div class="container ltr color">
<div class="content"></div>
</div>
<div class="container ltr image">
<div class="content"></div>
</div>
<div class="container ltr gradient">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="container rtl color">
<div class="content"></div>
</div>
<div class="container rtl image">
<div class="content"></div>
</div>
<div class="container rtl gradient">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="container vertical color">
<div class="content"></div>
</div>
<div class="container vertical image">
<div class="content"></div>
</div>
<div class="container vertical gradient">
<div class="content"></div>
</div>
</div>
</body>
third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-background-paint.html 0 → 100644
View file @ 18d5149f
<!DOCTYPE html>
<title>Test background painting with scrollbar-gutter</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<link rel="match" href="scrollbar-gutter-background-paint-ref.html">
<style>
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-flow: row wrap;
}
.container {
overflow: auto;
scrollbar-gutter: always both;
height: 185px;
width: 185px;
margin: 6px;
border: 1px solid black;
}
.container.color {
background-color: #00AA00;
}
.container.image {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAIAAAAt/+nTAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfSCgoXAAxz8fXvAAAAB3RJTUUH0goKFwIoqMWQzAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAE5JREFUeNrtzzENACAAwDDAEP5F4QERHA3JpqCbZ+zxc0sDGtCABjSgAQ1oQAMa0IAGNKABDWhAAxrQgAY0oAENaEADGtCABjSgAQ147QLf2QFclo3aNQAAAABJRU5ErkJggg==");
}
.container.gradient {
background-image: linear-gradient(#0000FF, #0000FF);
}
.container.ltr {
direction: ltr;
}
.container.rtl {
direction: rtl;
}
.container.vertical {
writing-mode: vertical-rl;
}
.content {
width: 100px;
height: 250px;
}
.vertical > .content {
width: 250px;
height: 100px;
}
</style>
<body>
<div class="row">
<div class="container ltr color">
<div class="content"></div>
</div>
<div class="container ltr image">
<div class="content"></div>
</div>
<div class="container ltr gradient">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="container rtl color">
<div class="content"></div>
</div>
<div class="container rtl image">
<div class="content"></div>
</div>
<div class="container rtl gradient">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="container vertical color">
<div class="content"></div>
</div>
<div class="container vertical image">
<div class="content"></div>
</div>
<div class="container vertical gradient">
<div class="content"></div>
</div>
</div>
</body>
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