<!DOCTYPE html>
<meta charset=utf-8>
<title>input type=file and change events</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<input type=file multiple>
<script>
async_test(t => {
const input = document.querySelector('input');
input.addEventListener('change', t.step_func_done(e => {
assert_equals(
input.files.length, 2,
'event should only be seen for drop, not for assignment');
}));
// Manually assign a FileList instance, with 3 files.
// This should not produce an event.
const dt = new DataTransfer();
dt.items.add(new File([], 'file1.txt'));
dt.items.add(new File([], 'file2.txt'));
dt.items.add(new File([], 'file3.txt'));
input.files = dt.files;
// Now simulate a drag, with 2 files.
// This should produce an event.
eventSender.beginDragWithFiles(['fileA.txt', 'fileB.txt']);
const rect = input.getBoundingClientRect();
eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
eventSender.mouseUp();
}, 'expected change events');
</script>