<!DOCTYPE>
<html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../../../external/wpt/resources/testdriver-actions.js"></script>
<input type="number" id="num1" onchange="handleChangeEvent(this);" oninput="handleInputEvent(this);">
<div id="div1" style="width:10px;height:10px; margin:50px; background-color: red"></div>
</body>
<script>
var changeEventCounter = 0;
var inputEventCounter = 0;
var mouseMoveCount = 0;

num1.value = 0;
x = num1.offsetLeft + num1.offsetWidth - 10;
y = num1.offsetTop + num1.offsetHeight / 4

function handleChangeEvent(element) {
    ++changeEventCounter;
}

function handleInputEvent(element) {
    ++inputEventCounter;
}

div1.addEventListener("pointermove", function(e) {
  ++mouseMoveCount;
})
promise_test (async() => {
    num1.focus();

    await new test_driver.Actions()
                         .pointerMove(x, y)
                         .pointerDown()
                         .pointerUp()
                         .pointerDown()
                         .pointerUp()
                         .pointerDown()
                         .pointerUp()
                         .send();

    assert_equals(inputEventCounter,  3, "input event");
    assert_equals(changeEventCounter, 3, "change event");
    assert_equals(num1.value, '3', "number field value");
}, "Test that send 3 click without move in between dispatch input and change events correctly");

promise_test (async() => {
    await new test_driver.Actions()
                         .pointerMove(0, 0, {origin: div1})
                         .pointerDown()
                         .pointerUp()
                         .send();

    assert_equals(inputEventCounter,  3, "input event");
    assert_equals(changeEventCounter, 3, "change event");
    assert_equals(num1.value, '3', "number field value");
    assert_equals(mouseMoveCount, 1)
}, "pointer move and click elsewhere, and it's not captured by spin button");

promise_test (async() => {
    num1.focus();
    await new test_driver.Actions()
                            .pointerMove(x, y)
                            .pointerDown()
                            .pointerMove(x - 10, y - 10)
                            .pointerUp()
                            .send();

    assert_equals(inputEventCounter,  4, "input event");
    assert_equals(changeEventCounter, 4, "change event");
    assert_equals(num1.value, '4', "number field value");
}, "Mouse down at spin button and move out dispatch input and change events correctly");

promise_test (async() => {
    await new test_driver.Actions()
                         .pointerMove(0, 0, {origin: div1})
                         .pointerDown()
                         .pointerUp()
                         .send();

    assert_equals(inputEventCounter,  4, "input event");
    assert_equals(changeEventCounter, 4, "change event");
    assert_equals(num1.value, '4', "number field value");
    assert_equals(mouseMoveCount, 2)
}, "click elsewhere is not captured by spin button");

</script>
</body>
</html>