<!doctype html>
<html>
<body>
<script src="../../../resources/js-test-pre.js"></script>
<script>
description("Tests that click events still work after a range is disabled while dragging.");
jsTestIsAsync = true;

const input = (that) => {
    if (Math.abs(that.value - 50) === 50)
        that.disabled = true;
};

let buttonClicked = false;

function buttonClick()
{
    buttonClicked = true;
}

onload = function() {
    range = document.querySelector("input");

    shouldBeFalse("range.disabled");

    debug("Drag range slider.");
    var centerY = range.offsetTop + range.offsetHeight / 2;
    var centerX = range.offsetLeft + range.offsetWidth / 2;
    var rightEdgeX = range.offsetLeft + range.offsetWidth - 1;

    eventSender.mouseMoveTo(centerX, centerY);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(rightEdgeX, centerY);
    eventSender.mouseUp();

    setTimeout(function() {
        shouldBeTrue("range.disabled");

        debug("Click button");
        button = document.querySelector("button");
        var centerY = button.offsetTop + button.offsetHeight / 2;
        var centerX = button.offsetLeft + button.offsetWidth / 2;
        eventSender.mouseMoveTo(centerX, centerY);
        eventSender.mouseDown();
        eventSender.mouseUp();

        setTimeout(function() {
            shouldBeTrue("buttonClicked");
            finishJSTest();
        }, 0);
    }, 0);
}
</script>

<input type="range" oninput="input(this)">
<button onclick="buttonClick()">Click</button>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>