focus-within-005.html (1401B)
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 works on links."> 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 /* Make the link look like the div in the reference file */ 23 #focusme { 24 display: block; 25 text-decoration: none; 26 color: currentColor; 27 } 28 29 :focus { 30 border: solid 5px red; 31 } 32 div:focus-within, #focusme:focus-within { 33 border: solid 5px green; 34 } 35 </style> 36 <p>Test passes if, when the element below is focused, 37 it is surrounded by a thick green border. 38 There must be no red or blue once it is focused.</p> 39 <div> 40 <div> 41 <a id="focusme" href="">Focus this element</a> 42 </div> 43 </div> 44 <script> 45 var focusme = document.getElementById('focusme'); 46 focusme.focus(); 47 document.documentElement.classList.remove('reftest-wait'); 48 </script> 49 </html>