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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/svg/hittest/pointer-events-all.html

Issue 1048043002: Fix pointer-events:all when stroke="none" (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 5 years, 8 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/pointer-events-all-expected.txt » ('j') | Source/core/layout/svg/LayoutSVGPath.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 Regression test for <a href="http://crbug.com/350338">http://crbug.com/350338</a >. This tests pointer-events:all on various shapes to make sure that the values of the 'fill' and 'stroke' properties do not affect event processing. If this te st passes, you will see "PASS" below.
3 <p id="result">Running test...</p>
4 <style>
5 body {
6 height: 1000px;
7 }
8 .testShape {
9 pointer-events: all;
10 }
11 </style>
12 <svg id="svg" width="690" height="600" version="1.1">
13 <!-- fill:none -->
14 <rect id="rect1" class="testShape" x="20" y="30" width="60" height="40" stro ke="#000" stroke-width="10" fill="none"/>
15 <ellipse id="ellipse1" class="testShape" cx="150" cy="50" rx="20" ry="35" tr ansform="rotate(20 150 50)" stroke="#000" stroke-width="10" fill="none"/>
16 <line id="line1" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke= "#000" stroke-width="10" fill="none"/>
17 <polyline id="polyline1" class="testShape" points="320,20 380,40 350,60 380, 80 310,80" stroke="#000" stroke-width="10" fill="none"/>
18 <polygon id="polygon1" class="testShape" points="430,30 440,60 460,80 490,30 460,20" stroke="#000" stroke-width="10" fill="none"/>
19 <path id="path1" class="testShape" d="M610,20 a100 100 0 0 0 -70 70 a100 100 0 0 0 70 -70 z" stroke="#000" stroke-width="10" fill="none"/>
20
21 <!-- stroke:none -->
22 <rect id="rect2" class="testShape" x="20" y="130" width="60" height="40" str oke="none" stroke-width="10" fill="#ccc"/>
23 <ellipse id="ellipse2" class="testShape" cx="150" cy="150" rx="20" ry="35" t ransform="rotate(20 150 150)" stroke="none" stroke-width="10" fill="#ccc"/>
24 <line id="line2" class="testShape" x1="220" y1="120" x2="280" y2="180" strok e="none" stroke-width="10" fill="#ccc"/>
25 <polyline id="polyline2" class="testShape" points="320,120 380,140 350,160 3 80,180 310,180" stroke="none" stroke-width="10" fill="#ccc"/>
26 <polygon id="polygon2" class="testShape" points="430,130 440,160 460,180 490 ,130 460,120" stroke="none" stroke-width="10" fill="#ccc"/>
27 <path id="path2" class="testShape" d="M610,120 a100 100 0 0 0 -70 70 a100 10 0 0 0 0 70 -70 z" stroke="none" stroke-width="10" fill="#ccc"/>
28
29 <!-- stroke:none & fill:none -->
30 <rect id="rect3" class="testShape" x="20" y="230" width="60" height="40" str oke="none" stroke-width="10" fill="none"/>
31 <ellipse id="ellipse3" class="testShape" cx="150" cy="250" rx="20" ry="35" t ransform="rotate(20 150 250)" stroke="none" stroke-width="10" fill="none"/>
32 <line id="line3" class="testShape" x1="220" y1="220" x2="280" y2="280" strok e="none" stroke-width="10" fill="none"/>
33 <polyline id="polyline3" class="testShape" points="320,220 380,240 350,260 3 80,280 310,280" stroke="none" stroke-width="10" fill="none"/>
34 <polygon id="polygon3" class="testShape" points="430,230 440,260 460,280 490 ,230 460,220" stroke="none" stroke-width="10" fill="none"/>
35 <path id="path3" class="testShape" d="M610,220 a100 100 0 0 0 -70 70 a100 10 0 0 0 0 70 -70 z" stroke="none" stroke-width="10" fill="none"/>
36
37 <use id="useRect1" xlink:href="#rect1" class="testShape" y="300"/>
38 <use id="useEllipse1" xlink:href="#ellipse1" class="testShape" y="300"/>
39 <use id="useLine1" xlink:href="#line1" class="testShape" y="300"/>
40 <use id="usePolyline1" xlink:href="#polyline1" class="testShape" y="300"/>
41 <use id="usePolygon1" xlink:href="#polygon1" class="testShape" y="300"/>
42 <use id="usePath1" xlink:href="#path1" class="testShape" y="300"/>
43
44 <use id="useRect2" xlink:href="#rect2" class="testShape" y="300"/>
45 <use id="useEllipse2" xlink:href="#ellipse2" class="testShape" y="300"/>
46 <use id="useLine2" xlink:href="#line2" class="testShape" y="300"/>
47 <use id="usePolyline2" xlink:href="#polyline2" class="testShape" y="300"/>
48 <use id="usePolygon2" xlink:href="#polygon2" class="testShape" y="300"/>
49 <use id="usePath2" xlink:href="#path2" class="testShape" y="300"/>
50
51 <use id="useRect3" xlink:href="#rect3" class="testShape" y="300"/>
52 <use id="useEllipse3" xlink:href="#ellipse3" class="testShape" y="300"/>
53 <use id="useLine3" xlink:href="#line3" class="testShape" y="300"/>
54 <use id="usePolyline3" xlink:href="#polyline3" class="testShape" y="300"/>
55 <use id="usePolygon3" xlink:href="#polygon3" class="testShape" y="300"/>
56 <use id="usePath3" xlink:href="#path3" class="testShape" y="300"/>
57 </svg>
58 <script type="text/javascript">
59 if (window.testRunner) {
60 testRunner.dumpAsText();
61 testRunner.waitUntilDone();
62 }
63
64 var svg = document.getElementById("svg");
65 window.onload = function () {
66 var tests = [
67 { x: 16, y: 36, expectedElemId: "rect1" },
68 { x: 54, y: 58, expectedElemId: "rect1" },
69 { x: 28, y: 77, expectedElemId: "svg" },
70
71 { x: 139, y: 20, expectedElemId: "svg" },
72 { x: 129, y: 41, expectedElemId: "ellipse1" },
73 { x: 149, y: 55, expectedElemId: "ellipse1" },
74 { x: 166, y: 70, expectedElemId: "ellipse1" },
75 { x: 128, y: 82, expectedElemId: "svg" },
76
77 { x: 219, y: 19, expectedElemId: "svg" },
78 { x: 242, y: 40, expectedElemId: "line1" },
79 { x: 253, y: 64, expectedElemId: "svg" },
80
81 { x: 318, y: 84, expectedElemId: "polyline1" },
82 { x: 323, y: 47, expectedElemId: "polyline1" },
83 { x: 324, y: 18, expectedElemId: "polyline1" },
84 { x: 375, y: 64, expectedElemId: "svg" },
85
86 { x: 426, y: 28, expectedElemId: "polygon1" },
87 { x: 455, y: 44, expectedElemId: "polygon1" },
88 { x: 445, y: 71, expectedElemId: "polygon1" },
89 { x: 461, y: 85, expectedElemId: "polygon1" },
90 { x: 497, y: 26, expectedElemId: "svg" },
91
92 { x: 536, y: 95, expectedElemId: "path1" },
93 { x: 560, y: 70, expectedElemId: "path1" },
94 { x: 555, y: 54, expectedElemId: "path1" },
95 { x: 595, y: 38, expectedElemId: "path1" },
96 { x: 614, y: 16, expectedElemId: "path1" },
97 { x: 569, y: 33, expectedElemId: "svg" }
98 ];
99
100 // Create a copy of the tests for the stroke:none shapes, which are identica l to the shapes
101 // 100px above except for the 'stroke' and 'fill'.
102 // Also create a copy of the tests for the stroke:none & fill:none shapes.
103 var elemIdMap = {
104 "rect1": "rect2",
105 "ellipse1": "ellipse2",
106 "line1": "line2",
107 "polyline1": "polyline2",
108 "polygon1": "polygon2",
109 "path1": "path2"
110 };
111 var extraTests = tests.map(function (test, i, tests) {
112 return {
113 x: test.x,
114 y: 100 + test.y,
115 expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemI d
116 };
117 });
118 elemIdMap = {
119 "rect1": "rect3",
120 "ellipse1": "ellipse3",
121 "line1": "line3",
122 "polyline1": "polyline3",
123 "polygon1": "polygon3",
124 "path1": "path3"
125 };
126 extraTests.push.apply(extraTests, tests.map(function (test, i, tests) {
127 return {
128 x: test.x,
129 y: 200 + test.y,
130 expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemI d
131 };
132 }));
133 tests.push.apply(tests, extraTests);
134
135 // Now copy all of the tests again, for the <use> elements.
136 elemIdMap = {
137 "rect1": "useRect1",
138 "ellipse1": "useEllipse1",
139 "line1": "useLine1",
140 "polyline1": "usePolyline1",
141 "polygon1": "usePolygon1",
142 "path1": "usePath1",
143
144 "rect2": "useRect2",
145 "ellipse2": "useEllipse2",
146 "line2": "useLine2",
147 "polyline2": "usePolyline2",
148 "polygon2": "usePolygon2",
149 "path2": "usePath2",
150
151 "rect3": "useRect3",
152 "ellipse3": "useEllipse3",
153 "line3": "useLine3",
154 "polyline3": "usePolyline3",
155 "polygon3": "usePolygon3",
156 "path3": "usePath3"
157 };
158 tests.push.apply(tests, tests.map(function (test, i, tests) {
159 return {
160 x: test.x,
161 y: test.y,
162 expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemI d,
163 scrollTop: 300
164 };
165 }));
166
167 var bcr = svg.getBoundingClientRect(),
168 x0 = bcr.left << 0,
169 y0 = bcr.top << 0;
170
171 for (var i = 0; i < tests.length; ++i) {
172 var test = tests[i],
173 scrollTop = test.scrollTop || 0;
174 // Because this test uses elementFromPoint(), need to make sure that the
175 // target elements are in view.
176 if (document.body.scrollTop != scrollTop) document.body.scrollTop = scro llTop;
177 var elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
178 expectedElem = document.getElementById(test.expectedElemId),
179 success;
180 if (elem !== expectedElem) {
181 success = false;
182 result.textContent = "FAIL - unexpected element at (" + test.x + ", " + (test.y + scrollTop) + ")";
183 } else {
184 success = true;
185 }
186
187 // Draw a dot and a label at the test point (helps with identification).
188 markPoint(test.x, test.y + scrollTop, success);
189 }
190
191 if (result.textContent == "Running test...")
192 result.textContent = "PASS";
193
194 if (window.testRunner)
195 testRunner.notifyDone();
196 };
197
198 function markPoint(testX, testY, success) {
199 var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
200 dot.setAttribute("pointer-events", "none");
201 dot.setAttribute("cx", testX);
202 dot.setAttribute("cy", testY);
203 dot.setAttribute("r", "2");
204 if (success)
205 dot.setAttribute("fill", "#0c0");
206 else
207 dot.setAttribute("fill", "red");
208 svg.appendChild(dot);
209 var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
210 label.setAttribute("pointer-events", "none");
211 label.setAttribute("x", testX + 4);
212 label.setAttribute("y", testY);
213 label.textContent = "(" + testX + ", " + testY + ")";
214 if (success)
215 label.setAttribute("fill", "#0c0");
216 else
217 label.setAttribute("fill", "red");
218 svg.appendChild(label);
219 }
220 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/pointer-events-all-expected.txt » ('j') | Source/core/layout/svg/LayoutSVGPath.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698