Chrome Suddenly Stopped Accepting insertRule()

Question

I have an HTML5 game that has been running beautifully for weeks.

Suddenly, about an hour ago, it will no longer run in Chrome. I narrowed the issue down to a JavaScript error that occurs only in Chrome.

I have isolated said code here: http://jsfiddle.net/quM3L/

...the error is produced on line 4:

var style = document.documentElement.appendChild(document.createElement("style"));
var rule =  "score_10_typing {from {width: 0} to {width: 11em}}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes " + rule, 0);
}
else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes " + rule, 0);
}
else if (CSSRule.MOZ_KEYFRAMES_RULE) { // Mozilla
    style.sheet.insertRule("@-moz-keyframes " + rule, 0);
}

...that runs just fine in Firefox, Internet Explorer, Safari, etc.

It ran fine in Chrome until an hour ago. (Tested on multiple computers.)

Does anyone have an idea of how to perhaps get around this? Chrome must have just today updated their JS engine to not support CSSStyleSHeet.insertRule(), I suppose.

Thanks in advance for any help.

(The original game is located here. As you can see, it runs fine in all browsers other than Chrome.)

Answer 1

So, evidently, Chrome was falling into the first if statement (W3C) instead of into the 3rd (Webkit). So, they must have just updated their engine today to have both CSSRule.KEYFRAMES_RULE and CSSRule.WEBKIT_KEYFRAMES_RULE (thanks Ithcy). What a pain.

Reorder the if statement, and the code runs fine (fiddle):

var style = document.documentElement.appendChild(document.createElement("style"));
var rule =  "score_10_typing {from {width: 0} to {width: 11em}}";
if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes " + rule, 0);
}
else if (CSSRule.MOZ_KEYFRAMES_RULE) { // Mozilla
    style.sheet.insertRule("@-moz-keyframes " + rule, 0);
}
else if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes " + rule, 0);
}

This is not good, because Chrome doesn't accept @keyframes, but it does accept @-webkit-keyframes. So why they have changed their engine to also include CSSRule.KEYFRAMES_RULE is beyond me.