scope-import-inner-scope.tentative.html (969B)
1 <!DOCTYPE html> 2 <title>@import scope(), :scope rules in imported stylesheet</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> 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=inner-scope> 12 <div class=z>Inside</div> 13 </div> 14 </div> 15 <div class=inner-scope> 16 <div class=z>Outside</div> 17 </div> 18 </main> 19 <script> 20 test(() => { 21 let e = main.querySelector('.scope > .inner-scope > .z'); 22 assert_equals(getComputedStyle(e).getPropertyValue('--z'), '1'); 23 }, '@scope within scope-imported stylesheet matches'); 24 25 test(() => { 26 let e = main.querySelector('#main > .inner-scope > .z'); 27 assert_equals(getComputedStyle(e).getPropertyValue('--z'), ''); 28 }, '@scope within scope-imported does not ignore import scope'); 29 </script>