<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test.js"></script>
<select id="listBoxSelect" size="5" multiple="multiple">
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
<option value="option 4">Option 4</option>
<option value="option 5">Option 5</option>
</select>
<script>
description('should dispatch change event when mouse is released outside.');
jsTestIsAsync = true;
var select = document.getElementById('listBoxSelect');
select.onchange = function() {
    testPassed('A change event was dispatched.');
}

window.onload = function()
{
    if (!window.eventSender)
        debug('Select listbox using mouse and release the mouse pointer outside the listbox. The test passes if "A change event was dispatched." is printed.');
    else {   
        var x = select.offsetLeft + 7;
        var y = select.offsetTop + 7;
        eventSender.dragMode = false;
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(x, y + 20);
        eventSender.mouseMoveTo(x, y + 600);
        eventSender.mouseUp(); 
        setTimeout(HorizontalTest, 100);
    }
}
function HorizontalTest()
{
    var x = select.offsetLeft + 7;
    var y = select.offsetTop + 7;
    eventSender.dragMode = false;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x + 20, y);
    eventSender.mouseMoveTo(x + 600, y);
    eventSender.mouseUp();
    finishJSTest();
}
</script>
</body>
</html>
