<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[201349] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/201349">201349</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-05-24 14:02:13 -0700 (Tue, 24 May 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <graouts@apple.com> on 2016-05-24
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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreplatformgraphicscaGraphicsLayerCAcpp">trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp</a></li>
<li><a href="#trunkSourceWebKit2ChangeLog">trunk/Source/WebKit2/ChangeLog</a></li>
<li><a href="#trunkSourceWebKit2WebProcessWebPagemacPlatformCALayerRemotecpp">trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithclippathexpectedtxt">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithclippathhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorcss3filtersbackdropbackdropfilterwithclippathexpectedhtml">trunk/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3filtersbackdropbackdropfilterwithclippathexpectedpng">trunk/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (201348 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-05-24 21:01:10 UTC (rev 201348)
+++ trunk/LayoutTests/ChangeLog 2016-05-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2016-05-24 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.
+
</ins><span class="cx"> 2016-05-24 Adam Bergkvist <adam.bergkvist@ericsson.com>
</span><span class="cx">
</span><span class="cx"> WebRTC: Update failing RTCPeerConnection and RTCRtpSender tests
</span></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithclippathexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.txt (0 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- 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-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+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]
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithclippathhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path.html (0 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- 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-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<!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>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorcss3filtersbackdropbackdropfilterwithclippathexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/ios-simulator/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html (0 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- 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-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+<!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>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmaccss3filtersbackdropbackdropfilterwithclippathexpectedpng"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/platform/mac/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (201348 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-05-24 21:01:10 UTC (rev 201348)
+++ trunk/Source/WebCore/ChangeLog 2016-05-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2016-05-24 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.
+
</ins><span class="cx"> 2016-05-24 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> fast/table/neighboring-cells-when-collapsed-border-changes.html is flaky.
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformgraphicscaGraphicsLayerCAcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp (201348 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2016-05-24 21:01:10 UTC (rev 201348)
+++ trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2016-05-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -1979,6 +1979,11 @@
</span><span class="cx"> void GraphicsLayerCA::updateShape()
</span><span class="cx"> {
</span><span class="cx"> m_layer->setShapePath(m_shapeLayerPath);
</span><ins>+
+ if (LayerMap* layerCloneMap = primaryLayerClones()) {
+ for (auto& layer : layerCloneMap->values())
+ layer->setShapePath(m_shapeLayerPath);
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void GraphicsLayerCA::updateWindRule()
</span><span class="lines">@@ -2455,6 +2460,15 @@
</span><span class="cx"> PlatformCALayer* maskCALayer = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayer() : nullptr;
</span><span class="cx"> m_layer->setMask(maskCALayer);
</span><span class="cx">
</span><ins>+ 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);
+ }
+
</ins><span class="cx"> LayerMap* maskLayerCloneMap = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayerClones() : nullptr;
</span><span class="cx">
</span><span class="cx"> if (LayerMap* layerCloneMap = m_layerClones.get()) {
</span></span></pre></div>
<a id="trunkSourceWebKit2ChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebKit2/ChangeLog (201348 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebKit2/ChangeLog 2016-05-24 21:01:10 UTC (rev 201348)
+++ trunk/Source/WebKit2/ChangeLog 2016-05-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-05-24 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):
+
</ins><span class="cx"> 2016-05-24 Chelsea Pugh <cpugh@apple.com>
</span><span class="cx">
</span><span class="cx"> [iOS] Allow clients to override the type of an input field
</span></span></pre></div>
<a id="trunkSourceWebKit2WebProcessWebPagemacPlatformCALayerRemotecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp (201348 => 201349)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp 2016-05-24 21:01:10 UTC (rev 201348)
+++ trunk/Source/WebKit2/WebProcess/WebPage/mac/PlatformCALayerRemote.cpp 2016-05-24 21:02:13 UTC (rev 201349)
</span><span class="lines">@@ -133,6 +133,7 @@
</span><span class="cx"> clone.setBackgroundColor(backgroundColor());
</span><span class="cx"> clone.setContentsScale(contentsScale());
</span><span class="cx"> clone.setCornerRadius(cornerRadius());
</span><ins>+ clone.setShapePath(shapePath());
</ins><span class="cx">
</span><span class="cx"> if (m_properties.shapeRoundedRect)
</span><span class="cx"> clone.setShapeRoundedRect(*m_properties.shapeRoundedRect);
</span></span></pre>
</div>
</div>
</body>
</html>