createStyle() will break on IE8- when having more than 31 css files loaded.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Having more that 31 css files loaded on page.
2. Trying to create canvas dynamically to page.
3. Adding CSS fails and so the rest of excanvas.

What is the expected output? What do you see instead?
if document has more than 31 css loaded, document.createStyle() will throw an 
exception and fails to create css for canvas, and thrown exception results in 
not loading canvas at all.

What version of the product are you using? On what operating system?
revision 73, in IE 7 and IE8 or any IE with document type rolled back to IE8- 
or quirks.

Please provide any additional information below.

here is the suggested code:
if(!b.styleSheets.ex_canvas_){
try{
var 
a=b.createStyleSheet();a.owningElement.id="ex_canvas_";a.cssText="canvas{display
:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:
*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"
        }catch(err){
            //IE hack for having more than 31 styles
            var style = document.createElement('style');
            style.type = 'text/css';
            var cssCode = "canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}";
            if (style.styleSheet) {
                style.styleSheet.cssText = cssCode;
                style.styleSheet.owningElement.id = 'ex_canvas_';
            } else {
                style.appendChild(document.createTextNode(cssCode));
            }

            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(style);
        }
}

Original issue reported on code.google.com by emam...@gmail.com on 26 Sep 2013 at 6:38