| <html> |
| <head> |
| <script> |
| function log(msg) |
| { |
| document.getElementById('log').appendChild(document.createTextNode(msg + '\n')); |
| } |
| |
| function dispatchTabPress(element, shiftKey) |
| { |
| var event = document.createEvent('KeyboardEvents'); |
| var tabKeyIdentifier = 'U+0009'; |
| event.initKeyboardEvent('keydown', true, true, document.defaultView, tabKeyIdentifier, 0, false, false, shiftKey, false, false); |
| element.dispatchEvent(event); |
| } |
| |
| var lastFocusedElement = null; |
| function focusListener(event) |
| { |
| log('id: ' + event.target.id + ' tabindex: ' + event.target.tabIndex + ' ' + event.target + ' is focused.'); |
| lastFocusedElement = event.target; |
| } |
| |
| function addEventListenersToRects(rects) |
| { |
| for (var i = 0; i < rects.length; ++i) { |
| rects[i].addEventListener('focus', focusListener, false); |
| } |
| } |
| |
| function test() |
| { |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| } |
| |
| var rects = document.getElementsByClassName('tab'); |
| |
| // Put focus in the page |
| rects[0].focus(); |
| rects[0].blur(); |
| |
| addEventListenersToRects(rects); |
| |
| log('Tabbing forward....\n'); |
| for (var i = 0; i < rects.length; ++i) { |
| if (rects[i].tabIndex >= 0) |
| dispatchTabPress(document, false); |
| } |
| |
| lastFocusedElement.blur(); |
| |
| log('\nTabbing backward....\n'); |
| for (var i = 0; i < rects.length; ++i) { |
| if (rects[i].tabIndex >= 0) |
| dispatchTabPress(document, true); |
| } |
| |
| log('\nTest finished\n'); |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| <p>This page tests that the SVG tabbing order is respected properly.</p> |
| <p>To test, put focus in "a". Pressing Tab should focus "a" through "k" in order, and pressing Shift-Tab should reverse the order.</p> |
| <svg> |
| <rect class="tab" tabindex="6" id="g" width="1" height="1"/> |
| <circle class="tab" tabindex="1" id="a" r="1" cx="0" cy="0"/> |
| <rect class="tab" tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/> |
| <g class="tab" tabindex="1" id="b"/> |
| <svg class="tab" tabindex="0" id="i" width="1" height="1"/> |
| <text class="tab" tabindex="6" id="h" width="1" height="1"/> |
| <ellipse class="tab" tabindex="1" id="c" rx="1" ry="1" cx="0" cy="0"/> |
| <symbol class="tab" tabindex="1" id="symbol is not focusable" width="1" height="1"/> |
| <defs class="tab" tabindex="1" id="defs is not focusable"/> |
| <path class="tab" tabindex="1" id="d" d="M0,0"/> |
| <line class="tab" tabindex="0" id="j" x1="1" x2="1" y1="0" y2="0"/> |
| <rect class="tab" tabindex="-1" id="not in tab order (negative tabindex)" width="1" height="1"/> |
| <polygon class="tab" tabindex="0" id="k" points="1,1 2,2"/> |
| <polyline class="tab" tabindex="4" id="f" points="1,1 2,2"/> |
| <a class="tab" tabindex="3" id="e"><rect width="1" height="1"/></a> |
| </svg> |
| |
| <pre id="log"></pre> |
| </body> |
| </html> |
| |
