third_party/WebKit/LayoutTests/svg/custom/mouse-move-on-svg-root.xhtml

   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">
   4     <circle cx="350" cy="350" r="50" fill="green" onmousedown="startMove()"/>
   5     <text x="200" y="50" text-anchor="middle">The circle should be in the middle</text>
   6 </svg>
   7 <script>
   8     var root = document.getElementsByTagName("svg")[0];
   9     var circle = document.getElementsByTagName("circle")[0];
  10
  11     function move(evt) {
  12         var matrix = root.getScreenCTM();
  13         var point = root.createSVGPoint();
  14         point.x = evt.clientX;
  15         point.y = evt.clientY;
  16         point = point.matrixTransform(matrix.inverse());
  17         circle.cx.baseVal.value = point.x;
  18         circle.cy.baseVal.value = point.y;
  19     }
  20
  21     function startMove() {
  22         root.addEventListener("mousemove", move, false);
  23         root.addEventListener("mouseup", stopMove, false);
  24     }
  25
  26     function stopMove() {
  27         root.removeEventListener("mousemove", move, false);
  28         root.removeEventListener("mouseup", stopMove, false);
  29
  30         if (window.testRunner)
  31             testRunner.notifyDone();
  32     }
  33
  34     if (window.testRunner)
  35         testRunner.waitUntilDone();
  36
  37     if (window.eventSender) {
  38         eventSender.mouseMoveTo(350, 350);
  39         eventSender.mouseDown();
  40         eventSender.mouseMoveTo(200, 200);
  41         eventSender.mouseUp();
  42     }
  43 </script>
  44 </body>
  45 </html>