<!DOCTYPE html>
<title></title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<div>
<input type="number" id="test" value="0">
<input id="another">
</div>
<script>
// Positive deltaX or deltaY means scroll right or down.
async function dispatchWheelEvent(element, deltaX, deltaY)
{
element_center = elementCenter(element);
await wheelTick(deltaX, deltaY, element_center);
}
promise_test(async t => {
const input = document.getElementById('test');
input.focus();
// Initial value is 0. We'll wheel up by 1
await dispatchWheelEvent(input, 0, -1);
assert_equals(input.value, "1", "Wheel up increments value to 1.");
// We change the selected value in ScrollBegin and the three wheel ticks
// are treated as a single stream with one ScrollBegin, so we increase or
// decrease by one value even though there is more than one wheel tick.
// Wheel up by 3:
await dispatchWheelEvent(input, 0, -3);
assert_equals(input.value, "2", "Larger delta still increments by 1.");
// Wheel down by 1
await dispatchWheelEvent(input, 0, 1);
assert_equals(input.value, "1", "Wheel down decrements value by 1.");
// Wheel down by 3
await dispatchWheelEvent(input, 0, 3);
assert_equals(input.value, "0", "Larger delta still decrements by 1.");
// Disabled input element
input.disabled = true;
await dispatchWheelEvent(input, 0, -1);
assert_equals(input.value, "0", "Disabled element isn't changed.");
input.removeAttribute('disabled');
// Read-only input element
input.readOnly = true;
await dispatchWheelEvent(input, 0, -1);
assert_equals(input.value, "0", "Read only element isn't changed.");
input.readOnly = false;
// No focus
document.getElementById('another').focus();
await dispatchWheelEvent(input, 0, -1);
assert_equals(input.value, "0", "Unfocused element isn't changed.");
}, "Wheel operations for <input type='number'>");
</script>
Codebase Browser
chromium