focus-within-focus-move.html (1638B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Moving focus 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="wrapper"> 11 <div id="outer"> 12 <input id="tab"> 13 <input id="input" onblur="outside.focus()"> 14 </div> 15 <input id="outside"> 16 </div> 17 <script> 18 onload = function() { 19 test(function() { 20 let wrapper = document.getElementById("wrapper"); 21 let outer = document.getElementById("outer"); 22 let tab = document.getElementById("tab"); 23 let input = document.getElementById("input"); 24 let outside = document.getElementById("outside"); 25 26 input.focus(); 27 assert_equals(document.activeElement, input, "activeElement after focus"); 28 assert_true(outer.matches(":focus-within"), "outer matches :focus-within"); 29 assert_true(wrapper.matches(":focus-within"), "wrapper matches :focus-within"); 30 // This ends up shifting to `outside` rather than `tab`. 31 tab.focus(); 32 assert_equals(document.activeElement, outside, "activeElement after trying to focus sibling"); 33 assert_true(wrapper.matches(":focus-within"), "wrapper still matches :focus-within"); 34 assert_false(outer.matches(":focus-within"), "outer no longer matches :focus-within"); 35 }); 36 } 37 </script>