focus-within-removal.html (1747B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Removing an element from its own focus() call doesn't leave stale :focus-within state</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1996182"> 6 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 7 <link rel="author" href="https://mozilla.com" title="Mozilla"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <div id="root"> 11 <div id="container" tabindex="-1"> 12 <input type="text"> 13 </div> 14 </div> 15 <script> 16 onload = function() { 17 test(function() { 18 let root = document.getElementById("root"); 19 let container = document.getElementById("container"); 20 let input = document.querySelector("input"); 21 22 input.focus(); 23 assert_equals(document.activeElement, input, "activeElement after focus"); 24 assert_true(container.matches(":focus-within"), "container matches :focus-within"); 25 assert_true(root.matches(":focus-within"), "root also matches :focus-within"); 26 // This fires from within the next focus() call 27 input.addEventListener("focusout", () => { root.innerHTML = "" }); 28 // container is focusable, but gets removed before we get a chance at focusing it. 29 container.focus(); 30 assert_equals(document.activeElement, document.body, "activeElement after trying to focus sibling"); 31 assert_equals(container.parentNode, null, "container should get removed"); 32 assert_false(container.matches(":focus-within"), "container no longer matches :focus-within"); 33 assert_false(root.matches(":focus-within"), "root no longer matches :focus-within"); 34 }); 35 } 36 </script>