<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test.js"></script>
<script src="../resources/accessibility-helper.js"></script>
</head>
<body>

<main id="main">
    <div style="display:inline" tabindex="0">
    <button id="button">test</button>
    </div>
</main>

<script>
    description("This tests that when tabindex is updated on an element, the children are re-computed.")

    var button, group, main;
    if (window.accessibilityController) {
        window.jsTestIsAsync = true;

        button = accessibilityController.accessibleElementById("button");
        main = accessibilityController.accessibleElementById("main");
        group = main.childAtIndex(0);

        shouldBeTrue("group.childAtIndex(0).parentElement().isEqual(group)");
        shouldBeTrue("button.parentElement().isEqual(group)");
        shouldBeTrue("group.parentElement().isEqual(main)");
        shouldBeTrue("main.childAtIndex(0).isEqual(group)");

        // Removing tabindex should cause children to update.
        document.getElementById("main").children[0].removeAttribute("tabindex");
        setTimeout(async function() {
            await expectAsyncExpression("main.childAtIndex(0).isEqual(button)", "true");
            await expectAsyncExpression("button.parentElement().isEqual(main)", "true");
            finishJSTest();
        }, 0);
    }
</script>
</body>
</html>