getscreenctm-in-scrollable-div-area-nested.xhtml

<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>

chromium/third_party/blink/web_tests/svg/custom/getscreenctm-in-scrollable-div-area-nested.xhtml