focus-within-002.html (1268B)
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 the parent 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 id="focusme" tabindex="1">Focus this element</div> 31 </div> 32 <script> 33 var focusme = document.getElementById('focusme'); 34 focusme.focus(); 35 document.documentElement.classList.remove('reftest-wait'); 36 </script> 37 </html>