dmazzoni@google.com | 3c863ea | 2011-11-21 09:50:39 +0000 | [diff] [blame] | 1 | <html> |
| 2 | <head> |
| 3 | <link rel="stylesheet" href="../fast/js/resources/js-test-style.css"> |
| 4 | <script src="../fast/js/resources/js-test-pre.js"></script> |
| 5 | <script> |
rniwa@webkit.org | 3526ecc3 | 2012-06-12 20:37:15 +0000 | [diff] [blame] | 6 | if (window.testRunner) |
| 7 | testRunner.waitUntilDone(); |
dmazzoni@google.com | 3c863ea | 2011-11-21 09:50:39 +0000 | [diff] [blame] | 8 | |
| 9 | function runTest() { |
| 10 | description("This tests that navigating in a multiselect list updates selection and the active selected option and sends a notification."); |
| 11 | |
| 12 | if (window.accessibilityController) { |
| 13 | var menulist = document.getElementById("menulist"); |
| 14 | menulist.focus(); |
| 15 | window.accessibleMenulist = accessibilityController.focusedElement; |
| 16 | window.accessibleOne = accessibleMenulist.childAtIndex(0); |
| 17 | window.accessibleTwo = accessibleMenulist.childAtIndex(1); |
| 18 | window.accessibleThree = accessibleMenulist.childAtIndex(2); |
| 19 | |
| 20 | function listListener(notification) { |
| 21 | document.getElementById("console").innerText += "List notification: " + notification + "\n"; |
| 22 | } |
| 23 | accessibleMenulist.addNotificationListener(listListener); |
| 24 | |
| 25 | shouldBe("accessibleOne.isSelected", "true"); |
| 26 | shouldBe("accessibleOne.isSelectedOptionActive", "true"); |
| 27 | shouldBe("accessibleTwo.isSelected", "false"); |
| 28 | shouldBe("accessibleTwo.isSelectedOptionActive", "false"); |
| 29 | shouldBe("accessibleThree.isSelected", "false"); |
| 30 | shouldBe("accessibleThree.isSelectedOptionActive", "false"); |
| 31 | |
| 32 | // Change the selected index by simulating a down arrow keydown event. |
| 33 | var event = document.createEvent('KeyboardEvents'); |
| 34 | event.initKeyboardEvent('keydown', true, true, document.defaultView, 'Down', 0, false, false, false, false, false); |
| 35 | menulist.dispatchEvent(event); |
| 36 | |
| 37 | shouldBe("accessibleOne.isSelected", "false"); |
| 38 | shouldBe("accessibleOne.isSelectedOptionActive", "false"); |
| 39 | shouldBe("accessibleTwo.isSelected", "true"); |
| 40 | shouldBe("accessibleTwo.isSelectedOptionActive", "true"); |
| 41 | shouldBe("accessibleThree.isSelected", "false"); |
| 42 | shouldBe("accessibleThree.isSelectedOptionActive", "false"); |
| 43 | |
| 44 | // Extend the selection by simulating a Shift + Down Arrow keydown event. |
| 45 | var event = document.createEvent('KeyboardEvents'); |
| 46 | event.initKeyboardEvent('keydown', true, true, document.defaultView, 'Down', 0, false, false, true, false, false); |
| 47 | menulist.dispatchEvent(event); |
| 48 | |
| 49 | shouldBe("accessibleOne.isSelected", "false"); |
| 50 | shouldBe("accessibleOne.isSelectedOptionActive", "false"); |
| 51 | shouldBe("accessibleTwo.isSelected", "true"); |
| 52 | shouldBe("accessibleTwo.isSelectedOptionActive", "false"); |
| 53 | shouldBe("accessibleThree.isSelected", "true"); |
| 54 | shouldBe("accessibleThree.isSelectedOptionActive", "true"); |
| 55 | } |
| 56 | |
| 57 | // Make the test finish quickly whether we get the notification or not. |
| 58 | window.setTimeout(function() { |
| 59 | debug('<br /><span class="pass">TEST COMPLETE</span>'); |
| 60 | if (window.accessibilityController) |
| 61 | accessibleMenulist.removeNotificationListener(); |
rniwa@webkit.org | 3526ecc3 | 2012-06-12 20:37:15 +0000 | [diff] [blame] | 62 | if (window.testRunner) |
| 63 | testRunner.notifyDone(); |
dmazzoni@google.com | 3c863ea | 2011-11-21 09:50:39 +0000 | [diff] [blame] | 64 | }, 10); |
| 65 | } |
| 66 | |
| 67 | window.addEventListener('load', function() { |
| 68 | setTimeout(runTest, 10); |
| 69 | }, false); |
| 70 | </script> |
| 71 | </head> |
| 72 | <body> |
| 73 | |
| 74 | <select multiple id="menulist"> |
| 75 | <option selected>One</option> |
| 76 | <option>Two</option> |
| 77 | <option>Three</option> |
| 78 | <option>Four</option> |
| 79 | </select> |
| 80 | |
| 81 | <p id="description"></p> |
| 82 | <div id="console"></div> |
| 83 | |
| 84 | </body> |
| 85 | </html> |