third_party/WebKit/LayoutTests/svg/custom/mouse-move-on-svg-container-standalone.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" style="border: solid">
   2     <g>
   3         <circle cx="350" cy="350" r="50" fill="green" onmousedown="startMove()"/>
   4     </g>
   5     <text x="200" y="50" text-anchor="middle">The circle should stay in the bottom-right corner</text>
   6     <script>
   7         var root = document.getElementsByTagName("svg")[0];
   8         var container = document.getElementsByTagName("g")[0];
   9         var circle = document.getElementsByTagName("circle")[0];
  10
  11         function move(evt) {
  12             var matrix = container.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             container.addEventListener("mousemove", move, false);
  23             root.addEventListener("mouseup", stopMove, false);
  24         }
  25
  26         function stopMove() {
  27             container.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 </svg>