scope-pseudo-in-shadow.html (844B)
1 <!DOCTYPE html> 2 <title>:scope pseudo does not match in shadow root</title> 3 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#host-element-in-tree"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11188"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="host"></div> 8 <script> 9 test(() => { 10 host.attachShadow({mode: 'open'}).innerHTML = ` 11 <style> 12 div { 13 background-color: green; 14 } 15 :scope div { 16 background-color: red; 17 } 18 :scope > div { 19 background-color: red; 20 } 21 </style> 22 <div>Test</div> 23 `; 24 let div = host.shadowRoot.querySelector('div'); 25 assert_equals(getComputedStyle(div).backgroundColor, 'rgb(0, 128, 0)'); 26 }, ':scope does not match in shadow root'); 27 </script>