dialog-autofocus.html (2337B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="./resources/common.js"></script> 9 <script> 10 promise_test(() => { 11 return waitUntilLoadedAndAutofocused().then(() => { 12 assert_equals(document.activeElement, document.getElementById("outer-button")); 13 14 var dialog = document.getElementById('dialog'); 15 dialog.showModal(); 16 17 autofocusButton = document.getElementById('autofocus-button'); 18 assert_equals(document.activeElement, autofocusButton); 19 20 anotherButton = document.getElementById('another-button'); 21 anotherButton.focus(); 22 assert_equals(document.activeElement, anotherButton); 23 24 // Test that recreating layout does not give focus back to a previously autofocused element. 25 autofocusButton.style.display = 'none'; 26 document.body.offsetHeight; 27 autofocusButton.style.display = 'block'; 28 document.body.offsetHeight; 29 assert_equals(document.activeElement, anotherButton); 30 31 // Test that reinserting does not give focus back to a previously autofocused element. 32 var parentNode = autofocusButton.parentNode; 33 parentNode.removeChild(autofocusButton); 34 document.body.offsetHeight; 35 parentNode.appendChild(autofocusButton); 36 document.body.offsetHeight; 37 assert_equals(document.activeElement, anotherButton); 38 39 dialog.close(); 40 // Test that dialog focusing steps run when a dialog is reopened. 41 dialog.showModal(); 42 assert_equals(document.activeElement, autofocusButton); 43 dialog.close(); 44 }); 45 }, "autofocus when a modal dialog is opened"); 46 </script> 47 </head> 48 <body> 49 <button id="outer-button" autofocus></button> 50 <dialog id="dialog"> 51 <button></button> 52 <!-- Unfocusable elements with [autofocus] should be ignored. --> 53 <input autofocus disabled> 54 <textarea autofocus hidden></textarea> 55 <dialog> 56 <button autofocus></button> 57 </dialog> 58 <div> 59 <span> 60 <button id="autofocus-button" autofocus></button> 61 </span> 62 </div> 63 <button id="another-button" autofocus></button> 64 </dialog> 65 66 </body> 67 </html>