top-level-is-scope.html (925B)
1 <!doctype html> 2 <title>Top-level & is treated like :scope</title> 3 <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <div id="p"> 9 <div class="match" id="level1"> 10 <div class="match" id="level2"></div> 11 </div> 12 </div> 13 14 <script> 15 test(() => { 16 let matched = []; 17 for (const elem of p.querySelectorAll('& .match')) { 18 matched.push(elem.getAttribute('id')); 19 } 20 assert_array_equals(matched, ['level1', 'level2']); 21 }, '& as direct ancestor'); 22 23 test(() => { 24 let matched = []; 25 for (const elem of p.querySelectorAll('& > .match')) { 26 matched.push(elem.getAttribute('id')); 27 } 28 assert_array_equals(matched, ['level1']); 29 }, '& matches scoped element only, not everything'); 30 </script>