<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style>
#svgRoot {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
}
#ellipse {
fill: green;
fill-opacity: 0.1;
stroke-width: 100px;
stroke: green;
stroke-opacity: 0.2;
</style>
</head>
<body>
<p>Tests for WK80423 - Make sure hit testing works properly on stroked ellipses.</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">
<ellipse id="ellipse" cx="150" cy="150" rx="200" ry="100"/>
</svg>
<script><![CDATA[
if (window.testRunner)
testRunner.dumpAsText();
var resultString = "";
var ellipseElement = document.getElementById("ellipse");
var pointsInEllipse = [
{x: 150, y: 150},
{x: 275, y: 150},
{x: 250, y: 225}
];
var pointsNotInEllipse = [
{x: 0, y: 0},
{x: 275, y: 250}
var pointsOnEllipseStroke = [
{x: 275, y: 250}, // outer stroke
{x: 300, y: 200} // inner stroke
var pointsNotOnEllipseStroke = [
{x: 375, y: 375}, // outside ellipse
{x: 0, y: 0}, // outside ellipse
{x: 150, y: 150} // inside ellipse
ellipseElement.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";
ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
pointsOnEllipseStroke.forEach( function(point) {
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n";
pointsNotOnEllipseStroke.forEach( function(point) {
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
document.getElementById("console").innerHTML = resultString;
]]></script>
</body>
</html>
