<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test-pre.js"></script>
<script>
window.jsTestIsAsync = true;

var finishTest = false;

function optionChanged() {
    debug("PASS");
    if (finishTest)
        finishJSTest();
}

function test() {
    document.getElementById("bug-test").focus();
    if (window.eventSender) {
        debug("Pressing down arrow key");
        eventSender.keyDown('downArrow');

        debug("Pressing up arrow key");
        eventSender.keyDown('upArrow');

        debug("Pressing page down key");
        eventSender.keyDown('pageDown');

        debug("Pressing page up key");
        eventSender.keyDown('pageUp');

        debug("Pressing end key");
        eventSender.keyDown('end');

        finishTest = true;

        debug("Pressing home key");
        eventSender.keyDown('home');
    } else {
        debug("Test manually by pressing up/down key. Should get PASS message");
        finishJSTest();
    }
}

successfullyParsed = true;
</script>
</head>
<body onload="test()">
<p>Selecting menu list options using up/down key should fire onchange event</p>

<select id="bug-test" onChange="optionChanged()">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>

<div id="console"></div>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>