Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(242)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/svg/dynamic-updates/update-ellipse.html

Issue 745383007: Fix an issue where hit detection could fail on rect and ellipse shapes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/svg/dynamic-updates/update-ellipse-expected.txt » ('j') | Source/core/rendering/svg/RenderSVGEllipse.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/svg/dynamic-updates/update-ellipse.html
diff --git a/LayoutTests/svg/dynamic-updates/update-ellipse.html b/LayoutTests/svg/dynamic-updates/update-ellipse.html
new file mode 100644
index 0000000000000000000000000000000000000000..046f31aa75b087cf15ffd69fbcabdc71776da171
--- /dev/null
+++ b/LayoutTests/svg/dynamic-updates/update-ellipse.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
fs 2014/12/03 15:56:06 Put the tests in svg/hittest/ instead?
+<html>
+<body onload="onPageLoad()">
+Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a>. This tests updating SVG &lt;circle&gt; and &lt;ellipse&gt; elements having various stroke styles. If this test passes, you will see "PASS" below.
+<p id="result">WAITING - click within each of the elliptical areas for results</p>
+<svg id="svg" width="550" height="500" version="1.1">
+ <rect fill="none" stroke="black" x="0.5" y="0.5" width="499" height="499"/>
+
+ <circle pointer-events="none" stroke-width="10px" stroke="#888" stroke-opacity="0.2" fill="none" cx="380" cy="100" r="20"/>
+ <ellipse pointer-events="none" stroke-width="20px" stroke="#00a0f0" stroke-dasharray="30, 10" stroke-opacity="0.2" fill="none" cx="130" cy="110" rx="100" ry="50"/>
+ <ellipse pointer-events="none" stroke-width="30px" stroke="#9000f0" stroke-linejoin="bevel" stroke-opacity="0.2" fill="none" cx="150" cy="400" rx="70" ry="50"/>
+ <ellipse pointer-events="none" stroke-width="20px" stroke="#0000f0" stroke-opacity="0.2" fill="none" cx="400" cy="370" rx="40" ry="70"/>
+
+ <circle id="ell0" cursor="move" stroke-width="10px" stroke="#888" stroke-linecap="square" fill="none" cx="380" cy="100" r="20"/>
+ <ellipse id="ell1" cursor="move" stroke-width="20px" stroke="#00a0f0" stroke-dasharray="30, 10" fill="none" cx="130" cy="110" rx="100" ry="50"/>
+ <ellipse id="ell2" cursor="move" stroke-width="30px" stroke="#9000f0" stroke-linejoin="bevel" fill="none" cx="150" cy="400" rx="70" ry="50"/>
+ <ellipse id="ell3" cursor="move" stroke-width="20px" stroke="#0000f0" stroke-linecap="round" fill="none" cx="400" cy="370" rx="40" ry="70"/>
+</svg>
+<script type="text/javascript">
+if (window.testRunner) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+}
+
+function withinEllipse(x, y, cx, cy, rx, ry) {
+ var t1 = (x - cx) / rx,
+ t2 = (y - cy) / ry;
+ return t1 * t1 + t2 * t2 <= 1;
+}
+
+var result = document.getElementById("result"),
+ svg = document.getElementById("svg"),
+ ell0 = document.getElementById("ell0"),
+ ell1 = document.getElementById("ell1"),
+ ell2 = document.getElementById("ell2"),
+ ell3 = document.getElementById("ell3");
+function onPageLoad() {
+ var activeAreas = [{
+ ellipse: ell0,
+ click: function () {
+ this.ellipse.setAttribute("r", "50");
+ }
+ }, {
+ ellipse: ell1,
+ click: function () {
+ this.ellipse.setAttribute("cx", "170");
+ }
+ }, {
+ ellipse: ell2,
+ click: function () {
+ this.ellipse.setAttribute("cy", "350");
+ }
+ }, {
+ ellipse: ell3,
+ click: function () {
+ this.ellipse.setAttribute("cx", "390");
+ this.ellipse.setAttribute("cy", "340");
+ }
+ }];
+
+ for (var i = 0; i < activeAreas.length; ++i) {
+ var aa = activeAreas[i];
+ aa.cx = +aa.ellipse.getAttribute("cx");
+ aa.cy = +aa.ellipse.getAttribute("cy");
+ if (aa.ellipse.localName == "circle") {
+ aa.rx = aa.ry = +aa.ellipse.getAttribute("r");
+ } else {
+ aa.rx = +aa.ellipse.getAttribute("rx");
+ aa.ry = +aa.ellipse.getAttribute("ry");
+ }
+ }
+
+ var bcr = svg.getBoundingClientRect(),
+ x0 = bcr.left << 0,
+ y0 = bcr.top << 0;
+
+ requestAnimationFrame(function () {
+ document.addEventListener("mousedown", function onMouseDown(event) {
+ var x = event.clientX - x0,
+ y = event.clientY - y0;
+ for (var i = 0; i < activeAreas.length; ++i) {
+ var aa = activeAreas[i];
+ if (withinEllipse(x, y, aa.cx, aa.cy, aa.rx, aa.ry)) {
+ aa.click();
+ activeAreas.splice(i, 1);
+ break;
+ }
+ }
+
+ if (activeAreas.length == 0) {
+ document.removeEventListener("mousedown", onMouseDown, false);
+
+ result.textContent = "FAIL";
+
+ var tests = [
+ { x: 383, y: 120, expectedElem: svg },
+ { x: 429, y: 103, expectedElem: ell0 },
+
+ { x: 225, y: 116, expectedElem: svg },
+ { x: 263, y: 87, expectedElem: ell1 },
+
+ { x: 119, y: 355, expectedElem: svg },
+ { x: 150, y: 455, expectedElem: svg },
+ { x: 223, y: 392, expectedElem: svg },
+ { x: 201, y: 309, expectedElem: ell2 },
+
+ { x: 364, y: 345, expectedElem: svg },
+ { x: 402, y: 269, expectedElem: ell3 }
+ ];
+
+ for (var i = 0; i < tests.length; ++i) {
+ var test = tests[i];
+ try {
+ var elem = document.elementFromPoint(x0 + test.x, y0 + test.y);
+ if (elem !== test.expectedElem) {
+ result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
+ return;
+ }
+ } finally {
+ // Draw a dot and a label at the test point (helps with identification).
+ svg.insertAdjacentHTML("beforeend",
+ '<circle pointer-events="none" cx="' + test.x + '" cy="' + test.y + '" r="2"/>' +
+ '<text pointer-events="none" x="' + (test.x + 4) + '" y="' + test.y + '">(' + test.x + ', ' + test.y + ')</text>');
+ }
+ }
+
+ if (result.textContent == "FAIL")
fs 2014/12/03 15:56:06 This looks a bit odd... =) Could you make the "def
+ result.textContent = "PASS";
+
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }
+ }, false);
+
+ if (window.eventSender) {
+ // The bug would only occur if the shape attributes were modified
+ // within a 'mousedown' handler when the mouse was pressed within
+ // the shape.
+ activeAreas.slice(0).map(function (aa, i, activeAreas) {
+ eventSender.mouseMoveTo((x0 + aa.cx) << 0, (y0 + aa.cy) << 0);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+ });
+ }
+ });
+}
+</script>
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/svg/dynamic-updates/update-ellipse-expected.txt » ('j') | Source/core/rendering/svg/RenderSVGEllipse.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698