focus-pseudo-on-shadow-host-1.html (853B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 5 <meta name="assert" content=":focus should match a shadow host which contains the focused element"> 6 <link rel="help" href="https://html.spec.whatwg.org/#element-has-the-focus"> 7 <link rel="help=" href="https://bugs.webkit.org/show_bug.cgi?id=202432"> 8 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 9 </head> 10 <body> 11 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 12 <div id="host"></div> 13 <style> 14 #host { background: red; width: 100px; height: 100px; } 15 #host:focus { background: green; } 16 </style> 17 <script> 18 19 const shadowRoot = host.attachShadow({mode: 'closed'}); 20 shadowRoot.innerHTML = '<div tabindex="0" style="outline: none;"></div>'; 21 shadowRoot.firstChild.focus(); 22 23 </script> 24 </body> 25 </html>