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