<!DOCTYPE html>

<script src="../../../resources/js-test.js"></script>

<button id="button1" autofocus></button>
<iframe srcdoc="
<div id='div1'>I shouldn't be here</div>
<input type=text></input>
<div id='div2'>I shouldn't be here either</div>
<script>
document.getElementById('div1').attachShadow({mode: 'open'});
document.getElementById('div2').attachShadow({mode: 'open'});
</script>
"></iframe>
<button id="button2"></button>

<script>
description('Tests whether focus can navigate between the two buttons by pressing tab twice.');
jsTestIsAsync = true;
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var iframe = document.querySelector('iframe');
var iframeDocument;
var input;
document.querySelector('iframe').onload = function() {
    iframeDocument = iframe.contentDocument;
    input = iframeDocument.querySelector('input');

    button1.focus();
    eventSender.keyDown('\t');
    shouldBe('document.activeElement', 'iframe');
    shouldBe('iframeDocument.activeElement', 'input');
    eventSender.keyDown('\t');
    shouldBe('document.activeElement', 'button2');

    button2.focus();
    eventSender.keyDown('\t', ['shiftKey']);
    shouldBe('document.activeElement', 'iframe');
    shouldBe('iframeDocument.activeElement', 'input');
    eventSender.keyDown('\t', ['shiftKey']);
    shouldBe('document.activeElement', 'button1');

    finishJSTest();
};
</script>