third_party/WebKit/LayoutTests/svg/custom/getscreenctm-in-scrollable-div-area.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3 </head>
   4 <body style="margin: 0px; padding: 0px">
   5
   6 <div style="overflow: scroll; width: 750px; height: 550px">
   7     <svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;" width="100%" height="4006">
   8         <rect x="350" y="1950" width="100" height="100" fill="navy" fill-opacity="0.5"/>
   9         <circle r="50" fill="lightcoral"/>
  10         <text text-anchor="middle" x="400" y="2100">The test passes if the circle sits in the rect</text>
  11     </svg>
  12 </div>
  13
  14 <script type="text/javascript">
  15 var svg = document.getElementsByTagName("svg")[0];
  16 var dot = document.getElementsByTagName("circle")[0];
  17 var div = document.getElementsByTagName("div")[0];
  18
  19 window.addEventListener("mousemove", mousemove, false);
  20 div.scrollTop = 1700;
  21
  22 if (window.eventSender)
  23     eventSender.mouseMoveTo(400, 300);
  24
  25 function mousemove(evt) {
  26     var point = svg.createSVGPoint();
  27     point.x = evt.clientX;
  28     point.y = evt.clientY;
  29     point = point.matrixTransform(svg.getScreenCTM().inverse());
  30     dot.setAttribute("cx", point.x);
  31     dot.setAttribute("cy", point.y);
  32 }
  33 </script>
  34 </body>
  35 </html>