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

<div id="container" role="group"></div>
<canvas id="canvas" tabindex="-1"></canvas>
    
<script>
    var testOutput = "This test makes sure that AccessibilityNodeObjects are properly detached when the node they point to is reparented to a location that allows them to have a renderer.\n\n";

    if (window.accessibilityController) {
        window.jsTestIsAsync = true;

        // Create an ordinary button on the page.
        var button = document.createElement("button");
        button.id = "buttonOne";
        document.body.appendChild(button);

        setTimeout(async function() {
            window.axElement = await waitForElementById("buttonOne");
            window.expectedButtonRole = axElement.role;

            // Now remove the node from the tree and get the role of the detached accessibility object.
            document.body.removeChild(button);
            await waitFor(() => { 
                window.expectedDetachedRole = axElement.role;
                return expectedButtonRole !== expectedDetachedRole;
            });
            testOutput += expect("expectedButtonRole !== expectedDetachedRole", "true");

            // This time create a button that's a child of a canvas element. It will be focusable but not rendered.
            // In particular, this will create an AccessibilityNodeObject rather than an AccessibilityRenderObject.
            var canvas = document.getElementById("canvas");
            // This test relies on focusing the canvas to make it accessible (without the focus, accessibleElementById("canvas")
            // below will never return anything).
            canvas.focus();
            var canvasButton = document.createElement("button");
            canvas.appendChild(canvasButton);

            var axCanvas;
            await waitFor(() => {
                axCanvas = accessibilityController.accessibleElementById("canvas");
                return axCanvas && axCanvas.childrenCount > 0;
            });
            window.axElement = axCanvas.childAtIndex(0);
            window.canvasButtonRole = axElement.role;
            testOutput += expect("canvasButtonRole", "expectedButtonRole");

            // Now reparent the node to a container that's not a canvas.
            var container = document.getElementById("container");
            container.appendChild(canvasButton);
            var axContainer = accessibilityController.accessibleElementById("container");
            await waitFor(() => axContainer.childrenCount > 0);
            window.axReparentedElement = axContainer.childAtIndex(0);

            // Ensure that the old accessibility object is detached by checking its role.
            await waitFor(() => {
                window.detachedCanvasButtonRole = axElement.role;
                return detachedCanvasButtonRole === expectedDetachedRole;
            });
            testOutput += expect("detachedCanvasButtonRole", "expectedDetachedRole");

            // Ensure that the new accessibility object for the now-reparented node has the correct role.
            window.reparentedButtonRole = axReparentedElement.role;
            testOutput += expect("reparentedButtonRole", "expectedButtonRole");

            debug(testOutput);
            finishJSTest();
        }, 0);
    }
</script>
</body>
</html>