<html>
    <head>
        <title></title>
        <script type="text/javascript">
            var changeCount = new Array(4);
            changeCount[1] = changeCount[2] = changeCount[3] = 0;

            function test()
            {
                if (!window.eventSender)
                    return;

                testRunner.dumpAsText();

                var popup = document.getElementById("switcher1");
                popup.focus();

                popup = document.getElementById("switcher2");
                popup.focus();

                eventSender.keyDown("t", null);
                eventSender.keyDown("\r", null);

                var popup = document.getElementById("switcher3");
                popup.focus();

                check();
           }

           function check() {
                setTimeout("document.getElementById('switcher3').selectedIndex = 1;", 0);

                var popup = document.getElementById("switcher2");
                popup.focus();

                var result = document.getElementById("result");
                result.innerHTML = "";
                if (changeCount[1] != 0) {
                    result.innerHTML += "<br/>FAILURE: onchange(1) called " + changeCount[1] + " times.";
                } 
                if (changeCount[2] != 1) {
                    result.innerHTML += "<br/>FAILURE: onchange(2) called " + changeCount[2] + " times.";
                } 
                if (changeCount[3] != 0) {
                    result.innerHTML += "<br/>FAILURE: onchange(3) called " + changeCount[3] + " times.";
                } 
                if (result.innerHTML == "") result.innerHTML = "SUCCESS";

            }

            function changed(select)
            {
                changeCount[select]++;
            }
        </script>
    </head>
    <body onload="test()">
        <p>
            Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=23721">http://bugs.webkit.org/show_bug.cgi?id=23721</a>
            Changing dropdown's selectedIndex within onchange handler fires another onchange</i>.
        </p>
        <p id="result">
          To test interactively: focus on the first select (don't change it).<br/>
          Change the second select to "two"<br/>
          Focus on the third, then click <a href="#" onclick="check(); return false;">here</a>.  
        </p>
        This select changes on focus: should not fire onchange.
        <select name="switcher1" id="switcher1" onfocus="this.selectedIndex = 1;" onchange="changed(1)">
            <option value="one">One</option>
            <option value="two">Two</option>
        </select>
        <hr/>
        This select changes on change: should only fire onchange once.
        <select name="switcher2" id="switcher2" onchange="changed(2); if (this.selectedIndex == 1) this.selectedIndex = 2;">
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
        </select>
        <hr/>
        This select is changed by a timeout in the test script.  It should not fire onchange.
        <select name="switcher3" id="switcher3" onchange="changed(3)">
            <option value="one">One</option>
            <option value="two">Two</option>
        </select>        
    </body>
</html>