third_party/WebKit/LayoutTests/accessibility/multiselect-list-reports-active-option.html

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