<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() {
        win.document.body.style.background = "green";
        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)
{
    var event = document.createEvent('KeyboardEvents');
    var tabKeyIdentifier = 'U+0009';
    event.initKeyboardEvent('keydown', true, true, document.defaultView, tabKeyIdentifier, 0, false, altKey, shiftKey, false, false);
    element.dispatchEvent(event);
}

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, true);
    }

    lastFocusedElement.blur();

    log('\nOption-tabbing backward...\n');
    for (var i = 0; i < 12; ++i) {
        dispatchTabPress(document, true, true);
    }

    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>