<html>
    <head>
        <title>Test for WebKit bug 26723: clientX,Y , screenX , Y always (0, 0) in dragstart event</title>
        <style type="text/css">
            #draggable {
                background-color: #ccc;
                border: 1px solid #333;
                width: 200px;
                text-align: center;
                margin: 10px;
                -webkit-user-drag: element;
                -webkit-user-select: none;
            }

            .fail {
                color: red;
            }

            .success {
                color: green;
            }
        </style>

        <script type="text/javascript">
        
        Function.prototype.bind = function(thisObject) {
            var func = this;
            var args = Array.prototype.slice.call(arguments, 1);
            return function() { return func.apply(thisObject, args.concat(Array.prototype.slice.call(arguments, 0))) };
        }
        
        function shouldBe(resultElement, name, expected, actual) {
            var msg = document.createElement('p');
            if (expected == actual) {
                msg.innerHTML = "<span class='success'>SUCCESS</span> Expected " + expected + " for " + name + " and got it.";
            } else {
                msg.innerHTML = "<span class='fail'>FAIL</span> Expected " + expected + " for " + name + " but got " + actual + ".";
            }
            resultElement.appendChild(msg);
        }

        var Test = { 

            dragStartHandler: function(dragStart, dragDistance) {
                var resultElement = document.getElementById("result");
                shouldBe(resultElement, "clientX", Math.floor(dragStart.x), event.clientX);
                shouldBe(resultElement, "clientY", Math.floor(dragStart.y), event.clientY);
                shouldBe(resultElement, "pageX", Math.floor(dragStart.x), event.pageX);
                shouldBe(resultElement, "pageY", Math.floor(dragStart.y), event.pageY);
            },

            runTest: function() {
                if (!window.eventSender)
                    return;

                if (window.testRunner)
                    testRunner.dumpAsText();
                
                var element = document.getElementById("draggable");
                var dragStart = { x: Math.round(element.offsetLeft) + Math.round(element.offsetWidth) / 2, y:  Math.round(element.offsetTop) + 1.0 };
                var dragDistance = 10.0;
                element.ondragstart = this.dragStartHandler.bind(this, dragStart, dragDistance);
                
                eventSender.mouseMoveTo(dragStart.x, dragStart.y);
                eventSender.mouseDown();
                eventSender.mouseMoveTo(dragStart.x + dragDistance, dragStart.y + dragDistance);
                eventSender.mouseUp();
             }
             
        }
        </script>
    </head>
    <body onload="Test.runTest()">
        <h3>Test for <a href='https://bugs.webkit.org/show_bug.cgi?id=26723'>WebKit bug 26723</a>: clientX,Y , screenX , Y always (0, 0) in dragstart event</h3>

        <div id="draggable" class="test">

            DRAG ME!

        </div>
        <div id="result"></div>
    </body>
</html>