dialog-focus-previous-outside.html (2576B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/8904"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <button id=b1>button 1</button> 8 <button id=b2>button 2</button> 9 <div id=host> 10 <template shadowrootmode=open> 11 <button>button in shadowroot outside dialog</button> 12 </template> 13 </div> 14 <dialog id=mydialog> 15 <button id=b3>button in dialog</button> 16 <div id=dialoghost> 17 <template shadowrootmode=open> 18 <button>button in shadowroot in dialog</button> 19 </template> 20 </div> 21 </dialog> 22 23 <div id=host2> 24 <template shadowrootmode=open> 25 <dialog> 26 <slot></slot> 27 </dialog> 28 </template> 29 <button id=host2button>button</button> 30 </div> 31 32 <dialog id=mydialog2>hello world</dialog> 33 34 <script> 35 test(() => { 36 b1.focus(); 37 mydialog.show(); 38 b2.focus(); 39 mydialog.close(); 40 assert_equals(document.activeElement, b2); 41 }, 'Focus should not be restored if the currently focused element is not inside the dialog.'); 42 43 test(() => { 44 const shadowbutton = host.shadowRoot.querySelector('button'); 45 b2.focus(); 46 mydialog.show(); 47 shadowbutton.focus(); 48 mydialog.close(); 49 assert_equals(document.activeElement, host, 'document.activeElement should point at the shadow host.'); 50 assert_equals(host.shadowRoot.activeElement, shadowbutton, 'The button in the shadowroot should remain focused.'); 51 }, 'Focus restore should not occur when the focused element is in a shadowroot outside of the dialog.'); 52 53 test(() => { 54 const shadowbutton = dialoghost.shadowRoot.querySelector('button'); 55 b2.focus(); 56 mydialog.show(); 57 shadowbutton.focus(); 58 mydialog.close(); 59 assert_equals(document.activeElement, b2); 60 }, 'Focus restore should occur when the focused element is in a shadowroot inside the dialog.'); 61 62 test(() => { 63 const dialog = host2.shadowRoot.querySelector('dialog'); 64 b2.focus(); 65 dialog.show(); 66 host2button.focus(); 67 dialog.close(); 68 assert_equals(document.activeElement, b2); 69 }, 'Focus restore should occur when the focused element is slotted into a dialog.'); 70 71 test(() => { 72 b1.focus(); 73 const dialog = document.getElementById('mydialog2'); 74 dialog.showModal(); 75 dialog.blur(); 76 assert_equals(document.activeElement, document.body, 77 'Focus should return to the body when calling dialog.blur().'); 78 dialog.close(); 79 assert_equals(document.activeElement, b1, 80 'Focus should be restored to the previously focused element.'); 81 }, 'Focus restore should always occur for modal dialogs.'); 82 </script>