122 lines
6.0 KiB
HTML
122 lines
6.0 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">
|
|
|
|
<!-- Example 1: controls a list -->
|
|
<input type="text" role="combobox" id="combobox1" aria-controls="list1" aria-label="Combobox1">
|
|
<div role="list" id="list1" aria-label="List1">
|
|
<div role="listitem" id="item1_1">item1</div>
|
|
<div role="listitem" id="item1_2">item2</div>
|
|
</div>
|
|
|
|
<!-- Example 2: owns a listbox -->
|
|
<input type="text" role="combobox" id="combobox2" aria-owns="listbox2" aria-label="Combobox2">
|
|
<div role="listbox" id="listbox2" aria-label="Listbox2">
|
|
<div role="option" id="option2_1">item1</div>
|
|
<div role="option" id="option2_2">item2</div>
|
|
</div>
|
|
|
|
<!-- Example 3: owns a grid -->
|
|
<input type="text" role="combobox" id="combobox3" aria-owns="grid3" aria-label="Combobox3">
|
|
<div role="grid" id="grid3" aria-label="Grid3">
|
|
<div role="row" id="row3_1">
|
|
<div role="gridcell" id="gridcell3_1">cell1</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example 3: owns a tree -->
|
|
<input type="text" role="combobox" id="combobox4" aria-owns="tree4" aria-label="Combobox4">
|
|
<div role="tree" id="tree4" aria-label="Tree4">
|
|
<div role="treeitem" id="treeitem4_1">treeitem1</div>
|
|
<div role="treeitem" id="treeitem4_2">treeitem2</div>
|
|
</div>
|
|
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
|
|
<script>
|
|
description("This tests variations of the comboboxes and elements it can control and own. Then verifies the active-descendant is reflected correctly.");
|
|
|
|
if (window.accessibilityController) {
|
|
window.jsTestIsAsync = true;
|
|
var selectedChildrenChangeCount = 0;
|
|
|
|
window.accessibilityController.addNotificationListener(function (target, notification) {
|
|
if (notification == "AXSelectedChildrenChanged" || notification == "AXSelectedRowsChanged") {
|
|
selectedChildrenChangeCount++;
|
|
var targetString = platformValueForW3CName(target);
|
|
debug("Received " + notification + " for " + targetString);
|
|
}
|
|
});
|
|
|
|
// Example 1: aria-controls a list.
|
|
document.getElementById("combobox1").focus();
|
|
var list = accessibilityController.accessibleElementById("list1");
|
|
shouldBe("list.selectedChildrenCount", "0");
|
|
// Set active-descendant, verify notification is sent and that list has correct selected children.
|
|
document.getElementById("combobox1").setAttribute("aria-activedescendant", "item1_1");
|
|
var listitem1 = accessibilityController.accessibleElementById("item1_1");
|
|
setTimeout(async function() {
|
|
debug("list has " + list.selectedChildrenCount + " selected children");
|
|
debug(list.selectedChildAtIndex(0).isEqual(listitem1)
|
|
? "PASS list.selectedChildAtIndex(0) is listitem1"
|
|
: "FAIL list.selectedChildAtIndex(0) is not listitem1");
|
|
|
|
// Example 2: aria-owns a listbox.
|
|
document.getElementById("combobox2").focus();
|
|
var listbox = accessibilityController.accessibleElementById("listbox2");
|
|
debug("listbox has " + listbox.selectedChildrenCount + " selected children");
|
|
// Set active-descendant, verify notification is sent and that list has correct selected children.
|
|
document.getElementById("combobox2").setAttribute("aria-activedescendant", "option2_1");
|
|
var option2_1 = accessibilityController.accessibleElementById("option2_1");
|
|
await waitFor(() => {
|
|
return selectedChildrenChangeCount == 2 && listbox.selectedChildrenCount;
|
|
});
|
|
debug("listbox has " + listbox.selectedChildrenCount + " selected children");
|
|
debug(listbox.selectedChildAtIndex(0).isEqual(option2_1)
|
|
? "PASS listbox.selectedChildAtIndex(0) is option2_1"
|
|
: "FAIL listbox.selectedChildAtIndex(0) is not option2_1");
|
|
|
|
// Example 3: aria-owns a grid.
|
|
document.getElementById("combobox3").focus();
|
|
var grid = accessibilityController.accessibleElementById("grid3");
|
|
debug("grid has " + grid.selectedChildrenCount + " selected children");
|
|
// Set active-descendant, verify notification is sent and that list has correct selected children.
|
|
document.getElementById("combobox3").setAttribute("aria-activedescendant", "row3_1");
|
|
var row3_1 = accessibilityController.accessibleElementById("row3_1");
|
|
await waitFor(() => {
|
|
return selectedChildrenChangeCount == 3 && grid.selectedChildrenCount;
|
|
});
|
|
debug("grid has " + grid.selectedChildrenCount + " selected children");
|
|
debug(grid.selectedChildAtIndex(0).isEqual(row3_1)
|
|
? "PASS grid.selectedChildAtIndex(0) is row3_1"
|
|
: "FAIL grid.selectedChildAtIndex(0) is not row3_1");
|
|
|
|
// Example 4: aria-owns a tree.
|
|
document.getElementById("combobox4").focus();
|
|
var tree = accessibilityController.accessibleElementById("tree4");
|
|
debug("tree has " + tree.selectedChildrenCount + " selected children");
|
|
// Set active-descendant, verify notification is sent and that list has correct selected children.
|
|
document.getElementById("combobox4").setAttribute("aria-activedescendant", "treeitem4_1");
|
|
var treeitem4_1 = accessibilityController.accessibleElementById("treeitem4_1");
|
|
await waitFor(() => {
|
|
return selectedChildrenChangeCount == 4 && tree.selectedChildrenCount;
|
|
});
|
|
debug("tree has " + tree.selectedChildrenCount + " selected children");
|
|
debug(tree.selectedChildAtIndex(0).isEqual(treeitem4_1)
|
|
? "PASS tree.selectedChildAtIndex(0) is treeitem4_1"
|
|
: "FAIL tree.selectedChildAtIndex(0) is not treeitem4_1");
|
|
|
|
accessibilityController.removeNotificationListener();
|
|
finishJSTest();
|
|
}, 0);
|
|
}
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|