Bug 1635957 [wpt PR 23418] - Use the backdrop filter's clip for synthetic effects and layers, a=testonly
authorXianzhu Wang <wangxianzhu@chromium.org>
Wed, 13 May 2020 09:44:38 +0000
changeset 531111 4c27e5fdfd1df86d8d593fe0535e8652d92986a0
parent 531110 ca2477055eba8090b89d3fbeed429643b882f589
child 531112 d26a6402ab4fc7e447bb20dafe28a761934b398d
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1635957, 23418, 1077137, 2183198, 766158
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1635957 [wpt PR 23418] - Use the backdrop filter's clip for synthetic effects and layers, a=testonly Automatic update from web-platform-tests Use the backdrop filter's clip for synthetic effects and layers Previously for a synthetic effect and the associated synthesized mask layer, we used the clip that introduce the synthetic effect as their clip state, causing incorrect clipping of backdrop filters. Now use the clip of the backdrop filter for synthetic effects and layers to avoid the problem. ClipPaintPropertyNode rounded_clip ClipPaintPropertyNode rect_clip EffectPaintPropertyNode backdrop_filter clip=rect_clip The cc effect tree is like mask_isolation (backdrop filter moved here) / \ mask_effect node_for_backdrop_filter When we create the cc node for backdrop_filter, we find that there is an ancestor clip (rounded_clip) needs a synthetic effect and synthesized mask, so create mask_isolation and mask_effect nodes and a mask clip layer. To let the backdrop filter access the correct backdrop, we move the backdrop filter up to mask_isolation, requiring that mask_isolation to use the backdrop_filter's clip (rect_clip) instead of the clip (rounded_clip) that introduces the synthetic effect, to ensure the backdrop filter is correctly clipped. This in turn requires that mask_effect and the mask layer also use rect_clip as their clip state to ensure proper clip hierarchy. Bug: 1077137 Change-Id: Ib9c3cc7e8db5b1b261b3a758f2fb6680e0f5ab1f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2183198 Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/master@{#766158} -- wpt-commits: 4b3fd166980ee106af2db6ca6a8c653fb07a517c wpt-pr: 23418
testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="position: relative; left: 100px; background: lime; width: 100px; height: 300px"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>backdrop-filter under overflow clip under border-radius overflow clip</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clip-rounded-clip-ref.html">
+<div style="width: 300px; height: 200px; border-radius: 80px; overflow: hidden">
+  <div style="position: relative; height: 100px; overflow: hidden">
+    <!-- This should be fully clipped by the outer rounded clip. -->
+    <div style="width: 10px; height: 10px; background: cyan"></div>
+    <!-- This should be fully visible and inverted to green. -->
+    <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background: magenta"></div>
+    <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 1000px; backdrop-filter: invert(1)"></div>
+  </div>
+  <!-- This should not be affected by the backdrop filter. -->
+  <div style="width: 100px; height: 100px; margin-left: 100px; background: lime"></div>
+</div>
+<!-- This should not be affected by the backdrop filter. -->
+<div style="width: 100px; height: 100px; margin-left: 100px; background: lime"></div>
+