<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<p>This tests that pressing Tab key should traverse into shadow DOM subtrees, and pressing Shift-Tab should reverse the order.</p>
<div id="sandbox"></div>
<pre id="console"></pre>
<script>

function testWithDistributedNodes()
{
    var sandbox = document.getElementById('sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {'id': 'top-div'},
                  createDOM('input', {'id': 'input-1', 'tabindex': 1}),
                  createDOM('div', {'id': 'shadowhost', 'tabindex': 1},
                            createShadowRoot(
                                createDOM('content', {'select': '#distributed-node-1'}),
                                createDOM('input', {'id': 'input-2', 'tabindex': 1}),
                                createDOM('content', {'select': '#distributed-node-2'})),
                            createDOM('input', {'id': 'distributed-node-2', 'tabindex': 1}),
                            createDOM('input', {'id': 'distributed-node-1', 'tabindex': 1})),
                  createDOM('input', {'id': 'input-3', 'tabindex': 1})));
    sandbox.offsetLeft;

    var elementsInFocusNavigationOrder = ['input-1', 'shadowhost', 'distributed-node-1', 'shadowhost/input-2', 'distributed-node-2', 'input-3'];
    testFocusNavigationFowrad(elementsInFocusNavigationOrder);
    elementsInFocusNavigationOrder.reverse()
    testFocusNavigationBackward(elementsInFocusNavigationOrder)
}

function testDetailsSummary()
{
    debug('details/summary elements use Shadow DOM and distributed nodes internally.')
    var sandbox = document.getElementById('sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {'id': 'top-div'},
                  createDOM('input', {'id': 'input-1'}),
                  createDOM('details', {'id': 'details-1'},
                            createDOM('summary', {'id': 'summary-1'})),
                  createDOM('input', {'id': 'input-2'})));
    sandbox.offsetLeft;

    var elementsInFocusNavigationOrder = ['input-1', 'summary-1', 'input-2'];
    testFocusNavigationFowrad(elementsInFocusNavigationOrder);
    elementsInFocusNavigationOrder.reverse()
    testFocusNavigationBackward(elementsInFocusNavigationOrder);
}


function test() {
    if (window.testRunner)
        testRunner.dumpAsText();

    if (!window.eventSender) {
        testFailed('');
        return;
    }

    testWithDistributedNodes()
    testDetailsSummary();

    debug('Test finished.');
}

test();

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