focus-preserve.html (3483B)
1 <!DOCTYPE html> 2 <title>moveBefore should not automatically clear focus</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <section id="old_parent"> 7 <button id="button" tabindex="1">Button</button> 8 </section> 9 <section id="new_parent"> 10 </section> 11 <section id="inert_parent" inert> 12 </section> 13 <section id="hidden_parent" hidden> 14 </section> 15 <script> 16 17 function eventually_blurred(t, item, timeout = 1000) { 18 return new Promise((resolve, reject) => { 19 function onblur() { 20 resolve(); 21 item.removeEventListener("blur", onblur); 22 } 23 item.addEventListener("blur", onblur); 24 t.step_timeout(reject, timeout); 25 }); 26 } 27 28 test(t => { 29 const old_parent = document.querySelector("#old_parent"); 30 const button = document.querySelector("#button"); 31 t.add_cleanup(() => old_parent.append(button)); 32 button.focus(); 33 assert_equals(document.activeElement, button); 34 new_parent.moveBefore(button, null); 35 assert_equals(document.activeElement, button); 36 }, "when reparenting an element, don't automatically reset the document focus"); 37 38 promise_test(async t => { 39 const old_parent = document.querySelector("#old_parent"); 40 const button = document.querySelector("#button"); 41 t.add_cleanup(() => old_parent.append(button)); 42 const inert_parent = document.querySelector("#inert_parent"); 43 button.focus(); 44 assert_equals(document.activeElement, button); 45 inert_parent.moveBefore(button, null); 46 47 // The button will still be considered the active element. It will blur asynchronously. 48 assert_equals(document.activeElement, button); 49 await eventually_blurred(t, button); 50 assert_equals(document.activeElement, document.body); 51 }, "when reparenting a focused element into an inert parent, reset the document focus"); 52 53 54 promise_test(async t => { 55 const old_parent = document.querySelector("#old_parent"); 56 const button = document.querySelector("#button"); 57 t.add_cleanup(() => old_parent.append(button)); 58 const hidden_parent = document.querySelector("#hidden_parent"); 59 button.focus(); 60 assert_equals(document.activeElement, button); 61 hidden_parent.moveBefore(button, null); 62 63 // The button will still be considered the active element. It will blur asynchronously. 64 // This is similar to other operations that can cause a blur due to change in inert trees, 65 // e.g. a style change that makes an ancestor `display: none`. 66 assert_equals(document.activeElement, button); 67 await eventually_blurred(t, button); 68 assert_equals(document.activeElement, document.body); 69 }, "when reparenting a focused element into a hidden parent, reset the document focus"); 70 71 promise_test(async t => { 72 const old_parent = document.querySelector("#old_parent"); 73 const button = document.querySelector("#button"); 74 t.add_cleanup(() => document.body.append(old_parent)); 75 const hidden_parent = document.querySelector("#hidden_parent"); 76 button.focus(); 77 assert_equals(document.activeElement, button); 78 hidden_parent.moveBefore(old_parent, null); 79 80 // The button will still be considered the active element. It will blur asynchronously. 81 assert_equals(document.activeElement, button); 82 await eventually_blurred(t, button); 83 assert_equals(document.activeElement, document.body); 84 }, "when reparenting an ancestor of an focused element into a hidden parent, reset the document focus"); 85 </script>