<!DOCTYPE html>
<html>
<body>
<p>Tests for moving focus by pressing tab key across label and legend elements.<br>
To manually test, press tab key seven times then shift+tab six times.<br>
It should traverse focusable elements in the ascending order from 1 to 7 and then in the descending order back to 1.</p>
</p>
<input id="startingNode">
<div id="test-content">
    <label title="FAIL - a non-focusable label with an input should not be focused">
        <input title="1. An input element inside a non-focusable label element">hello
    </label>
    <label tabindex="0" title="2. A label element with an input element">
        <input title="3. An input elment inside a focusable label element">world</label>
    <label tabindex="0" title="4. A label element with just text">webkit</label>
    <label title="FAIL - an label element without tabindex should not be focused">rocks</label>
    <fieldset tabindex="0" title="5. A fieldset element with tabindex">
        <legend tabindex="0" title="6. A focusable legend element inside a fieldset element">foo</legend>
        <input title="7. An input element inside a fieldset element">
    </fieldset>
</div>
<style> :focus { background: red; } </style>
<pre id="result"></pre>
<script>

function moveFocusForward(focusCount)
{
    setTimeout(function () {
        if (!focusCount)
            return moveFocusBackward(7);
        eventSender.keyDown('\t');
        setTimeout(function () {
            moveFocusForward(focusCount - 1);            
        }, 1);
    }, 1);
}

function moveFocusBackward(focusCount)
{
    setTimeout(function () {
        if (!focusCount) {
            testContent.style.display = 'none';
            testRunner.notifyDone();
            return;
        }
        eventSender.keyDown('\t', ['shiftKey']);
        setTimeout(function () {
            moveFocusBackward(focusCount - 1);            
        }, 1);
    }, 1);
}

let testContent = document.getElementById('test-content');

window.onload = () => {
    document.getElementById('startingNode').focus();
    if (window.eventSender) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }
    moveFocusForward(7);
}

testContent.querySelectorAll('*').forEach((element) => {
    element.onfocus = function () {
        document.getElementById('result').textContent += (element.title || 'FAIL - focused an unexpected element') + '\n';
    }
});

</script>
</body>
</html>