third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body id="body" tabindex="1">
   7 <dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
   8 <dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
   9 <div id="container">
  10     <input id="text" type="text">
  11     <input id="datetime" type="datetime">
  12     <input id="color" type="color">
  13     <select id="select">
  14         <optgroup id="optgroup">
  15             <option id="option">Option</option>
  16         </optgroup>
  17     </select>
  18     <div id="contenteditable-div" contenteditable>I'm editable</div>
  19     <span id="tabindex-span" tabindex="0">I'm tabindexed.</div>
  20     <embed id="embed" type="application/x-webkit-test-netscape" width=100 height=100></embed>
  21     <a id="anchor" href="">Link</a>
  22 </div>
  23 <script>
  24 description('Test that inert nodes are not focusable. The test passses if only the ' +
  25             'topmost dialog and its button are focusable.');
  26
  27 function testFocus(element, expectFocus) {
  28     focusedElement = null;
  29     element.addEventListener('focus', function() { focusedElement = element; }, false);
  30     element.focus();
  31     expected = expectFocus ? "true" : "false"
  32     theElement = element;
  33     shouldBe('"' + element.id + '"; focusedElement === theElement', expected);
  34 }
  35
  36 function testTree(element, expectFocus) {
  37     if (element.nodeType == Node.ELEMENT_NODE)
  38         testFocus(element, expectFocus);
  39     var childNodes = element.childNodes;
  40     for (var i = 0; i < childNodes.length; i++)
  41         testTree(childNodes[i], expectFocus);
  42 }
  43
  44 var bottomDialog = document.getElementById('bottom-dialog');
  45 bottomDialog.showModal();
  46
  47 var topDialog = document.getElementById('top-dialog');
  48 topDialog.showModal();
  49
  50 testFocus(document.body, false);
  51 testTree(topDialog, true);
  52 testTree(bottomDialog, false);
  53 testTree(document.getElementById('container'), false);
  54 </script>
  55 </body>
  56 </html>