pointerevent_click_during_capture.html (5075B)
1 <!DOCTYPE HTML> 2 <title>Target of click-like events with pointer capture</title> 3 <link rel="help" href="https://w3c.github.io/pointerevents/#event-dispatch" /> 4 <meta name="variant" content="?mouse-click"> 5 <meta name="variant" content="?mouse-auxclick"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="pointerevent_support.js"></script> 13 14 <style> 15 div { 16 padding: 10px; 17 } 18 #parent { 19 background: grey; 20 } 21 #child1 { 22 background: green; 23 } 24 #child2 { 25 background: blue; 26 } 27 </style> 28 29 <div id="parent"> 30 <div id="child1"></div> 31 <div id="child2"></div> 32 </div> 33 <div id="done"></div> 34 35 <script> 36 'use strict'; 37 38 const [pointer_type, event_to_test] = location.search.substring(1).split("-"); 39 assert_true(["click", "auxclick"].includes(event_to_test)); 40 assert_equals(pointer_type, "mouse"); 41 // Other pointer types can generate click/auxclick and should be tested here. 42 43 const test_pointer = pointer_type + 'TestPointer'; 44 45 let event_log = []; 46 47 function logEvent(event) { 48 if (event.eventPhase == event.AT_TARGET) { 49 event_log.push(event.type + '@' + event.target.id); 50 } 51 } 52 53 const parent = document.getElementById('parent'); 54 const child2 = document.getElementById('child2'); 55 const child1 = document.getElementById('child1'); 56 const done = document.getElementById('done'); 57 58 let logged_events = [ 59 'gotpointercapture', 'lostpointercapture', 60 'pointerdown', 'pointerup', event_to_test 61 ]; 62 logged_events.forEach(ename => { 63 [parent, child2, child1].forEach(target => { 64 target.addEventListener(ename, logEvent); 65 }); 66 }); 67 // Suppress context-menus at right-clicks. 68 parent.addEventListener("contextmenu", e => e.preventDefault()); 69 70 function dragBetweenChildrenAndClickOnDone(from_child, to_child, test) { 71 let actions_promise = new test_driver.Actions(); 72 73 const button_type = (event_to_test === "click") 74 ? actions_promise.ButtonType.LEFT 75 : actions_promise.ButtonType.RIGHT; 76 77 actions_promise.addPointer(test_pointer, pointer_type) 78 .pointerMove(0, 0, {origin:from_child}) 79 .pointerDown({button:button_type}) 80 .pointerMove(0, 0, {origin:to_child}) 81 .pointerUp({button:button_type}) 82 .pointerMove(0, 0, {origin:done}) 83 .pointerDown() 84 .pointerUp(); 85 86 let done_click_promise = getEvent('click', done, test); 87 88 return actions_promise.send().then(done_click_promise); 89 } 90 91 promise_test(async test => { 92 event_log = []; 93 94 await dragBetweenChildrenAndClickOnDone(child1, child1, test); 95 96 assert_equals(event_log.join(','), 97 `pointerdown@child1,pointerup@child1,${event_to_test}@child1`); 98 }, 'pointerdown/up at child1, no capture'); 99 100 promise_test(async test => { 101 event_log = []; 102 103 getEvent('pointerdown', child1, test) 104 .then(event => child1.setPointerCapture(event.pointerId)); 105 await dragBetweenChildrenAndClickOnDone(child1, child1, test); 106 107 assert_equals(event_log.join(','), 108 'pointerdown@child1,gotpointercapture@child1,' + 109 `pointerup@child1,lostpointercapture@child1,${event_to_test}@child1`); 110 }, 'pointerdown/up at child1, capture at child1'); 111 112 promise_test(async test => { 113 event_log = []; 114 115 getEvent('pointerdown', child1, test) 116 .then(event => child2.setPointerCapture(event.pointerId)); 117 await dragBetweenChildrenAndClickOnDone(child1, child1, test); 118 119 assert_equals(event_log.join(','), 120 'pointerdown@child1,gotpointercapture@child2,' + 121 `pointerup@child2,lostpointercapture@child2,${event_to_test}@child2`); 122 }, 'pointerdown/up at child1, capture at child2'); 123 124 promise_test(async test => { 125 event_log = []; 126 127 await dragBetweenChildrenAndClickOnDone(child1, child2, test); 128 129 assert_equals(event_log.join(','), 130 `pointerdown@child1,pointerup@child2,${event_to_test}@parent`); 131 }, 'pointerdown at child1, pointerup at child2, no capture'); 132 133 promise_test(async test => { 134 event_log = []; 135 136 getEvent('pointerdown', child1, test) 137 .then(event => child1.setPointerCapture(event.pointerId)); 138 await dragBetweenChildrenAndClickOnDone(child1, child2, test); 139 140 assert_equals(event_log.join(','), 141 'pointerdown@child1,gotpointercapture@child1,' + 142 `pointerup@child1,lostpointercapture@child1,${event_to_test}@child1`); 143 }, 'pointerdown at child1, pointerup at child2, capture at child1'); 144 145 promise_test(async test => { 146 event_log = []; 147 148 getEvent('pointerdown', child1, test) 149 .then(event => child2.setPointerCapture(event.pointerId)); 150 await dragBetweenChildrenAndClickOnDone(child1, child2, test); 151 152 assert_equals(event_log.join(','), 153 'pointerdown@child1,gotpointercapture@child2,' + 154 `pointerup@child2,lostpointercapture@child2,${event_to_test}@child2`); 155 }, 'pointerdown at child1, pointerup at child2, capture at child2'); 156 </script> 157 <html> 158 </html>