1 <html xmlns='http://www.w3.org/
1999/xhtml'
>
2 <body style=
"margin: 0px; padding: 0px">
3 <svg xmlns=
"http://www.w3.org/2000/svg" width=
"400" height=
"400" style=
"border: solid">
5 <circle cx=
"350" cy=
"350" r=
"50" fill=
"green" onmousedown=
"startMove()"/>
7 <text x=
"200" y=
"50" text-anchor=
"middle">The circle should stay in the bottom-right corner
</text>
10 var root
= document
.getElementsByTagName("svg")[0];
11 var container
= document
.getElementsByTagName("g")[0];
12 var circle
= document
.getElementsByTagName("circle")[0];
15 var matrix
= container
.getScreenCTM();
16 var point
= root
.createSVGPoint();
17 point
.x
= evt
.clientX
;
18 point
.y
= evt
.clientY
;
19 point
= point
.matrixTransform(matrix
.inverse());
20 circle
.cx
.baseVal
.value
= point
.x
;
21 circle
.cy
.baseVal
.value
= point
.y
;
24 function startMove() {
25 container
.addEventListener("mousemove", move, false);
26 root
.addEventListener("mouseup", stopMove
, false);
30 container
.removeEventListener("mousemove", move, false);
31 root
.removeEventListener("mouseup", stopMove
, false);
33 if (window
.testRunner
)
34 testRunner
.notifyDone();
37 if (window
.testRunner
)
38 testRunner
.waitUntilDone();
40 if (window
.eventSender
) {
41 eventSender
.mouseMoveTo(350, 350);
42 eventSender
.mouseDown();
43 eventSender
.mouseMoveTo(200, 200);
44 eventSender
.mouseUp();