pointerevent_mouse_capture_change_hover.html (6954B)
1 <!DOCTYPE HTML> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <style> 8 body { 9 user-select: none; 10 } 11 #green:hover { 12 background-color: red; 13 } 14 #blue:hover { 15 background-color: red; 16 } 17 #green { 18 background-color: green; 19 } 20 #blue { 21 background-color: blue; 22 } 23 div.box { 24 margin: 5px; 25 padding: 20px; 26 width: 50px; 27 height: 50px; 28 } 29 </style> 30 <body onload="run()"> 31 <div id="green" class="box"></div> 32 <div id="blue" class="box"></div> 33 </body> 34 <script> 35 var receivedEventList = []; 36 var setcapture = ""; 37 38 let testEventList = ['pointerup', 'pointerdown', 'pointermove', 'gotpointercapture', 'lostpointercapture', "pointerover", "pointerout", "pointerleave", "pointerenter"]; 39 testEventList.forEach(function(eventName) { 40 green.addEventListener(eventName, logEvent); 41 blue.addEventListener(eventName, logEvent); 42 }); 43 44 function logEvent(event) { 45 receivedEventList.push(event.target.id + " received " + event.type) 46 } 47 48 function setCaptureGreen(event) { 49 green.setPointerCapture(event.pointerId); 50 } 51 52 function setCaptureBlue(event) { 53 blue.setPointerCapture(event.pointerId); 54 } 55 56 function releaseCapture(event) { 57 if (event.target.hasPointerCapture(event.pointerId)) { 58 event.target.releasePointerCapture(event.pointerId); 59 } 60 } 61 62 function run() { 63 promise_test (async() => { 64 // Move to (1, 1) to reset hovering. 65 await new test_driver.Actions().pointerMove(1, 1).send(); 66 receivedEventList = []; 67 68 // pointerdown at green -> set capture to green -> green receive the following moves. 69 document.addEventListener("pointerdown", setCaptureGreen); 70 71 await new test_driver.Actions() 72 .addPointer("mouse") 73 .pointerMove(25, 25, {origin: green}) 74 .pointerDown() 75 .pointerMove(30, 30, {origin: green}) 76 .pointerMove(25, 25, {origin: blue}) 77 .send(); 78 79 expectedEventList = ["green received pointerover", 80 "green received pointerenter", 81 "green received pointermove", 82 "green received pointerdown", 83 "green received gotpointercapture", 84 "green received pointermove", 85 "green received pointermove"]; 86 87 assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); 88 assert_equals(getComputedStyle(green).backgroundColor, "rgb(255, 0, 0)", "green should be red (hover)."); 89 assert_equals(getComputedStyle(blue).backgroundColor, "rgb(0, 0, 255)", "blue should be blue."); 90 document.removeEventListener("pointerdown", setCaptureGreen); 91 // Release mouse button. 92 await new test_driver.Actions().addPointer("mouse").pointerUp().send(); 93 }, "Mouse down and capture to green."); 94 95 promise_test (async() => { 96 // Move to (1, 1) to reset hovering. 97 await new test_driver.Actions().addPointer("mouse").pointerMove(1, 1).send(); 98 receivedEventList = []; 99 100 // pointerdown at green -> set capture to blue -> blue receive the following moves. 101 document.addEventListener("pointerdown", setCaptureBlue); 102 103 await new test_driver.Actions() 104 .addPointer("mouse") 105 .pointerMove(25, 25, {origin: green}) 106 .pointerDown() 107 .pointerMove(30, 30, {origin: green}) 108 .pointerMove(31, 31, {origin: green}) 109 .send(); 110 111 expectedEventList = ["green received pointerover", 112 "green received pointerenter", 113 "green received pointermove", 114 "green received pointerdown", 115 "green received pointerout", 116 "green received pointerleave", 117 "blue received pointerover", 118 "blue received pointerenter", 119 "blue received gotpointercapture", 120 "blue received pointermove", 121 "blue received pointermove"]; 122 123 assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); 124 assert_equals(getComputedStyle(green).backgroundColor, "rgb(0, 128, 0)", "green should be green."); 125 assert_equals(getComputedStyle(blue).backgroundColor, "rgb(255, 0, 0)", "blue should be red (hover)."); 126 document.removeEventListener("pointerdown", setCaptureBlue); 127 // Release mouse button. 128 await new test_driver.Actions().addPointer("mouse").pointerUp().send(); 129 }, "Mouse down at green and capture to blue."); 130 131 promise_test (async() => { 132 // Move to (1, 1) to reset hovering. 133 await new test_driver.Actions().addPointer("mouse").pointerMove(1, 1).send(); 134 receivedEventList = []; 135 136 // pointerdown at green -> set capture to green -> green receive first move -> release capture -> blue receive the next move 137 green.addEventListener("pointerdown", setCaptureGreen); 138 green.addEventListener("pointermove", releaseCapture); 139 140 await new test_driver.Actions() 141 .addPointer("mouse") 142 .pointerMove(25, 25, {origin: green}) 143 .pointerDown() 144 .pointerMove(30, 30, {origin: blue}) 145 .pointerMove(25, 25, {origin: blue}) 146 .send(); 147 148 expectedEventList = ["green received pointerover", 149 "green received pointerenter", 150 "green received pointermove", 151 "green received pointerdown", 152 "green received gotpointercapture", 153 "green received pointermove", 154 "green received lostpointercapture", 155 "green received pointerout", 156 "green received pointerleave", 157 "blue received pointerover", 158 "blue received pointerenter", 159 "blue received pointermove"] 160 161 assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); 162 assert_equals(getComputedStyle(green).backgroundColor, "rgb(0, 128, 0)", "green should be green."); 163 assert_equals(getComputedStyle(blue).backgroundColor, "rgb(255, 0, 0)", "blue should be red (hover)."); 164 green.removeEventListener("pointerdown", setCaptureBlue); 165 green.removeEventListener("pointermove", releaseCapture); 166 // Release mouse button. 167 await new test_driver.Actions().addPointer("mouse").pointerUp().send(); 168 }, "Mouse down and capture to green, move to blue and release capture"); 169 } 170 </script>