Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Parse more animation-range values #236

Open
bramus opened this issue Feb 8, 2024 · 4 comments · May be fixed by #251
Open

Parse more animation-range values #236

bramus opened this issue Feb 8, 2024 · 4 comments · May be fixed by #251
Labels
enhancement New feature or request

Comments

@bramus
Copy link
Collaborator

bramus commented Feb 8, 2024 •
edited
Loading

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.
@bramus bramus mentioned this issue Feb 8, 2024
Merged
@johannesodland
Copy link
Contributor

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
Copy link
Collaborator Author

bramus commented Feb 9, 2024

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
Copy link
Contributor

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 johannesodland linked a pull request Feb 18, 2024 that will close this issue
Open
@johannesodland
Copy link
Contributor

Implemented parsing of the full syntax of animation-range in #251

@bramus bramus added the enhancement New feature or request label Oct 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Parse full animation-range syntax johannesodland/scroll-timeline
2 participants
@johannesodland @bramus