<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/ui-helper.js"></script>
</head>
<body>
<div id="test-container">
    <input type="text" value="A" onfocus="checkResult(this.value)">
    <iframe srcdoc="<input value='B' onfocus='window.parent.checkResult(this.value)'>"></iframe>
    <textarea onfocus="checkResult(this.value)">C</textarea>
</div>
<script>
window.jsTestIsAsync = true;

let expectedOrder = ["A", "B", "C"];
let position = 0;
let elementName = "";

function checkResult(anElementName)
{
    console.assert(position < expectedOrder.length);
    elementName = anElementName;
    shouldBeEqualToString("elementName", expectedOrder[position++]);
    if (position >= expectedOrder.length)
        done();
    tab();
}

function tab()
{
    if (window.testRunner)
        UIHelper.keyDown("\t");
}

function done()
{
    document.body.removeChild(document.getElementById("test-container"));
    finishJSTest();
}

description("This tests tab cycling through editable elements on iOS.");
tab();
</script>
</body>
</html>