<!DOCTYPE html>
<html>
  <head>
    <title>Stylesheets not removed from StyleSheetList when disabled</title>
    <script src="../resources/testharness.js"></script>
    <script src="../resources/testharnessreport.js"></script>
    <link id="s1" rel="stylesheet" title="set" href="data:text/css,#e1{color:red}">
    <link id="s2" rel="alternate stylesheet" type="text/css" title="set" href="data:text/css,#e2{color:red}">
    <link id="s3" rel="stylesheet" type="text/css" href="data:text/css,#e3{color:red}">
    <style id="s4">#e4{color:red}</style>
    <style id="s5" title="set">#e5{color:red}</style>
    <script>
      var initialTest = async_test("Check that all stylesheets are initially present in document.styleSheets");
      var colorTest = async_test("Check that no stylesheets are applied when disabled");
      var testObj = new Object;
      for (var i=0; i<5; i++) {
        testObj[i] = async_test(`#s${i+1}${(i<3) ? ' NOT' : ''} accessible through document.styleSheets after disabling`);
      }

      onload = function(){

        var count = document.styleSheets.length;

        initialTest.step(function(){
          assert_equals(count, 5);
        });
        initialTest.done();

        var i;

        for (i=0; i<5; i++)
          document.getElementById("s"+(i+1)).disabled = true;

        colorTest.step(function(){
          for (i=0; i<5; i++)
            assert_equals(getComputedStyle(document.getElementById("e"+(i+1))).color, "rgb(0, 128, 0)");
        });
        colorTest.done();

        count = document.styleSheets.length;
        assert_equals(count, 2); // Just the <style> nodes
        for (i=0; i<count; i++)
          testObj[document.styleSheets[i].ownerNode.id] = true;

        for (i=0; i<5; i++) {
          testObj[i].step(function(){
            if (i<3) {
              assert_true(!testObj["s"+(i+1)]);
            } else {
              assert_true(testObj["s"+(i+1)]);
            }
          }, "Check if #s"+(i+1)+" is present in document.styleSheets for <style> but not <link> after it is disabled");
          testObj[i].done();
        }
      };
    </script>
  </head>
  <body>
    <div id="log"></div>
    <div style="color: green">
      <span id="e1">This</span>
      <span id="e2">text</span>
      <span id="e3">should</span>
      <span id="e4">be</span>
      <span id="e5">green</span>
    </div>
  </body>
</html>