third_party/WebKit/LayoutTests/svg/custom/getscreenctm-in-scrollable-div-area-nested.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 <div style="overflow: scroll; width: 725px; height: 1000px">
   8     <svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;" width="100%" height="4096">
   9         <rect x="350" y="1950" width="100" height="100" fill="navy" fill-opacity="0.5"/>
  10         <circle r="50" fill="lightcoral"/>
  11         <text text-anchor="middle" x="400" y="2100">The test passes if the circle sits in the rect</text>
  12     </svg>
  13 </div>
  14 </div>
  15
  16 <script type="text/javascript">
  17 var svg = document.getElementsByTagName("svg")[0];
  18 var dot = document.getElementsByTagName("circle")[0];
  19 var div1 = document.getElementsByTagName("div")[0];
  20 var div2 = document.getElementsByTagName("div")[1];
  21
  22 window.addEventListener("mousemove", mousemove, false);
  23 div1.scrollTop = 300;
  24 div2.scrollTop = 1400;
  25
  26 if (window.eventSender)
  27     eventSender.mouseMoveTo(400, 300);
  28
  29 function mousemove(evt) {
  30     var point = svg.createSVGPoint();
  31     point.x = evt.clientX;
  32     point.y = evt.clientY;
  33     point = point.matrixTransform(svg.getScreenCTM().inverse());
  34     dot.setAttribute("cx", point.x);
  35     dot.setAttribute("cy", point.y);
  36 }
  37 </script>
  38 </body>
  39 </html>