<html>
<head>
<style>.one { display: block; }
.two { display: inline; }
.three { display: list-item; list-style-type: square; margin-left: 3em; }
.four { display: none; color: red; }
I { display: block; }
</style>
<script>
function test() {
    if (window.testRunner)
        testRunner.dumpAsText();

    t = document.createTextNode(document.getElementsByTagName('style').item(0).firstChild.nodeValue);
    document.getElementById('docStyle').appendChild(t);

    styleSheet = document.styleSheets.item(0)
    
    s = ""
    for (i = 0; i < styleSheet.cssRules.length; i++) {
        rule = styleSheet.cssRules.item(i);
        switch (rule.type) {
        case CSSRule.STYLE_RULE:		
            s += rule.selectorText + ' { ';
            style = rule.style;
            for (j = 0; j < style.length; j++) {
                    s += style.item(j) + ': ' + style.getPropertyValue(style.item(j))+ '; ';
            }
            s += '}\n';
        }
    }
    
    document.getElementById('serializedStyle').appendChild(document.createTextNode(s));
}
</script>
</head>
<body onload="test();">
<div>Style as specified in the style element:</div>
<pre id="docStyle"></pre>
<div>Serialized style, using CSS DOM:</div>
<pre id="serializedStyle"></pre>
</body>
</html>