testing/web-platform/tests/css/selectors/focus-within-shadow-004.html

   1 <!DOCTYPE html>
   2 <html lang=en class="reftest-wait">
   3 <meta charset="utf-8">
   4 <title>Selectors Level 4: focus-within with shadow DOM</title>
   5 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
   6 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
   7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
   8 <link rel="match" href="focus-within-shadow-001-ref.html">
   9 <meta name="flags" content="dom">
  10 <meta name="assert" content="Test that :focus-within applies to an ancestor of a shadow host containing a focused element.">
  11 <style>
  12 #target:focus-within {
  13   border: solid 15px green;
  14 }
  15 </style>
  16 <body>
  17 <p>Test passes if there is a green rectangle below.</p>
  18 <div id="target">
  19   <div>
  20     <div>
  21       <div>
  22         <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
  23       </div>
  24     </div>
  25   </div>
  26 </div>
  27
  28 <template id="shadow-template">
  29 <style>
  30 /* Suppress things that cannot be reproduced in the reference file */
  31 :focus {
  32   outline: none;
  33 }
  34 </style>
  35 <div id="focusme" tabindex="1"></div>
  36 </template>
  37
  38 <script>
  39 var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
  40 var template = document.getElementById('shadow-template');
  41 var instance = document.importNode(template.content, true);
  42 shadow.appendChild(instance);
  43 var focusme = shadow.getElementById('focusme');
  44 focusme.focus();
  45 document.documentElement.classList.remove('reftest-wait');
  46 </script>
  47 </body>
  48 </html>