[scroll-animations-1] Clarify that progress percentages must be between 0% and 100%

[bramus]

While checking #5203 (comment), I noticed the scroll-animations-1 spec doesn’t mention that the percentages for the timeline ranges must be between 0% and 100%.

Furthermore the original <keyframe-selector> definition from css-animations-1 seems to have inadvertently been relaxed as the allowed range for <percentage> is no longer mentioned.

• css-animations-1:

  <keyframe-selector> = from | to | <percentage [0,100]>
  

• scroll-animations-1:

  <keyframe-selector> = from | to | <percentage> | <timeline-range-name> <percentage>
  

I think we should explicitly mention the allowed range.

[flackr]

Do we have to restrict it? Isn't something like contain -20% valid? It can be calculated out to a particular scroll position and we already have to handle keyframes outside of the animation range.

[bramus]

If there's no need to limit the accepted range, then please. Just to be sure: this would also play nice with negative offsets?

[flackr]

Yes, negative offsets calculate to their overall relative percentage. The only weird case we have right now is that view timelines do not start before the cover period so if you try to go less than 0% or more than 100% of the cover range it will interpolate from that position but not be active until you're in the cover range. I think this is probably fine, though I have often wondered whether we should make view timelines active for the entire scroll range so that cases like this would be supported.

[cdoublev]

I am not sure if you are only discussing the <percentage> associated to <timeline-range-name> but if not, would this be backward-compatible?

Values less than 0% or higher than 100% are invalid and cause their <keyframe-block> to be ignored.

https://drafts.csswg.org/css-animations-1/#keyframes

Edit: nevermind (answer is no and the single <percentage> should be restricted), cf. #8553 (review).

[fantasai]

Merged in @bramus's PR to clarify that raw percentage @Keyframes are invalid. Keeping the issue open in case @flackr wants to follow up on any of his comments above.

[flackr]

This all looks good to me.

[css-meeting-bot]

The CSS Working Group just discussed [scroll-animations-1] Clarify that progress percentages must be between 0% and 100%, and agreed to the following:

• RESOLVED: %s outside the 0-100 range are valid in progress percentages

The full IRC log of that discussion

<TabAtkins> fantasai: we're just clarifying we can do 'contain -20%' and it's valid
<TabAtkins> fantasai: Currently spec allows it
<bramus> +1
<TabAtkins> flackr: I support, these dynamic ranges can also compute outside their 0-100 range
<TabAtkins> astearns: objections?
<TabAtkins> RESOLVED: %s outside the 0-100 range are valid in progress percentages