Elements with backdrop-filter cannot be clipped with clip-path or mask
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 May 2016 09:49:32 +0000 (09:49 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 May 2016 09:49:32 +0000 (09:49 +0000)
https://bugs.webkit.org/show_bug.cgi?id=142662
<rdar://problem/20150192>

Patch by Antoine Quint <graouts@apple.com> on 2016-05-25
Reviewed by Dean Jackson.

Source/WebCore:

We used to only apply the mask to the layer contents but did not account
for the fact that a layer backdrop may exist. We now correctly mask the
backdrop layer as well as the layer contents.

Test: css3/filters/backdrop/backdrop-filter-with-clip-path.html

* platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::updateShape):
Ensure clones of a layer use the same shape path.

(WebCore::GraphicsLayerCA::updateMaskLayer):
If we have a backdrop layer, ensure that we apply a clone of the mask layer applied to
the layer contents.

Source/WebKit2:

Ensure layer clones are set up with the same shape path as their original layer.

* WebProcess/WebPage/mac/PlatformCALayerRemote.cpp:
(WebKit::PlatformCALayerRemote::updateClonedLayerProperties):

LayoutTests:

New test that checks that applying a backdrop-filter and a clip-path on a single
element has the same effect as applying a clip-path on a parent of a child with
a backdrop-filter.

* css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt: Added.
* css3/filters/backdrop/backdrop-filter-with-clip-path.html: Added.
* platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html: Added.
* platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html [new file with mode: 0644]
LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
Source/WebKit2/ChangeLog
Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp

index 579a8e4..8c6468b 100644 (file)
@@ -1,3 +1,20 @@
+2016-05-25  Antoine Quint  <graouts@apple.com>
+
+        Elements with backdrop-filter cannot be clipped with clip-path or mask
+        https://bugs.webkit.org/show_bug.cgi?id=142662
+        <rdar://problem/20150192>
+
+        Reviewed by Dean Jackson.
+
+        New test that checks that applying a backdrop-filter and a clip-path on a single
+        element has the same effect as applying a clip-path on a parent of a child with
+        a backdrop-filter.
+
+        * css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt: Added.
+        * css3/filters/backdrop/backdrop-filter-with-clip-path.html: Added.
+        * platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html: Added.
+        * platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png: Added.
+
 2016-05-24  Myles C. Maxfield  <mmaxfield@apple.com>
 
         [Font Loading] Crash during font download failure after garbage collection
diff --git a/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt b/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt
new file mode 100644 (file)
index 0000000..c453398
--- /dev/null
@@ -0,0 +1,30 @@
+CONSOLE MESSAGE: line 4: Viewport argument value "200px" for key "width" was truncated to its numeric prefix.
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x8
+  RenderBlock {HTML} at (0,0) size 800x8
+    RenderBody {BODY} at (8,8) size 784x0
+layer at (8,8) size 200x200 scrollHeight 342
+  RenderBlock (positioned) {DIV} at (8,8) size 200x200
+    RenderText {#text} at (0,0) size 198x342
+      text run at (0,0) width 182: "Lorem ipsum dolor sit amet,"
+      text run at (0,18) width 172: "consectetur adipiscing elit."
+      text run at (0,36) width 175: "Vestibulum a nunc ultrices,"
+      text run at (0,54) width 176: "faucibus ligula ac, euismod"
+      text run at (0,72) width 160: "elit. Ut in vehicula enim."
+      text run at (0,90) width 174: "Suspendisse sodales auctor"
+      text run at (0,108) width 180: "nunc, sit amet vehicula velit"
+      text run at (0,126) width 173: "cursus vulputate. Nunc sed"
+      text run at (0,144) width 172: "ipsum vitae massa dapibus"
+      text run at (0,162) width 161: "sodales sit amet quis dui."
+      text run at (0,180) width 165: "Aenean sit amet interdum"
+      text run at (0,198) width 172: "arcu, et facilisis diam. Ut a"
+      text run at (0,216) width 180: "lacus eleifend, feugiat tellus"
+      text run at (0,234) width 167: "vel, molestie lorem. Nulla"
+      text run at (0,252) width 161: "pulvinar dapibus semper."
+      text run at (0,270) width 172: "Quisque mollis, neque non"
+      text run at (0,288) width 198: "luctus aliquam, ex risus lacinia"
+      text run at (0,306) width 192: "augue, vel eleifend augue erat"
+      text run at (0,324) width 62: "eget ante."
+layer at (50,50) size 100x100
+  RenderBlock (positioned) {DIV} at (50,50) size 100x100 [bgcolor=#FF00007F]
diff --git a/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html b/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html
new file mode 100644 (file)
index 0000000..aa19fa5
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=200px">
+<title>This tests that backdrop filter with clip-path works properly.</title>
+<style>
+#text {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+}
+#blur {
+    position: absolute;
+    left: 50px;
+    top: 50px;
+    width: 100px;
+    height: 100px;
+
+    background-color: rgba(255, 0, 0, 0.5);
+    -webkit-backdrop-filter: blur(2px);
+    -webkit-clip-path: inset(10px);
+}
+</style>
+</head>
+<body>
+<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nunc ultrices, faucibus ligula ac, euismod elit. Ut in vehicula enim. Suspendisse sodales auctor nunc, sit amet vehicula velit cursus vulputate. Nunc sed ipsum vitae massa dapibus sodales sit amet quis dui. Aenean sit amet interdum arcu, et facilisis diam. Ut a lacus eleifend, feugiat tellus vel, molestie lorem. Nulla pulvinar dapibus semper. Quisque mollis, neque non luctus aliquam, ex risus lacinia augue, vel eleifend augue erat eget ante.
+</div>
+<div id="blur"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html b/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html
new file mode 100644 (file)
index 0000000..50e5d0c
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=200px">
+<title>This tests that backdrop filter with clip-path works properly.</title>
+<style>
+#text {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+}
+#blur {
+    position: absolute;
+    left: 60px;
+    top: 60px;
+    width: 80px;
+    height: 80px;
+
+    background-color: rgba(255, 0, 0, 0.5);
+    -webkit-backdrop-filter: blur(2px);
+}
+</style>
+</head>
+<body>
+<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nunc ultrices, faucibus ligula ac, euismod elit. Ut in vehicula enim. Suspendisse sodales auctor nunc, sit amet vehicula velit cursus vulputate. Nunc sed ipsum vitae massa dapibus sodales sit amet quis dui. Aenean sit amet interdum arcu, et facilisis diam. Ut a lacus eleifend, feugiat tellus vel, molestie lorem. Nulla pulvinar dapibus semper. Quisque mollis, neque non luctus aliquam, ex risus lacinia augue, vel eleifend augue erat eget ante.
+</div>
+<div id="blur"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png b/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png
new file mode 100644 (file)
index 0000000..485d969
Binary files /dev/null and b/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png differ
index 32a9ec5..026daae 100644 (file)
@@ -1,3 +1,25 @@
+2016-05-25  Antoine Quint  <graouts@apple.com>
+
+        Elements with backdrop-filter cannot be clipped with clip-path or mask
+        https://bugs.webkit.org/show_bug.cgi?id=142662
+        <rdar://problem/20150192>
+
+        Reviewed by Dean Jackson.
+
+        We used to only apply the mask to the layer contents but did not account
+        for the fact that a layer backdrop may exist. We now correctly mask the
+        backdrop layer as well as the layer contents.
+
+        Test: css3/filters/backdrop/backdrop-filter-with-clip-path.html
+
+        * platform/graphics/ca/GraphicsLayerCA.cpp:
+        (WebCore::GraphicsLayerCA::updateShape):
+        Ensure clones of a layer use the same shape path.
+
+        (WebCore::GraphicsLayerCA::updateMaskLayer):
+        If we have a backdrop layer, ensure that we apply a clone of the mask layer applied to
+        the layer contents.
+
 2016-05-25  Manuel Rego Casasnovas  <rego@igalia.com>
 
         [css-grid] Simplify grid track sizes parsing
index cde0409..f8cdd62 100644 (file)
@@ -1979,6 +1979,11 @@ void GraphicsLayerCA::updateBlendMode()
 void GraphicsLayerCA::updateShape()
 {
     m_layer->setShapePath(m_shapeLayerPath);
+
+    if (LayerMap* layerCloneMap = primaryLayerClones()) {
+        for (auto& layer : layerCloneMap->values())
+            layer->setShapePath(m_shapeLayerPath);
+    }
 }
 
 void GraphicsLayerCA::updateWindRule()
@@ -2455,6 +2460,15 @@ void GraphicsLayerCA::updateMaskLayer()
     PlatformCALayer* maskCALayer = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayer() : nullptr;
     m_layer->setMask(maskCALayer);
 
+    if (m_backdropLayer) {
+        if (m_maskLayer) {
+            ReplicaState replicaState(ReplicaState::ChildBranch);
+            RefPtr<PlatformCALayer> maskClone = downcast<GraphicsLayerCA>(*m_maskLayer).fetchCloneLayers(this, replicaState, IntermediateCloneLevel);
+            m_backdropLayer->setMask(maskClone.get());
+        } else
+            m_backdropLayer->setMask(nullptr);
+    }
+
     LayerMap* maskLayerCloneMap = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayerClones() : nullptr;
     
     if (LayerMap* layerCloneMap = m_layerClones.get()) {
index 91f756e..a5aab82 100644 (file)
@@ -1,3 +1,16 @@
+2016-05-25  Antoine Quint  <graouts@apple.com>
+
+        Elements with backdrop-filter cannot be clipped with clip-path or mask
+        https://bugs.webkit.org/show_bug.cgi?id=142662
+        <rdar://problem/20150192>
+
+        Reviewed by Dean Jackson.
+
+        Ensure layer clones are set up with the same shape path as their original layer.
+
+        * WebProcess/WebPage/mac/PlatformCALayerRemote.cpp:
+        (WebKit::PlatformCALayerRemote::updateClonedLayerProperties):
+
 2016-05-24  Chris Dumez  <cdumez@apple.com>
 
         Simplify a couple of lambda captures in the network cache code
index 1fd3638..13d28f3 100644 (file)
@@ -134,6 +134,9 @@ void PlatformCALayerRemote::updateClonedLayerProperties(PlatformCALayerRemote& c
     clone.setContentsScale(contentsScale());
     clone.setCornerRadius(cornerRadius());
 
+    if (!m_properties.shapePath.isNull())
+        clone.setShapePath(m_properties.shapePath);
+
     if (m_properties.shapeRoundedRect)
         clone.setShapeRoundedRect(*m_properties.shapeRoundedRect);