130 lines
4.8 KiB
HTML
130 lines
4.8 KiB
HTML
<html xmlns='http://www.w3.org/1999/xhtml'>
|
|
<head>
|
|
<style>
|
|
#svgRoot {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
#ellipse, #rect {
|
|
fill: green;
|
|
fill-opacity: 0.1;
|
|
stroke-width: 0.3px;
|
|
stroke: green;
|
|
stroke-opacity: 0.2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Make sure hit testing works properly on stroked ellipses and rects.</p>
|
|
<p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p>
|
|
<pre id="console"></pre>
|
|
|
|
<svg id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
|
|
<g transform="scale(200)">
|
|
<ellipse id="ellipse" cx="0.5" cy="0.5" rx="0.3" ry="0.2"/>
|
|
<rect id="rect" x="1.1" y="0.9" width="0.5" height="0.5"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<script><![CDATA[
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
var resultString = "";
|
|
var ellipseElement = document.getElementById("ellipse");
|
|
var rectElement = document.getElementById("rect");
|
|
|
|
var pointsInEllipse = [
|
|
{x: 65, y: 81},
|
|
{x: 89, y: 100},
|
|
{x: 133, y: 128}
|
|
];
|
|
|
|
var pointsNotInEllipse = [
|
|
{x: 100, y: 148}, // outer stroke
|
|
{x: 0, y: 0}
|
|
];
|
|
|
|
var pointsOnEllipseStroke = [
|
|
{x: 43, y: 54}, // outer stroke
|
|
{x: 56, y: 123}, // inner stroke
|
|
{x: 146, y: 134}, // outer stroke
|
|
{x: 129, y: 109} // inner stroke
|
|
];
|
|
|
|
var pointsNotOnEllipseStroke = [
|
|
{x: 0, y: 100}, // outside ellipse
|
|
{x: 160, y: 160}, // outside ellipse
|
|
{x: 95, y: 100} // inside ellipse
|
|
];
|
|
|
|
var pointsInRect = [
|
|
{x: 230, y: 190},
|
|
{x: 280, y: 245},
|
|
{x: 310, y: 275}
|
|
];
|
|
|
|
var pointsNotInRect = [
|
|
{x: 337, y: 298}, // outer stroke
|
|
{x: 0, y: 0}
|
|
];
|
|
|
|
var pointsOnRectStroke = [
|
|
{x: 208, y: 168}, // outer stroke
|
|
{x: 237, y: 198}, // inner stroke
|
|
{x: 301, y: 305}, // outer stroke
|
|
{x: 302, y: 264} // inner stroke
|
|
];
|
|
|
|
var pointsNotOnRectStroke = [
|
|
{x: 0, y: 100}, // outside rect
|
|
{x: 375, y: 315}, // outside rect
|
|
{x: 267, y: 233} // inside rect
|
|
];
|
|
|
|
ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
|
|
rectElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
|
|
pointsInEllipse.forEach( function(point) {
|
|
var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse contains point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsNotInEllipse.forEach( function(point) {
|
|
var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse does not contain point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsInRect.forEach( function(point) {
|
|
var pass = (rectElement == document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " rect contains point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsNotInRect.forEach( function(point) {
|
|
var pass = (rectElement != document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " rect does not contain point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
|
|
ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
|
|
rectElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
|
|
pointsOnEllipseStroke.forEach( function(point) {
|
|
var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsNotOnEllipseStroke.forEach( function(point) {
|
|
var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsOnRectStroke.forEach( function(point) {
|
|
var pass = (rectElement == document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke contains point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsNotOnRectStroke.forEach( function(point) {
|
|
var pass = (rectElement != document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
document.getElementById("console").innerHTML = resultString;
|
|
]]></script>
|
|
</body>
|
|
</html>
|