focus-within-004.html (1616B)
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 elements that are focusable due to contenteditable."> 10 <style> 11 /* Suppress things that cannot be reproduced in the reference file */ 12 :focus { 13 outline: none; 14 15 /* Make the caret invisible 16 since it matches the color of the text, which is transparent, 17 while keeping the text readable thanks to its shadow. 18 Not using the caret-color property as it is too new to be relied on. */ 19 color: transparent; text-shadow: black 0px 0px 0px; 20 } 21 22 /* Use blue to indicate that the user needs to pay attention. 23 This element needs to be focused for the test to make sense. */ 24 #focusme:not(:focus) { 25 border: solid 15px blue; 26 } 27 28 :focus { 29 border: solid 5px red; 30 } 31 div:focus-within, #focusme:focus-within { 32 border: solid 5px green; 33 } 34 </style> 35 <p>Test passes if, when the element below is focused, 36 it is surrounded by a thick green border. 37 There must be no red or blue once it is focused.</p> 38 <div> 39 <div> 40 <div id="focusme" contentEditable="true">Focus this element</div> 41 </div> 42 </div> 43 <script> 44 var focusme = document.getElementById('focusme'); 45 focusme.focus(); 46 document.documentElement.classList.remove('reftest-wait'); 47 </script> 48 </html>