Skip to content

GitLab

T
tangled
Commit 0c780e18 authored by Mason Freed's avatar Mason Freed Committed by Commit Bot
Browse files
Options

Fix backdrop_filter_bounds for browser zoom 

Previous to this CL, backdrop_filter_bounds were not properly
scaled by the browser zoom factor. This lead to improper clipping
of the backdrop filtered element.

Bug: 932160
Change-Id: I345f56ae50af319a8b805c7d54ca498221613932
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1542677
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Auto-Submit: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#646473}
parent 9b628bbd
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 6 deletions
third_party/blink/renderer/core/paint/paint_layer.cc
View file @ 0c780e18
...@@ -2493,13 +2493,18 @@ FloatRect PaintLayer::BackdropFilterReferenceBox() const { ...@@ -2493,13 +2493,18 @@ FloatRect PaintLayer::BackdropFilterReferenceBox() const {
gfx::RRectF PaintLayer::BackdropFilterBounds( gfx::RRectF PaintLayer::BackdropFilterBounds(
const FloatRect& reference_box) const { const FloatRect& reference_box) const {
auto& style = GetLayoutObject().StyleRef(); auto& style = GetLayoutObject().StyleRef();
if (!style.HasBorderRadius()) gfx::RRectF backdrop_filter_bounds;
return gfx::RRectF(reference_box, 0); if (!style.HasBorderRadius()) {
FloatRoundedRect rrect = style.GetRoundedBorderFor(LayoutRect(reference_box)); backdrop_filter_bounds = gfx::RRectF(reference_box, 0);
// FloatRoundedRect has a typecast to SkRRect(). } else {
return gfx::RRectF(rrect); FloatRoundedRect rrect =
style.GetRoundedBorderFor(LayoutRect(reference_box));
backdrop_filter_bounds = gfx::RRectF(rrect);
}
float zoom = style.EffectiveZoom();
backdrop_filter_bounds.Scale(zoom);
return backdrop_filter_bounds;
} }
bool PaintLayer::HitTestClippedOutByClipPath( bool PaintLayer::HitTestClippedOutByClipPath(
PaintLayer* root_layer, PaintLayer* root_layer,
const HitTestLocation& hit_test_location) const { const HitTestLocation& hit_test_location) const {
......
third_party/blink/web_tests/FlagExpectations/enable-blink-features=CompositeAfterPaint
View file @ 0c780e18
...@@ -411,6 +411,7 @@ Bug(none) virtual/threaded/synthetic_gestures/animated-wheel-tiny-delta.html [ F ...@@ -411,6 +411,7 @@ Bug(none) virtual/threaded/synthetic_gestures/animated-wheel-tiny-delta.html [ F
# Backdrop filter # Backdrop filter
crbug.com/923429 css3/filters/backdrop-filter-basic-blur.html [ Failure ] crbug.com/923429 css3/filters/backdrop-filter-basic-blur.html [ Failure ]
crbug.com/923429 css3/filters/backdrop-filter-browser-zoom.html [ Failure ]
crbug.com/923429 css3/filters/backdrop-filter-border-radius.html [ Failure ] crbug.com/923429 css3/filters/backdrop-filter-border-radius.html [ Failure ]
crbug.com/923429 css3/filters/backdrop-filter-rendering.html [ Failure ] crbug.com/923429 css3/filters/backdrop-filter-rendering.html [ Failure ]
crbug.com/923429 css3/filters/backdrop-filter-rendering-no-background.html [ Failure ] crbug.com/923429 css3/filters/backdrop-filter-rendering-no-background.html [ Failure ]
......
third_party/blink/web_tests/css3/filters/backdrop-filter-browser-zoom.html 0 → 100644
View file @ 0c780e18
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Clipping should work when browser zoom is not 100%</title>
<div class="box"></div>
<div class="navbar">
<div class="menu"></div>
<div class="menu2"></div>
</div>
<!-- See [1] for an implementation of this test in WPT format. It requires the
WPT Fuzzy Matching [2] feature to be implemented, due to AA on the border
radii.
[1] https://chromium-review.googlesource.com/c/chromium/src/+/1542677/4
[2] https://github.com/web-platform-tests/wpt/blob/1f570a686843ca10f151a79956ee16110f4a4d42/docs/_writing-tests/reftests.md#fuzzy-matching
-->
<style>
div {
position: absolute;
}
.box {
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background: green;
}
.navbar {
width: 300px;
height: 50px;
top: 150px;
left: 50px;
border: 2px solid blue;
backdrop-filter: invert(1);
border-radius: 10px 20px 30px 40px;
}
.menu {
width: 100px;
height: 150px;
top: 50px;
left: 95px;
border: 2px solid red;
}
.menu2 {
width: 100px;
height: 30px;
top: -34px;
left: 95px;
border: 2px solid red;
}
</style>
<script>
internals.setZoomFactor(1.5);
</script>
</html>
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