scope-implicit-external.html (2023B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>@scope - implicit scope root (external sheet)</title> 5 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <div class="a outside"></div> 11 <div id=main></div> 12 <div class="a outside"></div> 13 14 <template id=templateLink> 15 <div id=root> 16 <link id=importElement rel="stylesheet" href="resources/scope.css"> 17 <div class=a></div> 18 </div> 19 </template> 20 21 <template id=templateImport> 22 <div id=root> 23 <style id="importElement"> 24 @import url("resources/scope.css"); 25 </style> 26 <div class=a></div> 27 </div> 28 </template> 29 30 <script> 31 function test_external(template_element, description) { 32 promise_test(async t => { 33 t.add_cleanup(() => main.replaceChildren()); 34 const cloned = template_element.content.cloneNode(true); 35 const importElement = cloned.querySelector('#importElement'); 36 const p = new Promise((resolve, reject) => importElement.addEventListener('load', () => { 37 try { 38 assert_equals(getComputedStyle(root).zIndex, '1'); 39 assert_equals(getComputedStyle(document.querySelector('#root > .a')).zIndex, '2'); 40 let outside = document.querySelectorAll('.outside'); 41 assert_equals(outside.length, 2); 42 for (let div of outside) { 43 assert_equals(getComputedStyle(div).zIndex, 'auto'); 44 } 45 resolve(); 46 } catch(e) { 47 reject(e); 48 } 49 })); 50 main.append(cloned); 51 return p; 52 }, description); 53 } 54 55 test_external(templateLink, '@scope with external stylesheet through link element'); 56 test_external(templateImport, '@scope with external stylesheet through @import'); 57 </script> 58 </body> 59 </html>