Spec that `@keyframes` takes precedence over `@-webkit-keyframes` (regardless of ordering)

[dholbert]

As discovered in https://bugzilla.mozilla.org/show_bug.cgi?id=1312918 , Chrome (and I assume Safari) honors @keyframes rules even if there's a conflicting later @-webkit-keyframes rule with the same name.

This means the following sort of markup...

@keyframes my-anim {
  /* working CSS */
}

@-webkit-keyframes my-anim {
  /* accidentally-imperfect CSS */
}

...will honor the "working CSS" in Chrome (and presumably Safari), despite the fact that the (valid) @-webkit-keyframes rule (with "imperfect CSS") comes later.

We should spec this behavior. From brief testing, when there are naming collisions, I think Chrome does give later rules priority over earlier rules, but it also gives all @keyframes rules priority over all @-webkit-keyframes rules.

Here's a testcase demonstrating this behavior: https://bug1312918.bmoattachments.org/attachment.cgi?id=8805661 The green/lime animation shown in Chrome is the "working CSS" (which authors may expect from testing their site in Chrome/Safari), and the red/pink animation shown in Firefox 49 and current Edge is the "accidentally-imperfect CSS".

[miketaylr]

Note: waiting for https://bugzilla.mozilla.org/show_bug.cgi?id=1312918 to be fixed before adding this.