CSSStyleRule-set-selectorText-namespace.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSSOM StyleRule selectorText property setter with namespaces</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">

@namespace url(http://www.w3.org/1999/xhtml);

@namespace svg url(http://www.w3.org/2000/svg);

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

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

</style>

<span>

  <p></p>

  <svg height="30" width="200" id="container" class="style1" lang="zh-CN" language segment="42 43">

    <text x="0" y="15">SVG text</text>

  </svg>

</span>

<script>

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

  var rule = styleSheet.cssRules[2];

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

  const originalStyleSelector = "svg|*.style0";

  var assertColors = function(selectorMatches) {

    assert_equals(divContainerStyle.getPropertyValue('background-color'), selectorMatches ? "rgb(0, 0, 255)" : "rgb(255, 0, 255)")

};

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

    {selector: "svg|*.style1  ", isMatch: true, normalizedSelector: "svg|*.style1"},

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

    {selector: " *.style1  ", isMatch: false, normalizedSelector: ".style1"},

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

  ].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>