Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
1 parent
d5bab4b
commit b87f900190aeca197448185bfcd2c6677410ca67
Showing
13 changed files
with
421 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -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> |
Oops, something went wrong.