<html>
    <head>
        <script>
            function log(msg)
            {
                var console = document.getElementById('console');
                console.innerHTML = console.innerHTML + msg + "<br>";
            }
            
            function buttonClick()
            {
                log("<br>clicking button");

                // click the button
                var button = document.getElementById('button');
                eventSender.mouseMoveTo(button.offsetLeft + 20, button.offsetTop + 7);
                eventSender.mouseDown();
                eventSender.mouseUp();

                testRunner.notifyDone();
            }
            
            function deleteSlider()
            {
                // delete the slider
                log("<br>deleting slider");
                var slider = document.getElementById('slider');
                slider.parentNode.removeChild(slider);

                setTimeout(buttonClick, 10);
            }
            
            function drag()
            {
                if (!window.testRunner)
                    return;

                var slider = document.getElementById('slider');

                testRunner.dumpAsText();
                testRunner.waitUntilDone();

                // drag slider, leave the mouse down
                log("dragging slider");
                eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
                eventSender.mouseDown();
                eventSender.mouseMoveTo(slider.offsetLeft + 50, slider.offsetTop + 7);

                setTimeout(deleteSlider, 10);
            }
        </script>
    </head>
    <body onload="drag()">
        This tests that events don't continue to target a slider thumb if it is deleted while dragging.
        <br>
        <input type="button" id="button" value="Click Me!" onmouseup="log('button click!')"> 
        <br>
        <input type="range" id="slider" onmousedown="log('mousedown')" onmouseup="log('mouseup')" onmousemove="log('mousemove')" oninput="log('input')" value=0>
        <div id="console"></div>
    </body>
</html>