scope-import-scope-pseudo.tentative.html (1027B)
1 <!DOCTYPE html> 2 <title>@import scope(), :scope rules in imported stylesheet</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=y>Inside</div> 12 <div> 13 <div class=y>Inside, but should not match</div> 14 </div> 15 </div> 16 <div class=y>Outside</div> 17 </main> 18 <script> 19 test(() => { 20 let inside = main.querySelector('.scope > .y'); 21 assert_equals(getComputedStyle(inside).getPropertyValue('--y'), '1'); 22 23 let inside_no_match = main.querySelector('.scope > div > .y'); 24 assert_equals(getComputedStyle(inside_no_match).getPropertyValue('--y'), ''); 25 26 let outside = main.querySelector('#main > .y'); 27 assert_equals(getComputedStyle(outside).getPropertyValue('--y'), ''); 28 }, 'The :scope pseudo-class works in imported stylesheets'); 29 </script>