| <!DOCTYPE html> |
| <html> |
| <body onload="onPageLoad()"> |
| Check that hit testing on a <rect> with various miterlimits around sqrt(2) works properly. If the test passes, you will see "PASS" below. |
| <p id="result">Running test...</p> |
| <svg id="svg" width="100" height="100" version="1.1"> |
| <rect id="rect" fill="none" stroke="black" stroke-width="20" x="10" y="10" width="80" height="80"/> |
| </svg> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var result = document.getElementById("result"), |
| svg = document.getElementById("svg"), |
| rect = document.getElementById("rect"); |
| function onPageLoad() { |
| // sqrt(2) = 1.414213562373095... |
| var intervals = [ |
| ["1.4", "1.5"], |
| ["1.41", "1.42"], |
| ["1.414", "1.415"], |
| ["1.4142", "1.4143"], |
| ["1.41421", "1.41422"], |
| ["1.414213", "1.414220"] |
| //,["1.4142135", "1.4142136"] |
| ]; |
| |
| var bcr = svg.getBoundingClientRect(), |
| x0 = bcr.left, |
| y0 = bcr.top; |
| |
| var i = 0; |
| requestAnimationFrame(function nextInterval() { |
| if (i >= intervals.length) { |
| if (result.textContent == "Running test...") |
| result.textContent = "PASS"; |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| |
| return; |
| } |
| |
| var interval = intervals[i++]; |
| |
| if (!(interval[0] < Math.SQRT2)) |
| result.textContent += " FAIL - Expecting " + interval[0] + " to be strictly less than sqrt(2)."; |
| rect.setAttribute("stroke-miterlimit", interval[0]); |
| var actualMiterlimit = getComputedStyle(rect, null).strokeMiterlimit; |
| if (!(actualMiterlimit < Math.SQRT2)) |
| result.textContent += " FAIL - After setting the miterlimit to " + interval[0] + ", expecting the computed miterlimit " + actualMiterlimit + " to be strictly less than sqrt(2)."; |
| |
| // Because the miterlimit is less than sqrt(2), the join style should |
| // switch to "bevel". |
| // i.e. if we get the element near the bottom right corner, it should be |
| // the <svg> and not the <rect>. |
| if (document.elementFromPoint(x0 + 97, y0 + 97) !== svg) { |
| result.textContent += " FAIL - The element at point (97, 97) should be the <svg> element (miterlimit is actually " + actualMiterlimit + " after setting it to " + interval[0] + ")."; |
| // If this check fails, stop the test early so we can examine the |
| // <rect> visually. |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| return; |
| } |
| |
| requestAnimationFrame(function () { |
| if (!(interval[1] >= Math.SQRT2)) |
| result.textContent += " FAIL - Expecting " + interval[1] + " to be greater than or equal to sqrt(2)."; |
| rect.setAttribute("stroke-miterlimit", interval[1]); |
| var actualMiterlimit = getComputedStyle(rect, null).strokeMiterlimit; |
| if (!(actualMiterlimit >= Math.SQRT2)) |
| result.textContent += " FAIL - After setting the miterlimit to " + interval[1] + ", expecting the computed miterlimit " + actualMiterlimit + " to be greater than or equal to sqrt(2)."; |
| |
| // The join style should still be "bevel". |
| if (document.elementFromPoint(x0 + 97, y0 + 97) !== rect) { |
| result.textContent += " FAIL - The element at point (97, 97) should be the <rect> element (miterlimit is actually " + actualMiterlimit + " after setting it to " + interval[1] + ")."; |
| // If this check fails, stop the test early so we can examine the |
| // <rect> visually. |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| return; |
| } |
| |
| requestAnimationFrame(nextInterval); |
| }); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
