83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
<html xmlns='http://www.w3.org/1999/xhtml'>
|
|
<head>
|
|
<style>
|
|
#svgRoot {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
#path {
|
|
fill: green;
|
|
fill-opacity: 0.1;
|
|
stroke: green;
|
|
stroke-opacity: 0.2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Tests for WK84117 - Make sure hit testing works properly on small paths.</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="translate(100, 100) scale(100, 100)">
|
|
<path id="path" d="M 0 0 L 0.4 0 L 0.4 0.4 L 0 0.4 z" stroke-width="0.2" />
|
|
</g>
|
|
</svg>
|
|
|
|
<script><![CDATA[
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
var resultString = "";
|
|
var pathElement = document.getElementById("path");
|
|
|
|
var pointsInPath = [
|
|
{x: 106, y: 106},
|
|
{x: 124, y: 124},
|
|
{x: 121, y: 137}
|
|
];
|
|
|
|
var pointsNotInPath = [
|
|
{x: 0, y: 0},
|
|
{x: 145, y: 145}
|
|
];
|
|
|
|
var pointsOnPathStroke = [
|
|
{x: 122, y: 146}, // outer stroke
|
|
{x: 124, y: 136} // inner stroke
|
|
];
|
|
|
|
var pointsNotOnPathStroke = [
|
|
{x: 160, y: 160}, // outside path
|
|
{x: 0, y: 0}, // outside path
|
|
{x: 120, y: 120} // inside path
|
|
];
|
|
|
|
pathElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
|
|
pointsInPath.forEach( function(point) {
|
|
var pass = (pathElement == document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsNotInPath.forEach( function(point) {
|
|
var pass = (pathElement != document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
|
|
pathElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
|
|
pointsOnPathStroke.forEach( function(point) {
|
|
var pass = (pathElement == document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " path stroke contains point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
pointsNotOnPathStroke.forEach( function(point) {
|
|
var pass = (pathElement != document.elementFromPoint(point.x, point.y));
|
|
resultString += ((pass) ? "PASS" : "FAIL") + " path stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
|
|
});
|
|
document.getElementById("console").innerHTML = resultString;
|
|
]]></script>
|
|
</body>
|
|
</html>
|