CSSStyleRule-set-selectorText.html (5902B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>CSSOM StyleRule selectorText property setter</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 8 <style type="text/css" id="styleElement"> 9 .style0 { background-color: rgb(0, 0, 255) !important; } 10 .style1 { background-color: rgb(255, 0, 255); } 11 </style> 12 13 <span> 14 <p></p> 15 <div id="container" class="style1" lang="zh-CN" language segment="42 43"> 16 </div> 17 </span> 18 19 <script> 20 var styleSheet = document.getElementById("styleElement").sheet; 21 var rule = styleSheet.cssRules[0]; 22 23 var divContainerStyle = getComputedStyle(document.getElementById("container")); 24 25 const originalStyleSelector = ".style0"; 26 27 var assertColors = function(selectorMatches) { 28 assert_equals(divContainerStyle.backgroundColor, selectorMatches ? "rgb(0, 0, 255)" : "rgb(255, 0, 255)") 29 }; 30 31 test(function() { 32 assert_equals(typeof rule.selectorText, "string"); 33 assert_equals(rule.selectorText, originalStyleSelector); 34 }, "CSSStyleRule: Can read selectorText value."); 35 36 [ // Invalid selector values. 37 "", 38 " ", 39 "!!", 40 "123", 41 "-", 42 "$", 43 ":", 44 "::", 45 ":::", 46 "::gibberish", 47 ":gibberish", 48 ".", 49 "#", 50 "[]", 51 "[", 52 "()", 53 "(", 54 "{}", 55 "{", 56 ].forEach(function(selector) { 57 test(function() { 58 assert_equals(rule.selectorText, originalStyleSelector); 59 60 this.add_cleanup(function() { rule.selectorText = originalStyleSelector; }); 61 62 rule.selectorText = selector; 63 64 assert_equals(rule.selectorText, originalStyleSelector); 65 }, "CSSStyleRule: Invalid CSS selector: " + selector); 66 }); 67 68 69 [ // Valid selector values. 70 {selector: "#container", isMatch: true}, 71 {selector: "#container ", isMatch: true, normalizedSelector: "#container"}, 72 {selector: " #container ", isMatch: true, normalizedSelector: "#container"}, 73 {selector: ".style1", isMatch: true}, 74 {selector: "div.style1", isMatch: true}, 75 {selector: "div:not(#non-existing-id)", isMatch: true}, 76 {selector: "div", isMatch: true}, 77 {selector: "*", isMatch: true}, 78 79 {selector: "#no-match", isMatch: false}, 80 {selector: "ÇĞıİ", isMatch: false}, 81 {selector: "🤓", isMatch: false}, 82 83 {selector: "[language]", isMatch: true}, 84 {selector: "[language-no]", isMatch: false}, 85 {selector: "[lang=\"zh-CN\"]", isMatch: true}, 86 {selector: "[lang=\"ab-CD\"]", isMatch: false}, 87 {selector: "[segment~=\"43\"]", isMatch: true}, 88 {selector: "[segment~=\"42\"]", isMatch: true}, 89 {selector: "[lang|=\"zh\"]", isMatch: true}, 90 {selector: "[lang|=\"zh-CN\"]", isMatch: true}, 91 {selector: "[lang|=\"ab\"]", isMatch: false}, 92 {selector: "[lang|=\"z\"]", isMatch: false}, 93 {selector: "[lang^=\"z\"]", isMatch: true}, 94 {selector: "[lang^=\"ab\"]", isMatch: false}, 95 {selector: "[segment$=\"43\"]", isMatch: true}, 96 {selector: "[segment$=\"3\"]", isMatch: true}, 97 {selector: "[segment$=\"42\"]", isMatch: false}, 98 {selector: "[lang*=\"-\"]", isMatch: true}, 99 {selector: "[lang*=\"h-\"]", isMatch: true}, 100 {selector: "[lang*=\"ab\"]", isMatch: false}, 101 102 {selector: "*|div", isMatch: true, normalizedSelector: "div"}, 103 {selector: "|div", isMatch: false}, 104 {selector: "*|a", isMatch: false, normalizedSelector: "a"}, 105 {selector: "*|*", isMatch: true, normalizedSelector: "*"}, 106 {selector: "[*|lang]", isMatch: true, normalizedSelector: "[*|lang]"}, 107 {selector: "[|lang]", isMatch: true, normalizedSelector: "[lang]"}, 108 109 {selector: ":active", isMatch: false}, 110 {selector: ":not(:active)", isMatch: true}, 111 {selector: "*:not(:active)", isMatch: true, normalizedSelector: ":not(:active)"}, 112 {selector: "div:not(:active)", isMatch: true}, 113 {selector: "div:active", isMatch: false}, 114 115 {selector: "span div", isMatch: true}, 116 {selector: "span div ", isMatch: true, normalizedSelector: "span div"}, 117 {selector: "span > div", isMatch: true}, 118 {selector: "div div", isMatch: false}, 119 {selector: "div > div", isMatch: false}, 120 {selector: "p + div", isMatch: true}, 121 {selector: "span + div", isMatch: false}, 122 {selector: "p ~ div", isMatch: true}, 123 {selector: "span ~ div", isMatch: false}, 124 125 {selector: ":lang(zh-CN)", isMatch: true}, 126 {selector: ":lang(zh)", isMatch: true}, 127 {selector: ":lang(tr-AZ)", isMatch: false}, 128 129 {selector: "::after", isMatch: false, normalizedSelector: "::after"}, 130 {selector: ":after", isMatch: false, normalizedSelector: "::after"}, 131 {selector: "::before", isMatch: false, normalizedSelector: "::before"}, 132 {selector: ":before", isMatch: false, normalizedSelector: "::before"}, 133 {selector: "::first-letter", isMatch: false, normalizedSelector: "::first-letter"}, 134 {selector: ":first-letter", isMatch: false, normalizedSelector: "::first-letter"}, 135 {selector: "::first-line", isMatch: false, normalizedSelector: "::first-line"}, 136 {selector: ":first-line", isMatch: false, normalizedSelector: "::first-line"}, 137 138 {selector: "div:focus:not([lang=\"zh-CN\"])", isMatch: false}, 139 {selector: "div[lang=\"zh-CN\"]:not(:focus)", isMatch: true}, 140 ].forEach(function(testCase) { 141 test(function() { 142 // Check if starting with the default value. 143 assert_equals(rule.selectorText, originalStyleSelector); 144 145 this.add_cleanup(function() { rule.selectorText = originalStyleSelector; }); 146 147 assertColors(false); 148 149 rule.selectorText = testCase.selector; 150 151 var expectedSelector = testCase.normalizedSelector ? testCase.normalizedSelector : testCase.selector; 152 153 assert_equals(rule.selectorText, expectedSelector); 154 155 assertColors(testCase.isMatch); 156 }, "CSSStyleRule: selectorText value: |" + testCase.selector + "| isMatch: " + testCase.isMatch); 157 }); 158 </script>