browser_rules_variables_host.js (8668B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test matched selectors and variables defined for a :host selector. 7 8 const SHADOW_DOM = `<style> 9 :host { 10 --test-color: red; 11 } 12 13 span { 14 color: var(--test-color); 15 } 16 </style> 17 <span class="test-span">test</span> 18 <div class="nested-shadow-host"></div>`; 19 20 const TEST_PAGE = ` 21 <div id="host"></div> 22 <script> 23 const div = document.querySelector("div"); 24 const shadow = div.attachShadow({ mode: "open" }); 25 shadow.innerHTML = \`${SHADOW_DOM}\`; 26 27 const sharedStyleSheet = new CSSStyleSheet(); 28 sharedStyleSheet.replaceSync(\` 29 :where(.test-span), [test-rule-shared] { 30 background-color: var(--test-background-color-shared); 31 } 32 :where(:host), [test-rule-shared] { 33 --test-background-color-shared: gold; 34 }\`); 35 36 shadow.adoptedStyleSheets = [sharedStyleSheet]; 37 38 const nestedShadow = shadow.querySelector(".nested-shadow-host").attachShadow({ 39 mode: "open" 40 }); 41 nestedShadow.innerHTML = \`${SHADOW_DOM}\`; 42 nestedShadow.adoptedStyleSheets = [sharedStyleSheet]; 43 </script>`; 44 45 const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent( 46 TEST_PAGE 47 )}`; 48 49 add_task(async function () { 50 await addTab(TEST_URI); 51 const { inspector, view } = await openRuleView(); 52 53 info("Select the host and check that :host is matching"); 54 { 55 await selectNode("#host", inspector); 56 let selector = getRuleViewRuleEditor(view, 1).selectorText; 57 is(selector.textContent, ":host", "Got expected rule selector"); 58 is( 59 selector.querySelector(".matched").textContent, 60 ":host", 61 ":host should be matched." 62 ); 63 64 selector = getRuleViewRuleEditor(view, 2).selectorText; 65 is( 66 selector.textContent, 67 ":where(:host), [test-rule-shared]", 68 "Got expected rule selector" 69 ); 70 is( 71 selector.querySelector(".matched").textContent, 72 ":where(:host)", 73 ":where(:host) should be matched." 74 ); 75 is( 76 selector.querySelector(".unmatched").textContent, 77 "[test-rule-shared]", 78 "[test-rule-shared] should not be matched." 79 ); 80 } 81 82 info("Select a shadow dom element and check that :host is matching"); 83 { 84 const nodeFront = await getNodeFrontInShadowDom( 85 ".test-span", 86 "#host", 87 inspector 88 ); 89 await selectNode(nodeFront, inspector); 90 91 let selector = getRuleViewRuleEditor(view, 4).selectorText; 92 is(selector.textContent, ":host", "Got expected rule selector"); 93 is( 94 selector.querySelector(".matched").textContent, 95 ":host", 96 ":host should be matched." 97 ); 98 99 selector = getRuleViewRuleEditor(view, 5).selectorText; 100 is( 101 selector.textContent, 102 ":where(:host), [test-rule-shared]", 103 "Got expected rule selector" 104 ); 105 is( 106 selector.querySelector(".matched").textContent, 107 ":where(:host)", 108 ":where(:host) should be matched." 109 ); 110 is( 111 selector.querySelector(".unmatched").textContent, 112 "[test-rule-shared]", 113 "[test-rule-shared] should not be matched." 114 ); 115 116 info("Check that the variable from :host is correctly applied"); 117 const setColor = getRuleViewProperty( 118 view, 119 "span", 120 "color" 121 ).valueSpan.querySelector(".inspector-variable"); 122 is(setColor.textContent, "--test-color", "--test-color is set correctly"); 123 is( 124 setColor.dataset.variable, 125 "red", 126 "--test-color's dataset.variable is set correctly" 127 ); 128 let previewTooltip = await assertShowPreviewTooltip(view, setColor); 129 ok( 130 previewTooltip.panel.textContent.includes("red"), 131 "CSS variable preview tooltip shows the expected CSS variable" 132 ); 133 await assertTooltipHiddenOnMouseOut(previewTooltip, setColor); 134 135 const setBackgroundColor = getRuleViewProperty( 136 view, 137 ":where(.test-span), [test-rule-shared]", 138 "background-color" 139 ).valueSpan.querySelector(".inspector-variable"); 140 is( 141 setBackgroundColor.textContent, 142 "--test-background-color-shared", 143 "--test-background-color-shared is set correctly" 144 ); 145 is( 146 setBackgroundColor.dataset.variable, 147 "gold", 148 "--test-background-color-shared's dataset.variable is set correctly" 149 ); 150 previewTooltip = await assertShowPreviewTooltip(view, setBackgroundColor); 151 ok( 152 previewTooltip.panel.textContent.includes("gold"), 153 "CSS variable preview tooltip shows the expected CSS variable" 154 ); 155 await assertTooltipHiddenOnMouseOut(previewTooltip, setBackgroundColor); 156 } 157 158 info("Select the nested host and check that :host is matching"); 159 { 160 const nestedShadowHostNodeFront = await getNodeFrontInShadowDom( 161 ".nested-shadow-host", 162 "#host", 163 inspector 164 ); 165 await selectNode(nestedShadowHostNodeFront, inspector); 166 let selector = getRuleViewRuleEditor(view, 1).selectorText; 167 is(selector.textContent, ":host", "Got expected rule selector"); 168 is( 169 selector.querySelector(".matched").textContent, 170 ":host", 171 ":host should be matched for the nested host." 172 ); 173 174 selector = getRuleViewRuleEditor(view, 2).selectorText; 175 is( 176 selector.textContent, 177 ":where(:host), [test-rule-shared]", 178 "Got expected rule selector" 179 ); 180 is( 181 selector.querySelector(".matched")?.textContent, 182 ":where(:host)", 183 ":where(:host) should be matched for the nested host." 184 ); 185 is( 186 selector.querySelector(".unmatched").textContent, 187 "[test-rule-shared]", 188 "[test-rule-shared] should not be matched." 189 ); 190 } 191 192 info("Select a nested shadow dom element and check that :host is matching"); 193 { 194 const topLevelShadowRootNodeFront = await getShadowRoot("#host", inspector); 195 const nestedHostNodeFront = await inspector.walker.querySelector( 196 topLevelShadowRootNodeFront, 197 ".nested-shadow-host" 198 ); 199 const nodeFront = await getNodeFrontInShadowDom( 200 ".test-span", 201 nestedHostNodeFront, 202 inspector 203 ); 204 await selectNode(nodeFront, inspector); 205 206 let selector = getRuleViewRuleEditor(view, 4).selectorText; 207 is(selector.textContent, ":host", "Got expected rule selector"); 208 is( 209 selector.querySelector(".matched").textContent, 210 ":host", 211 ":host should be matched for the nested shadow dom element." 212 ); 213 214 selector = getRuleViewRuleEditor(view, 5).selectorText; 215 is( 216 selector.textContent, 217 ":where(:host), [test-rule-shared]", 218 "Got expected rule selector" 219 ); 220 is( 221 selector.querySelector(".matched")?.textContent, 222 ":where(:host)", 223 ":where(:host) should be matched for the nested shadow dom element." 224 ); 225 is( 226 selector.querySelector(".unmatched").textContent, 227 "[test-rule-shared]", 228 "[test-rule-shared] should not be matched." 229 ); 230 231 info( 232 "Check that the variable from :host is correctly applied for the nested shadow dom element" 233 ); 234 const setColor = getRuleViewProperty( 235 view, 236 "span", 237 "color" 238 ).valueSpan.querySelector(".inspector-variable"); 239 is( 240 setColor.textContent, 241 "--test-color", 242 "--test-color is set correctly for the nested shadow dom element" 243 ); 244 is( 245 setColor.dataset.variable, 246 "red", 247 "--test-color's dataset.variable is set correctly for the nested shadow dom element" 248 ); 249 let previewTooltip = await assertShowPreviewTooltip(view, setColor); 250 ok( 251 previewTooltip.panel.textContent.includes("red"), 252 "CSS variable preview tooltip shows the expected CSS variable for the nested shadow dom element" 253 ); 254 await assertTooltipHiddenOnMouseOut(previewTooltip, setColor); 255 256 const setBackgroundColor = getRuleViewProperty( 257 view, 258 ":where(.test-span), [test-rule-shared]", 259 "background-color" 260 ).valueSpan.querySelector(".inspector-variable"); 261 is( 262 setBackgroundColor.textContent, 263 "--test-background-color-shared", 264 "--test-background-color-shared is set correctly for the nested shadow dom element" 265 ); 266 is( 267 setBackgroundColor.dataset.variable, 268 "gold", 269 "--test-background-color-shared's dataset.variable is set correctly for the nested shadow dom element" 270 ); 271 previewTooltip = await assertShowPreviewTooltip(view, setBackgroundColor); 272 ok( 273 previewTooltip.panel.textContent.includes("gold"), 274 "CSS variable preview tooltip shows the expected CSS variable for the nested shadow dom element" 275 ); 276 await assertTooltipHiddenOnMouseOut(previewTooltip, setBackgroundColor); 277 } 278 });