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

<h1 hidden id="heading1_1">heading1.1</h1>
<h1 aria-hidden="true" id="heading1_2">heading1.2</h1>
<h1 hidden aria-hidden="true" id="heading1_3">heading1.3</h1>

<h1 hidden aria-hidden="false" id="heading2">heading2</h1>
<h1 style="display:none;" aria-hidden="false" id="heading3">heading3</h1>
<h1 style="visibility:hidden;" aria-hidden="false" id="heading4">heading4</h1>

<div hidden aria-hidden="false" id="hiddenDiv">HiddenText1</div>
<input type="text" aria-labelledby="hiddenDiv" id="textFieldWithHiddenLabeller">

<div aria-hidden="false">
<video id="video">
Hidden content
</video>
</div>

<p id="description"></p>
<div id="console"></div>

<script>

    description("This tests ensures that aria-hidden=false will allow a node to be in the AX hierarchy even if it's not rendered or visible");

    if (window.accessibilityController) {

        // First groups of headings are actually hidde.n
        var heading1_1 = accessibilityController.accessibleElementById("heading1_1");
        shouldBeTrue("!heading1_1 || !heading1_1.isValid");

        var heading1_2 = accessibilityController.accessibleElementById("heading1_2");
        shouldBeTrue("!heading1_2 || !heading1_3.isValid");

        var heading1_3 = accessibilityController.accessibleElementById("heading1_3");
        shouldBeTrue("!heading1_3 || !heading1_3.isValid");

        // These headings should be in AX tree despite being hidden.
        var heading2 = accessibilityController.accessibleElementById("heading2");
        shouldBe("heading2.role", "'AXRole: AXHeading'");

        // Check that the order of these elements is correct based on DOM order.
        var parent = heading2.parentElement();
        shouldBeTrue("parent.childAtIndex(0).isEqual(heading2)");

        var heading3 = accessibilityController.accessibleElementById("heading3");
        shouldBe("heading3.role", "'AXRole: AXHeading'");
        shouldBeTrue("parent.childAtIndex(1).isEqual(heading3)");

        var heading4 = accessibilityController.accessibleElementById("heading4");
        shouldBe("heading4.role", "'AXRole: AXHeading'");
        shouldBeTrue("parent.childAtIndex(2).isEqual(heading4)");

        // The aria-labelledby attribute should work even though hidden.
        var textField = accessibilityController.accessibleElementById("textFieldWithHiddenLabeller");
        debug("Textfield Title: " + textField.title);
        
        // aria-hidden="false" need to be on each parent, including rendered parents.
        var video = accessibilityController.accessibleElementById("video");
        shouldBe("video.childrenCount", "0");
    }

</script>

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