<!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 id="body">

<div id="content">
<details open id="details1">
  <summary id="summary1">Some open info</summary>
  <p>Details about the open topic.</p>
</details>

<details id="details2">
  <summary>Some open info</summary>
  <p>Details about the open topic.</p>
</details>

<details open id="details3" role="group">
  <summary>Some open info</summary>
  <p>Details about the open topic.</p>
</details>
</div>

<script>
    var output = "This tests some basic attributes about the details element.\n";

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

        var body = accessibilityController.rootElement.childAtIndex(0);
        body.addNotificationListener(function(notification) {
            if (notification == "AXExpandedChanged")
                output += `Received ${notification} notification\n`;
        });

        var details1 = accessibilityController.accessibleElementById("details1");
        var summary1 = accessibilityController.accessibleElementById("summary1");
        output += expect("details1.role", "'AXRole: AXGroup'");
        output += expect("details1.subrole", "'AXSubrole: AXDetails'");
        output += expect("details1.isExpanded", "true");
        output += expect("summary1.role", "'AXRole: AXButton'");
        output += expect("summary1.subrole", "'AXSubrole: AXSummary'");
        output += expect("summary1.title", "'AXTitle: Some open info'");
        output += expect("details1.isAttributeSettable('AXExpanded')", "true");

        // Toggle the expanded state.
        details1.setBoolAttributeValue("AXExpanded", false);

        // After toggling the expanded state on a <details> element, the underlying HTMLDetailsElement goes away and it is replaced by a new object.
        // Thus, we need to retrieve the corresponding accessible object again since the current one becomes defunct.
        // See HTMLDetailsElement::toggleOpen().
        setTimeout(async function() {
            await waitFor(() => {
                details1 = accessibilityController.accessibleElementById("details1");
                return details1 && !details1.isExpanded;
            });
            summary1 = accessibilityController.accessibleElementById("summary1");
            output += expect("details1.isExpanded", "false");
            output += expect("summary1.isExpanded", "false");

            // Give it the same value to make sure we don't expand.
            details1.setBoolAttributeValue("AXExpanded", false);
            await waitFor(() => {
                details1 = accessibilityController.accessibleElementById("details1");
                return details1 && !details1.isExpanded;
            });
            summary1 = accessibilityController.accessibleElementById("summary1");
            output += expect("details1.isExpanded", "false");
            output += expect("summary1.isExpanded", "false");

            // Set to expand again.
            details1.setBoolAttributeValue("AXExpanded", true);
            await waitFor(() => {
                details1 = accessibilityController.accessibleElementById("details1");
                return details1 && details1.isExpanded;
            });
            summary1 = accessibilityController.accessibleElementById("summary1");
            output += expect("details1.isExpanded", "true");
            output += expect("summary1.isExpanded", "true");

            // And duplicate the true state to make sure it doesn't toggle off.
            details1.setBoolAttributeValue("AXExpanded", true);
            await waitFor(() => {
                details1 = accessibilityController.accessibleElementById("details1");
                return details1 && details1.isExpanded;
            });
            summary1 = accessibilityController.accessibleElementById("summary1");
            output += expect("details1.isExpanded", "true");
            output += expect("summary1.isExpanded", "true");

            details2 = accessibilityController.accessibleElementById("details2");
            output += expect("details2.subrole", "'AXSubrole: AXDetails'");
            output += expect("details2.isExpanded", "false");

            // Expanded status should be correct when detail has group role
            details3 = accessibilityController.accessibleElementById("details3");
            output += expect("details3.subrole", "'AXSubrole: AXApplicationGroup'");
            output += expect("details3.isExpanded", "true");

            debug(output);
            document.getElementById("content").style.visibility = "hidden";
            finishJSTest();
        }, 0);
    }
</script>
</body>
</html>