blob: 9b0ace78843414081c86459126b2334f1e107f4b [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div class="container">
<details id="details1">
<p>details1-content</p>
</details>
</div>
<script>
test(function(t) {
var axDetails1 = accessibilityController.accessibleElementById("details1");
var axSummary1 = axDetails1.childAtIndex(0);
assert_equals(axSummary1.role, "AXRole: AXDisclosureTriangle");
assert_equals(axSummary1.name, "Details");
assert_equals(axSummary1.nameFrom, "contents");
}, "Details element with no summary");
</script>
<div class="container">
<details id="details2">
<summary id="summary2" title="summary2-title"></summary>
<p>details2-content</p>
</details>
</div>
<script>
test(function(t) {
var axSummary2 = accessibilityController.accessibleElementById("summary2");
assert_equals(axSummary2.name, "summary2-title");
assert_equals(axSummary2.nameFrom, "title");
}, "Summary with title and no contents");
</script>
<div class="container">
<details id="details3">
<summary id="summary3" title="summary3-title">summary3-contents</summary>
<p>details3-content</p>
</details>
</div>
<script>
test(function(t) {
var axSummary3 = accessibilityController.accessibleElementById("summary3");
assert_equals(axSummary3.name, "summary3-contents");
assert_equals(axSummary3.nameFrom, "contents");
}, "Summary with title and contents");
</script>
<div class="container">
<details id="details4">
<summary id="summary4" title="summary4-title" aria-label="summary4-aria-label">summary4-contents</summary>
<p>details4-content</p>
</details>
</div>
<script>
test(function(t) {
var axSummary4 = accessibilityController.accessibleElementById("summary4");
assert_equals(axSummary4.name, "summary4-aria-label");
assert_equals(axSummary4.nameFrom, "attribute");
}, "Summary with title, aria-label, and contents");
</script>
<div class="container">
<details id="details5">
<summary id="summary5" title="summary5-title" aria-label="summary5-aria-label" aria-labelledby="labelledby5">summary5-contents</summary>
<p>details5-content</p>
</details>
<span hidden="true" id="labelledby5">summary5-aria-labelledby</span>
</div>
<script>
test(function(t) {
var axSummary5 = accessibilityController.accessibleElementById("summary5");
assert_equals(axSummary5.name, "summary5-aria-labelledby");
assert_equals(axSummary5.nameFrom, "relatedElement");
}, "Summary with title, aria-label, aria-labelledby, and contents");
</script>