Parse full animation-range syntax

[johannesodland]

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.

[calinoracation]

Edit: Nevermind, our atomic css parser split the rules out so it couldn't parse it correctly.

~@bramus @johannesodland Any chance of landing this? We're trying to use some code like this and it's not parsing at the moment. In Chromium it works great.~

    animation-duration: 1ms;
    animation-fill-mode: forwards;
    animation-name: overflow-visible;
    animation-range-start: entry 70%;
    animation-range-end: entry 100%;
    animation-timeline: --carousel-scroller;
    view-timeline-name: --carousel-scroller;

    @keyframes overflow-visible {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

[callie-openai]

@bramus @johannesodland Any chance this might still land? I'm trying to use syntax like the following for an effect to hide items going underneath a sidebar header but the current polyfill doesn't work with it.

animation-timeline: view();
animation-range: exit calc(0% - 160px) exit calc(0% - 145px);
/* ^ The 160px is the height of my sticky header */

Example of desired effect working in Chrome:

https://github.com/user-attachments/assets/8788cf84-2f58-43e4-9392-b9b7ee14bbae