<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>