style-sheet-interfaces-001.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/style-sheet-interfaces-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

 <head>

  <title>CSS Test: CSSOM StyleSheet Initial Values</title>

  <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">

  <link rel="help" href="https://www.w3.org/TR/cssom-1/#css-style-sheets">

  <link rel="help" href="https://www.w3.org/TR/cssom-1/#the-cssimportrule-interface">

  <link rel="help" href="https://www.w3.org/TR/cssom-1/#the-linkstyle-interface">

  <meta name="flags" content="dom">

  <meta name="assert" content="StyleSheet and CSSStyleSheet objects have the properties specified in their interfaces">

  <script src="/resources/testharness.js" type="text/javascript"></script>

  <script src="/resources/testharnessreport.js" type="text/javascript"></script>

  <style id="styleElement" type="text/css" media="all" title="internal style sheet" disabled="disabled">

    @import url('support/a-green.css');

    * { margin: 0; padding: 0; }

  </style>

  <link id="linkElement" rel="stylesheet" href="support/b-green.css">

 </head>

 <body>

  <noscript>Test not run - javascript required.</noscript>

  <div id="log"></div>

  <script type="text/javascript">

    var styleElement = document.getElementById("styleElement");

    var linkElement = document.getElementById("linkElement");

    var styleSheet;

    var linkSheet;

    // styleElement.sheet exists and is a CSSStyleSheet

    // linkElement.sheet exists and is a CSSStyleSheet

    test(function() {

        assert_idl_attribute(styleElement, "sheet");

        assert_readonly(styleElement, "sheet");

        styleSheet = styleElement.sheet;

        assert_true(styleSheet instanceof CSSStyleSheet);

        assert_idl_attribute(linkElement, "sheet");

        linkSheet = linkElement.sheet;

        assert_true(linkSheet instanceof CSSStyleSheet);

    }, "sheet_property");

    // The `disabled` IDL attribute setter has no effect before the underlying

    // CSSStyleSheet is created.

    test(function () {

      const style = document.createElement("style");

      style.disabled = true;

      assert_false(style.disabled);

      document.head.append(style);

      const sheet1 = style.sheet;

      assert_false(style.disabled);

      assert_false(sheet1.disabled);

      // The `disabled` attribute can be set after the sheet exists.

      style.disabled = true;

      assert_true(style.disabled);

      assert_true(sheet1.disabled);

      // Reset `disabled`.

      style.disabled = false;

      assert_false(style.disabled);

      assert_false(style.disabled);

      // Setting `disabled = true` on the CSSStyleSheet also carries over to the

      // HTMLStyleElement.

      sheet1.disabled = true;

      assert_true(style.disabled);

      assert_true(sheet1.disabled);

    }, "disabled attribute getter/setter");

    // The sheet property on LinkStyle should always return the current associated style sheet.

    test(function () {

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

      document.querySelector("head").appendChild(style);

      var sheet1 = style.sheet;

      assert_equals(sheet1.cssRules.length, 0);

      style.appendChild(document.createTextNode("a { color: green; }"));

      assert_equals(style.sheet.cssRules.length, 1);

    }, "sheet_property_updates");

    // ownerRule, cssRules, insertRule and deleteRule properties exist on CSSStyleSheet

    // ownerRule, cssRules are read only

    test(function() {

        assert_idl_attribute(styleSheet, "ownerRule");

        assert_idl_attribute(styleSheet, "cssRules");

        assert_inherits(styleSheet, "insertRule");

        assert_inherits(styleSheet, "deleteRule");

        assert_readonly(styleSheet, "ownerRule");

        assert_readonly(styleSheet, "cssRules");

    }, "CSSStyleSheet_properties");

    var importSheet;

    // CSSStyleSheet initial property values are correct

    test(function() {

        assert_equals(styleSheet.ownerRule, null);

        assert_true(styleSheet.cssRules.length > 0);

        assert_true(styleSheet.cssRules.item(0) instanceof CSSImportRule);

        importSheet = styleSheet.cssRules.item(0).styleSheet;

    }, "CSSStyleSheet_property_values");

    // type, disabled, ownerNode, parentStyleSheet, href, title, and media properties exist on StyleSheet

    // type, ownerNode, parentStyleSheet, href, and title properties are read only

    test(function() {

        assert_idl_attribute(styleSheet, "type");

        assert_idl_attribute(styleSheet, "disabled");

        assert_idl_attribute(styleSheet, "ownerNode");

        assert_idl_attribute(styleSheet, "parentStyleSheet");

        assert_idl_attribute(styleSheet, "href");

        assert_idl_attribute(styleSheet, "title");

        assert_idl_attribute(styleSheet, "media");

        assert_readonly(styleSheet, "type");

        assert_readonly(styleSheet, "ownerNode");

        assert_readonly(styleSheet, "parentStyleSheet");

        assert_readonly(styleSheet, "href");

        assert_readonly(styleSheet, "title");

    }, "StyleSheet_properties");

    // StyleSheet initial property values are correct

    test(function() {

        assert_equals(styleSheet.type, "text/css");

        assert_equals(styleSheet.disabled, false);

        assert_equals(styleSheet.ownerNode, styleElement);

        assert_equals(linkSheet.ownerNode, linkElement);

        assert_equals(importSheet.ownerNode, null);

        assert_equals(styleSheet.href, null);

        assert_regexp_match(linkSheet.href, /support\/b-green.css$/);

        assert_regexp_match(importSheet.href, /support\/a-green.css$/);

        assert_equals(styleSheet.parentStyleSheet, null);

        assert_equals(linkSheet.parentStyleSheet, null);

        assert_equals(importSheet.parentStyleSheet, styleSheet);

        assert_equals(styleSheet.title, "internal style sheet");

        assert_equals(styleSheet.media.item(0), "all");

    }, "StyleSheet_property_values");

  </script>

 </body>

</html>