88 lines
2.6 KiB
HTML
88 lines
2.6 KiB
HTML
<!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-pre.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('\nSome of following tests will likely FAIL and will need to be updated once rect-based')
|
|
debug('hit tests are supported inside SVG elements:\n');
|
|
|
|
debug('Check area hits fully inside SVG element');
|
|
check(20, 20, 4, 4, 4, 4, [e.red, e.svg1]);
|
|
check(20, 52, 4, 4, 4, 4, [e.yellow, e.svg2]);
|
|
check(18, 80, 4, 4, 4, 4, [e.green, e.svg3]);
|
|
check(14, 14, 2, 2, 2, 2, [e.svg1]);
|
|
check(20, 20, 9, 9, 9, 9, [e.red, e.svg1, e.div1]);
|
|
|
|
debug('Check area hits overlapping SVG element');
|
|
check(12, 12, 2, 2, 2, 2, [e.svg1, e.div1]);
|
|
check(6, 50, 5, 20, 5, 5, [e.svg2, e.div2, e.sandbox]);
|
|
|
|
debug('Check area hits across SVG elements');
|
|
check(20, 30, 20, 10, 30, 10, [e.svg2, e.div2, e.svg1, e.div1, e.sandbox]);
|
|
|
|
debug('');
|
|
}
|
|
|
|
runTest();
|
|
</script>
|
|
|
|
<p id='description'></p>
|
|
<span id="console"></span>
|
|
<script src="../../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|
|
|