| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../fast/forms/resources/common.js"></script> |
| <script> |
| description('Tests focus when a modal dialog is opened.'); |
| |
| function test() |
| { |
| outerButton = document.getElementById('outer-button'); |
| shouldBe('document.activeElement', 'outerButton'); |
| |
| debug('Test that focus goes to body if the dialog has no focusable elements, including itself'); |
| var outerDialog = document.getElementById('outer-dialog'); |
| outerDialog.showModal(); |
| shouldBe('document.activeElement', 'document.body'); |
| |
| debug('Test that an autofocus element in the dialog gets focus.'); |
| var dialog = document.getElementById('dialog'); |
| dialog.showModal(); |
| autofocusButton = document.getElementById('autofocus-button'); |
| shouldBe('document.activeElement', 'autofocusButton'); |
| dialog.close(); |
| |
| debug('... or else first focusable element in the dialog gets focus.'); |
| autofocusButton.parentNode.removeChild(autofocusButton); |
| dialog.showModal(); |
| firstButton = document.getElementById('first-button'); |
| shouldBe('document.activeElement', 'firstButton'); |
| dialog.close(); |
| |
| debug('... or else the dialog itself gets focus.'); |
| var buttons = dialog.querySelectorAll('button'); |
| for (var i = 0; i < buttons.length; ++i) |
| buttons[i].hidden = true; |
| dialog.showModal(); |
| shouldBe('document.activeElement', 'dialog'); |
| dialog.close(); |
| |
| document.getElementById('outer-dialog').close(); |
| finishJSTest(); |
| } |
| |
| jsTestIsAsync = true; |
| waitUntilLoadedAndAutofocused(test); |
| </script> |
| </head> |
| <body> |
| <button id="outer-button" autofocus></button> |
| <dialog id="outer-dialog"> |
| <dialog id="dialog" tabindex=0> |
| <button disabled></button> |
| <dialog> |
| <button autofocus></button> |
| </dialog> |
| <button id="first-button"></button> |
| <div> |
| <span> |
| <button id="autofocus-button" autofocus></button> |
| </span> |
| </div> |
| <button id="final-button"></button> |
| </dialog> |
| </dialog> |
| </body> |
| </html> |
