[filter-effects-2] Split functionality of 'filter' and 'backdrop-filter' into several properties

The backdrop-filter CSS property allows to create a filtered backdrop for
an element[1] and the filter CSS property filters all parts of the drawing
of an element.

This implies a few things that are suboptimal:
- The Fullscreen API spec. already defines a ::backdrop pseudo-element[2],
which suggests that it and the backdrop-filter property belong together
somehow.
- A <filter> element reference is required to specify a different input for
the backdrop-filter property than the BackgroundImage.
- The two properties do not allow to specify where to place the filtered
output in regard of the painting order.

My suggestion to solve these issues is:

- Drop the backdrop-filter property in favor of allowing ::backdrop to be
used on all elements independently of the layer they are in.

- Introduce a filter-source property allowing to specify the sources for
filter primitives. This property refers to the in attribute of the <filter>
element and has therefore the following syntax:
  filter-source: [ source-graphic | source-alpha | background |
background-alpha | fill-paint | stroke-paint | <filter-primitive-reference>
]#

- Introduce a filter-part property allowing to specify the parts of an
element, to which the filter is applied. Its syntax may be like this:
  filter-part: [[ content || background || borders || outline ||
scroll-mechanism ] | all ]#

- Introduce a filter-output-layer property allowing to define where to
place the filtered output in relation to the painting order. The syntax for
it may be something like this:
  filter-output-layer: [ background | below-border | border | below-outline
| outline | below-content | content | below-scroll-mechanism atop ]#
  where all below-* values draw the filtered output below the named layer
but above the previous layer, while all other values draw the filtered
output as replacement of the named layer.

- Introduce a filter-effect property holding the values, which currently
apply to the filter property.

- Turn the filter property into a shorthand for the properties above, so it
may then have a syntax like this:
  filter: <filter>#
  where <filter> = <'filter-effect'> <'filter-source'>? <'filter-part'>?
<'filter-output-layer'>?

To achieve a backdrop effect as of backdrop-filter you would then write
e.g.:

::backdrop {
  filter: blur(2px) brightness(20%) all atop;
}

To make the border of an element have a blue drop shadow you could write
something like this:

#element {
  filter-effect: drop-shadow(2px 2px 3px blue);
  filter-part: border;
  filter-output-layer: below-border;
}

This is just a rough draft. I welcome every input on this.

Sebastian

[1] This should be clarified in an initial sentence.
[2] https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element

Received on Thursday, 4 February 2016 14:36:05 UTC