<html>
<style>
body {
background-color: white;
}
iframe {
border: 2px solid black;
}
</style>
<script>
function log(msg)
{
document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
}
function windowFocused(win, name)
{
return function() {
log(name + ': window focused');
}
}
function windowBlurred(win, name)
{
return function() {
win.document.body.style.background = "red";
log(name + ': window blurred');
}
}
function logTabbedElement(event, elem, i, name)
{
log(name + ': ' + elem.tagName + ' #' + i + ' (tabindex=' + elem.tabIndex + ') ' + event);
}
var lastFocusedElement = null;
function elementFocused(elem, i, name)
{
return function() {
logTabbedElement('focused', elem, i, name);
lastFocusedElement = elem;
}
}
function elementBlurred(elem, i, name)
{
return function() {
logTabbedElement('blurred', elem, i, name);
}
}
function setupElements(win, name, tag)
{
var elems = win.document.getElementsByTagName(tag);
for (var i = 0; i < elems.length; ++i) {
elems[i].onfocus = elementFocused(elems[i], i, name);
elems[i].onblur = elementBlurred(elems[i], i, name);
}
}
function setupBodyFunc(win, name)
{
return function() {
setupElements(win, name, 'a');
setupElements(win, name, 'input');
setupElements(win, name, 'iframe');
}
}
function setupWindow(win)
{
var name;
if (win.frameElement) {
name = win.frameElement.id;
} else {
name = 'main window';
}
win.setupWindow = setupWindow;
win.setupBody = setupBodyFunc(win, name);
win.onfocus = windowFocused(win, name);
win.onblur = windowBlurred(win, name);
}
function dispatchTabPress(element, shiftKey, altKey)
{
if (window.eventSender) {
modifiers = [];
if (shiftKey)
modifiers.push("shiftKey");
if (altKey)
modifiers.push("altKey");
eventSender.keyDown('\u0009', modifiers);
}
}
function test()
{
if (window.testRunner) {
testRunner.dumpAsText();
}
log('Tabbing forward...\n');
document.getElementById('first').focus();
for (var i = 0; i < 7; ++i) {
dispatchTabPress(document, false, false);
}
lastFocusedElement.blur();
log('\nTabbing backward...\n');
for (var i = 0; i < 8; ++i) {
dispatchTabPress(document, true, false);
}
lastFocusedElement.blur();
log('\nOption-tabbing forward...\n');
for (var i = 0; i < 12; ++i) {
dispatchTabPress(document, false, navigator.platform.indexOf('Mac') == 0);
}
lastFocusedElement.blur();
log('\nOption-tabbing backward...\n');
for (var i = 0; i < 12; ++i) {
dispatchTabPress(document, true, navigator.platform.indexOf('Mac') == 0);
}
lastFocusedElement.blur();
log('\nTest finished\n');
}
setupWindow(window);
</script>
<body onload="window.setupBody(); test();">
<p>This page tests tabbing between subframes. To test, click on this text
to focus the main window. Then press Tab 7 times, then Shift-Tab 7 times,
which should move focus forward and backward through all inputs and frames.
Then press Option-Tab 11 times and Shift-Option-Tab 11 times, which should
move focus forward and backward through all inputs, frames, and links.</p>
<input type="text">
<iframe id="empty-middle" src="resources/frame-tab-focus-empty-middle.html" width="400" height="200"></iframe>
<input type="text" tabindex="3">
<input type="text" tabindex="2" id="first">
<iframe id="upper" src="resources/frame-tab-focus-upper.html" height="300"></iframe>
<iframe id="child" tabindex="4" src="resources/frame-tab-focus-child.html"></iframe>
<input type="text">
<a tabindex="1" href="#">[tabindex of one]</a>
<a tabindex="3" href="#">[tabindex of three]</a>
<a tabindex="2" href="#">[tabindex of two]</a>
<a tabindex="3" href="#">[tabindex of three]</a>
<pre id="log"></pre>
</body>
</html>