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

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: Rebase 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') | 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 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="400" 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 <use id="useRect1" xlink:href="#rect1" class="testShape" y="200"/>
30 <use id="useEllipse1" xlink:href="#ellipse1" class="testShape" y="200"/>
31 <use id="useLine1" xlink:href="#line1" class="testShape" y="200"/>
32 <use id="usePolyline1" xlink:href="#polyline1" class="testShape" y="200"/>
33 <use id="usePolygon1" xlink:href="#polygon1" class="testShape" y="200"/>
34 <use id="usePath1" xlink:href="#path1" class="testShape" y="200"/>
35
36 <use id="useRect2" xlink:href="#rect2" class="testShape" y="200"/>
37 <use id="useEllipse2" xlink:href="#ellipse2" class="testShape" y="200"/>
38 <use id="useLine2" xlink:href="#line2" class="testShape" y="200"/>
39 <use id="usePolyline2" xlink:href="#polyline2" class="testShape" y="200"/>
40 <use id="usePolygon2" xlink:href="#polygon2" class="testShape" y="200"/>
41 <use id="usePath2" xlink:href="#path2" class="testShape" y="200"/>
42 </svg>
43 <script type="text/javascript">
44 if (window.testRunner) {
45 testRunner.dumpAsText();
46 testRunner.waitUntilDone();
47 }
48
49 var svg = document.getElementById("svg");
50 window.onload = function () {
51 var tests = [
52 { x: 16, y: 36, expectedElemId: "rect1" },
53 { x: 54, y: 58, expectedElemId: "rect1" },
54 { x: 28, y: 77, expectedElemId: "svg" },
55
56 { x: 139, y: 20, expectedElemId: "svg" },
57 { x: 129, y: 41, expectedElemId: "ellipse1" },
58 { x: 149, y: 55, expectedElemId: "ellipse1" },
59 { x: 166, y: 70, expectedElemId: "ellipse1" },
60 { x: 128, y: 82, expectedElemId: "svg" },
61
62 { x: 219, y: 19, expectedElemId: "svg" },
63 { x: 242, y: 40, expectedElemId: "line1" },
64 { x: 253, y: 64, expectedElemId: "svg" },
65
66 { x: 318, y: 84, expectedElemId: "polyline1" },
67 { x: 323, y: 47, expectedElemId: "polyline1" },
68 { x: 324, y: 18, expectedElemId: "polyline1" },
69 { x: 375, y: 64, expectedElemId: "svg" },
70
71 { x: 426, y: 28, expectedElemId: "polygon1" },
72 { x: 455, y: 44, expectedElemId: "polygon1" },
73 { x: 445, y: 71, expectedElemId: "polygon1" },
74 { x: 461, y: 85, expectedElemId: "polygon1" },
75 { x: 497, y: 26, expectedElemId: "svg" },
76
77 { x: 536, y: 95, expectedElemId: "path1" },
78 { x: 560, y: 70, expectedElemId: "path1" },
79 { x: 555, y: 54, expectedElemId: "path1" },
80 { x: 595, y: 38, expectedElemId: "path1" },
81 { x: 614, y: 16, expectedElemId: "path1" },
82 { x: 569, y: 33, expectedElemId: "svg" }
83 ];
84
85 // Create a copy of the tests for the stroke:none shapes, which are identica l to the shapes
86 // 100px above except for the 'stroke' and 'fill'.
87 // Also create a copy of the tests for the stroke:none & fill:none shapes.
88 var elemIdMap = {
89 "rect1": "rect2",
90 "ellipse1": "ellipse2",
91 "line1": "line2",
92 "polyline1": "polyline2",
93 "polygon1": "polygon2",
94 "path1": "path2"
95 };
96 var extraTests = tests.map(function (test, i, tests) {
97 return {
98 x: test.x,
99 y: 100 + test.y,
100 expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemI d
101 };
102 })
103 tests.push.apply(tests, extraTests);
104
105 // Now copy all of the tests again, for the <use> elements.
106 elemIdMap = {
107 "rect1": "useRect1",
108 "ellipse1": "useEllipse1",
109 "line1": "useLine1",
110 "polyline1": "usePolyline1",
111 "polygon1": "usePolygon1",
112 "path1": "usePath1",
113
114 "rect2": "useRect2",
115 "ellipse2": "useEllipse2",
116 "line2": "useLine2",
117 "polyline2": "usePolyline2",
118 "polygon2": "usePolygon2",
119 "path2": "usePath2"
120 };
121 tests.push.apply(tests, tests.map(function (test, i, tests) {
122 return {
123 x: test.x,
124 y: test.y + 200,
125 expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemI d
126 };
127 }));
128
129 var bcr = svg.getBoundingClientRect(),
130 x0 = bcr.left << 0,
131 y0 = bcr.top << 0;
132
133 for (var i = 0; i < tests.length; ++i) {
134 var test = tests[i],
135 elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
136 expectedElem = document.getElementById(test.expectedElemId),
137 success;
138 if (elem !== expectedElem) {
139 success = false;
140 result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
141 } else {
142 success = true;
143 }
144
145 // Draw a dot and a label at the test point (helps with identification).
146 markPoint(test.x, test.y, success);
147 }
148
149 if (result.textContent == "Running test...")
150 result.textContent = "PASS";
151
152 if (window.testRunner)
153 testRunner.notifyDone();
154 };
155
156 function markPoint(testX, testY, success) {
157 var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
158 dot.setAttribute("pointer-events", "none");
159 dot.setAttribute("cx", testX);
160 dot.setAttribute("cy", testY);
161 dot.setAttribute("r", "2");
162 if (success)
163 dot.setAttribute("fill", "#0c0");
164 else
165 dot.setAttribute("fill", "red");
166 svg.appendChild(dot);
167 var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
168 label.setAttribute("pointer-events", "none");
169 label.setAttribute("x", testX + 4);
170 label.setAttribute("y", testY);
171 label.textContent = "(" + testX + ", " + testY + ")";
172 if (success)
173 label.setAttribute("fill", "#0c0");
174 else
175 label.setAttribute("fill", "red");
176 svg.appendChild(label);
177 }
178 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/pointer-events-all-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698