<html xmlns='http://www.w3.org/1999/xhtml'>
<body style="margin: 0px; padding: 0px">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" style="border: solid">
    <circle cx="350" cy="350" r="50" fill="green" onmousedown="startMove()"/>
    <text x="200" y="50" text-anchor="middle">The circle should be in the middle</text>
</svg>
<script>
    var root = document.getElementsByTagName("svg")[0];
    var circle = document.getElementsByTagName("circle")[0];

    function move(evt) {
        var matrix = root.getScreenCTM();
        var point = root.createSVGPoint();
        point.x = evt.clientX;
        point.y = evt.clientY;
        point = point.matrixTransform(matrix.inverse());
        circle.cx.baseVal.value = point.x;
        circle.cy.baseVal.value = point.y;
    }

    function startMove() {
        root.addEventListener("mousemove", move, false);
        root.addEventListener("mouseup", stopMove, false);
    }

    function stopMove() {
        root.removeEventListener("mousemove", move, false);
        root.removeEventListener("mouseup", stopMove, false);

        if (window.testRunner)
            testRunner.notifyDone();
    }

    if (window.testRunner)
        testRunner.waitUntilDone();

    if (window.eventSender) {
        eventSender.mouseMoveTo(350, 350);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(200, 200);
        eventSender.mouseUp();
    }
</script>
</body>
</html>