| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <meta charset="utf-8" /> |
| 3 <script src="../../resources/testharness.js"></script> |
| 4 <script src="../../resources/testharnessreport.js"></script> |
| 5 <style> |
| 6 .box { |
| 7 display: block; |
| 8 border: 1px solid black; |
| 9 width: 100px; |
| 10 height: 100px; |
| 11 margin: 10px; |
| 12 float: left; |
| 13 } |
| 14 .overlay { |
| 15 display: none; |
| 16 position: absolute; |
| 17 background: hsl(200deg, 100%, 75%); |
| 18 z-index: 2; |
| 19 } |
| 20 .overlay.visible { |
| 21 display: block; |
| 22 } |
| 23 </style> |
| 24 |
| 25 <p> |
| 26 Please drag the "Drag Me" box into the "Drop Here" box. |
| 27 </p> |
| 28 |
| 29 <div class="overlay box"> |
| 30 Drag Me |
| 31 </div> |
| 32 <div class="dragged box" draggable="true"> |
| 33 Drag Me |
| 34 </div> |
| 35 |
| 36 <div class="dropzone box"> |
| 37 Drop Here |
| 38 </div> |
| 39 |
| 40 <script> |
| 41 'use strict'; |
| 42 |
| 43 const eventSequence = []; |
| 44 const addEventToSequence = event => { |
| 45 if (eventSequence.indexOf(event.type) === -1) |
| 46 eventSequence.push(event.type); |
| 47 } |
| 48 |
| 49 const dropZone = document.querySelector('.dropzone'); |
| 50 dropZone.ondragenter = event => { |
| 51 // Needed to keep the drag-and-drop going. |
| 52 event.preventDefault(); |
| 53 addEventToSequence(event); |
| 54 |
| 55 } |
| 56 dropZone.ondragover = event => { |
| 57 // Needed to keep the drag-and-drop going. |
| 58 event.preventDefault(); |
| 59 addEventToSequence(event); |
| 60 } |
| 61 dropZone.ondrop = event => { |
| 62 // Needed to avoid navigation in Firefox. |
| 63 event.preventDefault(); |
| 64 addEventToSequence(event); |
| 65 } |
| 66 |
| 67 const dragSource = document.querySelector('.dragged'); |
| 68 const dragOverlay = document.querySelector('.overlay'); |
| 69 dragSource.ondragstart = event => { |
| 70 dragOverlay.classList.add('visible'); |
| 71 event.dataTransfer.setData('text/plain', 'Needed to work in Firefox'); |
| 72 addEventToSequence(event); |
| 73 } |
| 74 const dragEndPromise = new Promise((resolve, reject) => { |
| 75 dragSource.ondragend = event => { |
| 76 addEventToSequence(event); |
| 77 resolve(eventSequence); |
| 78 } |
| 79 }); |
| 80 |
| 81 const dragRect = dragSource.getBoundingClientRect(); |
| 82 const dropRect = dropZone.getBoundingClientRect(); |
| 83 const dragX = (dragRect.left + dragRect.right) / 2; |
| 84 const dragY = (dragRect.top + dragRect.bottom) / 2; |
| 85 const dropX = (dropRect.left + dropRect.right) / 2; |
| 86 const dropY = (dropRect.top + dropRect.bottom) / 2; |
| 87 if (window.eventSender) { |
| 88 eventSender.mouseMoveTo(dragX, dragY); |
| 89 eventSender.mouseDown(); |
| 90 setTimeout(() => { |
| 91 eventSender.mouseMoveTo(dropX, dropY); |
| 92 eventSender.mouseUp(); |
| 93 }, 100); |
| 94 } |
| 95 |
| 96 promise_test(() => dragEndPromise.then(eventSequence => { |
| 97 assert_array_equals( |
| 98 eventSequence, ['dragstart', 'dragenter', 'dragover', 'drop', 'dragend']); |
| 99 }), 'Drag anddrop events when the DOM changes in dragstart'); |
| 100 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2606333003:
Don't cancel drag and drop if a dragstart event handler changes the DOM.
