scope-deep.html (1372B)
1 <!DOCTYPE html> 2 <title>@scope - deeply nested</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 main * { background-color: black; } 8 </style> 9 <main id=main></main> 10 <script> 11 12 // @scope (.s0) { @scope (.s1) { ... span {} ... } } 13 function createStyleSheet(length, i) { 14 if (length == 0) 15 return 'span { background-color: green; }'; 16 if (i === undefined) 17 i = 0; 18 return ` 19 @scope (.s${i}) { 20 ${createStyleSheet(length - 1, i + 1)} 21 } 22 `.trim(); 23 } 24 25 // <div class=s0><div class=s1>...<span></span>...</div></div> 26 function createElementChain(length, i) { 27 if (length < 1) 28 throw 'Invalid length'; 29 if (i === undefined) 30 i = 0; 31 let e = document.createElement('div'); 32 e.classList.add(`s${i}`); 33 if (length > 1) 34 e.append(createElementChain(length - 1, i + 1)); 35 else 36 e.append(document.createElement('span')); 37 return e; 38 } 39 40 const COUNT = 90; 41 42 let style_node = document.createElement('style'); 43 style_node.textContent = createStyleSheet(COUNT); 44 main.append(style_node); 45 46 main.append(createElementChain(COUNT)); 47 48 test(() => { 49 for (let span of main.querySelectorAll('span')) 50 assert_equals(getComputedStyle(span).backgroundColor, 'rgb(0, 128, 0)'); 51 }, 'Deep @scope nesting'); 52 </script>