110 lines
4.3 KiB
HTML
110 lines
4.3 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script src="../../resources/accessibility-helper.js"></script>
|
|
</head>
|
|
<body id="body">
|
|
|
|
<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>
|
|
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
|
|
<script>
|
|
description("This tests some basic attributes about the details element.");
|
|
|
|
if (window.accessibilityController) {
|
|
window.jsTestIsAsync = true;
|
|
|
|
var body = accessibilityController.rootElement.childAtIndex(0);
|
|
body.addNotificationListener(function(notification) {
|
|
if (notification == "AXExpandedChanged")
|
|
debug("Received " + notification + " notification ");
|
|
});
|
|
|
|
var details1 = accessibilityController.accessibleElementById("details1");
|
|
var summary1 = accessibilityController.accessibleElementById("summary1");
|
|
shouldBe("details1.role", "'AXRole: AXGroup'");
|
|
shouldBe("details1.subrole", "'AXSubrole: AXDetails'");
|
|
shouldBeTrue("details1.isExpanded");
|
|
shouldBe("summary1.role", "'AXRole: AXButton'");
|
|
shouldBe("summary1.subrole", "'AXSubrole: AXSummary'");
|
|
shouldBe("summary1.title", "'AXTitle: Some open info'");
|
|
shouldBeTrue("details1.isAttributeSettable('AXExpanded')");
|
|
|
|
// 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.isExpanded;
|
|
});
|
|
summary1 = accessibilityController.accessibleElementById("summary1");
|
|
shouldBeFalse("details1.isExpanded");
|
|
shouldBeFalse("summary1.isExpanded");
|
|
|
|
// Give it the same value to make sure we don't expand.
|
|
details1.setBoolAttributeValue("AXExpanded", false);
|
|
await waitFor(() => {
|
|
details1 = accessibilityController.accessibleElementById("details1");
|
|
return !details1.isExpanded;
|
|
});
|
|
summary1 = accessibilityController.accessibleElementById("summary1");
|
|
shouldBeFalse("details1.isExpanded");
|
|
shouldBeFalse("summary1.isExpanded");
|
|
|
|
// Set to expand again.
|
|
details1.setBoolAttributeValue("AXExpanded", true);
|
|
await waitFor(() => {
|
|
details1 = accessibilityController.accessibleElementById("details1");
|
|
return details1.isExpanded;
|
|
});
|
|
summary1 = accessibilityController.accessibleElementById("summary1");
|
|
shouldBeTrue("details1.isExpanded");
|
|
shouldBeTrue("summary1.isExpanded");
|
|
|
|
// 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.isExpanded;
|
|
});
|
|
summary1 = accessibilityController.accessibleElementById("summary1");
|
|
shouldBeTrue("details1.isExpanded");
|
|
shouldBeTrue("summary1.isExpanded");
|
|
|
|
details2 = accessibilityController.accessibleElementById("details2");
|
|
shouldBe("details2.subrole", "'AXSubrole: AXDetails'");
|
|
shouldBeFalse("details2.isExpanded");
|
|
|
|
// Expanded status should be correct when detail has group role
|
|
details3 = accessibilityController.accessibleElementById("details3");
|
|
shouldBe("details3.subrole", "'AXSubrole: AXApplicationGroup'");
|
|
shouldBeTrue("details3.isExpanded");
|
|
|
|
finishJSTest();
|
|
}, 0);
|
|
}
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|