| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| </head> |
| <body style="margin: 0px; padding: 0px"> |
| |
| <div style="overflow: scroll; width: 750px; height: 550px"> |
| <div style="overflow: scroll; width: 725px; height: 1000px"> |
| <svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;" width="100%" height="4096"> |
| <rect x="350" y="1950" width="100" height="100" fill="navy" fill-opacity="0.5"/> |
| <circle r="50" fill="lightcoral"/> |
| <text text-anchor="middle" x="400" y="2100">The test passes if the circle sits in the rect</text> |
| </svg> |
| </div> |
| </div> |
| |
| <script type="text/javascript"> |
| var svg = document.getElementsByTagName("svg")[0]; |
| var dot = document.getElementsByTagName("circle")[0]; |
| var div1 = document.getElementsByTagName("div")[0]; |
| var div2 = document.getElementsByTagName("div")[1]; |
| |
| window.addEventListener("mousemove", mousemove, false); |
| div1.scrollTop = 300; |
| div2.scrollTop = 1400; |
| |
| if (window.eventSender) |
| eventSender.mouseMoveTo(400, 300); |
| |
| function mousemove(evt) { |
| var point = svg.createSVGPoint(); |
| point.x = evt.clientX; |
| point.y = evt.clientY; |
| point = point.matrixTransform(svg.getScreenCTM().inverse()); |
| dot.setAttribute("cx", point.x); |
| dot.setAttribute("cy", point.y); |
| } |
| </script> |
| </body> |
| </html> |
