<!DOCTYPE html>
<html>
<head>
<title>Document::nodesFromRect : Rect-based hit-testing on SVG elements - bug 89990</title>
<style type="text/css">
#sandbox {
position: absolute;
left: 0px;
top: 0px;
width: 600px;
height: 800px;
}
.svg {
width: 40px;
height: 20px;
margin: 10px;
padding: 2px;
box-sizing: border-box;
}
</style>
<script src="../../../resources/js-test.js"></script>
<script src="resources/nodesFromRect.js"></script>
</head>
<body>
<div id=sandbox>
<div class=svg id=div1>
<svg id=svg1 height=16 xmlns="http://www.w3.org/2000/svg">
<circle id="red" cx="8" cy="8" r="5" fill="red" />
</svg>
</div>
<div class=svg id=div2>
<svg id=svg2 height=16 xmlns="http://www.w3.org/2000/svg">
<circle id="yellow" cx="8" cy="8" r="5" fill="yellow" />
</svg>
</div>
<div class=svg id=div3>
<svg id=svg3 height=16 xmlns="http://www.w3.org/2000/svg">
<circle id="green" cx="8" cy="8" r="5" fill="green" />
</svg>
</div>
</div>
<script>
function runTest()
{
description(document.title);
var e = {};
// Set up shortcut access to elements
['sandbox', 'div1', 'div2', 'div3', 'div4',
'svg1', 'svg2', 'svg3', 'svg4',
'red', 'yellow', 'green'].forEach(function(a) {
e[a] = document.getElementById(a);
});
window.scrollTo(0, 0);
debug('Check area hits fully inside SVG element');
check(16, 16, 9, 9, [e.red, e.svg1]);
check(16, 48, 9, 9, [e.yellow, e.svg2]);
check(14, 76, 9, 9, [e.green, e.svg3]);
check(12, 12, 5, 5, [e.red, e.svg1]);
check(11, 11, 19, 19, [e.red, e.svg1, e.div1]);
debug('Check area hits overlapping SVG element');
check(10, 10, 5, 5, [e.svg1, e.div1]);
check(1, 45, 26, 11, [e.yellow, e.svg2, e.div2, e.sandbox]);
debug('Check area hits across SVG elements');
check(10, 10, 21, 51, [e.yellow, e.svg2, e.div2, e.red, e.svg1, e.div1, e.sandbox]);
debug('');
}
runTest();
</script>
<p id='description'></p>
<span id="console"></span>
</body>
</html>
Codebase Browser
chromium