[css-animations] Effect of programmatically adding duplicate key to @keyframes

Following up on the issue raised by Daniel [1].

1. Duplicating a keyframe rule using appendRule
In all browsers, appendRule() simply appends the specified rule to the @keyframes rule, as expected. As a result, calling appendRule with a duplicate key causes the new rule to apply for this key value. This makes sense to me.

There remains one significant cross-browser interop issue here: Gecko and IE conform to the specification and name the method appendRule, while WebKit and Blink name it insertRule. I think appendRule is the better name since insertion implies the ability to give the argument a specific position (or a position relative to something else) but insertRule doesn't do that [2].

The spec says no exception is thrown by appendRule; Gecko, Blink and WebKit conform. IE does throw if the key is invalid.

2. Duplicating a keyframe rule by setting its keyText
All browsers will simply update the rule in place i.e. the updated rule does not change position in the @keyframes rule; if the rule being updated was specified before the rule whose key it dupes, it no longer applies.

Given an invalid key value:
- Gecko ignores the update
- Blink throws
- WebKit applies the update so you can have a 'foo { color: blue; } rule in your @keyframes.
- IE throws.





[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=25035
[2] https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSKeyframesRuleClassReference/WebKitCSSKeyframesRule/WebKitCSSKeyframesRule.html#//apple_ref/javascript/instm/WebKitCSSKeyframesRule/insertRule

Received on Friday, 21 March 2014 16:53:00 UTC