style_type_change.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/document-metadata/the-style-element/style_type_change.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Dynamically changing HTMLStyleElement.type should change the rendering accordingly</title>

    <script src="/resources/testharness.js"></script>

    <script src="/resources/testharnessreport.js"></script>

    <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">

    <style type="no/mime">

      body { color: green }

    </style>

  </head>

  <body>

    Text content.

    <script>

      var style = document.querySelector("style");

      test(function() {

        assert_equals(document.styleSheets.length, 0);

      }, "Check initial styleSheets length type");

      test(function() {

        assert_not_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");

        assert_equals(document.styleSheets.length, 0);

        style.type = "text/css";

        assert_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");

        assert_equals(document.styleSheets.length, 1);

      }, "Change type from invalid type to valid type");

      test(function() {

        assert_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");

        assert_equals(document.styleSheets.length, 1);

        style.type = "no/mime";

        assert_not_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");

        assert_equals(document.styleSheets.length, 0);

      }, "Change type from valid type to invalid type");

    </script>

  </body>

</html>