`<filter>` support

[jwmcglynn]

Implement filter support, based on the spec here: https://www.w3.org/TR/filter-effects/

Stage 1: MVP

• [x] Add initial <filter> element
• [x] Create initial filter primitive, <feGaussianBlur>, with minimal functionality
• [x] Add support for filter presentation attribute https://www.w3.org/TR/filter-effects/#FilterProperty
• [x] Skia renderer backend integration

This should be validated by rendering the donner splash logo

Stage 2: Full implementation

• [ ] Scope missing features based on MVP
• [ ] Support for all <filter> and <feGaussianBlur> features
• [ ] Support for additional filter primitives
• [ ] External resource handling (using a callback-based approach)

[jwmcglynn]

Missing features:

• [ ] Support for filter effect chains, right now it is bounded to a single primitive.
• [ ] Support for the various <filter> and filter primitive attributes, such as the bounding box and filterUnits
• [ ] Support for converting CSS lengths into user units, as CSS filters can include units, for example filter: blur(5in)
• [ ] Support filter and filter primitive bounding boxes

Filter effect chains

• The filter presentation attribute is defined to take = [ <filter-function> | <url> ]+
• Which means that it can reference a chain of URLs or filter effects, which are composed together to make the final filter

So the CSS property needs to contain a vector of FilterEffect variants, and each FilterEffect could potentially be a ref which resolves to a vector of FilterEffects. During resolution the refs will need to be resolved before we reach the renderer.

To represent this:

• Create a concrete FilterEffect class which can not contain refs.
• Create a wrapper around it which may optionally contain a ref.
• Have a resolution process which collapses these to a single list.

Filter effects can also contain multiple trees, as shown by Example 4 here:

<filter id="filter">
  <-- The first filter primitive tree. Ignored for filter process. -->
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
  <-- The primary filter primitive tree. -->
  <feFlood flood-color="green" result="flood"/>
  <feComposite operator="in" in="SourceAlpha" in2="flood"/>
</filter>

In this case <feFlood> takes no inputs, so it discards the prior part of the tree. The final FilterEffect chain for this should only contain [feFlood, feComposite].

Length properties

For SVG DOM elements, there are no units:

  <feGaussianBlur stdDeviation="3"/>

However for the filter presentation attributes, there are:

filter: blur(5in)

These need to be resolved before rendering.

Bounding boxes

Filter effects have bounded boxes both from the <filter> property, and on filter primitives. These need to be considered during the filtering process.