<!DOCTYPE HTML>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div id="slider"
role="slider"
aria-valuemin="0"
aria-valuemax="10"
aria-valuenow="5"></div>
<div id="slider-rtl"
class="rtl"
role="slider"
aria-valuemin="0"
aria-valuemax="10"
aria-valuenow="5"></div>
<div id="slider-vertical"
role="slider"
aria-orientation="vertical"
aria-valuemin="0"
aria-valuemax="10"
aria-valuenow="5"></div>
<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 horizontal, 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");
// 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");
}), { 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 an ARIA slider generates the corresponding keydown and keyup events");
// Test horizontal, 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");
// 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");
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 ARIA slider generates the corresponding keydown and keyup events");
// Test vertical slider
async_test(function(t) {
var slider = document.getElementById("slider-vertical");
var axSlider = accessibilityController.accessibleElementById("slider-vertical");
// Listener for keydown event after increment action.
slider.addEventListener("keydown", t.step_func((event) => {
checkEvent(event, slider, "ArrowUp");
}), { 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, "ArrowUp");
// Listener for keydown event after decrement action.
slider.addEventListener("keydown", t.step_func((event) => {
checkEvent(event, slider, "ArrowDown");
}), { once: true });
// Listener for keyup event after decrement action.
slider.addEventListener("keyup", t.step_func_done((event) => {
checkEvent(event, slider, "ArrowDown");
}), { 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 vertical ARIA slider generates the corresponding keydown and keyup events");
</script>
</body>
</html>
Codebase Browser
chromium