| <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"> |
| <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> |
| </svg> |
| <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> |
| </body> |
| </html> |
