third_party/WebKit/LayoutTests/svg/custom/tabindex-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(/rect/i)) {
  12                 return '<rect id="' + element.id + '" 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('<rect id="' + event.target.id + '" tabindex="' + event.target.tabIndex + '"> focused');
  30             lastFocusedElement = event.target;
  31         }
  32
  33         function addEventListenersToRects(rects)
  34         {
  35             for (var i = 0; i < rects.length; ++i) {
  36                 rects[i].addEventListener('focus', focusListener, false);
  37             }
  38         }
  39
  40         function test()
  41         {
  42             if (window.testRunner) {
  43                 testRunner.dumpAsText();
  44             }
  45
  46             var rects = document.getElementsByTagName('rect');
  47
  48             // Put focus in the page
  49             rects[0].focus();
  50             rects[0].blur();
  51
  52             addEventListenersToRects(rects);
  53
  54             log('Tabbing forward....\n');
  55             for (var i = 0; i < rects.length; ++i) {
  56                 if (rects[i].tabIndex >= 0)
  57                     dispatchTabPress(document, false);
  58             }
  59
  60             lastFocusedElement.blur();
  61
  62             log('\nTabbing backward....\n');
  63             for (var i = 0; i < rects.length; ++i) {
  64                 if (rects[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 SVG tabbing order 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         <svg>
  76                 <rect tabindex="6" id="g" width="1" height="1"/>
  77                 <rect tabindex="1" id="a" width="1" height="1"/>
  78                 <rect tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/>
  79                 <rect tabindex="1" id="b" width="1" height="1"/>
  80                 <rect tabindex="0" id="i" width="1" height="1"/>
  81                 <rect tabindex="6" id="h" width="1" height="1"/>
  82                 <rect tabindex="1" id="c" width="1" height="1"/>
  83                 <rect tabindex="1" id="d" width="1" height="1"/>
  84                 <rect tabindex="0" id="j" width="1" height="1"/>
  85                 <rect tabindex="-1" id="not in tab order (negative tabindex)" width="1" height="1"/>
  86                 <rect tabindex="0" id="k" width="1" height="1"/>
  87                 <rect tabindex="4" id="f" width="1" height="1"/>
  88                 <rect tabindex="3" id="e" width="1" height="1"/>
  89     </svg>
  90
  91     <pre id="log"></pre>
  92 </body>
  93 </html>
  94