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