<!DOCTYPE html>
<html>
<body>
<p>Tests for setting a negative tabindex on shadow host. Elements inside such a shadow tree should not be in the sequential navigation order.<br>
To manually test, press tab key four times. It should traverse focusable elements in the increasing numerical order.</p>
<div id="test-content">
<div id="first" tabindex="1" onfocus="log(this)">1. First sequentially focusable element outside shadow trees</div>
<div id="host-with-negative-tabindex" tabindex="-1" onfocus="log(this)">Shadow host with a negative tabindex</div>
<div id="host-with-no-tabindex" onfocus="log(this)">4.2. Shadow host with no tabindex</div>
<div id="host-with-positive-tabindex" tabindex="2" onfocus="log(this)">2. Shadow host with a positive tabindex</div>
<div tabindex="0" onfocus="log(this)">5. Last sequentially focusable element outside shadow trees</div>
</div>
<pre></pre>
<script>

document.getElementById('host-with-negative-tabindex').attachShadow({mode: 'closed'}).innerHTML = `
    <div tabindex="0" onfocus="log(this)">Should not be focused as it is inside a shadow host with a negative tabindex</div>
`;

document.getElementById('host-with-no-tabindex').attachShadow({mode: 'closed'}).innerHTML = `
    <div tabindex="0" onfocus="log(this)">4.1. Focusable element inside a shadow host with no tabindex</div>
`;

document.getElementById('host-with-positive-tabindex').attachShadow({mode: 'closed'}).innerHTML = `
    <slot></slot>
    <div tabindex="0" onfocus="log(this)">3. Focusable element inside a shadow host with a positive tabindex</div>
`;

function log(element) {
    document.querySelector('pre').textContent += element.textContent + '\n';
}

if (window.testRunner)
    testRunner.dumpAsText();

document.getElementById('first').focus();

if (window.eventSender) {
    eventSender.keyDown('\t');
    eventSender.keyDown('\t');
    eventSender.keyDown('\t');
    eventSender.keyDown('\t');

    eventSender.keyDown('\t', ['shiftKey']);
    eventSender.keyDown('\t', ['shiftKey']);
    eventSender.keyDown('\t', ['shiftKey']);
    eventSender.keyDown('\t', ['shiftKey']);
    document.getElementById('test-content').style.display = 'none';
}

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