<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test.js"></script>
<select id="select1" multiple size="4">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>

<script>
description('Click on a listbox scrollbar should not dispatch change evnet.');
jsTestIsAsync = true;
var select1 = document.getElementById('select1');
var changeEventCounter = 0;
select1.onchange = function() {
    debug('A change event was dispatched.');
    ++changeEventCounter;
}

window.onload = function() {
    if (!window.eventSender)
        debug('Click on the scrollbar. The test passes if nothing is printed.');
    else {
        eventSender.mouseMoveTo(select1.offsetLeft + select1.offsetWidth - 2, select1.offsetTop + select1.offsetHeight - 2);
        eventSender.mouseDown();
        eventSender.mouseUp();
        shouldBe('select1.selectedIndex', '-1');
        shouldBe('changeEventCounter', '0');

        debug('');
        debug('Dispatch a change evnet to prepare the next test.');
        eventSender.mouseMoveTo(select1.offsetLeft + 4, select1.offsetTop + 4);
        eventSender.mouseDown();
        eventSender.mouseUp();
        shouldBe('changeEventCounter', '1');
        debug('Change the option list size, and click the scrollbar again.');
        select1.appendChild(new Option("9"));
        eventSender.mouseMoveTo(select1.offsetLeft + select1.offsetWidth - 2, select1.offsetTop + select1.offsetHeight - 2);
        eventSender.mouseDown();
        eventSender.mouseUp();
        shouldBe('changeEventCounter', '1');

        finishJSTest();
    }
};
</script>

</html>