[GTK][WPE] Support for backdrop-filter

• Component: CSS
• Status: RESOLVED FIXED

[Carlos Alberto Lopez Perez]

The GTK port misses support for CSS backdrop filters.

This was implemented in bug 138384 for Mac/iOS.

More info: https://webkit.org/blog/3632/introducing-backdrop-filters/

[Carlos Alberto Lopez Perez]

Status of support for the feature in other browsers: http://caniuse.com/#feat=css-backdrop-filter

[Adrian Perez]

On the surface it looks like the feature could be enabled by
adding the following in “PlatformGTK.cmake”:

  WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_FILTERS_LEVEL_2 PRIVATE ON)

but this alone is not enough for backdrop-filter to work. After
looking at how this was implemented in Cocoa, I think the crux of
the matter is that we have somehow to render normally the content
that falls behind the element to which backdrop filters are applied,
so then the result can be used to apply them. Cocoa seems to do
this using CoreAnimation, so with my (extremely) limited knowledge
of the graphics stack, we would need to implement the needed bits
in the texture mapper, right?

[Philippe Normand]

Would be nice to support this at some point. results.webkit.org relies on this feature.

[Carlos Garcia Campos]

Created attachment 405139 [details]
Patch

There are still a few tests failing (some of them due to other bugs like -webkit-box-reflect not working on compositing), but the examples I've been trying are all working (https://webkit.org/demos/backdrop-filter and https://results.webkit.org).

[Adrian Perez]

Comment on attachment 405139 [details]
Patch

Wow, this is quite a neat patch overall, somehow before starting reading
it I thought it would end up being much more complicated 💪️

I made just one comment below about the isFilterProperty lambda.

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

> Source/WebCore/platform/graphics/texmap/coordinated/CoordinatedGraphicsLayer.cpp:1358
> +    auto isFilterProperty = [&]() -> bool {

The lambda here only uses “valueList.property()” so I would only capture
that explicitly 

  auto isFilterProperty = [property = valueList.property()]() -> bool { /* ... */ };

Though, honestly I do not see the need to use a lambda here, as it is used
only once immediately and it calculates a simple value. Why not calculate
the value directly? One possible way:

      bool isFilterProperty;
      switch (valueList.property()) {
  #if ENABLE(FILTERS_LEVEL_2)
      case AnimatedPropertyWebkitBackdropFilter:
  #endif
      case AnimatedPropertyFilter:
          isFilterProperty = true;
          break;
      default:
          isFilterProperty = false;
      }

      if (isFilterProperty) {
          /* ... */
      }

[Carlos Garcia Campos]

(In reply to Adrian Perez from comment #5)
> Comment on attachment 405139 [details]
> Patch
> 
> Wow, this is quite a neat patch overall, somehow before starting reading
> it I thought it would end up being much more complicated 💪️
> 
> I made just one comment below about the isFilterProperty lambda.
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=405139&action=review
> 
> > Source/WebCore/platform/graphics/texmap/coordinated/CoordinatedGraphicsLayer.cpp:1358
> > +    auto isFilterProperty = [&]() -> bool {
> 
> The lambda here only uses “valueList.property()” so I would only capture
> that explicitly 
> 
>   auto isFilterProperty = [property = valueList.property()]() -> bool { /*
> ... */ };
> 
> Though, honestly I do not see the need to use a lambda here, as it is used
> only once immediately and it calculates a simple value. Why not calculate
> the value directly? One possible way:
> 
>       bool isFilterProperty;
>       switch (valueList.property()) {
>   #if ENABLE(FILTERS_LEVEL_2)
>       case AnimatedPropertyWebkitBackdropFilter:
>   #endif
>       case AnimatedPropertyFilter:
>           isFilterProperty = true;
>           break;
>       default:
>           isFilterProperty = false;
>       }
> 
>       if (isFilterProperty) {
>           /* ... */
>       }

Ended up adding the lambda because with the if and the #ifdef it looked bad and the style checker always complained. The switch is a good idea and then we don't even need the isFilterProperty variable, I think.

[Carlos Garcia Campos]

Committed r264968: <https://trac.webkit.org/changeset/264968>

[Radar WebKit Bug Importer]

<rdar://problem/66207065>