| Index: third_party/WebKit/LayoutTests/fast/dnd/dom-change-after-dragstart.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/dnd/dom-change-after-dragstart.html b/third_party/WebKit/LayoutTests/fast/dnd/dom-change-after-dragstart.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..8c9403d78e64280d556cf365a55abb5de68076bf
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/dnd/dom-change-after-dragstart.html
|
| @@ -0,0 +1,100 @@
|
| +<!doctype html>
|
| +<meta charset="utf-8" />
|
| +<script src="../../resources/testharness.js"></script>
|
| +<script src="../../resources/testharnessreport.js"></script>
|
| +<style>
|
| +.box {
|
| + display: block;
|
| + border: 1px solid black;
|
| + width: 100px;
|
| + height: 100px;
|
| + margin: 10px;
|
| + float: left;
|
| +}
|
| +.overlay {
|
| + display: none;
|
| + position: absolute;
|
| + background: hsl(200deg, 100%, 75%);
|
| + z-index: 2;
|
| +}
|
| +.overlay.visible {
|
| + display: block;
|
| +}
|
| +</style>
|
| +
|
| +<p>
|
| + Please drag the "Drag Me" box into the "Drop Here" box.
|
| +</p>
|
| +
|
| +<div class="overlay box">
|
| + Drag Me
|
| +</div>
|
| +<div class="dragged box" draggable="true">
|
| + Drag Me
|
| +</div>
|
| +
|
| +<div class="dropzone box">
|
| + Drop Here
|
| +</div>
|
| +
|
| +<script>
|
| +'use strict';
|
| +
|
| +const eventSequence = [];
|
| +const addEventToSequence = event => {
|
| + if (eventSequence.indexOf(event.type) === -1)
|
| + eventSequence.push(event.type);
|
| +}
|
| +
|
| +const dropZone = document.querySelector('.dropzone');
|
| +dropZone.ondragenter = event => {
|
| + // Needed to keep the drag-and-drop going.
|
| + event.preventDefault();
|
| + addEventToSequence(event);
|
| +
|
| +}
|
| +dropZone.ondragover = event => {
|
| + // Needed to keep the drag-and-drop going.
|
| + event.preventDefault();
|
| + addEventToSequence(event);
|
| +}
|
| +dropZone.ondrop = event => {
|
| + // Needed to avoid navigation in Firefox.
|
| + event.preventDefault();
|
| + addEventToSequence(event);
|
| +}
|
| +
|
| +const dragSource = document.querySelector('.dragged');
|
| +const dragOverlay = document.querySelector('.overlay');
|
| +dragSource.ondragstart = event => {
|
| + dragOverlay.classList.add('visible');
|
| + event.dataTransfer.setData('text/plain', 'Needed to work in Firefox');
|
| + addEventToSequence(event);
|
| +}
|
| +const dragEndPromise = new Promise((resolve, reject) => {
|
| + dragSource.ondragend = event => {
|
| + addEventToSequence(event);
|
| + resolve(eventSequence);
|
| + }
|
| +});
|
| +
|
| +const dragRect = dragSource.getBoundingClientRect();
|
| +const dropRect = dropZone.getBoundingClientRect();
|
| +const dragX = (dragRect.left + dragRect.right) / 2;
|
| +const dragY = (dragRect.top + dragRect.bottom) / 2;
|
| +const dropX = (dropRect.left + dropRect.right) / 2;
|
| +const dropY = (dropRect.top + dropRect.bottom) / 2;
|
| +if (window.eventSender) {
|
| + eventSender.mouseMoveTo(dragX, dragY);
|
| + eventSender.mouseDown();
|
| + setTimeout(() => {
|
| + eventSender.mouseMoveTo(dropX, dropY);
|
| + eventSender.mouseUp();
|
| + }, 100);
|
| +}
|
| +
|
| +promise_test(() => dragEndPromise.then(eventSequence => {
|
| + assert_array_equals(
|
| + eventSequence, ['dragstart', 'dragenter', 'dragover', 'drop', 'dragend']);
|
| +}), 'Drag anddrop events when the DOM changes in dragstart');
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 2606333003:
Don't cancel drag and drop if a dragstart event handler changes the DOM.
