The implicit keyframes (0% and 100%) if specified keyframes use <timeline-range-name>

[BorisChiou]

I noticed the section of generating frames in processing keyframes in [css-animations-2] is not clear after we introduce timeline range name keyframe selector.

Find or create the initial keyframe, a keyframe with a keyframe offset of 0%, default timing function as its keyframe timing function, and default composite as its keyframe composite.
...
Repeat for final keyframe, using an offset of 100%, considering keyframes positioned later in the used keyframe order, and appending to keyframes.

If we define a keyframes rule which includes some <timeline-range-name>s in keyframe selectors, e.g.

@keyframes anim {
  10% { width: 10px; }
  cover 10% { height: 10px; }
  cover 100% { margin-left: 10px; }
  cover 10% { width: 20px; }
}

And when we use getKeyframes() to check the keyframe objects in the computed order, the returned keyframes in Blink are:

0: {offset: 0, computedOffset: 0, …}
1: {offset: 0.1, computedOffset: 0.1,…}
2: {offset: { offset: CSSUnitValue {value: 10, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 0.1, …}
3: {offset: { offset: CSSUnitValue {value: 100, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 1, …}

There are 4 keyframes, and it generated the implicit 0% keyframe. No generated 100% keyframes because cover 100% has 100% computedOffset.

However, WebKit returned:

0: {..., offset: 0, computedOffset: 0, …}
1: {..., offset: 0.1, computedOffset: 0.1, …}
2: {..., offset: 1, computedOffset: 1, …}
3: {..., offset: { offset: CSSUnitValue {value: 10, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 0.1, …}
4: {..., offset: { offset: CSSUnitValue {value: 100, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 1, ...}

There are 5 keyframes, and it generated both 0% and 100% implicit keyframes.

The spec only says we have to find keyframe offset 0% and 100% (instead of computedOffset), so I am confused about this. Should we have to generate the implicit frames if we can find a keyframe (with range names) whose computedOffset is 0% or 100%?

Also, about the computed order, per spec:

The computed order of keyframes—​which is the order returned by getKeyframes()—​is found by shifting any keyframes whose offset was specified as a <percentage>, from keyword, or to keyword to the front of the list (after the generated initial keyframe, if any), and performing a stable sort on these keyframes by their keyframe offsets.

And there is a NOTE:

Although the computed keyframe order sorts keyframes with offsets, it maintains keyframes specified with a <timeline-range-name> in their specified keyframe order—​after any <percentage> keyframes (other than a generated final keyframe), even if these come later in the used keyframe order.

So the spec requires us to put the keyframes with <timeline-range-name> after keyframs with <percentage> (other than the generated final keyframe). So should we put the generated final keyframe after keyframes with <timeline-range-name>? However, it seems Blink and WebKit don't follow this. Should we remove the other than a generated final keyframe from the spec because no browser follows it? Or perhaps I misread this.

Thanks.

cc @kevers-google @graouts