Chromium Code Reviews Chromium Code Reviews
Issue 2973963003:
Release mouse pointer capture when it starts drag (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 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', 'gotpoi ntercapture', 'lostpointercapture', 'dragstart']; | |
| 12 | |
| 13 PhaseEnum = { | |
| 14 DndWithoutCapture: 0, | |
| 15 DndWithCapture: 1, | |
| 16 DndPrevented: 2, | |
| 17 Done: 3, | |
| 18 }; | |
| 19 var phase = PhaseEnum.DndWithoutCapture; | |
| 20 var received_events = []; | |
| 21 | |
| 22 function resetTestState() { | |
| 23 phase = PhaseEnum.DndWithoutCapture; | |
| 24 } | |
| 25 | |
| 26 function run() { | |
| 27 var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']); | |
| 28 | |
| 29 var target0 = document.querySelector('#target0'); | |
| 30 var target1 = document.querySelector('#target1'); | |
| 31 | |
| 32 function handleEvent(e) { | |
| 33 if (e.type == 'pointerdown') { | |
| 34 received_events = []; | |
| 35 if (phase == PhaseEnum.DndWithCapture) | |
| 36 target0.setPointerCapture(e.pointerId); | |
| 37 } | |
| 38 received_events.push(e.type + "@" + e.target.id); | |
| 39 if (e.type == 'dragstart') { | |
| 40 e.dataTransfer.setData('text/plain', 'dragstart test'); | |
| 41 if (phase == PhaseEnum.DndPrevented) | |
| 42 e.preventDefault(); | |
| 43 } | |
| 44 if (phase == PhaseEnum.DndWithoutCapture && e.type == 'point ercancel') { | |
| 45 phase++; | |
| 46 test(() => { | |
| 47 assert_equals(received_events.join(','), "pointerdow n@target0,dragstart@target0,pointercancel@target0", "Pointercancel should be fir ed with the expected order when drag operation starts."); | |
|
mustaq
2017/07/10 16:17:30
Nit: I think joining with ', ' (with a space) make
Navid Zolghadr
2017/07/11 15:41:06
Done.
| |
| 48 }, "Pointercancel when drag operation starts"); | |
| 49 } else if (phase == PhaseEnum.DndWithCapture && e.type == 'l ostpointercapture') { | |
| 50 test(() => { | |
| 51 assert_equals(received_events.join(','), "pointerdow n@target0,gotpointercapture@target0,dragstart@target0,pointercancel@target0,lost pointercapture@target0", "Pointercancel and lostpointercapture should be fired w ith the expected order when drag operation starts."); | |
| 52 }, "Pointercancel while capturing when drag operation st arts"); | |
| 53 phase++; | |
| 54 } else if (phase == PhaseEnum.DndPrevented && e.type == 'poi nterup') { | |
| 55 test(() => { | |
| 56 assert_equals(received_events.join(','), "pointerdow n@target0,dragstart@target0,pointerup@target1", "Pointerevent stream shouldn't g et interrupted when drag is prevented."); | |
| 57 }, "Pointerevent stream when drag is prevented."); | |
| 58 phase++; | |
| 59 test_pointerEvent.done(); | |
| 60 } | |
| 61 } | |
| 62 eventList.forEach(function(eventName) { | |
| 63 on_event(target0, eventName, handleEvent); | |
| 64 on_event(target1, eventName, handleEvent); | |
| 65 }); | |
| 66 } | |
| 67 </script> | |
| 68 </head> | |
| 69 <body onload="run()"> | |
| 70 <h1>Pointer Events interaction with drag and drop</h1> | |
| 71 <h2 id="pointerTypeDescription"></h2> | |
| 72 <h4> | |
| 73 Test Description: This test checks that the pointercancel (and if ne eded lostpointercapture) is dispatched when drag starts. | |
| 74 <ol> | |
| 75 <li>Press down on the black square.</li> | |
| 76 <li>Move your pointer to purple square and release.</li> | |
| 77 <li>Repeat the first two steps.</li> | |
| 78 <li>Repeat the first two steps once again.</li> | |
| 79 </ol> | |
| 80 Test passes if the proper behavior of the events is observed. | |
| 81 </h4> | |
| 82 <div id="testContainer"> | |
| 83 <div draggable="true" id="target0"></div> | |
| 84 <div id="target1"></div> | |
| 85 </div> | |
| 86 </body> | |
| 87 </html> | |
| OLD | NEW |
