blob: 44e17ca495bd762f998a1d0fe8e2146036db0f47 [file] [log] [blame]
<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 &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>
<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>