third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/show-modal-focusing-steps.html

   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>