third_party/WebKit/LayoutTests/svg/custom/mouse-move-on-svg-container.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     <g>
   5         <circle cx="350" cy="350" r="50" fill="green" onmousedown="startMove()"/>
   6     </g>
   7     <text x="200" y="50" text-anchor="middle">The circle should stay in the bottom-right corner</text>
   8 </svg>
   9 <script>
  10     var root = document.getElementsByTagName("svg")[0];
  11     var container = document.getElementsByTagName("g")[0];
  12     var circle = document.getElementsByTagName("circle")[0];
  13
  14     function move(evt) {
  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;
  22     }
  23
  24     function startMove() {
  25         container.addEventListener("mousemove", move, false);
  26         root.addEventListener("mouseup", stopMove, false);
  27     }
  28
  29     function stopMove() {
  30         container.removeEventListener("mousemove", move, false);
  31         root.removeEventListener("mouseup", stopMove, false);
  32
  33         if (window.testRunner)
  34             testRunner.notifyDone();
  35     }
  36
  37     if (window.testRunner)
  38         testRunner.waitUntilDone();
  39
  40     if (window.eventSender) {
  41         eventSender.mouseMoveTo(350, 350);
  42         eventSender.mouseDown();
  43         eventSender.mouseMoveTo(200, 200);
  44         eventSender.mouseUp();
  45     }
  46 </script>
  47 </body>
  48 </html>