| 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(', '), "pointerdo
wn@target0, dragstart@target0, pointercancel@target0", "Pointercancel should be
fired with the expected order when drag operation starts."); |
| 48 }, "Pointercancel when drag operation starts"); |
| 49 } else if (phase == PhaseEnum.DndWithCapture && e.type == 'l
ostpointercapture') { |
| 50 test(() => { |
| 51 assert_equals(received_events.join(', '), "pointerdo
wn@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0,
lostpointercapture@target0", "Pointercancel and lostpointercapture should be fi
red with 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(', '), "pointerdo
wn@target0, dragstart@target0, pointerup@target1", "Pointerevent stream shouldn'
t get 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 |
|---|
Chromium Code Reviews
Issue 2973963003:
Release mouse pointer capture when it starts drag (Closed)
