Skip to content

GitLab

T
tangled
Commit 396a0004 authored by Philip Rogers's avatar Philip Rogers Committed by Commit Bot
Browse files
Options

[BlinkGenPropertyTrees] Filter effects should be clipped 

According to the spec, filtering should apply before clipping
(https://drafts.fxtf.org/css-masking-1/#placement): "...effects are applied to
the element in order: filter effects, clipping, masking and opacity."

This patch fixes clip-path order with BlinkGenPropertyTrees (BGPT) which exposed
the issue of filter and clip order. Testcases have been added showing the fixed
behavior with BGPT, and the non-BGPT results have been marked as failing.

NOTRY=true

Bug: 906154, 907175
Change-Id: I5e9c7dbb7c694afc623fbc3bb2c7f2f8cc458195
Reviewed-on: https://chromium-review.googlesource.com/c/1344217
Commit-Queue: Philip Rogers <pdr@chromium.org>
Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609847}
parent 79340d0c
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 4 deletions
third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-gen-property-trees
View file @ 396a0004
......@@ -117,6 +117,9 @@ crbug.com/865039 compositing/masks/mask-with-added-filters.html [ Pass ]
crbug.com/857501 compositing/gestures/gesture-tapHighlight-with-filter.html [ Pass ]
crbug.com/400829 media/video-object-fit.html [ Pass ]
crbug.com/400829 compositing/composited-canvas-with-overflowing-object-fit.html [ Pass ]
crbug.com/907175 external/wpt/css/css-masking/clip/clip-filter-order.html [ Pass ]
crbug.com/907175 external/wpt/css/css-masking/clip-path/clip-path-filter-order.html [ Pass ]
crbug.com/907175 external/wpt/svg/rendering/order/clip-path-filter-order.svg [ Pass ]
# These tests are no longer applicable with layer list mode.
# Move to NeverFixTests later.
......
third_party/WebKit/LayoutTests/TestExpectations
View file @ 396a0004
......@@ -4099,6 +4099,11 @@ crbug.com/765116 virtual/outofblink-cors-ns/external/wpt/xhr/responsexml-documen
# changed with BlinkGenPropertyTrees. Until that launches, this test will fail.
crbug.com/857501 compositing/gestures/gesture-tapHighlight-with-filter.html [ Failure ]
# Clip and Clip-path order with filtering is currently incorrect. This is being fixed with BlinkGenPropertyTrees.
crbug.com/907175 external/wpt/css/css-masking/clip/clip-filter-order.html [ Failure ]
crbug.com/907175 external/wpt/css/css-masking/clip-path/clip-path-filter-order.html [ Failure ]
crbug.com/907175 external/wpt/svg/rendering/order/clip-path-filter-order.svg [ Failure ]
crbug.com/716320 external/wpt/html/infrastructure/safe-passing-of-structured-data/shared-array-buffers/broadcastchannel-success-and-failure.html [ Failure Timeout ]
crbug.com/716320 external/wpt/html/infrastructure/safe-passing-of-structured-data/shared-array-buffers/broadcastchannel-success.html [ Failure Timeout ]
crbug.com/716320 [ Android ] external/wpt/html/infrastructure/safe-passing-of-structured-data/shared-array-buffers/window-messagechannel-success.html [ Failure Timeout ]
......
third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-filter-order-ref.html 0 → 100644
View file @ 396a0004
<!DOCTYPE html>
<meta charset="utf-8">
<title>Clip-path should be applied after filtering</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<div>
<p>Expected: A green box.<br>
There should be no red visible.<br>
There should be a crisp, clipped edge around the green box (no blurring).</p>
</div>
<style>
#testcase {
position: absolute;
width: 200px;
height: 200px;
background: green;
will-change: transform;
}
</style>
<div id="testcase"></div>
third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-filter-order.html 0 → 100644
View file @ 396a0004
<!DOCTYPE html>
<meta charset="utf-8">
<title>Clip-path should be applied after filtering</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
<link rel="match" href="clip-path-filter-order-ref.html">
<div>
<p>Expected: A green box.<br>
There should be no red visible.<br>
There should be a crisp, clipped edge around the green box (no blurring).</p>
</div>
<style>
#testcase {
position: absolute;
width: 400px;
height: 400px;
background: green;
will-change: transform;
filter: drop-shadow(16px 16px 20px red);
clip-path: inset(0px 200px 200px 0px);
}
</style>
<div id="testcase"></div>
third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip/clip-filter-order-ref.html 0 → 100644
View file @ 396a0004
<!DOCTYPE html>
<meta charset="utf-8">
<title>Clip should be applied after filtering</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<div>
<p>Expected: A green box.<br>
There should be no red visible.<br>
There should be a crisp, clipped edge around the green box (no blurring).</p>
</div>
<style>
#testcase {
position: absolute;
width: 200px;
height: 200px;
background: green;
will-change: transform;
}
</style>
<div id="testcase"></div>
third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip/clip-filter-order.html 0 → 100644
View file @ 396a0004
<!DOCTYPE html>
<meta charset="utf-8">
<title>Clip should be applied after filtering</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
<link rel="match" href="clip-filter-order-ref.html">
<div>
<p>Expected: A green box.<br>
There should be no red visible.<br>
There should be a crisp, clipped edge around the green box (no blurring).</p>
</div>
<style>
#testcase {
position: absolute;
width: 400px;
height: 400px;
background: green;
will-change: transform;
filter: drop-shadow(16px 16px 20px red);
clip: rect(0px, 200px, 200px, 0px);
}
</style>
<div id="testcase"></div>
third_party/WebKit/LayoutTests/external/wpt/svg/rendering/order/clip-path-filter-order-ref.svg 0 → 100644
View file @ 396a0004
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="600" viewBox="0 0 800 600">
<rect x="100" y="100" width="200" height="200" fill="green" />
</svg>
third_party/WebKit/LayoutTests/external/wpt/svg/rendering/order/clip-path-filter-order.svg 0 → 100644
View file @ 396a0004
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="600" viewBox="0 0 800 600">
<metadata>
<h:link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"/>
<h:link rel="help" href="https://www.w3.org/TR/SVG11/single-page.html#render-RenderingOrder"/>
<h:link rel="match" href="clip-path-filter-order-ref.svg"/>
<h:meta name="assert" content="Clip path should apply after filtering."/>
</metadata>
<defs>
<filter id="redDropShadowFilter">
<feOffset result="offsetOut" in="SourceGraphic" dx="10" dy="10" />
<feColorMatrix result="colorMatrixOut" in="offsetOut" type="matrix"
values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="colorMatrixOut" stdDeviation="15" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<clipPath id="clipPath">
<rect x="100" y="100" width="200" height="200" />
</clipPath>
</defs>
<rect x="100" y="100" width="400" height="400" fill="green"
filter="url(#redDropShadowFilter)" clip-path="url(#clipPath)" />
</svg>
third_party/blink/renderer/core/paint/compositing/compositing_layer_property_updater.cc
View file @ 396a0004
......@@ -66,10 +66,15 @@ void CompositingLayerPropertyUpdater::Update(const LayoutObject& object) {
if (graphics_layer) {
if (!container_layer_state) {
container_layer_state = fragment_data.LocalBorderBoxProperties();
if (const auto* properties = fragment_data.PaintProperties()) {
// CSS clip should be applied within the layer.
if (const auto* css_clip = properties->CssClip())
container_layer_state->SetClip(css_clip->Parent());
// Before BlinkGenPropertyTrees, CSS clip could not be composited so
// we should avoid setting it on the layer itself.
if (!RuntimeEnabledFeatures::BlinkGenPropertyTreesEnabled() &&
!RuntimeEnabledFeatures::SlimmingPaintV2Enabled()) {
if (const auto* properties = fragment_data.PaintProperties()) {
if (const auto* css_clip = properties->CssClip()) {
container_layer_state->SetClip(css_clip->Parent());
}
}
}
}
graphics_layer->SetLayerState(
......
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