style-container-for-shadow-dom.html (7199B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Container Queries Test: style query container for Shadow DOM</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 9 <div id="ancestor-across-root"> 10 <div style="--foo: bar"> 11 <template shadowrootmode="open"> 12 <style> 13 @container style(--foo: bar) { 14 #t1 { color: green; } 15 } 16 </style> 17 <div id="t1"></div> 18 </template> 19 </div> 20 </div> 21 22 <div id="ancestor-slotting"> 23 <div style="--foo: bar"> 24 <template shadowrootmode="open"> 25 <div style="--foo: baz"> 26 <slot></slot> 27 </div> 28 </template> 29 <style> 30 @container style(--foo: baz) { 31 #t2 { color: green; } 32 } 33 </style> 34 <div id="t2"></div> 35 </div> 36 </div> 37 38 <div id="ancestor-slotted"> 39 <div style="--foo: baz"> 40 <template shadowrootmode="open"> 41 <style> 42 @container style(--foo: bar) { 43 ::slotted(#t3) { color: green; } 44 } 45 </style> 46 <slot style="--foo: bar"></slot> 47 </template> 48 <div id="t3"></div> 49 </div> 50 </div> 51 52 <div id="ancestor-host" style="--foo: bar"> 53 <div id="t4"> 54 <template shadowrootmode="open"> 55 <style> 56 @container style(--foo: bar) { 57 :host(#t4) { color: green; } 58 } 59 </style> 60 </template> 61 </div> 62 </div> 63 64 <div id="ancestor-part"> 65 <div style="--foo: bar"> 66 <template shadowrootmode="open"> 67 <div style="--foo: baz"> 68 <span id="t5" part="part"></span> 69 </div> 70 </template> 71 <style> 72 @container style(--foo: baz) { 73 #ancestor-part > div::part(part) { color: green; } 74 } 75 </style> 76 </div> 77 </div> 78 79 <div id="ancestor-slotted-before"> 80 <div> 81 <template shadowrootmode="open"> 82 <style> 83 @container style(--foo: baz) { 84 ::slotted(#t6)::before { 85 content: "X"; 86 color: green; 87 } 88 } 89 </style> 90 <slot style="--foo: bar"></slot> 91 </template> 92 <div id="t6" style="--foo: baz"></div> 93 </div> 94 </div> 95 96 <div id="ancestor-host-before"> 97 <div id="t7" style="--foo: bar"> 98 <template shadowrootmode="open"> 99 <style> 100 @container style(--foo: bar) { 101 :host(#t7)::before { 102 content: "X"; 103 color: green; 104 } 105 } 106 </style> 107 </template> 108 </div> 109 </div> 110 111 <div id="ancestor-part-before"> 112 <style> 113 @container style(--foo: quz) { 114 #ancestor-part-before > div::part(part)::before { 115 content: "X"; 116 color: green; 117 } 118 } 119 </style> 120 <div style="--foo: bar"> 121 <template shadowrootmode="open"> 122 <div style="--foo: baz"> 123 <span id="t8" part="part" style="--foo: quz"></span> 124 </div> 125 </template> 126 </div> 127 </div> 128 129 <div id="ancestor-inner-part"> 130 <style> 131 @container style(--foo: quz) { 132 #ancestor-inner-part > div::part(inner-part) { color: green; } 133 } 134 </style> 135 <div style="--foo: bar"> 136 <template shadowrootmode="open"> 137 <div exportparts="inner-part" style="--foo: baz"> 138 <template shadowrootmode="open"> 139 <div style="--foo: quz"> 140 <span id="t9" part="inner-part"></span> 141 </div> 142 </template> 143 </div> 144 </template> 145 </div> 146 </div> 147 148 <div id="ancestor-slot-fallback"> 149 <div><template shadowrootmode="open"> 150 <style> 151 @container style(--foo: bar) { 152 #t10 { color: green; } 153 } 154 </style> 155 <div> 156 <slot style="--foo: bar"><span id="t10"></span></slot> 157 </div> 158 </template></div> 159 </div> 160 161 <div id="container-for-part"> 162 <div> 163 <template shadowrootmode="open"> 164 <div style="--foo: bar"> 165 <span id="t11" part="part"></span> 166 </div> 167 </template> 168 <style> 169 @container style(--foo: bar) { 170 #container-for-part > div::part(part) { color: green; } 171 } 172 </style> 173 </div> 174 </div> 175 176 <div id="inner-scope-host-part" style="--foo: bar"> 177 <div> 178 <template shadowrootmode="open"> 179 <style> 180 @container style(--foo: baz) { 181 :host::part(part) { color: green; } 182 } 183 </style> 184 <div style="--foo: baz"> 185 <span id="t12" part="part"></span> 186 </div> 187 </template> 188 </div> 189 </div> 190 191 <script> 192 setup(() => { 193 assert_implements_style_container_queries(); 194 }); 195 196 const green = "rgb(0, 128, 0)"; 197 198 test(() => { 199 const t1 = document.querySelector("#ancestor-across-root > div").shadowRoot.querySelector("#t1"); 200 assert_equals(getComputedStyle(t1).color, green); 201 }, "Match container in outer tree"); 202 203 test(() => { 204 const t2 = document.querySelector("#t2"); 205 assert_equals(getComputedStyle(t2).color, green); 206 }, "Match container in the shadow tree for a host child in the host child's tree scope"); 207 208 test(() => { 209 const t3 = document.querySelector("#t3"); 210 assert_equals(getComputedStyle(t3).color, green); 211 }, "Match <slot> as a container for ::slotted element"); 212 213 test(() => { 214 const t4 = document.querySelector("#t4"); 215 assert_equals(getComputedStyle(t4).color, green); 216 }, "Match container in outer tree for :host"); 217 218 test(() => { 219 const t5 = document.querySelector("#ancestor-part > div").shadowRoot.querySelector("#t5"); 220 assert_equals(getComputedStyle(t5).color, green); 221 }, "Match ::part's parent in the shadow tree as the container for ::part"); 222 223 test(() => { 224 const t6 = document.querySelector("#t6"); 225 assert_equals(getComputedStyle(t6, "::before").color, green); 226 }, "Match ::slotted as a container for its ::before"); 227 228 test(() => { 229 const t7 = document.querySelector("#t7"); 230 assert_equals(getComputedStyle(t7, "::before").color, green); 231 }, "Match container in outer tree for :host::before"); 232 233 test(() => { 234 const t8 = document.querySelector("#ancestor-part-before > div").shadowRoot.querySelector("#t8"); 235 assert_equals(getComputedStyle(t8, "::before").color, green); 236 }, "Match the ::part as a container for ::before on ::part elements"); 237 238 test(() => { 239 const outerhost = document.querySelector("#ancestor-inner-part > div"); 240 const innerhost = outerhost.shadowRoot.querySelector("div"); 241 const t9 = innerhost.shadowRoot.querySelector("#t9"); 242 assert_equals(getComputedStyle(t9).color, green); 243 }, "Match container for ::part selector in inner shadow tree for exportparts"); 244 245 test(() => { 246 const t10 = document.querySelector("#ancestor-slot-fallback > div").shadowRoot.querySelector("#t10"); 247 assert_equals(getComputedStyle(t10).color, green); 248 }, "Match container for slot light tree child fallback"); 249 250 test(() => { 251 const t11 = document.querySelector("#container-for-part > div").shadowRoot.querySelector("#t11"); 252 assert_equals(getComputedStyle(t11).color, green); 253 }, "Should match parent container inside shadow tree for ::part()"); 254 255 test(() => { 256 const t12 = document.querySelector("#inner-scope-host-part > div").shadowRoot.querySelector("#t12"); 257 assert_equals(getComputedStyle(t12).color, green); 258 }, "A :host::part rule matching a container in the shadow tree"); 259 260 </script>