| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| const testCase = async_test( |
| 'Navigating in a multiselect list updates selection and the active selected option and sends a notification'); |
| |
| const expectedNotifications = [ |
| 'ActiveDescendantChanged', |
| 'SelectedChildrenChanged', |
| 'SelectedChildrenChanged', |
| 'ActiveDescendantChanged', |
| 'SelectedChildrenChanged', |
| 'ActiveDescendantChanged', |
| ]; |
| let notificationReceivedIndex = 0; |
| |
| function runTest() { |
| assert_own_property(window, 'accessibilityController'); |
| |
| var menulist = document.getElementById("menulist"); |
| menulist.focus(); |
| window.accessibleMenulist = accessibilityController.focusedElement; |
| window.accessibleOne = accessibleMenulist.childAtIndex(0); |
| window.accessibleTwo = accessibleMenulist.childAtIndex(1); |
| window.accessibleThree = accessibleMenulist.childAtIndex(2); |
| |
| function listListener(notification) { |
| assert_less_than(notificationReceivedIndex, expectedNotifications.length); |
| assert_equals(notification, expectedNotifications[notificationReceivedIndex], |
| `Notification ${notificationReceivedIndex}`); |
| ++notificationReceivedIndex; |
| } |
| accessibleMenulist.addNotificationListener(listListener); |
| |
| assert_true(accessibleOne.isSelected); |
| assert_true(accessibleOne.isSelectedOptionActive); |
| assert_false(accessibleTwo.isSelected); |
| assert_false(accessibleTwo.isSelectedOptionActive); |
| assert_false(accessibleThree.isSelected); |
| assert_false(accessibleThree.isSelectedOptionActive); |
| |
| // Change the selected index by simulating a down arrow keydown event. |
| eventSender.keyDown('ArrowDown', []); |
| |
| assert_false(accessibleOne.isSelected); |
| assert_false(accessibleOne.isSelectedOptionActive); |
| assert_true(accessibleTwo.isSelected); |
| assert_true(accessibleTwo.isSelectedOptionActive); |
| assert_false(accessibleThree.isSelected); |
| assert_false(accessibleThree.isSelectedOptionActive); |
| |
| // Extend the selection by simulating a Shift + Down Arrow keydown event. |
| eventSender.keyDown('ArrowDown', ['shiftKey']); |
| |
| assert_false(accessibleOne.isSelected); |
| assert_false(accessibleOne.isSelectedOptionActive); |
| assert_true(accessibleTwo.isSelected); |
| assert_false(accessibleTwo.isSelectedOptionActive); |
| assert_true(accessibleThree.isSelected); |
| assert_true(accessibleThree.isSelectedOptionActive); |
| |
| // Make the test finish quickly whether we get the notification or not. |
| testCase.step_timeout(function() { |
| if (window.accessibilityController) |
| accessibleMenulist.removeNotificationListener(); |
| assert_equals(notificationReceivedIndex, expectedNotifications.length, |
| 'All notifications received'); |
| testCase.done(); |
| }, 10); |
| } |
| |
| window.addEventListener('load', function() { |
| testCase.step_timeout(runTest, 10); |
| }, false); |
| </script> |
| </head> |
| <body> |
| |
| <select multiple id="menulist"> |
| <option selected>One</option> |
| <option>Two</option> |
| <option>Three</option> |
| <option>Four</option> |
| </select> |
| |
| <p id="description"></p> |
| |
| </body> |
| </html> |
