<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style type="text/css">
#svgRoot {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
}
.nonscaletest {
stroke-width: 20px;
fill: #ccc;
fill-opacity: 0.4;
}
#ellipse1, #ellipse2 {
stroke: #f31900;
}
#line1, #line2 {
stroke: #3364c2;
}
#rect1, #rect2 {
stroke: #f7d72b;
}
#curve1, #curve2 {
stroke: #44c400;
}
</style>
<script type="text/javascript">
function enter(event) {
event.target.setAttribute("stroke-opacity", "0.4");
};
function exit(event) {
event.target.setAttribute("stroke-opacity", "0.7");
};
</script>
</head>
<body>
<p>Tests for WK82628 - Make sure hit testing works properly on ellipses, rects, lines and curves with non-scaling stroke.</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="500px" height="300px" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<!-- The following are all small and scaled up -->
<g transform="translate(30, 0) scale(5, 5)">
<ellipse id="ellipse1" class="nonscaletest" cx="10" cy="10" rx="10" ry="5" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
<rect id="rect1" class="nonscaletest" x="30" y="10" width="10" height="7" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
<path id="line1" class="nonscaletest" d="M20 20 l 10 10z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
<g transform="translate(-6, 12)">
<path id="curve1" class="nonscaletest" d="M5,20 C10,10 25,10 25,20 S40,30 40,20" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
</g>
</g>
<!-- The following are all large and scaled down -->
<g transform="translate(275, 0) scale(0.2, 0.2)">
<ellipse id="ellipse2" class="nonscaletest" cx="250" cy="250" rx="250" ry="125" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" class="nonscaletest" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
<rect id="rect2" class="nonscaletest" x="750" y="250" width="250" height="175" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
<path id="line2" class="nonscaletest" d="M500 500 l 250 250z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
<g transform="translate(-150, 300)">
<path id="curve2" class="nonscaletest" d="M125,500 C250,250 625,250 600,500 S1000,750 1000,500" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
</g>
</g>
</svg>
<script type="text/javascript">
// document.body.onmousedown = function(evt) { console.log("mouse down at " + evt.x + "," + evt.y); }
if (window.testRunner)
testRunner.dumpAsText();
var resultString = "";
var ellipse1 = document.getElementById("ellipse1");
var ellipse2 = document.getElementById("ellipse2"); // 250px to the right of ellipse1
var pointsOnEllipse1Stroke = [
{x: 29, y: 37},
{x: 34, y: 48},
{x: 94, y: 70},
{x: 100, y: 78}
];
var pointsNotOnEllipse1Stroke = [
{x: 33, y: 18},
{x: 81, y: 49},
{x: 129, y: 78}
];
var rect1 = document.getElementById("rect1");
var rect2 = document.getElementById("rect2"); // 250px to the right of rect1
var pointsOnRect1Stroke = [
{x: 172, y: 45},
{x: 183, y: 63},
{x: 220, y: 82},
{x: 233, y: 90}
];
var pointsNotOnRect1Stroke = [
{x: 205, y: 68}
];
var line1 = document.getElementById("line1");
var line2 = document.getElementById("line2"); // 250px to the right of line1
var pointsOnLine1Stroke = [
{x: 127, y: 97},
{x: 174, y: 146}
];
var pointsNotOnLine1Stroke = [
{x: 138, y: 131},
{x: 177, y: 126}
];
var curve1 = document.getElementById("curve1");
var curve2 = document.getElementById("curve2"); // 250px to the right of curve1
var pointsOnCurve1Stroke = [
{x: 24, y: 159},
{x: 107, y: 126},
{x: 169, y: 193},
{x: 195, y: 159}
];
var pointsNotOnCurve1Stroke = [
{x: 5, y: 164},
{x: 81, y: 140},
{x: 161, y: 177}
];
pointsOnEllipse1Stroke.forEach( function(point) {
var pass = (ellipse1 == document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
var pass = (ellipse2 == document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsNotOnEllipse1Stroke.forEach( function(point) {
var pass = (ellipse1 != document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
var pass = (ellipse2 != document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsOnRect1Stroke.forEach( function(point) {
var pass = (rect1 == document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
var pass = (rect2 == document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsNotOnRect1Stroke.forEach( function(point) {
var pass = (rect1 != document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
var pass = (rect2 != document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsOnLine1Stroke.forEach( function(point) {
var pass = (line1 == document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
var pass = (line2 == document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsNotOnLine1Stroke.forEach( function(point) {
var pass = (line1 != document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
var pass = (line2 != document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsOnCurve1Stroke.forEach( function(point) {
var pass = (curve1 == document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
var pass = (curve2 == document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
});
pointsNotOnCurve1Stroke.forEach( function(point) {
var pass = (curve1 != document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
var pass = (curve2 != document.elementFromPoint(point.x + 250, point.y));
resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
});
document.getElementById("console").innerHTML = resultString;
</script>
</body>
</html>
Codebase Browser
chromium