pointerevent_drag_interaction-manual.html (5750B)
1 <html> 2 <head> 3 <title>Pointer Events interaction with drag and drop</title> 4 <meta name="viewport" content="width=device-width"> 5 <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <!-- Additional helper script for common checks across event types --> 9 <script type="text/javascript" src="../pointerevent_support.js"></script> 10 <script> 11 var eventList = ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture', 'dragstart', 'mousedown']; 12 13 PhaseEnum = { 14 DndWithoutCapture: 0, 15 DndWithCapture: 1, 16 DndWithCaptureMouse: 2, 17 DndPrevented: 3, 18 Done: 4, 19 }; 20 var phase = PhaseEnum.DndWithoutCapture; 21 var received_events = []; 22 var pointerId = -1; 23 24 function resetTestState() { 25 phase = PhaseEnum.DndWithoutCapture; 26 } 27 28 function run() { 29 var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']); 30 31 var target0 = document.querySelector('#target0'); 32 var target1 = document.querySelector('#target1'); 33 34 function handleEvent(e) { 35 if (e.type == 'pointerdown') { 36 received_events = []; 37 if (phase == PhaseEnum.DndWithCapture) { 38 target0.setPointerCapture(e.pointerId); 39 } else if (phase == PhaseEnum.DndWithCaptureMouse) { 40 pointerId = e.pointerId; 41 } 42 } 43 if (e.type == 'mousedown') { 44 if (phase == PhaseEnum.DndWithCaptureMouse) { 45 target0.setPointerCapture(pointerId); 46 } 47 } 48 received_events.push(e.type + "@" + e.target.id); 49 if (e.type == 'dragstart') { 50 e.dataTransfer.setData('text/plain', 'dragstart test'); 51 if (phase == PhaseEnum.DndPrevented) 52 e.preventDefault(); 53 } 54 if (phase == PhaseEnum.DndWithoutCapture && e.type == 'pointercancel') { 55 phase++; 56 test(() => { 57 assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointercancel@target0", "Pointercancel should be fired with the expected order when drag operation starts."); 58 }, "Pointercancel when drag operation starts"); 59 } else if (phase == PhaseEnum.DndWithCapture && e.type == 'lostpointercapture') { 60 test(() => { 61 assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); 62 }, "Pointercancel while capturing when drag operation starts"); 63 phase++; 64 } else if (phase == PhaseEnum.DndWithCaptureMouse && e.type == 'lostpointercapture') { 65 test(() => { 66 assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); 67 }, "Pointercancel while capturing on mousedown when drag operation starts"); 68 phase++; 69 } else if (phase == PhaseEnum.DndPrevented && e.type == 'pointerup') { 70 test(() => { 71 assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointerup@target1", "Pointerevent stream shouldn't get interrupted when drag is prevented."); 72 }, "Pointerevent stream when drag is prevented."); 73 phase++; 74 test_pointerEvent.done(); 75 } 76 } 77 eventList.forEach(function(eventName) { 78 on_event(target0, eventName, handleEvent); 79 on_event(target1, eventName, handleEvent); 80 }); 81 } 82 </script> 83 </head> 84 <body onload="run()"> 85 <h1>Pointer Events interaction with drag and drop</h1> 86 <h2 id="pointerTypeDescription"></h2> 87 <h4> 88 Test Description: This test checks that the pointercancel (and if needed lostpointercapture) is dispatched when drag starts. 89 <ol> 90 <li>Press down on the black square.</li> 91 <li>Move your pointer to purple square and release.</li> 92 <li>Repeat the first two steps.</li> 93 <li>Repeat the first two steps once again.</li> 94 <li>Repeat the first two steps once again.</li> 95 </ol> 96 Test passes if the proper behavior of the events is observed. 97 </h4> 98 <div id="testContainer"> 99 <div draggable="true" id="target0"></div> 100 <div id="target1"></div> 101 </div> 102 </body> 103 </html>