scroll-timeline
scroll-timeline copied to clipboard
Parse full animation-range syntax
Implements parsing the full animation-range syntax to fix https://github.com/flackr/scroll-timeline/issues/236
Changes:
- Implement parsing of animation-range in
parseAnimationRange()
- Extract common parsing functionality into
consumeRange()
- Extract common parsing functionality into
- Additional typed-css-om functionality and fixes to be able to validate length-percentage:
- Implement
add two types
from css-typed-om (needed for validating length-percentage) - Make
create a type
case insensitive
- Implement
- Change how
<length-percentage>
in rangeStart/End is stored and returned:- from CSS.percent(0)
- to
{ rangeName: 'none', offset: CSS.percent(0)}
- Add
vitest
for unit-tests - Write unit tests for
- CSSNumericType.type()
- Parsing
animation-range
The tests for animation-range
are not strictly unit tests and tests the implementation through the internal parseAnimationRange()
function. The functionality is currently only exposed through css parsing which makes it difficult to test. We could expose the parsing partly through CSSStyleValue.parse('animation-range', value)
but then we would have to proxy that method in all browsers.