LayoutTests/fast/html/tab-order.html

   1 <html>
   2 <head>
   3     <script>
   4         function log(msg)
   5         {
   6             document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
   7         }
   8
   9         function description(element)
  10         {
  11             if (element.tagName && element.tagName.match(/input/i)) {
  12                 return '<input value="' + element.value + '" tabindex="' + element.tabIndex + '">';
  13             } else {
  14                 return element.toString();
  15             }
  16         }
  17
  18         function dispatchTabPress(element, shiftKey)
  19         {
  20             var event = document.createEvent('KeyboardEvents');
  21             var tabKeyIdentifier = 'U+0009';
  22             event.initKeyboardEvent('keydown', true, true, document.defaultView, tabKeyIdentifier, 0, false, false, shiftKey, false, false);
  23             element.dispatchEvent(event);
  24         }
  25
  26         var lastFocusedElement = null;
  27         function focusListener(event)
  28         {
  29             log('<input value="' + event.target.value + '" tabindex="' + event.target.tabIndex + '"> focused');
  30             lastFocusedElement = event.target;
  31         }
  32
  33         function addEventListenersToInputs(inputs)
  34         {
  35             for (var i = 0; i < inputs.length; ++i) {
  36                 inputs[i].addEventListener('focus', focusListener, false);
  37             }
  38         }
  39
  40         function test()
  41         {
  42             if (window.layoutTestController) {
  43                 layoutTestController.dumpAsText();
  44             }
  45
  46             var inputs = document.getElementsByTagName('input');
  47
  48             // Put focus in the page
  49             inputs[0].focus();
  50             inputs[0].blur();
  51
  52             addEventListenersToInputs(inputs);
  53
  54             log('Tabbing forward....\n');
  55             for (var i = 0; i < inputs.length; ++i) {
  56                 if (inputs[i].tabIndex >= 0)
  57                     dispatchTabPress(document, false);
  58             }
  59
  60             lastFocusedElement.blur();
  61
  62             log('\nTabbing backward....\n');
  63             for (var i = 0; i < inputs.length; ++i) {
  64                 if (inputs[i].tabIndex >= 0)
  65                     dispatchTabPress(document, true);
  66             }
  67
  68             log('\nTest finished\n');
  69         }
  70     </script>
  71 </head>
  72 <body onload="test()">
  73     <p>This page tests that the <a href="http://www.w3.org/TR/html4/interact/forms.html#h-17.11.1" title="HTML4 tabbing order spec">HTML4 tabbing order</a> is respected properly.</p>
  74     <p>To test, put focus in &quot;a&quot;. Pressing Tab should focus &quot;a&quot; through &quot;k&quot; in order, and pressing Shift-Tab should reverse the order.</p>
  75
  76     <input tabindex="6" value="g"><br>
  77     <input tabindex="1" value="a"><br>
  78     <input tabindex="-5" value="not in tab order (negative tabindex)"><br>
  79     <input tabindex="1" value="b"><br>
  80     <input tabindex="0" value="i"><br>
  81     <input tabindex="6" value="h"><br>
  82     <input tabindex="1" value="c"><br>
  83     <input tabindex="1" value="d"><br>
  84     <input tabindex="0" value="j"><br>
  85     <input tabindex="-1" value="not in tab order (negative tabindex)"><br>
  86     <input tabindex="0" value="k"><br>
  87     <input tabindex="4" value="f"><br>
  88     <input tabindex="3" value="e"><br>
  89
  90     <pre id="log"></pre>
  91 </body>
  92 </html>
  93