<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Test: Styling</title>
    <link rel="author" title="Intel" href="http://www.intel.com/">
    <link rel="help" href="https://html.spec.whatwg.org/multipage/#styling">
    <link id="style1" rel="text" title="Intel" href="./support/unmatch.css">
    <link id="style2" rel="alternate stylesheet" type="text/css" title="" href="./support/emptytitle.css">
    <link id="style3" rel="alternate stylesheet" type="text/css" href="./support/notitle.css">
    <link id="style5" rel="stylesheet" type="text/css" href="./support/normal.css">
    <link id="style6" rel="alternate stylesheet" type="text/css" href="./support/normal.css" title="./support/alternate.css">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style id="style4" type="text/html">
      #test {
        height: 100px;
        width: 100px;
      }
    </style>
    <style id="style7" type="text/css" media="all" title="./support/alternate.css">
      #test {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="log"></div>
    <div id="test" style="display:none">STYLING TEST</div>

    <script>
      /**
       * Browsers may incorrectly issue requests for these resources and defer
       * definition of the `sheet` attribute until after loading is complete.
       * In such cases, synchronous assertions regarding the absence of
       * attributes will spuriously pass.
       *
       * In order to account for this incorrect behavior (exhibited at the time
       * of this writing most notably by the Chromium browser), defer the
       * assertions until the "load" event has been triggered.
       */
      async_test(function(t) {
        window.addEventListener("load", t.step_func(function() {
          var style = null,
              i;
          for (i = 1; i < 5; i++) {
            style = document.getElementById("style" + i);
            assert_equals(style.sheet, null, "The sheet attribute of style" + i + " should be null.");
            assert_false(style.disabled, "The disabled attribute of style" + i + " should be false.");
          }
          t.done();
        }));
      }, "The LinkStyle interface's sheet attribute must return null; the disabled attribute must be false");

      test(function() {
        var style = document.createElement("style"),
            link = document.createElement("link");
        assert_equals(style.sheet, null, "The sheet attribute of the style element not in a document should be null.");
        assert_equals(link.sheet, null, "The sheet attribute of the link element not in a document should be null.");
      }, "The LinkStyle interface's sheet attribute must return null if the corresponding element is not in a Document");

      async_test(function(t) {
        window.addEventListener("load", t.step_func(function() {
          var style = null,
              i;
          for (i = 5; i < 8; i++) {
            style = document.getElementById("style" + i);
            assert_true(style.sheet instanceof StyleSheet, "The sheet attribute of style" + i + " should be a StyleSheet object.");
            assert_equals(style.disabled, style.sheet.disabled, "The disabled attribute of style" + i + " should equal to the same attribute of StyleSheet.");
          }
          t.done();
        }));
      }, "The LinkStyle interface's sheet attribute must return StyleSheet object; the disabled attribute must be same as the StyleSheet's disabled attribute");

      test(function() {
        assert_equals(document.getElementById("style2").title, "", "The title attribute of style2 is incorrect.");
        assert_equals(document.getElementById("style5").title, "", "The title attribute of style5 is incorrect.");
        assert_equals(document.getElementById("style6").title, "./support/alternate.css", "The title attribute of style6 is incorrect.");
        assert_equals(document.getElementById("style7").title, "./support/alternate.css", "The title attribute of style7 is incorrect.");
      }, "The title must be the same as the value of the element's title content attribute");

      test(function() {
        assert_equals(document.getElementById("style5").media, "", "The media attribute of style5 is incorrect.");
        assert_equals(document.getElementById("style7").media, "all", "The media attribute of style7 is incorrect.");
      }, "The media must be the same as the value of the element's media content attribute, or the empty string if it is omitted");
    </script>
  </body>
</html>