REGRESSION (r251385): box-shadow interferes with backdrop-filter
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Mar 2020 16:19:00 +0000 (16:19 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Mar 2020 16:19:00 +0000 (16:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=208070
<rdar://problem/59683152>

Reviewed by Dean Jackson.

Source/WebCore:

updateClippingStrategy() compares the rounded rect passed in with the geometry
of the first layer argument, so the rect needs to have a zero origin. We do
the same computation in GraphicsLayerCA::updateContentsRects().

Test: compositing/filters/backdrop-filter-rect.html

* platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::updateBackdropFiltersRect):

LayoutTests:

* compositing/filters/backdrop-filter-rect-expected.html: Added.
* compositing/filters/backdrop-filter-rect.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@258985 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/compositing/filters/backdrop-filter-rect-expected.html [new file with mode: 0644]
LayoutTests/compositing/filters/backdrop-filter-rect.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp

index 08ff15a..44cf553 100644 (file)
@@ -1,3 +1,14 @@
+2020-03-25  Simon Fraser  <simon.fraser@apple.com>
+
+        REGRESSION (r251385): box-shadow interferes with backdrop-filter
+        https://bugs.webkit.org/show_bug.cgi?id=208070
+        <rdar://problem/59683152>
+
+        Reviewed by Dean Jackson.
+
+        * compositing/filters/backdrop-filter-rect-expected.html: Added.
+        * compositing/filters/backdrop-filter-rect.html: Added.
+
 2020-03-25  Truitt Savell  <tsavell@apple.com>
 
         [ios] svg/custom/object-sizing-explicit-width.xhtml is flaky failure
diff --git a/LayoutTests/compositing/filters/backdrop-filter-rect-expected.html b/LayoutTests/compositing/filters/backdrop-filter-rect-expected.html
new file mode 100644 (file)
index 0000000..6a9599e
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    img {
+        background-color: green;
+        height: 500px;
+        width: 500px;
+    }
+
+    .backdrop {
+        position: absolute;
+        height: 200px;
+        width: 200px;
+        left: 140px;
+        top: 140px;
+        background-color: rgba(0, 0, 0, 0.2);
+        -webkit-backdrop-filter: saturate(0);
+    }
+    
+    .extender {
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        top: 40px;
+        left: 40px;
+        background-color: blue;
+    }
+}
+</style>
+</head>
+<body>
+       <img>
+    <div class="extender"></div>
+       <div class="backdrop"></div>
+</body>
+</html>
diff --git a/LayoutTests/compositing/filters/backdrop-filter-rect.html b/LayoutTests/compositing/filters/backdrop-filter-rect.html
new file mode 100644 (file)
index 0000000..8e99aaf
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    img {
+        background-color: green;
+        height: 500px;
+        width: 500px;
+    }
+
+    .backdrop {
+        position: absolute;
+        height: 200px;
+        width: 200px;
+        left: 140px;
+        top: 140px;
+        background-color: rgba(0, 0, 0, 0.2);
+        -webkit-backdrop-filter: saturate(0);
+    }
+    
+    .extender {
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        top: -100px;
+        left: -100px;
+        background-color: blue;
+    }
+}
+</style>
+</head>
+<body>
+       <img>
+       <div class="backdrop">
+           <div class="extender"></div>
+       </div>
+</body>
+</html>
index d91972c..bfe004f 100644 (file)
@@ -1,3 +1,20 @@
+2020-03-25  Simon Fraser  <simon.fraser@apple.com>
+
+        REGRESSION (r251385): box-shadow interferes with backdrop-filter
+        https://bugs.webkit.org/show_bug.cgi?id=208070
+        <rdar://problem/59683152>
+
+        Reviewed by Dean Jackson.
+
+        updateClippingStrategy() compares the rounded rect passed in with the geometry
+        of the first layer argument, so the rect needs to have a zero origin. We do
+        the same computation in GraphicsLayerCA::updateContentsRects().
+
+        Test: compositing/filters/backdrop-filter-rect.html
+
+        * platform/graphics/ca/GraphicsLayerCA.cpp:
+        (WebCore::GraphicsLayerCA::updateBackdropFiltersRect):
+
 2020-03-25  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         Avoid querying pasteboard strings while dragging content over a potential drop target
index 5a8709f..de93c0d 100644 (file)
@@ -2276,7 +2276,9 @@ void GraphicsLayerCA::updateBackdropFiltersRect()
     m_backdropLayer->setBounds(contentBounds);
     m_backdropLayer->setPosition(m_backdropFiltersRect.rect().location());
 
-    updateClippingStrategy(*m_backdropLayer, m_backdropClippingLayer, m_backdropFiltersRect);
+    auto backdropRectRelativeToBackdropLayer = m_backdropFiltersRect;
+    backdropRectRelativeToBackdropLayer.setLocation({ });
+    updateClippingStrategy(*m_backdropLayer, m_backdropClippingLayer, backdropRectRelativeToBackdropLayer);
 
     if (m_layerClones) {
         for (auto& clone : m_layerClones->backdropLayerClones) {
@@ -2288,7 +2290,7 @@ void GraphicsLayerCA::updateBackdropFiltersRect()
             RefPtr<PlatformCALayer> backdropClippingLayerClone = m_layerClones->backdropClippingLayerClones.get(cloneID);
 
             bool hadBackdropClippingLayer = backdropClippingLayerClone;
-            updateClippingStrategy(*backdropCloneLayer, backdropClippingLayerClone, m_backdropFiltersRect);
+            updateClippingStrategy(*backdropCloneLayer, backdropClippingLayerClone, backdropRectRelativeToBackdropLayer);
 
             if (!backdropClippingLayerClone)
                 m_layerClones->backdropClippingLayerClones.remove(cloneID);