Skip to content
Permalink
Browse files
Reflection of element does not respect backdrop-filter property
https://bugs.webkit.org/show_bug.cgi?id=158201

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

Source/WebCore:

We weren't cloning the PlatformCALayer for the backdrop so reflections would simply
not show their backdrops. We now follow the same pattern as other PlatformCALayers
owned by a GraphicsLayerCA and keep a list of backdrop layer clones that we add
to the structural layer when cloning to match the layer order of the original
and update the backdrop layer clone properties to match the original when the
backdrop filters or rectangle changes.

Tests: css3/filters/backdrop/backdrop-filter-with-reflection-add-backdrop.html
       css3/filters/backdrop/backdrop-filter-with-reflection-remove-backdrop.html
       css3/filters/backdrop/backdrop-filter-with-reflection-value-change.html
       css3/filters/backdrop/backdrop-filter-with-reflection.html

* platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::updateBackdropFilters):
(WebCore::GraphicsLayerCA::updateBackdropFiltersRect):
Update backdrop layer clones to match new values set when the backdrop filter
configuration changes.

(WebCore::GraphicsLayerCA::ensureCloneLayers):
Create the backdrop layer clones map if needed and clone the existing backdrop layer.

(WebCore::GraphicsLayerCA::clearClones):
Clear the backdrop layer clones map.

(WebCore::GraphicsLayerCA::fetchCloneLayers):
Obtain a clone for the backdrop layer, and if we have a valid clone, add it to the
structural layer clone as its first child to match the operation in updateSublayerList().

* platform/graphics/ca/GraphicsLayerCA.h:
Modify the signature for ensureCloneLayers() to account for the new backdrop layer clone and
declare the backdrop layer clone map.

* platform/graphics/ca/cocoa/PlatformCALayerCocoa.mm:
(PlatformCALayerCocoa::clone):
Reflect the backdrop layer type when cloning a PlatformCALayer.

LayoutTests:

* css3/filters/backdrop/backdrop-filter-with-reflection-add-backdrop-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection-add-backdrop.html: Added.

Covers the case where a reflected element without a backdrop-filter initially has one added later.

* css3/filters/backdrop/backdrop-filter-with-reflection-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection-remove-backdrop-expected.html: Added.

Covers the case where a reflected element with a backdrop-filter initially has it removed later.

* css3/filters/backdrop/backdrop-filter-with-reflection-remove-backdrop.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection-value-change-expected.html: Added.

Covers the case where a reflected element with a backdrop-filter has its backdrop-filter property changed later.

* css3/filters/backdrop/backdrop-filter-with-reflection-value-change.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection.html: Added.

Covers the basic case of a reflected element with a backdrop-filter.

Canonical link: https://commits.webkit.org/176434@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@201648 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
graouts authored and webkit-commit-queue committed Jun 3, 2016
1 parent d5bab4b commit b87f900190aeca197448185bfcd2c6677410ca67
Showing 13 changed files with 421 additions and 4 deletions.
@@ -1,3 +1,30 @@
2016-06-03 Antoine Quint <graouts@apple.com>

Reflection of element does not respect backdrop-filter property
https://bugs.webkit.org/show_bug.cgi?id=158201

Reviewed by Dean Jackson.

* css3/filters/backdrop/backdrop-filter-with-reflection-add-backdrop-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection-add-backdrop.html: Added.

Covers the case where a reflected element without a backdrop-filter initially has one added later.

* css3/filters/backdrop/backdrop-filter-with-reflection-expected.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection-remove-backdrop-expected.html: Added.

Covers the case where a reflected element with a backdrop-filter initially has it removed later.

* css3/filters/backdrop/backdrop-filter-with-reflection-remove-backdrop.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection-value-change-expected.html: Added.

Covers the case where a reflected element with a backdrop-filter has its backdrop-filter property changed later.

* css3/filters/backdrop/backdrop-filter-with-reflection-value-change.html: Added.
* css3/filters/backdrop/backdrop-filter-with-reflection.html: Added.

Covers the basic case of a reflected element with a backdrop-filter.

2016-06-03 Antoine Quint <graouts@apple.com>

REGRESSION: WebGL doesn't show up in CSS reflections
@@ -0,0 +1,36 @@
<head>
<meta name="viewport" content="width=device-width">
<title>This tests that the reflection of an element without a backdrop-filter value initially updates its rendering when the reflected layer has a backdrop-filter applied later.</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);
-webkit-backdrop-filter: saturate(180%) blur(5px);
}

.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>
@@ -0,0 +1,47 @@
<head>
<meta name="viewport" content="width=device-width">
<title>This tests that the reflection of an element without a backdrop-filter value initially updates its rendering when the reflected layer has a backdrop-filter applied later.</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);
-webkit-box-reflect: below 20px;
}

.backdrop.changed {
-webkit-backdrop-filter: saturate(180%) blur(5px);
}

</style>
<script type="text/javascript">

if (window.testRunner)
testRunner.waitUntilDone();

window.requestAnimationFrame(function() {
document.querySelector(".backdrop").classList.add("changed");
if (window.testRunner)
testRunner.notifyDone();
});

</script>
</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>
@@ -0,0 +1,36 @@
<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);
-webkit-backdrop-filter: saturate(180%) blur(5px);
}

.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>
@@ -0,0 +1,35 @@
<head>
<meta name="viewport" content="width=device-width">
<title>This tests that the reflection of an element with a backdrop-filter applied updates its rendering when the reflected layer no longer has a backdrop-filter applied.</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);
}

.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>
@@ -0,0 +1,48 @@
<head>
<meta name="viewport" content="width=device-width">
<title>This tests that the reflection of an element with a backdrop-filter applied updates its rendering when the reflected layer no longer has a backdrop-filter applied.</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);
-webkit-backdrop-filter: saturate(180%) blur(5px);
-webkit-box-reflect: below 20px;
}

.backdrop.changed {
-webkit-backdrop-filter: none;
}

</style>
<script type="text/javascript">

if (window.testRunner)
testRunner.waitUntilDone();

window.requestAnimationFrame(function() {
document.querySelector(".backdrop").classList.add("changed");
if (window.testRunner)
testRunner.notifyDone();
});

</script>
</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>
@@ -0,0 +1,36 @@
<head>
<meta name="viewport" content="width=device-width">
<title>This tests that the reflection of an element with a backdrop-filter applied updates its rendering when the reflected layer has a change of backdrop-filter value.</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);
-webkit-backdrop-filter: saturate(180%) blur(10px);
}

.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>
@@ -0,0 +1,48 @@
<head>
<meta name="viewport" content="width=device-width">
<title>This tests that the reflection of an element with a backdrop-filter applied updates its rendering when the reflected layer has a change of backdrop-filter value.</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);
-webkit-backdrop-filter: saturate(180%) blur(5px);
-webkit-box-reflect: below 20px;
}

.backdrop.changed {
-webkit-backdrop-filter: saturate(180%) blur(10px);
}

</style>
<script type="text/javascript">

if (window.testRunner)
testRunner.waitUntilDone();

window.requestAnimationFrame(function() {
document.querySelector(".backdrop").classList.add("changed");
if (window.testRunner)
testRunner.notifyDone();
});

</script>
</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>
@@ -0,0 +1,32 @@
<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);
-webkit-backdrop-filter: saturate(180%) blur(5px);
-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>

0 comments on commit b87f900

Please sign in to comment.