Parse more `animation-range` values

[bramus]

Currently, ranges with only 1 value or 3 values (or 2 for view-timeline) is not parsed properly (this is currently marked as TODO in the code). What also is not working is passing in normal as a value for range-start or range-end.

Examples that should parse:

• animation-range: normal (STL + VTL)
• animation-range: normal normal (STL + VTL)
• animation-range: normal 50% (STL)
• animation-range: normal exit 50% (VTL)
• animation-range: entry 50% normal (VTL)

Note that normal is not a valid range name, but a keyword that needs to be replaced with the normal value for the specific range part (start or end) for the type of timeline.

[johannesodland]

I looked into getting the wpt subtests for animation-range (/view-timeline-range-animation.html, /scroll-timeline-range-animation.html) to run today, so I could use them to test the animation-range parsing. Unfortunately, they rely on inline styles which the polyfill doesn't support yet.

Now that we are building with Vite, we could probably setup Vitest and build some unit tests for the animation-range parser?

[bramus]

Build some unit tests for the animation-range parser

Sounds like a good plan.

WPT has a bunch of parsing tests for this, from which we can draw some inspiration/snippets to test. See css/css-animations/parsing/animation-range-shorthand.html and related animation-range-* files.

[johannesodland]

I’m happy to look into it, if you’re not already on it. If you are, there’s a whole bunch of other test failures for me to look into 😄

[johannesodland]

Implemented parsing of the full syntax of animation-range in https://github.com/flackr/scroll-timeline/pull/251