| <!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> |
