Bug 212161 – iterationCount in Web Animations JavaScript API doesn't do anything

• Component: Animations
• Status: RESOLVED INVALID

[Jack Wellborn]

Hello again,

E

[Jack Wellborn]

Reading this article https://webkit.org/blog/10266/web-animations-in-safari-13-1/, I tried the last sample under "Part I – Animation Creation" in the console by selecting an element and using $0.animate.... Everything in the example worked as expected except iterationCount. The animation plays once regardless of the value.

Expected Behavior:
Animation repeats to the value provided in iterationCount.

Actual Behavior:
Animation only plays once regardless of the value provided in iterationCount.

Let me know if a test page would help.

[Jack Wellborn]

Here's a test page. 
http://jackwellborn.com/playground/iterationCountTest/index.html

[Radar WebKit Bug Importer]

<rdar://problem/63469000>

[Antoine Quint]

Thanks for filing this Jack. This was a mistake in the blog post! The property is "iterations", not "iterationCount". Here's the relevant IDL in the Web Animations spec: https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming. We'll fix the blog post.

I also noticed the spec has a non-normative mention of "iterationCount" that I'll fix in https://github.com/w3c/csswg-drafts/issues/5096.

[Jack Wellborn]

Thanks.

I see it working with 'iterations'. I think the confusion is that the css property is 'animation-iteration-count' (https://www.w3.org/TR/css-animations-1/#animation-iteration-count) and that JavaScript property names typically reflect css property names. In that sense, I kind of feel like the JavaScript name is non-normative. Just out of my own curiosity, in what sense is 'iterationCount' non-normative?

[Antoine Quint]

(In reply to Jack Wellborn from comment #5)
> Thanks.
> 
> I see it working with 'iterations'. I think the confusion is that the css
> property is 'animation-iteration-count'
> (https://www.w3.org/TR/css-animations-1/#animation-iteration-count) and that
> JavaScript property names typically reflect css property names. In that
> sense, I kind of feel like the JavaScript name is non-normative. Just out of
> my own curiosity, in what sense is 'iterationCount' non-normative?

It was used in some example text in the spec, and it's now gone completely in the spec's Git repository. It was just a mistake, the `iterationCount` property does not exist :)