Bug 138384 – [filters2] Support for backdrop-filter

• Component: New Bugs
• Status: RESOLVED FIXED

[Dean Jackson]

[filters2] Support for backdrop-filter

[Dean Jackson]

http://dev.w3.org/fxtf/filters-2/#BackdropFilterProperty

Support enough of backdrop-filter to show as a prototype.

- parse the CSS
- provide computed style
- render the background in the compositor
- set the CoreAnimation properties to filter the rendering

[Radar WebKit Bug Importer]

<rdar://problem/18874494>

[Dean Jackson]

Created attachment 240976 [details]
Patch

[Dean Jackson]

Not for review yet. Just checking build.

[WebKit Commit Bot]

Attachment 240976 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 59 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Dean Jackson]

Created attachment 240989 [details]
Patch

[WebKit Commit Bot]

Attachment 240989 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 48 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Dean Jackson]

Created attachment 241039 [details]
Patch

[WebKit Commit Bot]

Attachment 241039 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 48 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Dean Jackson]

Created attachment 241048 [details]
Patch

[WebKit Commit Bot]

Attachment 241048 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 48 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Dean Jackson]

Created attachment 241051 [details]
Patch

[WebKit Commit Bot]

Attachment 241051 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 48 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Simon Fraser (smfr)]

Comment on attachment 241051 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=241051&action=review

> Source/WebCore/platform/graphics/GraphicsLayer.h:439
> +    enum CustomAppearance { NoCustomAppearance, ScrollingOverhang, ScrollingShadow, UsesBackdrop };

Not sure that you need UsesBackdrop.

> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:1689
> +        m_backdropLayer->setMasksToBounds(true);

Is this necessary?

> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:1701
> +    if (LayerMap* layerCloneMap = m_layerClones.get()) {
> +        LayerMap::const_iterator end = layerCloneMap->end();
> +        for (LayerMap::const_iterator it = layerCloneMap->begin(); it != end; ++it) {
> +            if (m_replicaLayer && isReplicatedRootClone(it->key))
> +                continue;
> +
> +            it->value->setFilters(m_filters);
> +        }
> +    }

Seems wrong.

> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h:440
> +        BackdropFiltersChanged = 1LLU << 33

Please move up to below FiltersChanged and adjust all the values.

> Source/WebCore/platform/graphics/ca/mac/PlatformCALayerMac.mm:828
> +    case GraphicsLayer::UsesBackdrop:

Why?

> Source/WebKit2/Shared/mac/RemoteLayerTreePropertyApplier.mm:119
> +    case GraphicsLayer::UsesBackdrop:

Remove?

> Source/WebKit2/Shared/mac/RemoteLayerTreeTransaction.mm:1185
> +            case PlatformCALayer::LayerTypeBackdropLayer:
> +                ts << "backdrop-layer";
> +                break;

There should be some dumping of the backdrop filters too here somewhere.

> Source/WebKit2/UIProcess/ios/RemoteLayerTreeHostIOS.mm:119
> +@interface WKBackdropView : WKCompositingView
> +@end
> +
> +@implementation WKBackdropView
> ++ (Class)layerClass
> +{
> +    return [CABackdropLayer self];
> +}
> +
> +@end

Doesn't UIKit have a backdrop view class?

> LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt:352
> +Color then three values : drop-shadow(red 1px 2px 3px)
> +PASS filterStyle.length is 1
> +PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
> +PASS subRule.cssText is 'drop-shadow(rgb(255, 0, 0) 1px 2px 3px)'
> +
> +Three values then color : drop-shadow(1px 2px 3px red)
> +PASS filterStyle.length is 1
> +PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
> +PASS subRule.cssText is 'drop-shadow(rgb(255, 0, 0) 1px 2px 3px)'
> +
> +Color then three values with zero length : drop-shadow(#abc 0 0 0)
> +PASS filterStyle.length is 1
> +PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
> +PASS subRule.cssText is 'drop-shadow(rgb(170, 187, 204) 0px 0px 0px)'
> +
> +Three values with zero length : drop-shadow(0 0 0)
> +PASS filterStyle.length is 1
> +PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
> +PASS subRule.cssText is 'drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)'
> +
> +Two values no color : drop-shadow(1px 2px)
> +PASS filterStyle.length is 1
> +PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
> +PASS subRule.cssText is 'drop-shadow(rgba(0, 0, 0, 0) 1px 2px 0px)'

Disallow drop shadow as a backdrop filter?

[Dean Jackson]

Comment on attachment 241051 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=241051&action=review

>> Source/WebCore/platform/graphics/GraphicsLayer.h:439
>> +    enum CustomAppearance { NoCustomAppearance, ScrollingOverhang, ScrollingShadow, UsesBackdrop };
> 
> Not sure that you need UsesBackdrop.

OK. I'll remove it.

>> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:1689
>> +        m_backdropLayer->setMasksToBounds(true);
> 
> Is this necessary?

Yes. Otherwise the blur would be visible around the edges of the element.

>> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:1701
>> +    }
> 
> Seems wrong.

It can be removed at the moment (until cloning is done)

>> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h:440
>> +        BackdropFiltersChanged = 1LLU << 33
> 
> Please move up to below FiltersChanged and adjust all the values.

OK

>> Source/WebCore/platform/graphics/ca/mac/PlatformCALayerMac.mm:828
>> +    case GraphicsLayer::UsesBackdrop:
> 
> Why?

Will remove.

>> Source/WebKit2/Shared/mac/RemoteLayerTreeTransaction.mm:1185
>> +                break;
> 
> There should be some dumping of the backdrop filters too here somewhere.

I guess so, but do we do that for normal filters?

>> Source/WebKit2/UIProcess/ios/RemoteLayerTreeHostIOS.mm:119
>> +@end
> 
> Doesn't UIKit have a backdrop view class?

Yes I think so, but I'm not sure we want to use that. Do we?

>> LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt:352
>> +PASS subRule.cssText is 'drop-shadow(rgba(0, 0, 0, 0) 1px 2px 0px)'
> 
> Disallow drop shadow as a backdrop filter?

Actually, I think it should be supported, even though it is pretty weird. The background might not be a solid image, in which case you might want to apply a shadow.

Although we currently don't support shadows on our CA filters.

[Dean Jackson]

Created attachment 241054 [details]
Patch

[WebKit Commit Bot]

Attachment 241054 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 47 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Dean Jackson]

Created attachment 241055 [details]
Patch

[WebKit Commit Bot]

Attachment 241055 [details] did not pass style-queue:


ERROR: Source/WebCore/WebCore.exp.in:0:  Source/WebCore/WebCore.exp.in should be sorted, use Tools/Scripts/sort-export-file script  [list/order] [5]
Total errors found: 1 in 48 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Dean Jackson]

Committed r175672: <http://trac.webkit.org/changeset/175672>

[WebKit Commit Bot]

Re-opened since this is blocked by bug 138455

[Dean Jackson]

Committed r175716: <http://trac.webkit.org/changeset/175716>