| <!doctype html> |
| <head> |
| <title>CSS OM: CSS Rule Types and Order</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom-1/#the-cssrule-interface"> |
| <meta name="flags" content="dom"> |
| <meta name="assert" content="Testing Serialization of Style Rules"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style id="s-0"> |
| @namespace svg "http://www.w3.org/2000/svg"; |
| </style> |
| <style id="s-1"> |
| @import url('main.css'); |
| </style> |
| <style id="s-2"> |
| h1 { background: indianred; } |
| </style> |
| <style id="s-3"> |
| @namespace svg "http://www.w3.org/2000/svg"; |
| svg|a { color: white; } |
| </style> |
| <style id="s-4"> |
| @font-face { |
| font-family: 'Megalopolis'; |
| src: url('fonts/megalopolisextra-webfont.eot'); |
| src: url('fonts/megalopolisextra-webfont.eot?#iefix') format('embedded-opentype'), |
| url('fonts/megalopolisextra-webfont.woff') format('woff'), |
| url('fonts/megalopolisextra-webfont.ttf') format('truetype'), |
| url('fonts/megalopolisextra-webfont.svg#MEgalopolisExtraRegular') format('svg'); |
| font-weight: normal; |
| font-style: normal; |
| } |
| </style> |
| <style id="s-5"> |
| @media (min-width: 200px) { |
| h1 { background: aliceblue; } |
| } |
| </style> |
| <style id="s-6"> |
| @page :first { |
| h1 { color: #444; } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| "use strict"; |
| |
| var stylesheets = document.styleSheets; |
| |
| var expectedOrderOfTypes = [10, 3, 1, 1, 5, 4, 6]; |
| |
| var typesText = { |
| 1: 'style rule', |
| 3: '@import rule', |
| 4: 'media rule', |
| 5: '@font-face rule', |
| 6: 'page rule', |
| 10: 'namespace rule' |
| }; |
| |
| for (var i = 0; i < stylesheets.length; i++) { |
| test( function () { |
| if (i === 3) { |
| var cssType = stylesheets[i].cssRules[1].type; |
| } else { |
| var cssType = stylesheets[i].cssRules[0].type; |
| } |
| assert_equals(typesText[cssType], typesText[expectedOrderOfTypes[i]]); |
| }, 'Type of #s-' + i + ' is expected to be ' + typesText[expectedOrderOfTypes[i]]); |
| } |
| </script> |
| </body> |
| </html> |
