Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/external/wpt/pointerevents/html/pointerevent_drag_interaction-manual.html |
| diff --git a/third_party/WebKit/LayoutTests/external/wpt/pointerevents/html/pointerevent_drag_interaction-manual.html b/third_party/WebKit/LayoutTests/external/wpt/pointerevents/html/pointerevent_drag_interaction-manual.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..fec0a3bbbb489d4844e11b606c282f95eeea5140 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/external/wpt/pointerevents/html/pointerevent_drag_interaction-manual.html |
| @@ -0,0 +1,87 @@ |
| +<html> |
| + <head> |
| + <title>Pointer Events interaction with drag and drop</title> |
| + <meta name="viewport" content="width=device-width"> |
| + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> |
| + <script src="/resources/testharness.js"></script> |
| + <script src="/resources/testharnessreport.js"></script> |
| + <!-- Additional helper script for common checks across event types --> |
| + <script type="text/javascript" src="../pointerevent_support.js"></script> |
| + <script> |
| + var eventList = ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture', 'dragstart']; |
| + |
| + PhaseEnum = { |
| + DndWithoutCapture: 0, |
| + DndWithCapture: 1, |
| + DndPrevented: 2, |
| + Done: 3, |
| + }; |
| + var phase = PhaseEnum.DndWithoutCapture; |
| + var received_events = []; |
| + |
| + function resetTestState() { |
| + phase = PhaseEnum.DndWithoutCapture; |
| + } |
| + |
| + function run() { |
| + var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']); |
| + |
| + var target0 = document.querySelector('#target0'); |
| + var target1 = document.querySelector('#target1'); |
| + |
| + function handleEvent(e) { |
| + if (e.type == 'pointerdown') { |
| + received_events = []; |
| + if (phase == PhaseEnum.DndWithCapture) |
| + target0.setPointerCapture(e.pointerId); |
| + } |
| + received_events.push(e.type + "@" + e.target.id); |
| + if (e.type == 'dragstart') { |
| + e.dataTransfer.setData('text/plain', 'dragstart test'); |
| + if (phase == PhaseEnum.DndPrevented) |
| + e.preventDefault(); |
| + } |
| + if (phase == PhaseEnum.DndWithoutCapture && e.type == 'pointercancel') { |
| + phase++; |
| + test(() => { |
| + assert_equals(received_events.join(','), "pointerdown@target0,dragstart@target0,pointercancel@target0", "Pointercancel should be fired 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.
|
| + }, "Pointercancel when drag operation starts"); |
| + } else if (phase == PhaseEnum.DndWithCapture && e.type == 'lostpointercapture') { |
| + test(() => { |
| + assert_equals(received_events.join(','), "pointerdown@target0,gotpointercapture@target0,dragstart@target0,pointercancel@target0,lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); |
| + }, "Pointercancel while capturing when drag operation starts"); |
| + phase++; |
| + } else if (phase == PhaseEnum.DndPrevented && e.type == 'pointerup') { |
| + test(() => { |
| + assert_equals(received_events.join(','), "pointerdown@target0,dragstart@target0,pointerup@target1", "Pointerevent stream shouldn't get interrupted when drag is prevented."); |
| + }, "Pointerevent stream when drag is prevented."); |
| + phase++; |
| + test_pointerEvent.done(); |
| + } |
| + } |
| + eventList.forEach(function(eventName) { |
| + on_event(target0, eventName, handleEvent); |
| + on_event(target1, eventName, handleEvent); |
| + }); |
| + } |
| + </script> |
| + </head> |
| + <body onload="run()"> |
| + <h1>Pointer Events interaction with drag and drop</h1> |
| + <h2 id="pointerTypeDescription"></h2> |
| + <h4> |
| + Test Description: This test checks that the pointercancel (and if needed lostpointercapture) is dispatched when drag starts. |
| + <ol> |
| + <li>Press down on the black square.</li> |
| + <li>Move your pointer to purple square and release.</li> |
| + <li>Repeat the first two steps.</li> |
| + <li>Repeat the first two steps once again.</li> |
| + </ol> |
| + Test passes if the proper behavior of the events is observed. |
| + </h4> |
| + <div id="testContainer"> |
| + <div draggable="true" id="target0"></div> |
| + <div id="target1"></div> |
| + </div> |
| + </body> |
| +</html> |