anchor-scope-shadow-names.html (6333B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: anchor-scope name match is tree-scoped</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10526"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <!-- Tests that an anchor-scope placed into the shadow tree by ::part 9 does not affect anchor name lookup local to the shadow tree. --> 10 <div id=test_part> 11 <style> 12 #test_part { 13 .host::part(scope) { 14 /* This should have no effect, because --a is specified in a different 15 tree-scope than the --a inside the shadow. */ 16 anchor-scope: --a; 17 } 18 } 19 </style> 20 <div class=host> 21 <template shadowrootmode=open> 22 <style> 23 .anchored { 24 background: coral; 25 position: absolute; 26 top: anchor(bottom, 1px); 27 position-anchor: --a; 28 width: 5px; 29 height: 5px; 30 } 31 .anchor { 32 background: skyblue; 33 height: 10px; 34 anchor-name: --a; 35 } 36 .cb { 37 position: relative; 38 width: 50px; 39 height: 50px; 40 border: 1px solid black; 41 } 42 .scope { 43 anchor-scope: --a; 44 } 45 </style> 46 <div class=cb> 47 <div class=anchor></div> 48 <div part=scope> 49 <div class=anchored></div> 50 </div> 51 </div> 52 </template> 53 </div> 54 <script> 55 test((t) => { 56 let host = document.querySelector('#test_part .host'); 57 let e = host.shadowRoot.querySelector('.anchored'); 58 assert_equals(getComputedStyle(e).top, '10px'); 59 }, 'anchor-scope matches tree-scoped names'); 60 </script> 61 </div> 62 63 <!-- Tests that a slotted-in element is not affected by any anchor-scope 64 in the shadow tree. --> 65 <hr> 66 <div id=test_slot> 67 <style> 68 #test_slot { 69 .anchor { 70 background: skyblue; 71 height: 10px; 72 anchor-name: --a; 73 } 74 .cb { 75 position: relative; 76 width: 50px; 77 height: 50px; 78 border: 1px solid black; 79 } 80 .anchored { 81 background: coral; 82 position: absolute; 83 top: anchor(bottom, 1px); 84 position-anchor: --a; 85 width: 5px; 86 height: 5px; 87 } 88 } 89 </style> 90 <div class=cb> 91 <div class=anchor></div> 92 <div class=host> 93 <template shadowrootmode=open> 94 <style> 95 .scope { 96 anchor-scope: --a; 97 } 98 </style> 99 <div class=scope> 100 <slot></slot> 101 </div> 102 </template> 103 <div class=anchored></div> 104 </div> 105 </div> 106 <script> 107 test((t) => { 108 let e = document.querySelector('#test_slot .anchored'); 109 assert_equals(getComputedStyle(e).top, '10px'); 110 }, 'anchor-scope in shadow does not affect slotted-in element'); 111 </script> 112 </div> 113 114 <!-- Tests that anchor-scope in ::slotted() rule does not affect 115 anchoring on the outside of the shadow. --> 116 <hr> 117 <div id=test_slotted> 118 <style> 119 #test_slotted { 120 .anchor { 121 background: skyblue; 122 height: 10px; 123 anchor-name: --a; 124 } 125 .cb { 126 position: relative; 127 width: 50px; 128 height: 50px; 129 border: 1px solid black; 130 } 131 .anchored { 132 background: coral; 133 position: absolute; 134 top: anchor(bottom, 1px); 135 position-anchor: --a; 136 width: 5px; 137 height: 5px; 138 } 139 } 140 </style> 141 <div class=cb> 142 <div class=anchor></div> 143 <div class=host> 144 <template shadowrootmode=open> 145 <style> 146 ::slotted(div) { 147 anchor-scope: --a; 148 } 149 </style> 150 <slot></slot> 151 </template> 152 <div class=anchored></div> 153 </div> 154 </div> 155 <script> 156 test((t) => { 157 let e = document.querySelector('#test_slotted .anchored'); 158 assert_equals(getComputedStyle(e).top, '10px'); 159 }, 'anchor-scope in ::slotted() rule does not affect anchoring outside'); 160 </script> 161 </div> 162 163 <!-- Same as #test_slot, but anchor-scope is specified on :host. --> 164 <hr> 165 <div id=test_host> 166 <style> 167 #test_host { 168 .anchor { 169 background: skyblue; 170 height: 10px; 171 anchor-name: --a; 172 } 173 .cb { 174 position: relative; 175 width: 50px; 176 height: 50px; 177 border: 1px solid black; 178 } 179 .anchored { 180 background: coral; 181 position: absolute; 182 top: anchor(bottom, 1px); 183 position-anchor: --a; 184 width: 5px; 185 height: 5px; 186 } 187 } 188 </style> 189 <div class=cb> 190 <div class=anchor></div> 191 <div class=host> 192 <template shadowrootmode=open> 193 <style> 194 :host { 195 anchor-scope: --a; 196 } 197 </style> 198 <slot></slot> 199 </template> 200 <div class=anchored></div> 201 </div> 202 </div> 203 <script> 204 test((t) => { 205 let e = document.querySelector('#test_host .anchored'); 206 assert_equals(getComputedStyle(e).top, '10px'); 207 }, 'anchor-scope in shadow does not affected slotted-in element (:host)'); 208 </script> 209 </div> 210 211 <!-- Tests that anchor-scope in a ::part() rule *does* affect 212 anchoring of slotted-in elements. --> 213 <hr> 214 <div id=test_part_slotted_in> 215 <style> 216 #test_part_slotted_in { 217 .host::part(scope) { 218 anchor-scope: --a; 219 } 220 .anchor { 221 background: skyblue; 222 height: 10px; 223 anchor-name: --a; 224 } 225 .cb { 226 position: relative; 227 width: 50px; 228 height: 50px; 229 border: 1px solid black; 230 } 231 .anchored { 232 background: coral; 233 position: absolute; 234 top: anchor(bottom, 1px); 235 position-anchor: --a; 236 width: 5px; 237 height: 5px; 238 } 239 } 240 </style> 241 <div class=cb> 242 <div class=anchor></div> 243 <div class=host> 244 <template shadowrootmode=open> 245 <div part=scope> 246 <slot></slot> 247 </div> 248 </template> 249 <div class=anchored></div> 250 </div> 251 </div> 252 <script> 253 test((t) => { 254 let e = document.querySelector('#test_part_slotted_in .anchored'); 255 assert_equals(getComputedStyle(e).top, '1px'); // anchor() fallback 256 }, 'anchor-scope in ::part() affects slotted-in element'); 257 </script> 258 </div>