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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/svg/hittest/ellipse-hittest.html

Issue 877553002: Fix ellipse hit testing in the non-circle case (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Lazily create the path Created 5 years, 10 months 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 unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/ellipse-hittest-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 This tests hit testing on ellipses with continuous strokes. If this test passes, you will see "PASS" below.
3 <p id="result">Running test...</p>
4 <style>
5 #ell1:hover,
6 #ell2:hover,
7 #ell3:hover {
8 stroke: #9f9;
9 }
10 </style>
11 <svg id="svg" width="450" height="300" version="1.1">
12 <rect id="border" x="0.5" y="0.5" width="449" height="299" stroke="#000" str oke-width="1" fill="none"/>
13
14 <ellipse id="ell1" cx="130" cy="30" rx="100" ry="15" stroke="#ccf" fill="non e" stroke-width="20"/>
15 <ellipse pointer-events="none" cx="130" cy="30" rx="110" ry="25" stroke="gra y" fill="none"/>
16 <ellipse pointer-events="none" cx="130" cy="30" rx="90" ry="5" stroke="gray" fill="none"/>
17
18 <ellipse id="ell2" cx="130" cy="180" rx="100" ry="100" stroke="#ccf" fill="n one" stroke-width="30"/>
19 <ellipse pointer-events="none" cx="130" cy="180" rx="115" ry="115" stroke="g ray" fill="none"/>
20 <ellipse pointer-events="none" cx="130" cy="180" rx="85" ry="85" stroke="gra y" fill="none"/>
21
22 <ellipse id="ell3" cx="340" cy="155" rx="15" ry="100" stroke="#ccf" fill="no ne" stroke-width="20" transform="rotate(30 340 155)"/>
23 <ellipse pointer-events="none" cx="340" cy="155" rx="25" ry="110" stroke="gr ay" fill="none" transform="rotate(30 340 155)"/>
24 <ellipse pointer-events="none" cx="340" cy="155" rx="5" ry="90" stroke="gray " fill="none" transform="rotate(30 340 155)"/>
25 </svg>
26 <script type="text/javascript">
27 if (window.testRunner) {
28 testRunner.dumpAsText();
29 testRunner.waitUntilDone();
30 }
31
32 var svg = document.getElementById("svg");
33 window.onload = function () {
34 var tests = [
35 { x: 27, y: 46, expectedElemId: "svg" },
36 { x: 98, y: 33, expectedElemId: "svg" },
37 { x: 202, y: 53, expectedElemId: "svg" },
38 { x: 98, y: 142, expectedElemId: "svg" },
39 { x: 130, y: 180, expectedElemId: "svg" },
40 { x: 91, y: 247, expectedElemId: "svg" },
41 { x: 27, y: 240, expectedElemId: "svg" },
42 { x: 336, y: 166, expectedElemId: "svg" },
43 { x: 337, y: 214, expectedElemId: "svg" },
44
45 { x: 31, y: 18, expectedElemId: "ell1" },
46 { x: 209, y: 31, expectedElemId: "ell1" },
47 { x: 132, y: 47, expectedElemId: "ell1" },
48 { x: 229, y: 43, expectedElemId: "ell1" },
49
50 { x: 245, y: 180, expectedElemId: "ell2" },
51 { x: 45, y: 180, expectedElemId: "ell2" },
52 { x: 130, y: 95, expectedElemId: "ell2" },
53 { x: 130, y: 295, expectedElemId: "ell2" },
54 { x: 212, y: 255, expectedElemId: "ell2" },
55
56 { x: 280, y: 235, expectedElemId: "ell3" },
57 { x: 301, y: 247, expectedElemId: "ell3" },
58 { x: 378, y: 88, expectedElemId: "ell3" },
59 { x: 335, y: 122, expectedElemId: "ell3" },
60 { x: 333, y: 190, expectedElemId: "ell3" },
61 { x: 377, y: 66, expectedElemId: "ell3" }
62 ];
63
64 var bcr = svg.getBoundingClientRect(),
65 x0 = bcr.left << 0,
66 y0 = bcr.top << 0;
67
68 for (var i = 0; i < tests.length; ++i) {
69 var test = tests[i],
70 elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
71 expectedElem = document.getElementById(test.expectedElemId),
72 success;
73 if (elem !== expectedElem) {
74 success = false;
75 result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
76 } else {
77 success = true;
78 }
79
80 // Draw a dot and a label at the test point (helps with identification).
81 markPoint(test.x, test.y, success);
82 }
83
84 if (result.textContent == "Running test...")
85 result.textContent = "PASS";
86
87 if (window.testRunner)
88 testRunner.notifyDone();
89 };
90
91 function markPoint(testX, testY, success) {
92 var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
93 dot.setAttribute("pointer-events", "none");
94 dot.setAttribute("cx", testX);
95 dot.setAttribute("cy", testY);
96 dot.setAttribute("r", "2");
97 if (success)
98 dot.setAttribute("fill", "#0c0");
99 else
100 dot.setAttribute("fill", "red");
101 svg.appendChild(dot);
102 var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
103 label.setAttribute("pointer-events", "none");
104 label.setAttribute("x", testX + 4);
105 label.setAttribute("y", testY);
106 label.textContent = "(" + testX + ", " + testY + ")";
107 if (success)
108 label.setAttribute("fill", "#0c0");
109 else
110 label.setAttribute("fill", "red");
111 svg.appendChild(label);
112 }
113 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/ellipse-hittest-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698