1316341 - CSS animation-iteration-count spec says single value but is implemented taking multiple values

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Eric Shepherd [:sheppy]]

According to my reading of the CSS specification, the animation-iteration-count property [1] accepts a single animation iteration count value as its input [2].

<single-animation-iteration-count> is defined in the spec as "infinite | <number>". There's nothing there about allowing a comma-delineated list of iteration counts.

The documentation on MDN [3] currently defines the formal syntax per the spec, but includes an example syntax that includes commas.

Is the spec in need of updating or are we supporting a non-standard behavior?

This should be investigated and appropriate measures taken. Either the spec needs to be revised, the implementation needs to be revised, or the documentation needs to note the non-standard status of this syntax form.

[1] https://drafts.csswg.org/css-animations/#animation-iteration-count
[2] https://drafts.csswg.org/css-animations/#typedef-single-animation-iteration-count
[3] https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

Comment 1

[Boris Zbarsky [:bzbarsky]]

> <single-animation-iteration-count> is defined in the spec as "infinite | <number>".

Yes, but the value of the property is defined like so:

  Value: <single-animation-iteration-count>#

That line noise at the end is defined at https://drafts.csswg.org/css-values-4/#mult-comma so as far as I can tell our implementation and the MDN docs match the spec.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Maybe https://hg.csswg.org/drafts/rev/33e8db41720d helps make this a tad clearer?

Comment 3

[Chris Mills [:cmills]]

This particular detail is a bit confusing, so I've written a section to explain it:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values

I've then referenced that from the animation-* property pages, for example:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count#Values

Let me know if this makes sense.