<!DOCTYPE html>
<html>
<head>
<title>InputEvent: beforeinput for Drag and Drop</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="editable1" contenteditable><b id="boldtext">EditableText</b></div>
<div id="editable2" contenteditable></div>
<textarea id="textarea1">Text</textarea>
<textarea id="barrier"></textarea>
<input id="input_drag">
<input id="input_drop">
<script>
function simulateDragDrop(dragElement, dropElement, start, end) {
if (dragElement.select) {
if (start === undefined || end === undefined) {
dragElement.select();
} else {
dragElement.focus();
dragElement.setSelectionRange(start, end);
}
} else {
var selection = window.getSelection();
selection.collapse(dragElement, 0);
selection.extend(dragElement, 1);
}
eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
dragElement.offsetTop + dragElement.offsetHeight / 2);
eventSender.mouseDown();
eventSender.leapForward(600);
eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
dropElement.offsetTop + dropElement.offsetHeight / 2);
eventSender.mouseUp();
}
function assertCleanInitialDOM(logInfo) {
const editable1 = document.getElementById('editable1');
const editable2 = document.getElementById('editable2');
const textarea1 = document.getElementById('textarea1');
assert_equals(editable1.children.length, 1, `${logInfo}, DOM is dirty`);
assert_equals(editable1.children[0].innerHTML, 'EditableText', `${logInfo}, DOM is dirty`);
assert_equals(editable2.children.length, 0, `${logInfo}, DOM is dirty`);
assert_equals(textarea1.value, 'Text', `${logInfo}, DOM is dirty`);
}
test(function() {
assertCleanInitialDOM();
assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');
assert_not_equals(window.testRunner, undefined, 'This test requires testRunner.');
const editable1 = document.getElementById('editable1');
const editable2 = document.getElementById('editable2');
const textarea1 = document.getElementById('textarea1');
function preventDeleteByDragListener(event) {
if (event.inputType == 'deleteByDrag')
event.preventDefault();
}
function preventInsertFromDropListener(event) {
if (event.inputType == 'insertFromDrop')
event.preventDefault();
}
const undoBarrier = document.getElementById('barrier');
undoBarrier.focus();
document.execCommand('insertText', false, 'abc');
function assertBarrierUnchanged(log) {
assert_equals(undoBarrier.value, 'abc', log);
}
// Normally Drag&Drop requires a single Undo.
simulateDragDrop(editable1, editable2);
assert_equals(editable1.children.length, 0, `Normal Drag&Drop should remove data from editable1.`);
assert_equals(editable2.children.length, 1, `Normal Drag&Drop should insert data into editable2.`);
testRunner.execCommand('undo');
assertCleanInitialDOM('Normal Drag&Drop');
assertBarrierUnchanged('step 1');
// Canceling |DeleteByDrag|, still require a single Undo.
editable1.addEventListener('beforeinput', preventDeleteByDragListener);
simulateDragDrop(editable1, editable2);
testRunner.execCommand('undo');
assertCleanInitialDOM('Canceling |DeleteByDrag|');
editable1.removeEventListener('beforeinput', preventDeleteByDragListener);
assertBarrierUnchanged('step 2');
// Canceling |InsertFromDrop|, still require a single Undo.
editable2.addEventListener('beforeinput', preventInsertFromDropListener);
simulateDragDrop(editable1, editable2);
testRunner.execCommand('undo');
assertCleanInitialDOM('Canceling |InsertFromDrop|');
editable2.removeEventListener('beforeinput', preventInsertFromDropListener);
assertBarrierUnchanged('step 3');
// Canceling both, shouldn't create undo entry.
editable1.addEventListener('beforeinput', preventDeleteByDragListener);
editable2.addEventListener('beforeinput', preventInsertFromDropListener);
simulateDragDrop(editable1, editable2);
assertCleanInitialDOM('Canceling both');
testRunner.execCommand('undo');
assert_equals(undoBarrier.value, '');
testRunner.execCommand('redo');
assertBarrierUnchanged('step 4');
editable1.removeEventListener('beforeinput', preventDeleteByDragListener);
editable2.removeEventListener('beforeinput', preventInsertFromDropListener);
// Two Drag&Drop, cancel first |InsertFromDrop| and second |DeleteByDrag|, should still create 2 undo entries.
editable2.addEventListener('beforeinput', preventInsertFromDropListener);
simulateDragDrop(editable1, editable2);
editable2.removeEventListener('beforeinput', preventInsertFromDropListener);
textarea1.addEventListener('beforeinput', preventDeleteByDragListener);
textarea1.select();
simulateDragDrop(textarea1, editable2);
textarea1.removeEventListener('beforeinput', preventDeleteByDragListener);
assert_equals(editable1.children.length, 0);
assert_equals(editable2.innerHTML, 'Text');
assert_equals(textarea1.value, 'Text');
// First undo.
testRunner.execCommand('undo');
assert_equals(editable1.children.length, 0);
assert_equals(editable2.innerHTML, '');
assert_equals(textarea1.value, 'Text');
// Second undo.
testRunner.execCommand('undo');
assert_equals(editable1.children.length, 1);
assert_equals(editable2.innerHTML, '');
assert_equals(textarea1.value, 'Text');
// More undo should reach to |undoBarrier|.
assertBarrierUnchanged('step 5');
testRunner.execCommand('undo');
assert_equals(undoBarrier.value, '');
testRunner.execCommand('redo');
}, 'Testing Drag and Drop, preventDefault() and Undo entry');
test(function() {
assertCleanInitialDOM();
assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');
assert_not_equals(window.testRunner, undefined, 'This test requires testRunner.');
const editable1 = document.getElementById('editable1');
const editable2 = document.getElementById('editable2');
var eventOrderRecorder = [];
document.addEventListener('beforeinput', event =>
eventOrderRecorder.push(`beforeinput:${event.target.id}:${event.inputType}`));
document.addEventListener('input', event =>
eventOrderRecorder.push(`input:${event.target.id}:${event.inputType}`));
['drop', 'dragend'].forEach(eventType => document.addEventListener(
eventType, () => eventOrderRecorder.push(`${event.target.id}:${eventType}`)));
function testDragDropEventOrder(dragElement, dropElement, expectedOrder) {
assert_equals(dragElement.children.length, 1);
eventOrderRecorder = [];
simulateDragDrop(dragElement, dropElement);
assert_array_equals(eventOrderRecorder, expectedOrder,
`Testing drag ${dragElement.id} onto ${dropElement.id} actual order: ${eventOrderRecorder}`);
}
// Test Drag and Drop.
testDragDropEventOrder(editable1, editable2,
['editable2:drop', 'beforeinput:boldtext:deleteByDrag', 'input:editable1:deleteByDrag',
'beforeinput:editable2:insertFromDrop', 'input:editable2:insertFromDrop', 'editable1:dragend']);
testRunner.execCommand('undo');
}, 'Testing Drag and Drop event order');
test(function() {
assertCleanInitialDOM();
assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');
assert_not_equals(window.testRunner, undefined, 'This test requires testRunner.');
const editable1 = document.getElementById('editable1');
const editable2 = document.getElementById('editable2');
var lastPlainTextData = {};
var lastHTMLData = {};
document.addEventListener('beforeinput', event => {
lastPlainTextData[event.inputType] = event.dataTransfer ? event.dataTransfer.getData('text/plain') : null;
lastHTMLData[event.inputType] = event.dataTransfer ? event.dataTransfer.getData('text/html') : null;
});
function testDragDropDataTransfer(inputType, dragElement, dropElement, expectedPlainText, expectedHTML) {
assert_equals(dragElement.children.length, 1);
lastPlainTextData = {};
lastHTMLData = {};
simulateDragDrop(dragElement, dropElement);
assert_equals(lastPlainTextData[inputType], expectedPlainText,
`Testing '${inputType}' getData('text/plain')`);
if (expectedHTML && expectedHTML.test) {
assert_regexp_match(lastHTMLData[inputType], expectedHTML,
`Testing '${inputType}' getData('text/html')`);
} else {
assert_equals(lastHTMLData[inputType], expectedHTML,
`Testing '${inputType}' getData('text/html')`);
}
}
// Test Drag and Drop.
testDragDropDataTransfer('deleteByDrag', editable1, editable2, null, null);
testRunner.execCommand('undo');
testDragDropDataTransfer('insertFromDrop', editable1, editable2, 'EditableText', /^.*EditableText<\/b>$/);
testRunner.execCommand('undo');
}, 'Testing Drag and Drop dataTransfer');
test(function() {
assertCleanInitialDOM();
assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');
assert_not_equals(window.testRunner, undefined, 'This test requires testRunner.');
const editable1 = document.getElementById('editable1');
const editable2 = document.getElementById('editable2');
var inputTypesToPrevent = [];
document.addEventListener('beforeinput', event => {
if (inputTypesToPrevent.indexOf(event.inputType) != -1)
event.preventDefault();
});
function testDragDropPreventDefault(preventDefaultTypes, dragElement, dropElement, expectedDragElementChildren, expectedDropElementChildren) {
assert_equals(dragElement.children.length, 1);
inputTypesToPrevent = preventDefaultTypes;
simulateDragDrop(dragElement, dropElement);
assert_equals(dragElement.children.length, expectedDragElementChildren,
'Testing preventDefault() on ${preventDefaultTypes} ${dragElement.id} children count');
assert_equals(dropElement.children.length, expectedDropElementChildren,
'Testing preventDefault() on ${preventDefaultTypes} ${dropElement.id} children count');
inputTypesToPrevent = [];
}
// Preventing single 'beforeinput' will only cancel DOM update for one event,
// the remaining DOM update will still update undo stack.
testDragDropPreventDefault(['deleteByDrag'], editable1, editable2, 1, 1);
testRunner.execCommand('undo');
testDragDropPreventDefault(['insertFromDrop'], editable1, editable2, 0, 0);
testRunner.execCommand('undo');
// Adding 'insertHTML' command to undo stack.
editable2.focus();
document.execCommand('insertHTML', false, '<b>B</b><i>i</i>');
assert_equals(editable2.children.length, 2,
'"editable2" should have 2 children after "insertHTML" command');
// Canceling both |deleteByDrag| and |insertFromDrop| won't modify undo stack.
testDragDropPreventDefault(['deleteByDrag', 'insertFromDrop'], editable1, editable2, 1, 2);
// |undo| will undo last 'insertHTML' command.
testRunner.execCommand('undo');
assert_equals(editable2.children.length, 0,
'"editable2" should have 0 children after undo "insertHTML"');
}, 'Testing Drag and Drop preventDefault()');
test(function() {
assertCleanInitialDOM();
assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');
assert_not_equals(window.testRunner, undefined, 'This test requires testRunner.');
const editable1 = document.getElementById('editable1');
const editable2 = document.getElementById('editable2');
var eventOrderRecorder = [];
[editable1, editable2].forEach(editable => {
editable.addEventListener('beforeinput', event =>
eventOrderRecorder.push(`beforeinput:${editable.id}:${event.inputType}`));
editable.addEventListener('input', event =>
eventOrderRecorder.push(`input:${editable.id}:${event.inputType}`));
editable.addEventListener('drop', event =>
eventOrderRecorder.push(`${editable.id}:drop`));
editable.addEventListener('dragend', event =>
eventOrderRecorder.push(`${editable.id}:dragend`));
});
function testDragDropEventOrder(dragElement, dropElement, expectedOrder) {
assert_equals(dragElement.children.length, 1);
eventOrderRecorder = [];
simulateDragDrop(dragElement, dropElement);
assert_array_equals(eventOrderRecorder, expectedOrder,
`Testing drag ${dragElement.id} onto ${dropElement.id} actual order: ${eventOrderRecorder}`);
}
function removeEditable1Listener() {
editable1.remove();
}
function removeEditable2Listener() {
editable2.remove();
}
// Testing remove drop target, |editable2| won't get 'beforeinput' as it's disconnected.
editable1.addEventListener('beforeinput', removeEditable2Listener);
testDragDropEventOrder(editable1, editable2,
['editable2:drop', 'beforeinput:editable1:deleteByDrag', 'input:editable1:deleteByDrag', 'editable1:dragend']);
editable1.removeEventListener('beforeinput', removeEditable2Listener);
testRunner.execCommand('undo');
document.body.appendChild(editable2);
// Testing remove drag target, |editable1| won't receive DOM updates after disconnected.
editable1.addEventListener('beforeinput', removeEditable1Listener);
testDragDropEventOrder(editable1, editable2,
['editable2:drop', 'beforeinput:editable1:deleteByDrag', 'beforeinput:editable2:insertFromDrop',
'input:editable2:insertFromDrop', 'editable1:dragend']);
editable1.removeEventListener('beforeinput', removeEditable1Listener);
testRunner.execCommand('undo');
document.body.appendChild(editable1);
}, 'Testing element removed by event handler');
test(() => {
assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');
assert_not_equals(window.testRunner, undefined, 'This test requires testRunner.');
const input_drag = document.getElementById('input_drag');
const input_drop = document.getElementById('input_drop');
input_drag.value = '12345678';
input_drop.value = '4';
simulateDragDrop(input_drag, input_drop, 1, 8);
assert_equals(input_drag.value, '1');
assert_equals(input_drop.value, '42345678');
testRunner.execCommand('undo');
assert_equals(input_drag.value, '12345678');
assert_equals(input_drop.value, '4');
}, 'Undo drag&drop should update input.value');
</script>
</body>
</html>
Codebase Browser
chromium