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