blob: 81ef69460a751e5b4f9d9678a1a2ce0ff686e131 [file] [log] [blame]
<p>This test tabs between lots of elements, printing out the events you see along the way.</p>
<hr>
<div id="testDiv"></div>
<iframe id="testIframe" style="width: 800; height: 125; margin-top: 10px; border: 2px solid black"></iframe>
<pre id="console"></pre>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function log(s)
{
document.getElementById('console').appendChild(document.createTextNode(s));
}
function description(element)
{
var inputType = element.getAttribute('type');
if (inputType)
return inputType;
if (element.toString().match(/iframe/i))
return "IFRAME";
if (element.toString().match(/javascript:/i))
return "ANCHOR";
if (element.toString().match(/textarea/i))
return "TEXTAREA";
if (element.toString().match(/div/i))
return "DIV";
return element.toString();
}
function keydownListener(event)
{
log("keydown event: [to] " + description(event.target) + "\n");
}
function blurListener(event)
{
log("blur event: [to] " + description(event.target) + "\n");
}
var lastFocusedElement = null;
function focusListener(event)
{
log('focus event: [to] ' + description(event.target) + '\n');
lastFocusedElement = event.target;
}
function addEventListeners(element)
{
element.addEventListener('keydown', keydownListener, false);
element.addEventListener('focus', focusListener, false);
element.addEventListener('blur', blurListener, false);
}
function addElements(parentElement)
{
var inputTypes = [
"BUTTON",
"CHECKBOX",
"FILE",
"HIDDEN",
"IMAGE",
"ISINDEX",
"PASSWORD",
"RADIO",
"RANGE",
"RESET",
"SEARCH",
"SUBMIT",
"TEXT"
];
// Form elements
for (var i = 0; i < inputTypes.length; ++i) { //>
var input = parentElement.ownerDocument.createElement('input');
input.type = inputTypes[i];
addEventListeners(input);
parentElement.appendChild(input);
}
// Textarea
var textarea = parentElement.ownerDocument.createElement('textarea');
addEventListeners(textarea);
parentElement.appendChild(textarea);
// Contenteditable
var div = parentElement.ownerDocument.createElement('div');
div.contentEditable = true;
div.style.border = "1px solid black";
addEventListeners(div);
parentElement.appendChild(div);
// Anchor
var anchor = parentElement.ownerDocument.createElement('a');
anchor.innerHTML = "anchor";
anchor.href = "javascript:";
addEventListeners(anchor);
parentElement.appendChild(anchor);
}
function dispatchOptionTab(element, shiftKey)
{
var event = document.createEvent("KeyboardEvents");
var tabKeyIdentifier = "U+0009";
event.initKeyboardEvent("keydown", true, true, document.defaultView, tabKeyIdentifier, 0, false, true, shiftKey, false, false);
element.dispatchEvent(event);
}
function setup()
{
var testDiv = document.getElementById('testDiv');
addElements(testDiv);
var testIframe = document.getElementById('testIframe');
addElements(testIframe.contentDocument.body);
addEventListeners(testIframe);
}
setup();
log('PARENT DOCUMENT:\n');
document.getElementsByTagName('input')[0].focus();
for (var i = 0; i < 14; ++i) //>
dispatchOptionTab(lastFocusedElement, false);
lastFocusedElement.blur();
log('\nIFRAME DOCUMENT:\n');
document.getElementById('testIframe').contentDocument.getElementsByTagName('input')[0].focus();
for (var i = 0; i < 14; ++i) //>
dispatchOptionTab(lastFocusedElement, false);
</script>