focus-within-003.html (1336B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Selectors Level 4: focus-within</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-001-ref.html"> 9 <meta name="assert" content="Test that :focus-within applies to ancestors of an element with tabindex where :focus applies."> 10 <style> 11 /* Suppress things that cannot be reproduced in the reference file */ 12 :focus { 13 outline: none; 14 } 15 16 /* Use blue to indicate that the user needs to pay attention. 17 This element needs to be focused for the test to make sense. */ 18 #focusme:not(:focus) { 19 border: solid 15px blue; 20 } 21 22 #target:focus-within { 23 border: solid 15px green; 24 } 25 </style> 26 <p>Test passes if, when the element below is focused, 27 it is surrounded by a thick green border. 28 There must be no red or blue once it is focused.</p> 29 <div id="target"> 30 <div> 31 <div> 32 <div> 33 <div id="focusme" tabindex="1">Focus this element</div> 34 </div> 35 </div> 36 </div> 37 </div> 38 <script> 39 var focusme = document.getElementById('focusme'); 40 focusme.focus(); 41 document.documentElement.classList.remove('reftest-wait'); 42 </script> 43 </html>