focus-within-001.html (1228B)
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 an element with tabindex when :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 div { 19 border: solid 15px blue; 20 } 21 div:focus { 22 border-color: red; 23 } 24 div:focus-within { 25 border-color: green; 26 } 27 </style> 28 <p>Test passes if, when the element below is focused, 29 it is surrounded by a thick green border. 30 There must be no red or blue once it is focused.</p> 31 <div id="focusme" tabindex="1">Focus this element</div> 32 <script> 33 var focusme = document.getElementById('focusme'); 34 focusme.focus(); 35 document.documentElement.classList.remove('reftest-wait'); 36 </script> 37 </html>