Move the whole effect having backdrop effects up to synthetic effect
When we create a synthetic effect for an effect having backdrop effects
(backdrop filter or exotic blend mode), to ensure the backdrop effects
can access the right backdrop, we move the backdrop effect up to the
outermost synthetic effect.
Previously we only moved up the backdrop effects themselves, leaving
other effects (e.g. opacity) in the same blink effect node in the
original cc effect node created for the blink effect node, causing the
result of backdrop filters not under control of the other effects.
Now move the whole effect node having backdrop effects up. This actually
simplifies the backdrop effect moving up logic.
Bug: 1084832
Change-Id: Iab88d28eca6b2ea77ac8c8a4992696386af318d8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2213452
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773385}
diff --git a/css/filter-effects/backdrop-filter-opacity-rounded-clip-ref.html b/css/filter-effects/backdrop-filter-opacity-rounded-clip-ref.html
new file mode 100644
index 0000000..79177d1
--- /dev/null
+++ b/css/filter-effects/backdrop-filter-opacity-rounded-clip-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="position: relative; left: 100px; background: green; width: 100px; height: 100px"></div>
diff --git a/css/filter-effects/backdrop-filter-opacity-rounded-clip.html b/css/filter-effects/backdrop-filter-opacity-rounded-clip.html
new file mode 100644
index 0000000..88fed57
--- /dev/null
+++ b/css/filter-effects/backdrop-filter-opacity-rounded-clip.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>backdrop-filter with opacity:0 under border radius overflow clip should have no effect</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filter-opacity-rounded-clip-ref.html">
+<div style="width: 300px; height: 200px; border-radius: 80px; overflow: hidden; position: relative">
+ <!-- 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 not affected by the backdrop filter. -->
+ <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background: green"></div>
+ <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 1000px; opacity: 0; backdrop-filter: blur(3px)"></div>
+</div>
+
