<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<input type="range" id="slider" oninput="log(event)" onchange="log(event)"  min=0 max=100 value=50>
<script>
    description('Test that for each keyboard event both input and change event are dispatched');
    var changeEventCounter = 0;
    var lastChangeEventCounter = changeEventCounter;
    var inputEventCounter = 0;
    var lastInputEventCounter = inputEventCounter;

    function log(event) {
        if (event.type == 'input')
           inputEventCounter++;
        if (event.type == 'change')
            changeEventCounter++;
    }

    function testInput() {
        var slider = document.getElementById('slider');
        if (window.testRunner) {
            // slider drag
            slider.focus();
            debug('Move left');
            eventSender.keyDown('leftArrow');
            shouldBeGreaterThanOrEqual('inputEventCounter' , 'lastInputEventCounter + 1');
            shouldBeGreaterThanOrEqual('changeEventCounter', 'lastChangeEventCounter + 1');
            debug('Move right');
            lastInputEventCounter = inputEventCounter;
            lastChangeEventCounter = changeEventCounter;
            eventSender.keyDown('rightArrow');
            shouldBeGreaterThanOrEqual('inputEventCounter' , 'lastInputEventCounter + 1');
            shouldBeGreaterThanOrEqual('changeEventCounter', 'lastChangeEventCounter + 1');
        }
    }
    testInput();
</script>
</body>
</html>