[scroll-animations] Add css syntax for element-based offset

[majido]

Add css syntax to for element-based offsets. Fixes #4337.

The element-based syntax is simply applied when the value starts with selector(#id) with the following characteristics:

• <<id-selector>> is required and is expected to be the first value.
• both edge and threshold are optional can can be provided in any order.

I followed some of the ideas mentioned by @tabatkins in #4348 to to get to a more ergonomic css function syntax. In particular there is no comma and the optional params can be in any order. Note that unlike #4348 we are not adding a function syntax.

[majido]

@tabatkins I appreciate if you could review. I particular I like to make sure the function design is correct and provides good ergonomics.

[majido]

/cc @andruud to be aware of the upcoming css syntax.

[andruud]

Why not just:

<scroll-timeline-offset> = auto | <length-percentage> | <element-offset>
<element-offset> = selector(<id-selector>) [<element-offset-edge> || <number>]?
<element-offset-edge> = start | end

[majido]

@andruud I like that idea. I went ahead and did it that way. Would you mind doing a review?

Removing Tab as reviewer since we no longer are using a function.

[andruud]

lgtm

[andruud]

This is totally my bad, since my suggestion had the same mistake, but we normally want function( <foo> ) rather than function(<foo>). See the math function syntax for reference.

The 'source' descriptor has the same issue, by the way.

[majido]

Good catch. I fixed the syntax for selector.