Crear hoja de estilo CSS con javascript

[Pantaláimon]

Hola marlanga.

Quizá aún no sé como funcionan los callbacks y por eso pregunto algo de perogrullo. Pero al añadir un console.log al final del código para comprobar que document.styleSheets tiene los datos correctos me encuentro que no es así.

Código Javascript:

window.onload = function() {
    document.createStyleSheet( 'css/test.css' );
    document.createStyleSheet(
        function(sheet){
            sheet.insertRule('h1 { color: red; }', 0 );
        }
    );
    console.log( document.styleSheets );
}
 

Esta es la salida de la consola:

Código Javascript:

<link type="text/css" rel="stylesheet" href="css/test.css">
<style type=&#8203;"text/​css">&#8203;</style>&#8203;
- StyleSheetList {0: CSSStyleSheet, length: 1, item: function}
   + 0: CSSStyleSheet
   - 1: CSSStyleSheet
      - cssRules: CSSRuleList
         - 0: CSSStyleRule
            cssText: "h1 { color: red; }"
            parentRule: null
            parentStyleSheet: CSSStyleSheet
            selectorText: "h1"
            style: CSSStyleDeclaration
            type: 1
            __proto__: CSSStyleRule
         + 1: CSSStyleRule
         + 2: CSSStyleRule
         + 3: CSSStyleRule
         + 4: CSSStyleRule
         + 5: CSSStyleRule
         + 6: CSSStyleRule
         + 7: CSSStyleRule
         + 8: CSSStyleRule
         length: 9
         __proto__: CSSRuleList
         disabled: false
         href: "http://js.test/css/test.css"
         media: MediaList
         ownerNode: link
         ownerRule: null
         parentStyleSheet: null
         rules: CSSRuleList
         title: null
         type: "text/css"
         __proto__: CSSStyleSheet
      + 2: CSSStyleSheet
         cssRules: CSSRuleList
         length: 0
         __proto__: CSSRuleList
         disabled: false
         href: null
         media: MediaList
         ownerNode: style
         ownerRule: null
         parentStyleSheet: null
         rules: CSSRuleList
         title: null
         type: "text/css"
         __proto__: CSSStyleSheet
         length: 3
         __proto__: StyleSheetList
 

En la linea 3 ya se ve la primera cosa extraña, pues indica que document.styleSheets.length vale 1. Sin embargo cuando se expande la descripción en la linea 49 se observa que ahora length toma el valor de 3.
En la linea 4 está la hoja de estilos por defecto de Chrome.
En la linea 5 está la hoja de estilos que hacer referencia al fichero css/test.css . Si se expanden la lista de reglas se ve que la primera( linea 7 a 14 ) se corresponde con la regla "h1 { color: red; }" que debería estar insertada en la hoja de estilos anónima.
Sin embargo, en la hoja de estilos anónima(linea 35) no hay ninguna regla insertada.

Un saludo!