| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| .rtl { |
| direction: rtl; |
| } |
| </style> |
| </head> |
| <body> |
| <input id="slider" type="range" value="0" step="1"/> |
| <input id="slider-rtl" class="rtl" type="range" value="0" step="1"/> |
| |
| <script> |
| function checkEvent(event, target, expected_key) { |
| if (expected_key == "ArrowUp") { |
| assert_equals(event.code, "ArrowUp", "event.code on " + event.type); |
| assert_equals(event.key, "ArrowUp", "event.key on " + event.type); |
| assert_equals(event.keyCode, 38, "event.keyCode on " + event.type); |
| assert_equals(event.which, 38, "event.which on " + event.type); |
| } else if (expected_key == "ArrowDown") { |
| assert_equals(event.code, "ArrowDown", "event.code on " + event.type); |
| assert_equals(event.key, "ArrowDown", "event.key on " + event.type); |
| assert_equals(event.keyCode, 40, "event.keyCode on " + event.type); |
| assert_equals(event.which, 40, "event.which on " + event.type); |
| } else if (expected_key == "ArrowLeft") { |
| assert_equals(event.code, "ArrowLeft", "event.code on " + event.type); |
| assert_equals(event.key, "ArrowLeft", "event.key on " + event.type); |
| assert_equals(event.keyCode, 37, "event.keyCode on " + event.type); |
| assert_equals(event.which, 37, "event.which on " + event.type); |
| } else if (expected_key == "ArrowRight") { |
| assert_equals(event.code, "ArrowRight", "event.code on " + event.type); |
| assert_equals(event.key, "ArrowRight", "event.key on " + event.type); |
| assert_equals(event.keyCode, 39, "event.keyCode on " + event.type); |
| assert_equals(event.which, 39, "event.which on " + event.type); |
| } |
| |
| assert_true(event.isTrusted, "event.isTrusted on " + event.type); |
| assert_equals(event.charCode, 0, "event.charCode on " + event.type); |
| assert_equals(event.target, target, "event.target on " + event.type); |
| assert_equals(event.srcElement, target, "event.srcElement on " + event.type); |
| assert_true(event.bubbles, "event.bubbles on " + event.type); |
| assert_false(event.defaultPrevented, "event.defaultPrevented on " + event.type); |
| } |
| |
| test(function(t) { |
| assert_true(internals.runtimeFlags.synthesizedKeyboardEventsForAccessibilityActionsEnabled); |
| }, "Make sure that keyboard event synthesis is enabled"); |
| |
| // Test left-to-right slider |
| |
| async_test(function(t) { |
| var slider = document.getElementById("slider"); |
| var axSlider = accessibilityController.accessibleElementById("slider"); |
| |
| // Listener for keydown event after increment action. |
| slider.addEventListener("keydown", t.step_func((event) => { |
| checkEvent(event, slider, "ArrowRight"); |
| }), { once: true }); |
| |
| // Listener for keyup event after increment action. |
| // It sets up a new set of listeners and runs the decrement action. |
| slider.addEventListener("keyup", t.step_func((event) => { |
| checkEvent(event, slider, "ArrowRight"); |
| assert_equals(slider.value, "1", "slider value after increase"); |
| |
| // Listener for keydown event after decrement action. |
| slider.addEventListener("keydown", t.step_func((event) => { |
| checkEvent(event, slider, "ArrowLeft"); |
| }), { once: true }); |
| |
| // Listener for keyup event after decrement action. |
| slider.addEventListener("keyup", t.step_func_done((event) => { |
| checkEvent(event, slider, "ArrowLeft"); |
| assert_equals(slider.value, "0", "slider value after decrease"); |
| }), { once: true }); |
| |
| window.setTimeout(() => { |
| axSlider.decrement(); |
| }, 0); |
| }), { once: true }); |
| |
| window.setTimeout( |
| t.unreached_func("didn't get all key events within 1000ms"), 1000); |
| |
| axSlider.increment(); |
| }, "Check that running increment and decrement actions on a native slider generates the corresponding keydown and keyup events"); |
| |
| // Test right-to-left slider |
| |
| async_test(function(t) { |
| var slider = document.getElementById("slider-rtl"); |
| var axSlider = accessibilityController.accessibleElementById("slider-rtl"); |
| |
| // Listener for keydown event after increment action. |
| slider.addEventListener("keydown", t.step_func((event) => { |
| checkEvent(event, slider, "ArrowLeft"); |
| }), { once: true }); |
| |
| // Listener for keyup event after increment action. |
| // It sets up a new set of listeners and runs the decrement action. |
| slider.addEventListener("keyup", t.step_func((event) => { |
| checkEvent(event, slider, "ArrowLeft"); |
| assert_equals(slider.value, "1", "slider value after increase"); |
| |
| // Listener for keydown event after decrement action. |
| slider.addEventListener("keydown", t.step_func((event) => { |
| checkEvent(event, slider, "ArrowRight"); |
| }), { once: true }); |
| |
| // Listener for keyup event after decrement action. |
| slider.addEventListener("keyup", t.step_func_done((event) => { |
| checkEvent(event, slider, "ArrowRight"); |
| assert_equals(slider.value, "0", "slider value after decrease"); |
| t.done(); |
| }), { once: true }); |
| |
| window.setTimeout(() => { |
| axSlider.decrement(); |
| }, 0); |
| }), { once: true }); |
| |
| window.setTimeout( |
| t.unreached_func("didn't get all key events within 1000ms"), 1000); |
| |
| axSlider.increment(); |
| }, "Check that running increment and decrement actions on a RTL native slider generates the corresponding keydown and keyup events"); |
| </script> |
| </body> |
| </html> |