third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/dialog-autofocus.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 autofocus when a modal dialog is opened.');
   8
   9 function test() {
  10     shouldBe('document.activeElement', 'document.getElementById("outer-button")');
  11
  12     var dialog = document.getElementById('dialog');
  13     dialog.showModal();
  14
  15     autofocusButton = document.getElementById('autofocus-button');
  16     shouldBe('document.activeElement', 'autofocusButton');
  17
  18     anotherButton = document.getElementById('another-button');
  19     anotherButton.focus();
  20     shouldBe('document.activeElement', 'anotherButton');
  21
  22     debug('Test that reattaching does not give focus back to a previously autofocused element.');
  23     autofocusButton.style.display = 'none';
  24     document.body.offsetHeight;
  25     autofocusButton.style.display = 'block';
  26     document.body.offsetHeight;
  27     shouldBe('document.activeElement', 'anotherButton');
  28
  29     debug('Test that reinserting does not give focus back to a previously autofocused element.');
  30     var parentNode = autofocusButton.parentNode;
  31     parentNode.removeChild(autofocusButton);
  32     document.body.offsetHeight;
  33     parentNode.appendChild(autofocusButton);
  34     document.body.offsetHeight;
  35     shouldBe('document.activeElement', 'anotherButton');
  36
  37     dialog.close();
  38     debug('Test that autofocus runs again when a dialog is reopened.');
  39     dialog.showModal();
  40     shouldBe('document.activeElement', 'autofocusButton');
  41     dialog.close();
  42
  43     finishJSTest();
  44 }
  45
  46 jsTestIsAsync = true;
  47 waitUntilLoadedAndAutofocused(test);
  48 </script>
  49 </head>
  50 <body>
  51 <button id="outer-button" autofocus></button>
  52 <dialog id="dialog">
  53     <button></button>
  54     <dialog>
  55         <button autofocus></button>
  56     </dialog>
  57     <div>
  58         <span>
  59             <button id="autofocus-button" autofocus></button>
  60         </span>
  61     </div>
  62     <button id="another-button" autofocus></button>
  63 </dialog>
  64 </body>
  65 </html>