<!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>