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

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

Issue 45733010: Add pointer-events="bounding-box" for svg content. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: make assert more specific Created 7 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 unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/svg-pointer-events-bbox-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 <html xmlns='http://www.w3.org/1999/xhtml'>
2 <head>
3 <style type="text/css">
4 #svgRoot {
5 margin: 0px;
6 padding: 0px;
7 position: absolute;
8 top: 0px;
9 left: 0px;
10 }
11
12 .test { fill: blue; pointer-events: bounding-box; }
13 .test:hover { fill: green; visibility: visible; }
14 </style>
15 </head>
16 <body>
17 <p>Tests for pointer-events=bounding-box - hit testing.</p>
18 <p>On success, you will see a series of "PASS" messages and no "FAIL" me ssages.</p>
19 <pre id="console"></pre>
20
21 <svg id="svgRoot" width="480px" height="360px"
22 viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
23 xmlns:xlink="http://www.w3.org/1999/xlink" opacity="0">
24 <g class="test" id="test1" transform="rotate(15)">
25 <circle id="circle1" cx="50" cy="50" r="10"/>
26 <circle cx="150" cy="150" r="10"/>
27 </g>
28 <circle class="test" id="circle2" cx="400" cy="150" r="50" visibilit y="hidden"/>
29 <text class="test" id="text1" x="100" y="20">Text should change colo r when mouse is within <tspan id="tspan1" dy="3em">the bbox.</tspan></text>
30 <text class="test" id="text2" x="150" y="100" transform="rotate(15)" >Text should change color when mouse is within <tspan id="tspan2" dy="3em">the b box.</tspan></text>
31 <text class="test" id="text3" x="200" y="280" transform="rotate(5)"> Text should end here.<tspan id="tspan3" dy="2em" display="none">invisible</tspan ></text>
32 <image class="test" id="image1" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'><rect x='10' y='10' width ='20' height='10' fill='blue'/></svg>"
33 width="50" height="30" visibility="hidden" transform="transla te(0,200)"/>
34 </svg>
35
36 <script type="text/javascript">
37 document.body.onclick = function(evt) {
38 document.getElementById("console").innerHTML = "mouse at " + evt .x + "," + evt.y;
39 };
40
41 if (window.testRunner)
42 testRunner.dumpAsText();
43
44 var resultString = "";
45 var group1 = document.getElementById("test1");
46 var circle1 = document.getElementById("circle1");
47 var circle2 = document.getElementById("circle2");
48 var text1 = document.getElementById("text1");
49 var tspan1 = document.getElementById("tspan1");
50 var text2 = document.getElementById("text2");
51 var tspan2 = document.getElementById("tspan2");
52 var text3 = document.getElementById("text3");
53 var tspan3 = document.getElementById("tspan3");
54 var image1 = document.getElementById("image1");
55
56 var pointsOnCircle1 = [
57 {x: 36, y: 60},
58 {x: 42, y: 67}
59 ];
60
61 var pointsNotOnCircle1 = [
62 {x: 50, y: 50},
63 {x: 50, y: 55}
64 ];
65
66 var pointsInsideBBoxOfCircle1 = [
67 {x: 100, y: 100},
68 {x: 137, y: 84},
69 {x: 51, y: 156},
70 {x:70, y:120}
71 ];
72
73 var pointsOnCircle2 = [
74 {x: 400, y: 150},
75 {x: 432, y: 182},
76 {x: 361, y: 122}
77 ];
78
79 var pointsInsideBBoxOfCircle2 = [
80 {x: 438, y: 103},
81 {x: 450, y: 200}
82 ];
83
84 var pointsOnText1 = [
85 {x: 134, y: 16}
86 ];
87
88 var pointsOnTspan1 = [
89 {x: 422, y: 63}
90 ];
91
92 var pointsNotOnText1 = [
93 {x: 395, y: 73},
94 {x: 74, y: 5}
95 ];
96
97 var pointsInsideBBoxOfText1 = [
98 {x: 435, y: 32},
99 {x: 115, y: 46}
100 ];
101
102 var pointsOnText2 = [
103 {x: 178, y: 146}
104 ];
105
106 var pointsOnTspan2 = [
107 {x: 434, y: 268}
108 ];
109
110 var pointsNotOnText2 = [
111 {x: 319, y: 161},
112 {x: 179, y: 131}
113 ];
114
115 var pointsInsideBBoxOfText2 = [
116 {x: 295, y: 214},
117 {x: 444, y: 222}
118 ];
119
120 var pointsOnText3 = [
121 {x: 198, y: 291},
122 {x: 286, y: 301}
123 ];
124
125 var pointsNotOnText3 = [
126 {x: 302, y: 337},
127 {x: 348, y: 335}
128 ];
129
130 var pointsOnImage1 = [
131 {x: 19, y: 215},
132 {x: 45, y: 225}
133 ];
134
135 pointsOnCircle1.forEach( function(point) {
136 var pass = (circle1 == document.elementFromPoint(point.x, point. y));
137 resultString += ((pass) ? "PASS" : "FAIL") + " circle1 contains point at (" + point.x + ", " + point.y + ")\n";
138 });
139
140 pointsNotOnCircle1.forEach( function(point) {
141 var pass = (circle1 != document.elementFromPoint(point.x, point. y));
142 resultString += ((pass) ? "PASS" : "FAIL") + " circle1 does not contain point at (" + point.x + ", " + point.y + ")\n";
143 });
144
145 pointsInsideBBoxOfCircle1.forEach( function(point) {
146 var pass = (group1 == document.elementFromPoint(point.x, point.y ));
147 resultString += ((pass) ? "PASS" : "FAIL") + " group1 contains p oint at (" + (point.x) + ", " + point.y + ")\n";
148 });
149
150 pointsOnCircle2.forEach( function(point) {
151 var pass = (circle2 == document.elementFromPoint(point.x, point. y));
152 resultString += ((pass) ? "PASS" : "FAIL") + " circle2 contains point at (" + point.x + ", " + point.y + ")\n";
153 });
154
155 pointsInsideBBoxOfCircle2.forEach( function(point) {
156 var pass = (circle2 == document.elementFromPoint(point.x, point. y));
157 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of circle2 c ontains point at (" + (point.x) + ", " + point.y + ")\n";
158 });
159
160 pointsOnText1.forEach( function(point) {
161 var pass = (text1 == document.elementFromPoint(point.x, point.y) );
162 resultString += ((pass) ? "PASS" : "FAIL") + " text1 contains po int at (" + point.x + ", " + point.y + ")\n";
163 });
164
165 pointsOnTspan1.forEach( function(point) {
166 var pass = (tspan1 == document.elementFromPoint(point.x, point.y ));
167 resultString += ((pass) ? "PASS" : "FAIL") + " tspan1 contains p oint at (" + point.x + ", " + point.y + ")\n";
168 });
169
170 pointsNotOnText1.forEach( function(point) {
171 var elm = document.elementFromPoint(point.x, point.y);
172 var pass = (text1 != elm && tspan1 != elm);
173 resultString += ((pass) ? "PASS" : "FAIL") + " text1 does not co ntain point at (" + point.x + ", " + point.y + ")\n";
174 });
175
176 pointsInsideBBoxOfText1.forEach( function(point) {
177 var pass = (text1 == document.elementFromPoint(point.x, point.y) );
178 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text1 con tains point at (" + (point.x) + ", " + point.y + ")\n";
179 });
180
181 pointsOnText2.forEach( function(point) {
182 var pass = (text2 == document.elementFromPoint(point.x, point.y) );
183 resultString += ((pass) ? "PASS" : "FAIL") + " text2 contains po int at (" + point.x + ", " + point.y + ")\n";
184 });
185
186 pointsOnTspan2.forEach( function(point) {
187 var pass = (tspan2 == document.elementFromPoint(point.x, point.y ));
188 resultString += ((pass) ? "PASS" : "FAIL") + " tspan2 contains p oint at (" + point.x + ", " + point.y + ")\n";
189 });
190
191 pointsNotOnText2.forEach( function(point) {
192 var elm = document.elementFromPoint(point.x, point.y);
193 var pass = (text2 != elm && tspan2 != elm);
194 resultString += ((pass) ? "PASS" : "FAIL") + " text2 does not co ntain point at (" + point.x + ", " + point.y + ")\n";
195 });
196
197 pointsInsideBBoxOfText2.forEach( function(point) {
198 var pass = (text2 == document.elementFromPoint(point.x, point.y) );
199 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text2 con tains point at (" + (point.x) + ", " + point.y + ")\n";
200 });
201
202 pointsOnText3.forEach( function(point) {
203 var pass = (text3 == document.elementFromPoint(point.x, point.y) );
204 resultString += ((pass) ? "PASS" : "FAIL") + " text3 contains po int at (" + point.x + ", " + point.y + ")\n";
205 });
206
207 pointsNotOnText3.forEach( function(point) {
208 var elm = document.elementFromPoint(point.x, point.y);
209 var pass = (text3 != elm && tspan3 != elm);
210 resultString += ((pass) ? "PASS" : "FAIL") + " text3 does not co ntain point at (" + point.x + ", " + point.y + ")\n";
211 });
212
213 pointsOnImage1.forEach( function(point) {
214 var pass = (image1 == document.elementFromPoint(point.x, point.y ));
215 resultString += ((pass) ? "PASS" : "FAIL") + " image1 contains p oint at (" + point.x + ", " + point.y + ")\n";
216 });
217
218 document.getElementById("console").innerHTML = resultString;
219 </script>
220 </body>
221 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/svg-pointer-events-bbox-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698