OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML> | |
2 <script src="../../../../../resources/js-test.js"></script> | |
3 <style> | |
4 div.box { | |
5 margin: 5px; | |
6 padding: 20px; | |
7 float: left; | |
8 } | |
9 </style> | |
10 | |
11 <div id="grey" class="box" style="background-color:grey;"> | |
12 <div id="green" class="box" style="background-color:green;"> | |
13 </div> | |
14 <div id="blue" class="box" style="background-color:blue;"> | |
15 </div> | |
16 </div> | |
17 | |
18 <div id="console"></div> | |
19 | |
20 <script> | |
21 description("Verifies that trasition events are correctly fired in different poi
nter capture scenarios for mouse."); | |
22 | |
23 var testSet = [ | |
24 { firstCapturing: 'none', secondCapturing: 'blue' }, | |
25 { firstCapturing: 'none', secondCapturing: 'green' }, | |
26 { firstCapturing: 'blue', secondCapturing: 'none' }, | |
27 { firstCapturing: 'green', secondCapturing: 'none' }, | |
28 { firstCapturing: 'blue', secondCapturing: 'green' }, | |
29 { firstCapturing: 'green', secondCapturing: 'blue' }, | |
30 ]; | |
31 | |
32 var mousePointerId = 1; | |
33 | |
34 var rect = document.getElementById("green").getBoundingClientRect(); | |
35 var x1 = rect.left + 5; | |
36 var y1 = rect.top + 5; | |
37 | |
38 var rect = document.getElementById("blue").getBoundingClientRect(); | |
39 var x2 = rect.left + 5; | |
40 var y2 = rect.top + 5; | |
41 | |
42 function init() { | |
43 var eventList = ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemo
ve", | |
44 "pointerenter", "pointerleave", "pointerover", "pointerout",
"pointermove", | |
45 "gotpointercapture", "lostpointercapture"]; | |
46 | |
47 ["grey", "green", "blue"].forEach(function(id) { | |
48 var targetDiv = document.getElementById(id); | |
49 eventList.forEach(function(eventName) { | |
50 targetDiv.addEventListener(eventName, function(event) { | |
51 if (event.eventPhase == Event.AT_TARGET) { | |
52 debug(id + " received " + event.type); | |
53 } | |
54 }); | |
55 }); | |
56 }); | |
57 } | |
58 | |
59 function testScenario(testcase, borderCross) { | |
60 debug(" ==== '" + testcase.firstCapturing + "' is capturing and then '" + t
estcase.secondCapturing + "' will capture" + (borderCross ? "; will move pointer
to 'blue'" : "") + " ===="); | |
61 | |
62 debug(" **** Move mouse to green and press *****"); | |
63 eventSender.mouseMoveTo(x1, y1); | |
64 eventSender.mouseDown(1); | |
65 | |
66 debug(" **** Set initial capturing and jiggle mouse in green *****"); | |
67 if (testcase.firstCapturing != "none") { | |
68 debug("--- Set pointercapture for " + testcase.firstCapturing + " ---"); | |
69 document.getElementById(testcase.firstCapturing).setPointerCapture(mousePoin
terId); | |
70 } | |
71 eventSender.mouseMoveTo(x1+1, y1+1); | |
72 if (testcase.secondCapturing != "none") { | |
73 debug("--- Set pointercapture for " + testcase.secondCapturing + " ---"); | |
74 document.getElementById(testcase.secondCapturing).setPointerCapture(mousePoi
nterId); | |
75 } else if(testcase.firstCapturing != "none") { | |
76 debug("--- Release pointercapture for " + testcase.firstCapturing + " ---"); | |
77 document.getElementById(testcase.firstCapturing).releasePointerCapture(mouse
PointerId); | |
78 } | |
79 | |
80 if (borderCross) { | |
81 debug(" **** Move to blue box *****"); | |
82 eventSender.mouseMoveTo(x2, y2); | |
83 } else { | |
84 debug(" **** Jiggle mouse in green *****"); | |
85 eventSender.mouseMoveTo(x1, y1); | |
86 } | |
87 | |
88 debug(" **** Move out of grey, then release *****"); | |
89 eventSender.mouseMoveTo(0, 0); | |
90 eventSender.mouseUp(1); | |
91 eventSender.mouseDown(0); | |
92 eventSender.mouseUp(0); | |
93 eventSender.leapForward(500); | |
94 debug(""); | |
95 } | |
96 | |
97 function runTests() { | |
98 for (var i = 0; i < testSet.length; i++) { | |
99 testScenario(testSet[i], true); | |
100 } | |
101 for (var i = 0; i < testSet.length; i++) { | |
102 testScenario(testSet[i], false); | |
103 } | |
104 } | |
105 | |
106 init(); | |
107 if (window.eventSender) | |
108 runTests(); | |
109 else | |
110 debug("This test requires eventSender"); | |
111 | |
112 </script> | |
OLD | NEW |