- Revision
- 211305
- Author
- simon.fra...@apple.com
- Date
- 2017-01-27 15:16:17 -0800 (Fri, 27 Jan 2017)
Log Message
Element with a backdrop-filter and a mask may not correctly mask the backdrop
https://bugs.webkit.org/show_bug.cgi?id=167456
rdar://problem/29320059
Reviewed by Antoine Quint.
Source/WebCore:
If a layer had a backdrop filter, but also corner radii that triggered using a mask layer,
then the call to updateClippingStrategy() in GraphicsLayerCA::updateBackdropFiltersRect() would
set the backdrop layer's mask, but GraphicsLayerCA::updateMaskLayer() would promptly then set
the mask layer back to nil.
Fix by having GraphicsLayerCA::updateMaskLayer() put the mask on the structural layer, if there
is one. We always have a structural layer with backdrops, so this will mask both the layer
and the backdrop.
Test: css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html
* platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::updateMaskLayer):
* platform/graphics/mac/WebLayer.mm:
(-[CALayer _descriptionWithPrefix:]): Dump the mask layer.
LayoutTests:
* css3/filters/backdrop/backdrop-filter-uneven-corner-radii-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (211304 => 211305)
--- trunk/LayoutTests/ChangeLog 2017-01-27 23:11:17 UTC (rev 211304)
+++ trunk/LayoutTests/ChangeLog 2017-01-27 23:16:17 UTC (rev 211305)
@@ -1,3 +1,14 @@
+2017-01-27 Simon Fraser <simon.fra...@apple.com>
+
+ Element with a backdrop-filter and a mask may not correctly mask the backdrop
+ https://bugs.webkit.org/show_bug.cgi?id=167456
+ rdar://problem/29320059
+
+ Reviewed by Antoine Quint.
+
+ * css3/filters/backdrop/backdrop-filter-uneven-corner-radii-expected.html: Added.
+ * css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html: Added.
+
2017-01-27 Jer Noble <jer.no...@apple.com>
media/track/track-in-band-style.html is flaky
Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-uneven-corner-radii-expected.html (0 => 211305)
--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-uneven-corner-radii-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-uneven-corner-radii-expected.html 2017-01-27 23:16:17 UTC (rev 211305)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.container {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 225px;
+ height: 225px;
+ background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 25px, transparent 25px, transparent 50px),
+ repeating-linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 25px, transparent 25px, transparent 50px);
+}
+
+.container > div {
+ position: absolute;
+ left: calc((100% - 160px)/2);
+ top: calc((100% - 160px)/2);
+ width: 160px;
+ height: 160px;
+ background-color: rgba(0, 0, 128, 0.2);
+}
+
+.cover {
+ position: absolute;
+ width: 145px;
+ height: 145px;
+ background-color: gray;
+}
+</style>
+
+</head>
+<body>
+ <div class="container">
+ <div style="border-top-left-radius: 100%"></div>
+ </div>
+
+ <div class="cover" style="top: 90px; width: 225px;"></div>
+ <div class="cover" style="left: 90px; height: 225px;"></div>
+
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html (0 => 211305)
--- trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html (rev 0)
+++ trunk/LayoutTests/css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html 2017-01-27 23:16:17 UTC (rev 211305)
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.container {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 225px;
+ height: 225px;
+ background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 25px, transparent 25px, transparent 50px),
+ repeating-linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 25px, transparent 25px, transparent 50px);
+}
+
+.container > div {
+ position: absolute;
+ left: calc((100% - 160px)/2);
+ top: calc((100% - 160px)/2);
+ width: 160px;
+ height: 160px;
+ background-color: rgba(0, 0, 128, 0.2);
+ -webkit-backdrop-filter: blur(5px);
+}
+
+.cover {
+ position: absolute;
+ width: 145px;
+ height: 145px;
+ background-color: gray;
+}
+</style>
+
+</head>
+<body>
+ <div class="container">
+ <div style="border-top-left-radius: 100%"></div>
+ </div>
+
+ <div class="cover" style="top: 90px; width: 225px;"></div>
+ <div class="cover" style="left: 90px; height: 225px;"></div>
+
+</body>
+</html>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (211304 => 211305)
--- trunk/Source/WebCore/ChangeLog 2017-01-27 23:11:17 UTC (rev 211304)
+++ trunk/Source/WebCore/ChangeLog 2017-01-27 23:16:17 UTC (rev 211305)
@@ -1,3 +1,27 @@
+2017-01-27 Simon Fraser <simon.fra...@apple.com>
+
+ Element with a backdrop-filter and a mask may not correctly mask the backdrop
+ https://bugs.webkit.org/show_bug.cgi?id=167456
+ rdar://problem/29320059
+
+ Reviewed by Antoine Quint.
+
+ If a layer had a backdrop filter, but also corner radii that triggered using a mask layer,
+ then the call to updateClippingStrategy() in GraphicsLayerCA::updateBackdropFiltersRect() would
+ set the backdrop layer's mask, but GraphicsLayerCA::updateMaskLayer() would promptly then set
+ the mask layer back to nil.
+
+ Fix by having GraphicsLayerCA::updateMaskLayer() put the mask on the structural layer, if there
+ is one. We always have a structural layer with backdrops, so this will mask both the layer
+ and the backdrop.
+
+ Test: css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html
+
+ * platform/graphics/ca/GraphicsLayerCA.cpp:
+ (WebCore::GraphicsLayerCA::updateMaskLayer):
+ * platform/graphics/mac/WebLayer.mm:
+ (-[CALayer _descriptionWithPrefix:]): Dump the mask layer.
+
2017-01-27 Chris Dumez <cdu...@apple.com>
Fix remaining bad uses of logDiagnosticMessageWithValue()
Modified: trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp (211304 => 211305)
--- trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2017-01-27 23:11:17 UTC (rev 211304)
+++ trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2017-01-27 23:16:17 UTC (rev 211305)
@@ -2541,20 +2541,18 @@
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* layerCloneMap;
+ if (m_structuralLayer) {
+ m_structuralLayer->setMask(maskCALayer);
+ layerCloneMap = m_structuralLayerClones.get();
+ } else {
+ m_layer->setMask(maskCALayer);
+ layerCloneMap = m_layerClones.get();
}
LayerMap* maskLayerCloneMap = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayerClones() : nullptr;
-
- if (LayerMap* layerCloneMap = m_layerClones.get()) {
+ if (layerCloneMap) {
for (auto& clone : *layerCloneMap) {
PlatformCALayer* maskClone = maskLayerCloneMap ? maskLayerCloneMap->get(clone.key) : nullptr;
clone.value->setMask(maskClone);
Modified: trunk/Source/WebCore/platform/graphics/mac/WebLayer.mm (211304 => 211305)
--- trunk/Source/WebCore/platform/graphics/mac/WebLayer.mm 2017-01-27 23:11:17 UTC (rev 211304)
+++ trunk/Source/WebCore/platform/graphics/mac/WebLayer.mm 2017-01-27 23:16:17 UTC (rev 211305)
@@ -168,6 +168,11 @@
if ([[self sublayers] count] == 0)
[curDesc appendString:@"\n"];
+ if (CALayer *mask = [self mask]) {
+ [curDesc appendString:@"mask: "];
+ [curDesc appendString:[mask _descriptionWithPrefix:sublayerPrefix]];
+ }
+
return curDesc;
}
