94 lines
3.1 KiB
HTML
94 lines
3.1 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
function log(msg)
|
|
{
|
|
document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
|
|
}
|
|
|
|
function description(element)
|
|
{
|
|
if (element.tagName && element.tagName.match(/input/i)) {
|
|
return '<input value="' + element.value + '" tabindex="' + element.tabIndex + '">';
|
|
} else {
|
|
return element.toString();
|
|
}
|
|
}
|
|
|
|
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('<input value="' + event.target.value + '" tabindex="' + event.target.tabIndex + '"> focused');
|
|
lastFocusedElement = event.target;
|
|
}
|
|
|
|
function addEventListenersToInputs(inputs)
|
|
{
|
|
for (var i = 0; i < inputs.length; ++i) {
|
|
inputs[i].addEventListener('focus', focusListener, false);
|
|
}
|
|
}
|
|
|
|
function test()
|
|
{
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
}
|
|
|
|
var inputs = document.getElementsByTagName('input');
|
|
|
|
// Put focus in the page
|
|
inputs[0].focus();
|
|
inputs[0].blur();
|
|
|
|
addEventListenersToInputs(inputs);
|
|
|
|
log('Tabbing forward....\n');
|
|
for (var i = 0; i < inputs.length; ++i) {
|
|
if (inputs[i].tabIndex >= 0)
|
|
dispatchTabPress(document, false);
|
|
}
|
|
|
|
lastFocusedElement.blur();
|
|
|
|
log('\nTabbing backward....\n');
|
|
for (var i = 0; i < inputs.length; ++i) {
|
|
if (inputs[i].tabIndex >= 0)
|
|
dispatchTabPress(document, true);
|
|
}
|
|
|
|
log('\nTest finished\n');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="test()">
|
|
<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>
|
|
<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>
|
|
|
|
<input tabindex="6" value="g"><br>
|
|
<input tabindex="1" value="a"><br>
|
|
<input tabindex="-5" value="not in tab order (negative tabindex)"><br>
|
|
<input tabindex="1" value="b"><br>
|
|
<input tabindex="0" value="i"><br>
|
|
<input tabindex="6" value="h"><br>
|
|
<input tabindex="1" value="c"><br>
|
|
<input tabindex="1" value="d"><br>
|
|
<input tabindex="0" value="j"><br>
|
|
<input tabindex="-1" value="not in tab order (negative tabindex)"><br>
|
|
<input tabindex="0" value="k"><br>
|
|
<input tabindex="4" value="f"><br>
|
|
<input tabindex="3" value="e"><br>
|
|
|
|
<pre id="log"></pre>
|
|
</body>
|
|
</html>
|
|
|