blob: 4bc3bfd9d9c11ad4ad8f2486786df5018daa4d2c [file] [log] [blame]
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" style="border: solid">
<g>
<circle cx="350" cy="350" r="50" fill="green" onmousedown="startMove()"/>
</g>
<text x="200" y="50" text-anchor="middle">The circle should stay in the bottom-right corner</text>
<script>
var root = document.getElementsByTagName("svg")[0];
var container = document.getElementsByTagName("g")[0];
var circle = document.getElementsByTagName("circle")[0];
function move(evt) {
var matrix = container.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() {
container.addEventListener("mousemove", move, false);
root.addEventListener("mouseup", stopMove, false);
}
function stopMove() {
container.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>
</svg>