interaction-with-nested-pseudo-class.html (947B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Shadow Parts - Nested Pseudo Classes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts" > 5 <link rel="help" href="https://drafts.csswg.org/selectors/#matches"> 6 <link href="https://drafts.csswg.org/selectors/#matches" rel="help"> 7 <link rel="match" href="interaction-with-nested-pseudo-class-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <style> 12 :root { color: red; } 13 ::part(test):is(:focus) { color: green; } 14 </style> 15 <div id=host></div> 16 <script> 17 const root = host.attachShadow({mode: 'closed'}); 18 root.innerHTML = '<button part=test>Should be green on focus</button>'; 19 const button = root.querySelector('button'); 20 button.addEventListener('focus', takeScreenshot); 21 test_driver.bless('focus button', () => button.focus()); 22 </script> 23 </html>