<!DOCTYPE html>
<html>
<head>
  <title>CSS Test: CSSOM MediaList Interfaces</title>
  <link rel="author" title="Chapman Shoop" href="mailto:chapman.shoop@gmail.com">
  <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-medialist-interface">
  <meta name="flags" content="dom">
  <meta name="assert" content="MediaList object has appendMedium method and it functions properly.">
  <script src="/resources/testharness.js" type="text/javascript"></script>
  <script src="/resources/testharnessreport.js" type="text/javascript"></script>
</head>

<body>
  <noscript>Test not run - javascript required.</noscript>
  <div id="log"></div>

  <script type="text/javascript">
    function setup() {
      // Clean out any old style element
      var old_style_el = document.getElementById('test_style');
      if (old_style_el) {
        document.head.removeChild(old_style_el);
      }

      // Create a fresh style element and return its media attribute
      var style_el = document.createElement('style');
      style_el.setAttribute('id', 'test_style');
      document.head.appendChild(style_el);
      return style_el.sheet.media;
    }
  </script>

  <script type="text/javascript">

    // MediaList.appendMedium correctly adds medium to empty MediaList.
    test(function() {
      media_list = setup();

      media_list.appendMedium("all");

      assert_equals(media_list.length, 1);
      assert_equals(media_list.item(0), "all");
      assert_equals(media_list.mediaText, "all");
    }, "appendMedium_correctly_appends_medium_to_empty_MediaList");

    // MediaList.appendMedium correctly adds medium to a MediaList that already has a medium.
    test(function() {
      media_list = setup();

      media_list.appendMedium("screen");
      media_list.appendMedium("all");

      // The ordering of array items should be different from that of the mediaText element.
      // "all" should be appended after "screen" in the array, but "mediaText" should be
      // "all, screen" due to lexicographical sorting.
      assert_equals(media_list.length, 2);
      assert_equals(media_list.item(0), "screen");
      assert_equals(media_list.item(1), "all");
      assert_equals(media_list.mediaText, "screen, all");
    }, "appendMedium_correctly_appends_medium_to_nonempty_MediaList");

  </script>
</body>
</html>