scroll-timeline icon indicating copy to clipboard operation
scroll-timeline copied to clipboard

Parse full animation-range syntax

Open johannesodland opened this issue 6 months ago • 1 comments

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()
  • 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
  • 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.

johannesodland avatar Feb 18 '24 15:02 johannesodland