Bug 1649536 [wpt PR 24398] - Fix clip state of synthetic effect for non-backdrop effects, a=testonly

Automatic update from web-platform-tests
Fix clip state of synthetic effect for non-backdrop effects

This fixes a regression caused by crrev.com/c/2183198.
We should move the effect's clip to the outer synthetic effects
for backdrop effects only. For non-backdrop effect we don't move effect
up into the synthetic effect and can share the synthetic effect with
other effects, so we should not move up the clip.

Bug: 1099234
Change-Id: I5dbd63f7c94717e42572342371df6de8fe89308e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2272122
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#784097}

--

wpt-commits: 716a3224e9a754234c2fc1166ca6757154a445c0
wpt-pr: 24398
This commit is contained in:
Xianzhu Wang 2020-07-02 19:21:58 +00:00 коммит произвёл moz-wptsync-bot
Родитель 2d6aab3d7c
Коммит c56fc1ab57
2 изменённых файлов: 16 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#clipping-paths">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
<link rel="match" href="reference/clip-path-filter-radius-clips-ref.html">
<meta name="assert" content="For crbug.com/1099234, ensure correct clip hierarchy with clip-path, filter and border radius clips">
<div style="width: 400px; height: 400px; border-radius: 10px; contain: paint">
<div style="width: 400px; height: 400px; border-radius: 10px; contain: paint">
<div style="width: 100px; height: 10px; will-change: transform; clip-path: circle(50%)"></div>
<div style="margin-left: 10px; filter: invert(100%); will-change: filter;
width: 100px; height: 100px; background: magenta"></div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div style="padding: 10px">
<div id="blur" style="will-change: filter; width: 100px; height: 100px; background: lime"></div>
</div>