focus-in-focusin-event-001.html (1969B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Selectors Level 4: :focus, :focus-visible and :focus-within in focusin event</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-pseudo"> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-visible-pseudo"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> 7 <link rel="help" href="https://w3c.github.io/uievents/#event-type-focusin"> 8 <meta name='author' title='Manuel Rego Casasnovas' href='mailto:rego@igalia.com'> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <input type="text"> 12 <script> 13 var input = document.querySelector('input'); 14 input.addEventListener('focusin', function(e) { 15 test(() => { 16 try { 17 var focusPseudo = document.querySelector(':focus'); 18 assert_equals(e.target, focusPseudo, "':focus' matches event.target"); 19 } catch (error) { 20 assert_unreached("':focus' is an invalid selector. SyntaxError: " + error); 21 } 22 }, "Checks that ':focus' pseudo-class matches inside 'focusin' event handler"); 23 test(() => { 24 try { 25 var focusVisiblePseudo = document.querySelector(':focus-visible'); 26 assert_equals(e.target, focusVisiblePseudo, "':focus-visible' matches event.target"); 27 } catch (error) { 28 assert_unreached("':focus-visible' is an invalid selector. SyntaxError: " + error); 29 } 30 }, "Checks that ':focus-visible' pseudo-class matches inside 'focusin' event handler"); 31 test(() => { 32 try { 33 var focusWithinPseudo = document.querySelector(':focus-within'); 34 assert_equals(document.documentElement, focusWithinPseudo, "':focus-within' matches document.documentElement"); 35 } catch (error) { 36 assert_unreached("':focus-within' is an invalid selector. SyntaxError: " + error); 37 } 38 }, "Checks that ':focus-within' pseudo-class matches inside 'focusin' event handler"); 39 }, false); 40 input.focus(); 41 </script>