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

Side by Side Diff: third_party/WebKit/LayoutTests/virtual/pointerevent/fast/events/pointerevents/mouse-pointer-capture.html

Issue 1774913004: Firing got/lost pointer capture events (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 9 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
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <script src="../../../../../resources/js-test.js"></script> 2 <script src="../../../../../resources/js-test.js"></script>
3 <style> 3 <style>
4 div.box { 4 div.box {
5 margin: 5px; 5 margin: 5px;
6 padding: 20px; 6 padding: 20px;
7 float: left; 7 float: left;
8 } 8 }
9 #grey {
10 width: 50px;
11 height: 50px;
12 }
9 </style> 13 </style>
10 14
11 <div id="grey" class="box" style="background-color:grey"> 15 <div id="grey" class="box" style="background-color:grey">
12 <div id="green" class="box" style="background-color:green;"> 16 <div id="green" class="box" style="background-color:green;">
13 </div> 17 </div>
14 </div> 18 </div>
15 <div id="blue" class="box" style="background-color:blue;"> 19 <div id="blue" class="box" style="background-color:blue;">
16 </div> 20 </div>
17 21
18 <div id="console"></div> 22 <div id="console"></div>
19 23
20 <script> 24 <script>
21 description("Verifies that pointer capture works for mouse."); 25 description("Verifies that pointer capture works for mouse.");
22 26
23 var implicitRelease = false; 27 var implicitRelease = false;
28 var removeElement = false;
24 var pointerMoveCount = 0; 29 var pointerMoveCount = 0;
25 30
26 var rect = document.getElementById("green").getBoundingClientRect(); 31 var rect = document.getElementById("green").getBoundingClientRect();
27 var x1 = rect.left + 5; 32 var x1 = rect.left + 5;
28 var y1 = rect.top + 5; 33 var y1 = rect.top + 5;
29 34
30 var rect = document.getElementById("grey").getBoundingClientRect(); 35 var rect = document.getElementById("grey").getBoundingClientRect();
31 var x2 = rect.left + 5; 36 var x2 = rect.left + 5;
32 var y2 = rect.top + 5; 37 var y2 = rect.top + 5;
33 38
34 var rect = document.getElementById("blue").getBoundingClientRect(); 39 var rect = document.getElementById("blue").getBoundingClientRect();
35 var x3 = rect.left + 5; 40 var x3 = rect.left + 5;
36 var y3 = rect.top + 5; 41 var y3 = rect.top + 5;
37 42
38 function init() { 43 function init() {
39 var eventList = ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemo ve", "mousedown", "mouseup", 44 var eventList = ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemo ve", "mousedown", "mouseup",
40 "pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup"]; 45 "pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup",
46 "gotpointercapture", "lostpointercapture"];
41 47
48 document.addEventListener("lostpointercapture", function(event) {
49 if (event.eventPhase == Event.AT_TARGET) {
50 debug("document received " + event.type);
51 }
52 });
42 ["grey", "green", "blue"].forEach(function(id) { 53 ["grey", "green", "blue"].forEach(function(id) {
43 var targetDiv = document.getElementById(id); 54 var targetDiv = document.getElementById(id);
44 eventList.forEach(function(eventName) { 55 eventList.forEach(function(eventName) {
45 targetDiv.addEventListener(eventName, function(event) { 56 targetDiv.addEventListener(eventName, function(event) {
46 if (event.eventPhase == Event.AT_TARGET) { 57 if (event.eventPhase == Event.AT_TARGET) {
47 debug(id + " received " + event.type); 58 debug(id + " received " + event.type);
48 if (id == "green" && event.type == "pointerdown") { 59 if (id == "green" && event.type == "pointerdown") {
49 debug(" **** Set Pointer Capture ***** "); 60 debug(" **** Set Pointer Capture ***** ");
50 targetDiv.setPointerCapture(event.pointerId); 61 targetDiv.setPointerCapture(event.pointerId);
51 } 62 }
52 if (implicitRelease && id == "green" && event.type == "pointermove") { 63 if (id == "green" && event.type == "pointermove") {
53 if (pointerMoveCount++ > 3) { 64 if (implicitRelease && pointerMoveCount++ > 3) {
mustaq 2016/03/10 19:28:19 Didn't notice it before: the var should be called
Navid Zolghadr 2016/03/10 20:27:35 Done.
54 debug(" **** Release Pointer Capture ***** "); 65 debug(" **** Release Pointer Capture ***** ");
55 targetDiv.releasePointerCapture(event.pointerId); 66 targetDiv.releasePointerCapture(event.pointerId);
56 implicitRelease = false; 67 implicitRelease = false;
57 } 68 }
69 if (removeElement && pointerMoveCount++ > 3) {
70 debug(" **** Remove Element ***** ");
71 targetDiv.parentNode.removeChild(targetDiv);
72 removeElement = false;
73 }
58 } 74 }
59 } 75 }
60 }); 76 });
61 }); 77 });
62
63 }); 78 });
64 } 79 }
65 80
66 function testScenario() { 81 function testScenario() {
67 debug(" **** Move to green box & mouse press & jiggle ***** "); 82 debug(" **** Move to green box & mouse press & jiggle ***** ");
68 eventSender.mouseMoveTo(x1, y1); 83 eventSender.mouseMoveTo(x1, y1);
69 eventSender.mouseDown(1); 84 eventSender.mouseDown(1);
70 eventSender.mouseMoveTo(x1+1, y1+1); 85 eventSender.mouseMoveTo(x1+1, y1+1);
71 86
72 debug(" **** Move to grey box & jiggle ***** "); 87 debug(" **** Move to grey box & jiggle ***** ");
73 eventSender.mouseMoveTo(x2, y2); 88 eventSender.mouseMoveTo(x2, y2);
74 eventSender.mouseMoveTo(x2+1, y2+1); 89 eventSender.mouseMoveTo(x2+1, y2+1);
75 90
76 debug(" **** Move to blue box & jiggle ****"); 91 debug(" **** Move to blue box & jiggle ****");
77 eventSender.mouseMoveTo(x3, y3); 92 eventSender.mouseMoveTo(x3, y3);
78 eventSender.mouseMoveTo(x3+1, y3+1); 93 eventSender.mouseMoveTo(x3+1, y3+1);
79 eventSender.mouseMoveTo(x3, y3); 94 eventSender.mouseMoveTo(x3, y3);
80 95
81 debug(" **** Move back to green & again to blue & mouse release ***** "); 96 debug(" **** Move back to green & again to blue & mouse release ***** ");
82 eventSender.mouseMoveTo(x1, y1); 97 eventSender.mouseMoveTo(x1, y1);
83 eventSender.mouseMoveTo(x3, y3); 98 eventSender.mouseMoveTo(x3, y3);
84 eventSender.mouseUp(1); 99 eventSender.mouseUp(1);
85 100
86 debug(" **** Jiggle in blue box ***** "); 101 debug(" **** Jiggle in blue box ***** ");
87 eventSender.mouseMoveTo(x3+1, y3+1); 102 eventSender.mouseMoveTo(x3+1, y3+1);
88 103
89 debug(" **** Move to (0,0) ***** "); 104 debug(" **** Move to (0,0) ***** ");
90 eventSender.mouseMoveTo(0, 0); 105 eventSender.mouseMoveTo(0, 0);
91 } 106 }
92 107
93 function runTests() { 108 function runTests() {
94 debug(" ======= Set pointer capture and release implicitly ======= "); 109 debug(" ======= Set pointer capture and release implicitly =======");
95 testScenario(); 110 testScenario();
96 111
97 implicitRelease = true; 112 implicitRelease = true;
113 pointerMoveCount = 0;
98 debug(""); 114 debug("");
99 debug(" ======= Set pointer capture and release explicitly ======= "); 115 debug(" ======= Set pointer capture and release explicitly =======");
100 testScenario(); 116 testScenario();
101 } 117 implicitRelease = false;
118
119 removeElement = true;
120 pointerMoveCount = 0;
121 debug("");
122 debug(" ======= Set pointer capture and remove element =======");
123 testScenario();
124 removeElement = false;
125 }
102 126
103 init(); 127 init();
104 if (window.eventSender) 128 if (window.eventSender)
105 runTests(); 129 runTests();
106 else 130 else
107 debug("This test requires eventSender"); 131 debug("This test requires eventSender");
108 132
109 </script> 133 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698