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