| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script src="../../../resources/js-test.js"></script> | |
| 5 <script src="../../forms/resources/common.js"></script> | |
| 6 <script> | |
| 7 description('Tests focus when a modal dialog is opened.'); | |
| 8 | |
| 9 function test() | |
| 10 { | |
| 11 outerButton = document.getElementById('outer-button'); | |
| 12 shouldBe('document.activeElement', 'outerButton'); | |
| 13 | |
| 14 debug('Test that focus goes to body if the dialog has no focusable elements,
including itself'); | |
| 15 var outerDialog = document.getElementById('outer-dialog'); | |
| 16 outerDialog.showModal(); | |
| 17 shouldBe('document.activeElement', 'document.body'); | |
| 18 | |
| 19 debug('Test that an autofocus element in the dialog gets focus.'); | |
| 20 var dialog = document.getElementById('dialog'); | |
| 21 dialog.showModal(); | |
| 22 autofocusButton = document.getElementById('autofocus-button'); | |
| 23 shouldBe('document.activeElement', 'autofocusButton'); | |
| 24 dialog.close(); | |
| 25 | |
| 26 debug('... or else first focusable element in the dialog gets focus.'); | |
| 27 autofocusButton.parentNode.removeChild(autofocusButton); | |
| 28 dialog.showModal(); | |
| 29 firstButton = document.getElementById('first-button'); | |
| 30 shouldBe('document.activeElement', 'firstButton'); | |
| 31 dialog.close(); | |
| 32 | |
| 33 debug('... or else the dialog itself gets focus.'); | |
| 34 var buttons = dialog.querySelectorAll('button'); | |
| 35 for (var i = 0; i < buttons.length; ++i) | |
| 36 buttons[i].hidden = true; | |
| 37 dialog.showModal(); | |
| 38 shouldBe('document.activeElement', 'dialog'); | |
| 39 dialog.close(); | |
| 40 | |
| 41 document.getElementById('outer-dialog').close(); | |
| 42 finishJSTest(); | |
| 43 } | |
| 44 | |
| 45 jsTestIsAsync = true; | |
| 46 waitUntilLoadedAndAutofocused(test); | |
| 47 </script> | |
| 48 </head> | |
| 49 <body> | |
| 50 <button id="outer-button" autofocus></button> | |
| 51 <dialog id="outer-dialog"> | |
| 52 <dialog id="dialog" tabindex=0> | |
| 53 <button disabled></button> | |
| 54 <dialog> | |
| 55 <button autofocus></button> | |
| 56 </dialog> | |
| 57 <button id="first-button"></button> | |
| 58 <div> | |
| 59 <span> | |
| 60 <button id="autofocus-button" autofocus></button> | |
| 61 </span> | |
| 62 </div> | |
| 63 <button id="final-button"></button> | |
| 64 </dialog> | |
| 65 </dialog> | |
| 66 </body> | |
| 67 </html> | |
| OLD | NEW |