css/cssom/StyleSheet-properties.html

<!doctype html>
<title>StyleSheet and CSSStyleSheet properties</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#the-stylesheet-interface">
<link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstylesheet-interface">
<link rel="help" href="https://drafts.csswg.org/cssom/#remove-a-css-style-sheet">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style id="plain">div { color: green }</style>
<style id="with-title" title="My Sheet">span { color: red }</style>
<style id="with-media" media="screen">p { color: blue }</style>
<style id="with-import">@import url("/css/support/a-green.css");</style>
<link id="link-plain" rel="stylesheet" href="/css/support/a-green.css">
<link id="link-titled" rel="stylesheet" href="/css/support/b-green.css" title="Link Sheet">
<link id="link-media" rel="stylesheet" href="/css/support/c-red.css" media="screen">

<script>
"use strict";

// Wait for @import and <link> sheets to load
async_test(t => {
  window.addEventListener("load", t.step_func_done(() => {
    const plainSheet = document.getElementById("plain").sheet;
    const titledSheet = document.getElementById("with-title").sheet;
    const mediaSheet = document.getElementById("with-media").sheet;
    const importSheet = document.getElementById("with-import").sheet;
    const linkPlainSheet = document.getElementById("link-plain").sheet;
    const linkTitledSheet = document.getElementById("link-titled").sheet;
    const linkMediaSheet = document.getElementById("link-media").sheet;

    // --- <style> element sheets ---

    test(() => {
      assert_equals(plainSheet.type, "text/css");
    }, "<style>: type is 'text/css'");

    test(() => {
      assert_equals(plainSheet.ownerNode, document.getElementById("plain"));
    }, "<style>: ownerNode is the style element");

    test(() => {
      assert_equals(plainSheet.href, null);
    }, "<style>: href is null for inline sheets");

    test(() => {
      assert_equals(plainSheet.title, null);
    }, "<style>: title is null when the style element has no title attribute");

    test(() => {
      assert_equals(titledSheet.title, "My Sheet");
    }, "<style>: title reflects the style element's title attribute");

    test(() => {
      assert_equals(plainSheet.media.mediaText, "");
      assert_equals(plainSheet.media.length, 0);
    }, "<style>: media is empty when the style element has no media attribute");

    test(() => {
      assert_equals(mediaSheet.media.mediaText, "screen");
      assert_equals(mediaSheet.media.length, 1);
    }, "<style>: media reflects the style element's media attribute");

    test(() => {
      assert_false(plainSheet.disabled);
    }, "<style>: disabled is false initially");

    test(() => {
      assert_equals(plainSheet.parentStyleSheet, null);
    }, "<style>: parentStyleSheet is null for top-level sheets");

    test(() => {
      assert_equals(plainSheet.ownerRule, null);
    }, "<style>: ownerRule is null for non-imported sheets");

    test(() => {
      assert_true(plainSheet.cssRules instanceof CSSRuleList);
      assert_greater_than(plainSheet.cssRules.length, 0);
    }, "<style>: cssRules is a CSSRuleList with rules");

    // --- <link> element sheets ---

    test(() => {
      assert_equals(linkPlainSheet.type, "text/css");
    }, "<link>: type is 'text/css'");

    test(() => {
      assert_equals(linkPlainSheet.ownerNode, document.getElementById("link-plain"));
    }, "<link>: ownerNode is the link element");

    test(() => {
      assert_equals(linkPlainSheet.href, new URL("/css/support/a-green.css", document.baseURI).href);
    }, "<link>: href is the resolved URL of the stylesheet");

    test(() => {
      assert_equals(linkPlainSheet.title, null);
    }, "<link>: title is null when the link element has no title attribute");

    test(() => {
      assert_equals(linkTitledSheet.title, "Link Sheet");
    }, "<link>: title reflects the link element's title attribute");

    test(() => {
      assert_equals(linkPlainSheet.media.mediaText, "");
      assert_equals(linkPlainSheet.media.length, 0);
    }, "<link>: media is empty when the link element has no media attribute");

    test(() => {
      assert_equals(linkMediaSheet.media.mediaText, "screen");
      assert_equals(linkMediaSheet.media.length, 1);
    }, "<link>: media reflects the link element's media attribute");

    test(() => {
      assert_false(linkPlainSheet.disabled);
    }, "<link>: disabled is false initially");

    test(() => {
      assert_equals(linkPlainSheet.parentStyleSheet, null);
    }, "<link>: parentStyleSheet is null for top-level sheets");

    test(() => {
      assert_equals(linkPlainSheet.ownerRule, null);
    }, "<link>: ownerRule is null for non-imported sheets");

    test(() => {
      assert_true(linkPlainSheet.cssRules instanceof CSSRuleList);
      assert_greater_than(linkPlainSheet.cssRules.length, 0);
    }, "<link>: cssRules is a CSSRuleList with rules");

    // --- @import sheets ---

    test(() => {
      const importRule = importSheet.cssRules[0];
      assert_equals(importRule.constructor.name, "CSSImportRule", "setup: should be an import rule");
      const imported = importRule.styleSheet;
      assert_equals(imported.type, "text/css");
    }, "@import: imported sheet type is 'text/css'");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_equals(imported.ownerNode, null);
    }, "@import: imported sheet ownerNode is null");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_equals(imported.href, new URL("/css/support/a-green.css", document.baseURI).href);
    }, "@import: imported sheet href is the resolved URL");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_equals(imported.title, null);
    }, "@import: imported sheet title is null");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_equals(imported.media.mediaText, "");
      assert_equals(imported.media.length, 0);
    }, "@import: imported sheet media is empty when @import has no media query");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_false(imported.disabled);
    }, "@import: imported sheet disabled is false initially");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_equals(imported.parentStyleSheet, importSheet);
    }, "@import: imported sheet parentStyleSheet is the importing sheet");

    test(() => {
      const importRule = importSheet.cssRules[0];
      const imported = importRule.styleSheet;
      assert_equals(imported.ownerRule, importRule);
    }, "@import: imported sheet ownerRule is the CSSImportRule");

    test(() => {
      const imported = importSheet.cssRules[0].styleSheet;
      assert_true(imported.cssRules instanceof CSSRuleList);
      assert_greater_than(imported.cssRules.length, 0);
    }, "@import: imported sheet cssRules is a CSSRuleList with rules");

    // --- Removal ---

    test(() => {
      const style = document.createElement("style");
      style.textContent = "div { color: green }";
      document.head.appendChild(style);
      const { sheet } = style;
      assert_equals(sheet.ownerNode, style);

      style.remove();

      assert_equals(sheet.ownerNode, null, "ownerNode becomes null after removal");
      assert_equals(sheet.parentStyleSheet, null, "parentStyleSheet is null after removal");
      assert_equals(sheet.ownerRule, null, "ownerRule is null after removal");
    }, "Removing a <style> element nulls ownerNode, parentStyleSheet, and ownerRule");

    test(() => {
      const link = document.getElementById("link-plain");
      const { sheet } = link;
      assert_equals(sheet.ownerNode, link);

      link.remove();

      assert_equals(sheet.ownerNode, null, "ownerNode becomes null after removal");
      assert_equals(sheet.parentStyleSheet, null, "parentStyleSheet is null after removal");
      assert_equals(sheet.ownerRule, null, "ownerRule is null after removal");
    }, "Removing a <link> element nulls ownerNode, parentStyleSheet, and ownerRule");

    // --- Programmatic title ---

    test(() => {
      const style = document.createElement("style");
      style.title = "Dynamic Title";
      document.head.appendChild(style);
      assert_equals(style.sheet.title, "Dynamic Title");
      style.remove();
    }, "Programmatically setting title on a <style> element is reflected in sheet.title");
  }));
}, "StyleSheet and CSSStyleSheet properties");
</script>