<!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>[201785] 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/201785">201785</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-06-07 19:07:34 -0700 (Tue, 07 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>The backdrop-filter property does not respect border-radius
https://bugs.webkit.org/show_bug.cgi?id=158483
<rdar://problem/24210257>
Patch by Antoine Quint <graouts@apple.com> on 2016-06-07
Reviewed by Simon Fraser.
Source/WebCore:
In order to correctly support border-radius and backdrop-filter together, we change
the value set as the m_backdropFiltersRect from a FloatRect to FloatRoundedRect so
that it accounts for values set by the border-radius property. Then we add a new
m_backdropClippingLayer PlatformCALayer member to clip the backdrop layer in the
event that the border-radius is non-zero in updateBackdropFiltersRect(). Finally,
we follow the same pattern used for other PlatformCALayers owned by a GraphicsLayerCA
to support cloning of the new m_backdropClippingLayer.
Tests: css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html
css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html
css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html
css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html
css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html
css3/filters/backdrop/backdrop-filter-with-border-radius.html
* platform/graphics/GraphicsLayer.h:
(WebCore::GraphicsLayer::setBackdropFiltersRect):
(WebCore::GraphicsLayer::backdropFiltersRect):
* platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::willBeDestroyed):
(WebCore::GraphicsLayerCA::setBackdropFiltersRect):
(WebCore::GraphicsLayerCA::updateBackdropFiltersRect):
(WebCore::GraphicsLayerCA::dumpAdditionalProperties):
* platform/graphics/ca/GraphicsLayerCA.h:
* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateBackdropFiltersGeometry):
Use a rounded rect if there is no clip and we have non-zero border-radius set on the renderer.
LayoutTests:
Adding new tests checking that border-radius correctly affects clipping of the backdrop layer
in a basic scenario, when we change border-radius to a different value, when we set border-radius
back to 0 and when we add a reflection.
* css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-value-change-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html: Added.
* css3/filters/backdrop/backdrop-filter-with-border-radius.html: 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="#trunkSourceWebCoreplatformgraphicsGraphicsLayerh">trunk/Source/WebCore/platform/graphics/GraphicsLayer.h</a></li>
<li><a href="#trunkSourceWebCoreplatformgraphicscaGraphicsLayerCAcpp">trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp</a></li>
<li><a href="#trunkSourceWebCoreplatformgraphicscaGraphicsLayerCAh">trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayerBackingcpp">trunk/Source/WebCore/rendering/RenderLayerBacking.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionaddexpectedhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add-expected.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionaddhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionexpectedhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-expected.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionremoveexpectedhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove-expected.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionremovehtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusexpectedhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-expected.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvaluechangeexpectedhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change-expected.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvaluechangehtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvalueremoveexpectedhtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove-expected.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvalueremovehtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html</a></li>
<li><a href="#trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiushtml">trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (201784 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-06-08 01:53:44 UTC (rev 201784)
+++ trunk/LayoutTests/ChangeLog 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+2016-06-07 Antoine Quint <graouts@apple.com>
+
+ The backdrop-filter property does not respect border-radius
+ https://bugs.webkit.org/show_bug.cgi?id=158483
+ <rdar://problem/24210257>
+
+ Reviewed by Simon Fraser.
+
+ Adding new tests checking that border-radius correctly affects clipping of the backdrop layer
+ in a basic scenario, when we change border-radius to a different value, when we set border-radius
+ back to 0 and when we add a reflection.
+
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-value-change-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html: Added.
+ * css3/filters/backdrop/backdrop-filter-with-border-radius.html: Added.
+
</ins><span class="cx"> 2016-06-07 Sam Weinig <sam@webkit.org>
</span><span class="cx">
</span><span class="cx"> Update tests to work around https://bugs.webkit.org/show_bug.cgi?id=158507.
</span></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionaddexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add-expected.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add-expected.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that we correctly add the reflection of an element with a backdrop-filter applied to it.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 10px;
+ left: 60px;
+ width: 80px;
+ height: 80px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ }
+
+ .backdrop:last-of-type {
+ top: 110px;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<div class="backdrop"></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionaddhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that we correctly add the reflection of an element with a backdrop-filter applied to it.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 10px;
+ left: 60px;
+ width: 80px;
+ height: 80px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ -webkit-box-reflect: none;
+ }
+
+ .changed {
+ -webkit-box-reflect: below 20px;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<script type="text/javascript">
+
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.requestAnimationFrame(function() {
+ document.querySelector(".backdrop").classList.add("changed");
+ if (window.testRunner)
+ testRunner.notifyDone();
+ });
+
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-expected.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-expected.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that the reflection of an element with a backdrop-filter applied also has a backdrop-filter of its own.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 10px;
+ left: 60px;
+ width: 80px;
+ height: 80px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ }
+
+ .backdrop:last-of-type {
+ top: 110px;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<div class="backdrop"></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionremoveexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove-expected.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove-expected.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that we correctly remove the reflection of an element with a backdrop-filter applied to it.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 10px;
+ left: 60px;
+ width: 80px;
+ height: 80px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionremovehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that we correctly remove the reflection of an element with a backdrop-filter applied to it.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 10px;
+ left: 60px;
+ width: 80px;
+ height: 80px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ -webkit-box-reflect: below 20px;
+ }
+
+ .changed {
+ -webkit-box-reflect: none;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<script type="text/javascript">
+
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.requestAnimationFrame(function() {
+ document.querySelector(".backdrop").classList.add("changed");
+ if (window.testRunner)
+ testRunner.notifyDone();
+ });
+
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusandreflectionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that the reflection of an element with a backdrop-filter applied also has a backdrop-filter of its own.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 10px;
+ left: 60px;
+ width: 80px;
+ height: 80px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ -webkit-box-reflect: below 20px;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-expected.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-expected.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that an element clips its backdrop according to the border-radius property.</title>
+ <style>
+
+ .background {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .stencil {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .stencil > div {
+ position: absolute;
+ background-color: black;
+ }
+
+ .stencil > div:nth-of-type(1) {
+ width: 200px;
+ height: 20px;
+ }
+
+ .stencil > div:nth-of-type(2) {
+ width: 160px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(3) {
+ left: 180px;
+ width: 20px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(4) {
+ top: 40px;
+ width: 200px;
+ height: 160px;
+ }
+
+ </style>
+</head>
+<div class="background"></div>
+<div class="stencil">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvaluechangeexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change-expected.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change-expected.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that an element clips its backdrop according to the border-radius property and correctly updates the clipping when the border-radius property changes.</title>
+ <style>
+
+ .background {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .stencil {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .stencil > div {
+ position: absolute;
+ background-color: black;
+ }
+
+ .stencil > div:nth-of-type(1) {
+ width: 200px;
+ height: 20px;
+ }
+
+ .stencil > div:nth-of-type(2) {
+ width: 160px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(3) {
+ left: 180px;
+ width: 20px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(4) {
+ top: 40px;
+ width: 200px;
+ height: 160px;
+ }
+
+ </style>
+</head>
+<div class="background"></div>
+<div class="stencil">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvaluechangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,87 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that an element clips its backdrop according to the border-radius property and correctly updates the clipping when the border-radius property changes.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 160px;
+ height: 160px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ }
+
+ .changed {
+ border-radius: 100%;
+ }
+
+ .stencil {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .stencil > div {
+ position: absolute;
+ background-color: black;
+ }
+
+ .stencil > div:nth-of-type(1) {
+ width: 200px;
+ height: 20px;
+ }
+
+ .stencil > div:nth-of-type(2) {
+ width: 160px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(3) {
+ left: 180px;
+ width: 20px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(4) {
+ top: 40px;
+ width: 200px;
+ height: 160px;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<div class="stencil">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
+<script type="text/javascript">
+
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.requestAnimationFrame(function() {
+ document.querySelector(".backdrop").classList.add("changed");
+ if (window.testRunner)
+ testRunner.notifyDone();
+ });
+
+</script>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvalueremoveexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove-expected.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove-expected.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that an element clips its backdrop according to the border-radius property and correctly updates the clipping when the border-radius property changes to 0.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 160px;
+ height: 160px;
+ background-color: rgba(255, 255, 255, 0.5);
+ -webkit-backdrop-filter: invert(100%);
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiusvalueremovehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,48 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that an element clips its backdrop according to the border-radius property and correctly updates the clipping when the border-radius property changes to 0.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 160px;
+ height: 160px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 20px;
+ -webkit-backdrop-filter: invert(100%);
+ }
+
+ .changed {
+ border-radius: 0;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<script type="text/javascript">
+
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.requestAnimationFrame(function() {
+ document.querySelector(".backdrop").classList.add("changed");
+ if (window.testRunner)
+ testRunner.notifyDone();
+ });
+
+</script>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestscss3filtersbackdropbackdropfilterwithborderradiushtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius.html (0 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-with-border-radius.html 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -0,0 +1,71 @@
</span><ins>+<head>
+ <meta name="viewport" content="width=device-width">
+ <title>This tests that an element clips its backdrop according to the border-radius property.</title>
+ <style>
+
+ svg {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: lightgray;
+ }
+
+ .backdrop {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 160px;
+ height: 160px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 100%;
+ -webkit-backdrop-filter: invert(75%);
+ }
+
+ .stencil {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .stencil > div {
+ position: absolute;
+ background-color: black;
+ }
+
+ .stencil > div:nth-of-type(1) {
+ width: 200px;
+ height: 20px;
+ }
+
+ .stencil > div:nth-of-type(2) {
+ width: 160px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(3) {
+ left: 180px;
+ width: 20px;
+ height: 200px;
+ }
+
+ .stencil > div:nth-of-type(4) {
+ top: 40px;
+ width: 200px;
+ height: 160px;
+ }
+
+ </style>
+</head>
+<svg viewbox="0 0 2 2">
+ <rect fill="black" x="0" y="0" width="1" height="1"></rect>
+ <rect fill="black" x="1" y="1" width="1" height="1"></rect>
+</svg>
+<div class="backdrop"></div>
+<div class="stencil">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+</div>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (201784 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-06-08 01:53:44 UTC (rev 201784)
+++ trunk/Source/WebCore/ChangeLog 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -1,3 +1,39 @@
</span><ins>+2016-06-07 Antoine Quint <graouts@apple.com>
+
+ The backdrop-filter property does not respect border-radius
+ https://bugs.webkit.org/show_bug.cgi?id=158483
+ <rdar://problem/24210257>
+
+ Reviewed by Simon Fraser.
+
+ In order to correctly support border-radius and backdrop-filter together, we change
+ the value set as the m_backdropFiltersRect from a FloatRect to FloatRoundedRect so
+ that it accounts for values set by the border-radius property. Then we add a new
+ m_backdropClippingLayer PlatformCALayer member to clip the backdrop layer in the
+ event that the border-radius is non-zero in updateBackdropFiltersRect(). Finally,
+ we follow the same pattern used for other PlatformCALayers owned by a GraphicsLayerCA
+ to support cloning of the new m_backdropClippingLayer.
+
+ Tests: css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html
+ css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-remove.html
+ css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html
+ css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html
+ css3/filters/backdrop/backdrop-filter-with-border-radius-value-remove.html
+ css3/filters/backdrop/backdrop-filter-with-border-radius.html
+
+ * platform/graphics/GraphicsLayer.h:
+ (WebCore::GraphicsLayer::setBackdropFiltersRect):
+ (WebCore::GraphicsLayer::backdropFiltersRect):
+ * platform/graphics/ca/GraphicsLayerCA.cpp:
+ (WebCore::GraphicsLayerCA::willBeDestroyed):
+ (WebCore::GraphicsLayerCA::setBackdropFiltersRect):
+ (WebCore::GraphicsLayerCA::updateBackdropFiltersRect):
+ (WebCore::GraphicsLayerCA::dumpAdditionalProperties):
+ * platform/graphics/ca/GraphicsLayerCA.h:
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::RenderLayerBacking::updateBackdropFiltersGeometry):
+ Use a rounded rect if there is no clip and we have non-zero border-radius set on the renderer.
+
</ins><span class="cx"> 2016-06-07 Andreas Kling <akling@apple.com>
</span><span class="cx">
</span><span class="cx"> CachedScript should avoid recomputing its hash multiple times.
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformgraphicsGraphicsLayerh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/graphics/GraphicsLayer.h (201784 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/graphics/GraphicsLayer.h 2016-06-08 01:53:44 UTC (rev 201784)
+++ trunk/Source/WebCore/platform/graphics/GraphicsLayer.h 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -377,8 +377,8 @@
</span><span class="cx"> const FilterOperations& backdropFilters() const { return m_backdropFilters; }
</span><span class="cx"> virtual bool setBackdropFilters(const FilterOperations& filters) { m_backdropFilters = filters; return true; }
</span><span class="cx">
</span><del>- virtual void setBackdropFiltersRect(const FloatRect& backdropFiltersRect) { m_backdropFiltersRect = backdropFiltersRect; }
- FloatRect backdropFiltersRect() const { return m_backdropFiltersRect; }
</del><ins>+ virtual void setBackdropFiltersRect(const FloatRoundedRect& backdropFiltersRect) { m_backdropFiltersRect = backdropFiltersRect; }
+ const FloatRoundedRect& backdropFiltersRect() const { return m_backdropFiltersRect; }
</ins><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><span class="cx"> BlendMode blendMode() const { return m_blendMode; }
</span><span class="lines">@@ -645,7 +645,7 @@
</span><span class="cx"> FloatRoundedRect m_masksToBoundsRect;
</span><span class="cx"> FloatSize m_contentsTilePhase;
</span><span class="cx"> FloatSize m_contentsTileSize;
</span><del>- FloatRect m_backdropFiltersRect;
</del><ins>+ FloatRoundedRect m_backdropFiltersRect;
</ins><span class="cx">
</span><span class="cx"> int m_repaintCount;
</span><span class="cx"> CustomAppearance m_customAppearance;
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformgraphicscaGraphicsLayerCAcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp (201784 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2016-06-08 01:53:44 UTC (rev 201784)
+++ trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -434,6 +434,9 @@
</span><span class="cx"> if (m_backdropLayer)
</span><span class="cx"> m_backdropLayer->setOwner(nullptr);
</span><span class="cx">
</span><ins>+ if (m_backdropClippingLayer)
+ m_backdropClippingLayer->setOwner(nullptr);
+
</ins><span class="cx"> removeCloneLayers();
</span><span class="cx">
</span><span class="cx"> GraphicsLayer::willBeDestroyed();
</span><span class="lines">@@ -771,7 +774,7 @@
</span><span class="cx"> return canCompositeFilters;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void GraphicsLayerCA::setBackdropFiltersRect(const FloatRect& backdropFiltersRect)
</del><ins>+void GraphicsLayerCA::setBackdropFiltersRect(const FloatRoundedRect& backdropFiltersRect)
</ins><span class="cx"> {
</span><span class="cx"> if (backdropFiltersRect == m_backdropFiltersRect)
</span><span class="cx"> return;
</span><span class="lines">@@ -1964,15 +1967,31 @@
</span><span class="cx"> {
</span><span class="cx"> if (!m_backdropLayer)
</span><span class="cx"> return;
</span><del>- FloatRect contentBounds(0, 0, m_backdropFiltersRect.width(), m_backdropFiltersRect.height());
</del><ins>+
+ FloatRect contentBounds(0, 0, m_backdropFiltersRect.rect().width(), m_backdropFiltersRect.rect().height());
</ins><span class="cx"> m_backdropLayer->setBounds(contentBounds);
</span><del>- m_backdropLayer->setPosition(m_backdropFiltersRect.location());
</del><ins>+ m_backdropLayer->setPosition(m_backdropFiltersRect.rect().location());
</ins><span class="cx">
</span><del>- if (LayerMap* layerCloneMap = m_backdropLayerClones.get()) {
- for (auto& clone : *layerCloneMap) {
- PlatformCALayer* cloneLayer = clone.value.get();
- cloneLayer->setBounds(contentBounds);
- cloneLayer->setPosition(m_backdropFiltersRect.location());
</del><ins>+ updateClippingStrategy(*m_backdropLayer, m_backdropClippingLayer, m_backdropFiltersRect);
+
+ if (m_backdropLayerClones) {
+ for (auto& clone : *m_backdropLayerClones) {
+ PlatformCALayer* backdropCloneLayer = clone.value.get();
+ backdropCloneLayer->setBounds(contentBounds);
+ backdropCloneLayer->setPosition(m_backdropFiltersRect.rect().location());
+
+ CloneID cloneID = clone.key;
+ RefPtr<PlatformCALayer> backdropClippingLayerClone;
+ if (m_backdropClippingLayerClones)
+ backdropClippingLayerClone = m_backdropClippingLayerClones->get(cloneID);
+
+ bool hadBackdropClippingLayer = backdropClippingLayerClone;
+ updateClippingStrategy(*backdropCloneLayer, backdropClippingLayerClone, m_backdropFiltersRect);
+
+ if (!backdropClippingLayerClone && m_backdropClippingLayerClones)
+ m_backdropClippingLayerClones->remove(cloneID);
+ else if (backdropClippingLayerClone && !hadBackdropClippingLayer)
+ m_backdropClippingLayerClones->add(cloneID, backdropClippingLayerClone);
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -3451,6 +3470,7 @@
</span><span class="cx"> dumpInnerLayer(textStream, "structural layer", m_structuralLayer.get(), indent, behavior);
</span><span class="cx"> dumpInnerLayer(textStream, "contents clipping layer", m_contentsClippingLayer.get(), indent, behavior);
</span><span class="cx"> dumpInnerLayer(textStream, "shape mask layer", m_shapeMaskLayer.get(), indent, behavior);
</span><ins>+ dumpInnerLayer(textStream, "backdrop clipping layer", m_backdropClippingLayer.get(), indent, behavior);
</ins><span class="cx"> dumpInnerLayer(textStream, "contents layer", m_contentsLayer.get(), indent, behavior);
</span><span class="cx"> dumpInnerLayer(textStream, "contents shape mask layer", m_contentsShapeMaskLayer.get(), indent, behavior);
</span><span class="cx"> dumpInnerLayer(textStream, "backdrop layer", m_backdropLayer.get(), indent, behavior);
</span><span class="lines">@@ -3609,7 +3629,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void GraphicsLayerCA::ensureCloneLayers(CloneID cloneID, RefPtr<PlatformCALayer>& primaryLayer, RefPtr<PlatformCALayer>& structuralLayer,
</span><del>- RefPtr<PlatformCALayer>& contentsLayer, RefPtr<PlatformCALayer>& contentsClippingLayer, RefPtr<PlatformCALayer>& contentsShapeMaskLayer, RefPtr<PlatformCALayer>& shapeMaskLayer, RefPtr<PlatformCALayer>& backdropLayer, CloneLevel cloneLevel)
</del><ins>+ RefPtr<PlatformCALayer>& contentsLayer, RefPtr<PlatformCALayer>& contentsClippingLayer, RefPtr<PlatformCALayer>& contentsShapeMaskLayer, RefPtr<PlatformCALayer>& shapeMaskLayer, RefPtr<PlatformCALayer>& backdropLayer, RefPtr<PlatformCALayer>& backdropClippingLayer, CloneLevel cloneLevel)
</ins><span class="cx"> {
</span><span class="cx"> structuralLayer = nullptr;
</span><span class="cx"> contentsLayer = nullptr;
</span><span class="lines">@@ -3634,7 +3654,10 @@
</span><span class="cx">
</span><span class="cx"> if (!m_backdropLayerClones && m_backdropLayer)
</span><span class="cx"> m_backdropLayerClones = std::make_unique<LayerMap>();
</span><del>-
</del><ins>+
+ if (!m_backdropClippingLayerClones && m_backdropClippingLayer)
+ m_backdropClippingLayerClones = std::make_unique<LayerMap>();
+
</ins><span class="cx"> primaryLayer = findOrMakeClone(cloneID, m_layer.get(), m_layerClones.get(), cloneLevel);
</span><span class="cx"> structuralLayer = findOrMakeClone(cloneID, m_structuralLayer.get(), m_structuralLayerClones.get(), cloneLevel);
</span><span class="cx"> contentsLayer = findOrMakeClone(cloneID, m_contentsLayer.get(), m_contentsLayerClones.get(), cloneLevel);
</span><span class="lines">@@ -3642,6 +3665,7 @@
</span><span class="cx"> contentsShapeMaskLayer = findOrMakeClone(cloneID, m_contentsShapeMaskLayer.get(), m_contentsShapeMaskLayerClones.get(), cloneLevel);
</span><span class="cx"> shapeMaskLayer = findOrMakeClone(cloneID, m_shapeMaskLayer.get(), m_shapeMaskLayerClones.get(), cloneLevel);
</span><span class="cx"> backdropLayer = findOrMakeClone(cloneID, m_backdropLayer.get(), m_backdropLayerClones.get(), cloneLevel);
</span><ins>+ backdropClippingLayer = findOrMakeClone(cloneID, m_backdropClippingLayer.get(), m_backdropClippingLayerClones.get(), cloneLevel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void GraphicsLayerCA::clearClones(std::unique_ptr<LayerMap>& layerMap)
</span><span class="lines">@@ -3664,6 +3688,7 @@
</span><span class="cx"> clearClones(m_contentsShapeMaskLayerClones);
</span><span class="cx"> clearClones(m_shapeMaskLayerClones);
</span><span class="cx"> clearClones(m_backdropLayerClones);
</span><ins>+ clearClones(m_backdropClippingLayerClones);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> FloatPoint GraphicsLayerCA::positionForCloneRootLayer() const
</span><span class="lines">@@ -3698,7 +3723,8 @@
</span><span class="cx"> RefPtr<PlatformCALayer> contentsShapeMaskLayer;
</span><span class="cx"> RefPtr<PlatformCALayer> shapeMaskLayer;
</span><span class="cx"> RefPtr<PlatformCALayer> backdropLayer;
</span><del>- ensureCloneLayers(replicaState.cloneID(), primaryLayer, structuralLayer, contentsLayer, contentsClippingLayer, contentsShapeMaskLayer, shapeMaskLayer, backdropLayer, cloneLevel);
</del><ins>+ RefPtr<PlatformCALayer> backdropClippingLayer;
+ ensureCloneLayers(replicaState.cloneID(), primaryLayer, structuralLayer, contentsLayer, contentsClippingLayer, contentsShapeMaskLayer, shapeMaskLayer, backdropLayer, backdropClippingLayer, cloneLevel);
</ins><span class="cx">
</span><span class="cx"> if (m_maskLayer) {
</span><span class="cx"> RefPtr<PlatformCALayer> maskClone = downcast<GraphicsLayerCA>(*m_maskLayer).fetchCloneLayers(replicaRoot, replicaState, IntermediateCloneLevel);
</span><span class="lines">@@ -3745,8 +3771,10 @@
</span><span class="cx">
</span><span class="cx"> if (replicaLayer || structuralLayer || contentsLayer || contentsClippingLayer || childLayers.size() > 0) {
</span><span class="cx"> if (structuralLayer) {
</span><del>- if (backdropLayer)
</del><ins>+ if (backdropLayer) {
</ins><span class="cx"> clonalSublayers.append(backdropLayer);
</span><ins>+ backdropLayer->setMask(backdropClippingLayer.get());
+ }
</ins><span class="cx">
</span><span class="cx"> // Replicas render behind the actual layer content.
</span><span class="cx"> if (replicaLayer)
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformgraphicscaGraphicsLayerCAh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h (201784 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h 2016-06-08 01:53:44 UTC (rev 201784)
+++ trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -104,7 +104,7 @@
</span><span class="cx"> virtual bool filtersCanBeComposited(const FilterOperations&);
</span><span class="cx">
</span><span class="cx"> WEBCORE_EXPORT bool setBackdropFilters(const FilterOperations&) override;
</span><del>- WEBCORE_EXPORT void setBackdropFiltersRect(const FloatRect&) override;
</del><ins>+ WEBCORE_EXPORT void setBackdropFiltersRect(const FloatRoundedRect&) override;
</ins><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><span class="cx"> WEBCORE_EXPORT void setBlendMode(BlendMode) override;
</span><span class="lines">@@ -375,7 +375,9 @@
</span><span class="cx"> PassRefPtr<PlatformCALayer> findOrMakeClone(CloneID, PlatformCALayer *, LayerMap*, CloneLevel);
</span><span class="cx">
</span><span class="cx"> void ensureCloneLayers(CloneID, RefPtr<PlatformCALayer>& primaryLayer, RefPtr<PlatformCALayer>& structuralLayer,
</span><del>- RefPtr<PlatformCALayer>& contentsLayer, RefPtr<PlatformCALayer>& contentsClippingLayer, RefPtr<PlatformCALayer>& contentsShapeMaskLayer, RefPtr<PlatformCALayer>& shapeMaskLayer, RefPtr<PlatformCALayer>& backdropLayer, CloneLevel);
</del><ins>+ RefPtr<PlatformCALayer>& contentsLayer, RefPtr<PlatformCALayer>& contentsClippingLayer, RefPtr<PlatformCALayer>& contentsShapeMaskLayer,
+ RefPtr<PlatformCALayer>& shapeMaskLayer, RefPtr<PlatformCALayer>& backdropLayer, RefPtr<PlatformCALayer>& backdropClippingLayer,
+ CloneLevel);
</ins><span class="cx">
</span><span class="cx"> static void clearClones(std::unique_ptr<LayerMap>&);
</span><span class="cx">
</span><span class="lines">@@ -508,6 +510,7 @@
</span><span class="cx"> RefPtr<PlatformCALayer> m_structuralLayer; // A layer used for structural reasons, like preserves-3d or replica-flattening. Is the parent of m_layer.
</span><span class="cx"> RefPtr<PlatformCALayer> m_contentsClippingLayer; // A layer used to clip inner content
</span><span class="cx"> RefPtr<PlatformCALayer> m_shapeMaskLayer; // Used to clip with non-trivial corner radii.
</span><ins>+ RefPtr<PlatformCALayer> m_backdropClippingLayer; // Used to clip the backdrop layer with corner radii.
</ins><span class="cx"> RefPtr<PlatformCALayer> m_contentsLayer; // A layer used for inner content, like image and video
</span><span class="cx"> RefPtr<PlatformCALayer> m_contentsShapeMaskLayer; // Used to clip the content layer with non-trivial corner radii.
</span><span class="cx"> RefPtr<PlatformCALayer> m_backdropLayer; // The layer used for backdrop rendering, if necessary.
</span><span class="lines">@@ -520,6 +523,7 @@
</span><span class="cx"> std::unique_ptr<LayerMap> m_contentsShapeMaskLayerClones;
</span><span class="cx"> std::unique_ptr<LayerMap> m_shapeMaskLayerClones;
</span><span class="cx"> std::unique_ptr<LayerMap> m_backdropLayerClones;
</span><ins>+ std::unique_ptr<LayerMap> m_backdropClippingLayerClones;
</ins><span class="cx">
</span><span class="cx"> #ifdef VISIBLE_TILE_WASH
</span><span class="cx"> RefPtr<PlatformCALayer> m_visibleTileWashLayer;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayerBackingcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayerBacking.cpp (201784 => 201785)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2016-06-08 01:53:44 UTC (rev 201784)
+++ trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2016-06-08 02:07:34 UTC (rev 201785)
</span><span class="lines">@@ -425,12 +425,18 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> RenderBox& renderer = downcast<RenderBox>(this->renderer());
</span><del>- LayoutRect backdropFiltersRect = renderer.borderBoxRect();
</del><ins>+ LayoutRect boxRect = renderer.borderBoxRect();
</ins><span class="cx"> if (renderer.hasClip())
</span><del>- backdropFiltersRect.intersect(renderer.clipRect(LayoutPoint(), nullptr));
</del><ins>+ boxRect.intersect(renderer.clipRect(LayoutPoint(), nullptr));
+ boxRect.move(contentOffsetInCompostingLayer());
</ins><span class="cx">
</span><del>- backdropFiltersRect.move(contentOffsetInCompostingLayer());
- m_graphicsLayer->setBackdropFiltersRect(snapRectToDevicePixels(backdropFiltersRect, deviceScaleFactor()));
</del><ins>+ FloatRoundedRect backdropFiltersRect;
+ if (renderer.style().hasBorderRadius() && !renderer.hasClip())
+ backdropFiltersRect = renderer.style().getRoundedInnerBorderFor(boxRect).pixelSnappedRoundedRectForPainting(deviceScaleFactor());
+ else
+ backdropFiltersRect = FloatRoundedRect(snapRectToDevicePixels(boxRect, deviceScaleFactor()));
+
+ m_graphicsLayer->setBackdropFiltersRect(backdropFiltersRect);
</ins><span class="cx"> }
</span><span class="cx"> #endif
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>