number-spinbutton-increment-decrement-state.html

<!doctype html>

<!-- This is a test for the following bugfix: https://bugs.chromium.org/p/chromium/issues/detail?id=419108
Previously, clicking the up button of the spin button element, and dragging your cursor upwards several pixels
while maintaining mouseDown, would cause the down button of the spin button element to highlight as if it had
been clicked. The desired behavior is to maintain the highlight of the up button of the spin button element.
This test validates that behavior. -->

<script src="../../../resources/run-after-layout-and-paint.js"></script>
<input id="num1" type="number" value="0">
<div id = "numValue">input number value: 0</div>
<script>
runAfterLayoutAndPaint(() => {
    var num1 = document.getElementById("num1");
    // Border and padding of the input element make the minimum 3,
    // so we use 5 for vertical offset.
    var verticalOffsetToUpButton = 5;
    var upButtonX = num1.offsetLeft + num1.offsetWidth - 5;
    var upButtonY = num1.offsetTop + verticalOffsetToUpButton;
    eventSender.mouseMoveTo(upButtonX, upButtonY);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(upButtonX, upButtonY + 10);
    document.getElementById("numValue").innerHTML = `input number value: ${num1.value}`;
}, true);
</script>

chromium/third_party/blink/web_tests/fast/forms/number/number-spinbutton-increment-decrement-state.html