Title: [201374] trunk
Revision
201374
Author
commit-qu...@webkit.org
Date
2016-05-25 02:49:32 -0700 (Wed, 25 May 2016)

Log Message

Elements with backdrop-filter cannot be clipped with clip-path or mask
https://bugs.webkit.org/show_bug.cgi?id=142662
<rdar://problem/20150192>

Patch by Antoine Quint <grao...@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.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (201373 => 201374)


--- trunk/LayoutTests/ChangeLog	2016-05-25 09:22:37 UTC (rev 201373)
+++ trunk/LayoutTests/ChangeLog	2016-05-25 09:49:32 UTC (rev 201374)
@@ -1,3 +1,20 @@
+2016-05-25  Antoine Quint  <grao...@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  <mmaxfi...@apple.com>
 
         [Font Loading] Crash during font download failure after garbage collection

Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt (0 => 201374)


--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt	2016-05-25 09:49:32 UTC (rev 201374)
@@ -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]

Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html (0 => 201374)


--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html	                        (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html	2016-05-25 09:49:32 UTC (rev 201374)
@@ -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

Added: trunk/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html (0 => 201374)


--- trunk/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html	                        (rev 0)
+++ trunk/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html	2016-05-25 09:49:32 UTC (rev 201374)
@@ -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

Added: trunk/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png


(Binary files differ)
Property changes on: trunk/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png ___________________________________________________________________

Added: svn:mime-type

Modified: trunk/Source/WebCore/ChangeLog (201373 => 201374)


--- trunk/Source/WebCore/ChangeLog	2016-05-25 09:22:37 UTC (rev 201373)
+++ trunk/Source/WebCore/ChangeLog	2016-05-25 09:49:32 UTC (rev 201374)
@@ -1,3 +1,25 @@
+2016-05-25  Antoine Quint  <grao...@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  <r...@igalia.com>
 
         [css-grid] Simplify grid track sizes parsing

Modified: trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp (201373 => 201374)


--- trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp	2016-05-25 09:22:37 UTC (rev 201373)
+++ trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp	2016-05-25 09:49:32 UTC (rev 201374)
@@ -1979,6 +1979,11 @@
 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 @@
     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()) {

Modified: trunk/Source/WebKit2/ChangeLog (201373 => 201374)


--- trunk/Source/WebKit2/ChangeLog	2016-05-25 09:22:37 UTC (rev 201373)
+++ trunk/Source/WebKit2/ChangeLog	2016-05-25 09:49:32 UTC (rev 201374)
@@ -1,3 +1,16 @@
+2016-05-25  Antoine Quint  <grao...@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  <cdu...@apple.com>
 
         Simplify a couple of lambda captures in the network cache code

Modified: trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp (201373 => 201374)


--- trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp	2016-05-25 09:22:37 UTC (rev 201373)
+++ trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp	2016-05-25 09:49:32 UTC (rev 201374)
@@ -134,6 +134,9 @@
     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);
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to