OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <script src="../../LayoutTests/editing/editing.js" language="JavaScript" typ
e="text/JavaScript" ></script> | |
4 <style type="text/css"> | |
5 div.popup { | |
6 color: black !important; | |
7 background: yellow !important; | |
8 padding: 0.5em !important; | |
9 position: absolute !important; | |
10 z-index: 20000 !important; | |
11 display: none; | |
12 } | |
13 </style> | |
14 <script type="text/javascript"> | |
15 function getAbsolutePosition(element) { | |
16 var r = { x: element.offsetLeft, y: element.offsetTop }; | |
17 if (element.offsetParent) { | |
18 var tmp = getAbsolutePosition(element.offsetParent); | |
19 r.x += tmp.x; | |
20 r.y += tmp.y; | |
21 } | |
22 return r; | |
23 } | |
24 | |
25 function runTest1() { | |
26 if (!window.layoutTestController) | |
27 return; | |
28 layoutTestController.waitUntilDone(); | |
29 layoutTestController.dumpAsText(); | |
30 | |
31 e = document.getElementById("mouse_target"); | |
32 r = getAbsolutePosition(e); | |
33 x = r.x + e.offsetLeft + e.offsetWidth / 2; | |
34 y = r.y + e.offsetTop + e.offsetHeight / 2; | |
35 eventSender.mouseMoveTo(x, y); | |
36 window.setTimeout("runTest2()", 400); | |
37 } | |
38 | |
39 function runTest2() { | |
40 e = document.getElementById("select_target"); | |
41 r = getAbsolutePosition(e); | |
42 | |
43 setSelectionCommand(e, 0, e, 1); | |
44 eventSender.mouseMoveTo(0, 0); | |
45 window.setTimeout("runTest3()", 200); | |
46 } | |
47 | |
48 function runTest3() { | |
49 copyCommand(); | |
50 layoutTestController.notifyDone(); | |
51 } | |
52 | |
53 function MPP_bind(fn, self, var_args) { | |
54 var boundargs = fn.boundArgs_ || []; | |
55 boundargs = boundargs.concat(Array.prototype.slice.call(arguments, 2)); | |
56 | |
57 if (typeof fn.boundSelf_ != 'undefined') { | |
58 self = fn.boundSelf_; | |
59 } | |
60 | |
61 if (typeof fn.foundFn_ != 'undefined') { | |
62 fn = fn.boundFn_; | |
63 } | |
64 | |
65 var newfn = function() { | |
66 var args = boundargs.concat(Array.prototype.slice.call(arguments)); | |
67 return fn.apply(self, args); | |
68 } | |
69 | |
70 newfn.boundArgs_ = boundargs; | |
71 newfn.boundSelf_ = self; | |
72 newfn.boundFn_ = fn; | |
73 | |
74 return newfn; | |
75 }; | |
76 | |
77 function PersonPopup() { | |
78 this.pointerPosX = 0; | |
79 this.pointerPosY = 0; | |
80 | |
81 this.pointerOnTargetElement = false; | |
82 | |
83 this.targetPosX = 0; | |
84 this.targetPosY = 0; | |
85 this.targetWidth = 0; | |
86 this.targetHeight = 0; | |
87 this.targetElement = 0; | |
88 | |
89 this.delayed = false; | |
90 this.visible = false; | |
91 this.pointerOutsidePopup = false; | |
92 | |
93 this.showTimerID = -1; | |
94 this.hideTimerID = -1; | |
95 | |
96 window.addEventListener('load', | |
97 MPP_bind(this.handleOnLoad_, this), null); | |
98 | |
99 }; | |
100 | |
101 PersonPopup.prototype.getPointerX_ = function(e) { | |
102 var x, scrollLeft; | |
103 | |
104 if (e.pageX) { | |
105 x = e.pageX; | |
106 } else if (e.clientX) { | |
107 x = e.clientX + document.body.scrollLeft; | |
108 } else { | |
109 x = 0; | |
110 } | |
111 return x; | |
112 }; | |
113 | |
114 PersonPopup.prototype.getPointerY_ = function(e) { | |
115 var y, scrollTop; | |
116 | |
117 if (e.pageY) { | |
118 y = e.pageY; | |
119 } else if (e.clientY) { | |
120 y = e.clientY + document.body.scrollTop; | |
121 } else { | |
122 y = 0; | |
123 } | |
124 return y; | |
125 }; | |
126 | |
127 PersonPopup.prototype.pointerCloseEnough_ = function(x, y) { | |
128 var POINTER_TOLERANCE = 5; | |
129 if (this.pointerOutsidePopup) { | |
130 if ((x >= this.targetPosX) && | |
131 (x <= this.targetPosX + this.targetWidth) && | |
132 (y >= this.targetPosY) && | |
133 (y <= this.targetPosY + this.targetHeight)) { | |
134 this.pointerOutsidePopup = false; | |
135 return true; | |
136 } | |
137 } else { | |
138 if ((x >= this.targetPosX - POINTER_TOLERANCE) && | |
139 (x <= this.targetPosX + this.targetWidth + | |
140 POINTER_TOLERANCE) && | |
141 (y >= this.targetPosY - POINTER_TOLERANCE) && | |
142 (y <= this.targetPosY + this.targetHeight + | |
143 POINTER_TOLERANCE)) { | |
144 this.pointerOutsidePopup = false; | |
145 return true; | |
146 } | |
147 } | |
148 | |
149 return false; | |
150 }; | |
151 | |
152 PersonPopup.prototype.handleMouseMove_ = function(e) { | |
153 if ((this.delayed) || (this.visible)) { | |
154 e = e || window.event; | |
155 | |
156 var x = this.getPointerX_(e); | |
157 var y = this.getPointerY_(e); | |
158 | |
159 if (this.pointerCloseEnough_(x, y)) { | |
160 if (this.hideTimerID) { | |
161 window.clearTimeout(this.hideTimerID); | |
162 this.hideTimerID = -1; | |
163 } | |
164 } else { | |
165 if (this.hideTimerID == -1) { | |
166 this.hideTimerID = window.setTimeout(MPP_bind(this.hide_, this), | |
167 200); | |
168 } | |
169 } | |
170 } | |
171 }; | |
172 | |
173 PersonPopup.prototype.resizeElement_ = function(el, x, y, w, h) { | |
174 if (x != false) { | |
175 el.style.left = x + 'px'; | |
176 } | |
177 if (y != false) { | |
178 el.style.top = y + 'px'; | |
179 } | |
180 if (w != false) { | |
181 el.style.width = w + 'px'; | |
182 } | |
183 if (h != false) { | |
184 el.style.height = h + 'px'; | |
185 } | |
186 }; | |
187 | |
188 PersonPopup.prototype.show_ = function() { | |
189 this.showTimerID = -1; | |
190 | |
191 if (this.hideTimerID != -1) { | |
192 this.delayed = false; | |
193 return; | |
194 } | |
195 if (!this.pointerOnTargetElement) { | |
196 this.delayed = false; | |
197 return; | |
198 } | |
199 this.resizeElement_(this.popupDetailedElement, | |
200 this.targetPosX, this.targetPosY, | |
201 this.targetWidth, false); | |
202 this.popupDetailedElement.style.display = 'block'; | |
203 this.popupDetailedElement.innerHTML = "<a href='http://dnede.com' id='se
lect_target'>Select</a>"; | |
204 this.popupDetailedElement.style.visibility = 'visible'; | |
205 this.visible = true; | |
206 this.delayed = false; | |
207 }; | |
208 | |
209 PersonPopup.prototype.hide_ = function() { | |
210 this.hideTimerID = -1; | |
211 this.popupDetailedElement.style.display = 'none'; | |
212 this.visible = false; | |
213 this.delayed = false; | |
214 }; | |
215 | |
216 PersonPopup.prototype.handleAnchorMouseMove_ = function(e) { | |
217 e = e || window.event; | |
218 | |
219 var targetElement = (e.target) ? e.target : e.srcElement; | |
220 | |
221 this.pointerOnTargetElement = true; | |
222 | |
223 if (targetElement == this.targetElement) { | |
224 this.x = this.getPointerX_(e); | |
225 this.y = this.getPointerY_(e); | |
226 | |
227 } else { | |
228 this.handleAnchorMouseOver_(e); | |
229 } | |
230 }; | |
231 | |
232 PersonPopup.prototype.handleAnchorMouseOver_ = function(e) { | |
233 e = e || window.event; | |
234 var targetElement = (e.target) ? e.target : e.srcElement; | |
235 | |
236 if (this.visible && | |
237 (targetElement == this.targetElement) && | |
238 (this.hideTimerID == -1)) { | |
239 return; | |
240 } | |
241 | |
242 this.x = this.getPointerX_(e); | |
243 this.y = this.getPointerY_(e); | |
244 | |
245 if (this.visible && | |
246 (targetElement != this.targetElement) && | |
247 (this.pointerCloseEnough_(this.x, this.y))) { | |
248 return; | |
249 } | |
250 | |
251 if (this.delayed && (this.targetElement == targetElement)) { | |
252 return; | |
253 } | |
254 | |
255 this.targetElement = targetElement; | |
256 var screenWidth = self.innerWidth; | |
257 var screenHeight = self.innerHeight; | |
258 var scrollTop = document.documentElement.scrollTop; | |
259 var scrollLeft = document.documentElement.scrollLeft; | |
260 this.targetWidth = 12.7 * 26; | |
261 this.targetHeight = 12.7 * 13; | |
262 this.targetPosX = Math.floor(this.x + 15); | |
263 this.targetPosY = Math.floor(this.y + 20); | |
264 | |
265 if (this.showTimerID != -1) { | |
266 window.clearTimeout(this.showTimerID); | |
267 } | |
268 | |
269 if (this.visible) { | |
270 this.popupDetailedElement.style.display = 'none'; | |
271 this.showTimerID = | |
272 window.setTimeout(MPP_bind(this.show_, this), 200); | |
273 } else { | |
274 this.showTimerID = | |
275 window.setTimeout(MPP_bind(this.show_, this), 350); | |
276 } | |
277 | |
278 this.delayed = true; | |
279 this.pointerOutsidePopup = true; | |
280 }; | |
281 | |
282 PersonPopup.prototype.handleMouseOut_ = function(e) { | |
283 if ((this.delayed) || (this.visible)) { | |
284 | |
285 this.pointerOnTargetElement = false; | |
286 | |
287 e = e || window.event; | |
288 | |
289 if (e) { | |
290 var from = null; | |
291 | |
292 if (e.relatedTarget) { | |
293 from = e.relatedTarget; | |
294 } else if (e.toElement) { | |
295 from = e.toElement; | |
296 } | |
297 | |
298 var targetElement = (e.target) ? e.target : e.srcElement; | |
299 | |
300 try { | |
301 if ((from == null) || (from.tagName == 'HTML') || | |
302 (from.tagName.substring(0, 3) == 'xul')) { | |
303 this.hideTimerID = | |
304 window.setTimeout(MPP_bind(this.hide_, this), | |
305 200); | |
306 } | |
307 } catch(e) { | |
308 | |
309 } | |
310 } | |
311 } | |
312 }; | |
313 | |
314 PersonPopup.prototype.handleOnLoad_ = function(e) { | |
315 e = e || window.event; | |
316 this.popupDetailedElement = document.createElement('div'); | |
317 this.popupDetailedElement. | |
318 setAttribute('id','popup_detailed'); | |
319 this.popupDetailedElement.className = 'popup'; | |
320 this.popupDetailedElement.style.display = 'none'; | |
321 this.popupDetailedElement.style.position = 'absolute'; | |
322 this.popupDetailedElement.innerHTML = ' '; | |
323 document.body.appendChild(this.popupDetailedElement); | |
324 | |
325 document.body.onmousemove = MPP_bind(this.handleMouseMove_, this); | |
326 document.body.onmouseout = MPP_bind(this.handleMouseOut_, this); | |
327 this.enablePopupsForChildElements(document); | |
328 | |
329 runTest1(); | |
330 }; | |
331 | |
332 PersonPopup.prototype.enablePopupsForChildElements = function(el) { | |
333 var els = el.getElementsByTagName('*'); | |
334 | |
335 for (var i = 0, item; item = els[i]; i++) { | |
336 if (item.className.indexOf('showPersonPopup') != -1) { | |
337 item.onmouseover = MPP_bind(this.handleAnchorMouseOver_, this); | |
338 item.onmousemove = MPP_bind(this.handleAnchorMouseMove_, this); | |
339 } | |
340 } | |
341 }; | |
342 | |
343 var personPopup = new PersonPopup(); | |
344 </script> | |
345 </head> | |
346 <body> | |
347 <p class="byline"> | |
348 <a class="showPersonPopup" id="mouse_target" href="dummy">Mouse Over</a> | |
349 </p> | |
350 <div id="log_div"> | |
351 This test checks any regressions for fix applied in bug 1112795. To test i
t manually: | |
352 <li/> Hover mouse over "Mouse Over" link | |
353 <li/> Quickly jump to the yellow box that pops up and select "Select" link | |
354 <li/> Move mouse away so that pop up disappears | |
355 <li/> Press Ctrl-C - this should not cause any crash | |
356 </div> | |
357 </body> | |
358 </html> | |
OLD | NEW |