scope-import-parent-pseudo.tentative.html (1145B)
1 <!DOCTYPE html> 2 <title>@import scope(), '&' selectors</title> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7348"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @import url("resources/scope-imported.css") scope((.scope)); 8 </style> 9 <main id=main> 10 <div class=scope> 11 <div class=w>Inside</div> 12 <div class=scope> 13 <div class=w>Inner (W)</div> 14 <div class=u>Inner (U)</div> 15 </div> 16 </div> 17 </main> 18 <script> 19 test(() => { 20 let e = main.querySelector('#main > .scope > .w'); 21 assert_equals(getComputedStyle(e).getPropertyValue('--w'), '1'); 22 }, 'The & selector matches the scoping root'); 23 24 test(() => { 25 let w = main.querySelector('#main > .scope > .scope > .w'); 26 assert_equals(getComputedStyle(w).getPropertyValue('--w'), '1'); 27 // The '& > & > .u' selector should behave like ':scope > :scope > .u' 28 // and therefore never match. 29 let u = main.querySelector('#main > .scope > .scope > .u'); 30 assert_equals(getComputedStyle(u).getPropertyValue('--u'), ''); 31 }, 'The & selector behaves like :scope'); 32 </script>