User-Agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; en) Presto/2.8.131 Version/11.50 Build Identifier: 5.0a2 When CSS animations are used outside of media queries they work, but fail when used within a media query Reproducible: Always Steps to Reproduce: 1. Click on the link 2. The loader should rotate like http://jsfiddle.net/nimbu/C3rt8/1/ 3. Loader fails to rotate Actual Results: No animation Expected Results: The CSS animations get applied.
CSS syntax does not allow nesting @-rules. So the @-moz-keyframes rule inside @media is ignored. We should probably report an error to the error console in this situation instead of silently skipping the rule...
I think I have a patch for the diagnostic, but the testcase seems to have been modified...
Oh, wait, the link in comment 0 is different from the one in the URL field.
Created attachment 527699 [details] [diff] [review] add diagnostic
Boris, that doesn't seem right. According to <http://www.w3.org/TR/CSS21/syndata.html>, an @-rule can contain more @-rules: The 'at-rule' construction produces a 'block'. The 'block' construction can produce the at-rule construction (indirectly). And section 4.1.5 doesn't appear to give any more specific contraindications.
http://www.w3.org/TR/CSS21/grammar.html is very clear that @media rules contain only ruleset. http://www.w3.org/TR/CSS21/media.html#at-media-rule also says explicitly: # At-rules inside @media are invalid in CSS2.1.
Ah, indeed. The basic CSS2.1 grammar does not disallow nesting @-rules in theory, but it does disallow actually putting @-rules inside any @-rules CSS2.1 defines (that just being @media).
Comment on attachment 527699 [details] [diff] [review] add diagnostic r=me