| <html> |
| <head> |
| <style id="style">@import url("fancyfonts.css") screen; |
| @media print { |
| body { font-size: 10pt } |
| } |
| @media screen { |
| body { font-size: 13px } |
| } |
| @media screen, print { |
| body { line-height: 1.2 } |
| } |
| .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> |
| </head> |
| <body onload="runTests();"> |
| <script> |
| function dumpRuleList(cssRules) |
| { |
| var s = ''; |
| |
| var i; |
| for (i = 0; i < cssRules.length; i++) { |
| rule = cssRules.item(i); |
| |
| switch (rule.type) { |
| case CSSRule.IMPORT_RULE: |
| s += '@import url("' + rule.href + '") ' + rule.media.mediaText; |
| s += ';\n'; |
| break; |
| 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'; |
| break; |
| case CSSRule.MEDIA_RULE: |
| s += '@media ' + rule.media.mediaText + ' {\n'; |
| s += ' ' + dumpRuleList(rule.cssRules); |
| s += '}\n'; |
| break; |
| case CSSRule.PAGE_RULE: |
| s += '@page '; |
| break; |
| } |
| |
| } |
| |
| return s; |
| } |
| |
| function debug(s) { |
| console = document.getElementById('console'); |
| li = document.createElement('li'); |
| console.appendChild(li); |
| pre = document.createElement('pre'); |
| li.appendChild(pre); |
| t = document.createTextNode(s + '\n'); |
| pre.appendChild(t); |
| } |
| |
| function runTests() { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| originalStyle = document.getElementById('style').firstChild.nodeValue; |
| debug(originalStyle); |
| |
| styleSheet = document.styleSheets.item(0) |
| s = dumpRuleList(styleSheet.cssRules); |
| debug(s); |
| |
| s = "" |
| for (i = 0; i < styleSheet.cssRules.length; i++) { |
| rule = styleSheet.cssRules.item(i); |
| |
| s += rule.cssText + '\n'; |
| } |
| debug(s); |
| } |
| </script> |
| This tests different ways of deserializing css stylesheets. The first item below is the style as specified in the document. The second is serialized using the different rule accessors. The third just uses rule.cssText. If the test is successful, all three should be the same. |
| <ul id="console"> |
| </ul> |
| </body> |
| </html> |
