CSSStyleRule-set-selectorText.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/CSSStyleRule-set-selectorText.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSSOM StyleRule selectorText property setter</title>

<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext">

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

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

<style type="text/css" id="styleElement">

  .style0 { background-color: rgb(0, 0, 255) !important; }

  .style1 { background-color: rgb(255, 0, 255); }

</style>

<span>

  <p></p>

  <div id="container" class="style1" lang="zh-CN" language segment="42 43">

  </div>

</span>

<script>

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

  var rule = styleSheet.cssRules[0];

  var divContainerStyle = getComputedStyle(document.getElementById("container"));

  const originalStyleSelector = ".style0";

  var assertColors = function(selectorMatches) {

    assert_equals(divContainerStyle.backgroundColor, selectorMatches ? "rgb(0, 0, 255)" : "rgb(255, 0, 255)")

};

  test(function() {

    assert_equals(typeof rule.selectorText, "string");

    assert_equals(rule.selectorText, originalStyleSelector);

  }, "CSSStyleRule: Can read selectorText value.");

  [ // Invalid selector values.

"",

    " ",

    "!!",

    "123",

    "-",

    "$",

    ":",

    "::",

    ":::",

    "::gibberish",

    ":gibberish",

    ".",

    "#",

    "[]",

    "[",

    "()",

    "(",

    "{}",

    "{",

  ].forEach(function(selector) {

    test(function() {

      assert_equals(rule.selectorText, originalStyleSelector);

      this.add_cleanup(function() { rule.selectorText = originalStyleSelector; });

      rule.selectorText = selector;

      assert_equals(rule.selectorText, originalStyleSelector);

    }, "CSSStyleRule: Invalid CSS selector: " + selector);

});

  [ // Valid selector values.

    {selector: "#container", isMatch: true},

    {selector: "#container  ", isMatch: true, normalizedSelector: "#container"},

    {selector: "  #container ", isMatch: true, normalizedSelector: "#container"},

    {selector: ".style1", isMatch: true},

    {selector: "div.style1", isMatch: true},

    {selector: "div:not(#non-existing-id)", isMatch: true},

    {selector: "div", isMatch: true},

    {selector: "*", isMatch: true},

    {selector: "#no-match", isMatch: false},

    {selector: "ÇĞıİ", isMatch: false},

    {selector: "🤓", isMatch: false},

    {selector: "[language]", isMatch: true},

    {selector: "[language-no]", isMatch: false},

    {selector: "[lang=\"zh-CN\"]", isMatch: true},

    {selector: "[lang=\"ab-CD\"]", isMatch: false},

    {selector: "[segment~=\"43\"]", isMatch: true},

    {selector: "[segment~=\"42\"]", isMatch: true},

    {selector: "[lang|=\"zh\"]", isMatch: true},

    {selector: "[lang|=\"zh-CN\"]", isMatch: true},

    {selector: "[lang|=\"ab\"]", isMatch: false},

    {selector: "[lang|=\"z\"]", isMatch: false},

    {selector: "[lang^=\"z\"]", isMatch: true},

    {selector: "[lang^=\"ab\"]", isMatch: false},

    {selector: "[segment$=\"43\"]", isMatch: true},

    {selector: "[segment$=\"3\"]", isMatch: true},

    {selector: "[segment$=\"42\"]", isMatch: false},

    {selector: "[lang*=\"-\"]", isMatch: true},

    {selector: "[lang*=\"h-\"]", isMatch: true},

    {selector: "[lang*=\"ab\"]", isMatch: false},

    {selector: "*|div", isMatch: true, normalizedSelector: "div"},

    {selector: "|div", isMatch: false},

    {selector: "*|a", isMatch: false, normalizedSelector: "a"},

    {selector: "*|*", isMatch: true, normalizedSelector: "*"},

    {selector: "[*|lang]", isMatch: true, normalizedSelector: "[*|lang]"},

    {selector: "[|lang]", isMatch: true, normalizedSelector: "[lang]"},

    {selector: ":active", isMatch: false},

    {selector: ":not(:active)", isMatch: true},

    {selector: "*:not(:active)", isMatch: true, normalizedSelector: ":not(:active)"},

    {selector: "div:not(:active)", isMatch: true},

    {selector: "div:active", isMatch: false},

    {selector: "span div", isMatch: true},

    {selector: "span  div  ", isMatch: true, normalizedSelector: "span div"},

    {selector: "span > div", isMatch: true},

    {selector: "div div", isMatch: false},

    {selector: "div > div", isMatch: false},

    {selector: "p + div", isMatch: true},

    {selector: "span + div", isMatch: false},

    {selector: "p ~ div", isMatch: true},

    {selector: "span ~ div", isMatch: false},

    {selector: ":lang(zh-CN)", isMatch: true},

    {selector: ":lang(zh)", isMatch: true},

    {selector: ":lang(tr-AZ)", isMatch: false},

    {selector: "::after", isMatch: false, normalizedSelector: "::after"},

    {selector: ":after", isMatch: false, normalizedSelector: "::after"},

    {selector: "::before", isMatch: false, normalizedSelector: "::before"},

    {selector: ":before", isMatch: false, normalizedSelector: "::before"},

    {selector: "::first-letter", isMatch: false, normalizedSelector: "::first-letter"},

    {selector: ":first-letter", isMatch: false, normalizedSelector: "::first-letter"},

    {selector: "::first-line", isMatch: false, normalizedSelector: "::first-line"},

    {selector: ":first-line", isMatch: false, normalizedSelector: "::first-line"},

    {selector: "div:focus:not([lang=\"zh-CN\"])", isMatch: false},

    {selector: "div[lang=\"zh-CN\"]:not(:focus)", isMatch: true},

  ].forEach(function(testCase) {

    test(function() {

      // Check if starting with the default value.

      assert_equals(rule.selectorText, originalStyleSelector);

      this.add_cleanup(function() { rule.selectorText = originalStyleSelector; });

      assertColors(false);

      rule.selectorText = testCase.selector;

      var expectedSelector = testCase.normalizedSelector ? testCase.normalizedSelector : testCase.selector;

      assert_equals(rule.selectorText, expectedSelector);

      assertColors(testCase.isMatch);

    }, "CSSStyleRule: selectorText value: |" + testCase.selector + "| isMatch: " + testCase.isMatch);

});

</script>