focus-pseudo-on-shadow-host-2.html (1018B)
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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 10 </head> 11 <body> 12 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 13 <div id="host"><span>FAIL</span></div> 14 <style> 15 #host { background: green; width: 100px; height: 100px; } 16 #host span { background: red; font: 10px/1 Ahem; } 17 #host:focus span { background: green; color: green; } 18 </style> 19 <script> 20 21 const shadowRoot = host.attachShadow({mode: 'closed'}); 22 shadowRoot.innerHTML = '<div tabindex="0" style="outline: none;"><slot></slot></div>'; 23 shadowRoot.firstChild.focus(); 24 25 </script> 26 </body> 27 </html>