<!DOCTYPE html>
<!--
Tests the string displayed when a File created using the File constructor is
used in the FileList of a <input type="file"> element. To run this test
manually, drag the black box over the input field.
Expectation: the file name displayed by the <input> UI should be hello.txt. The
renderer should not crash after the name shows up.
-->
<style>
html {
font: 10px Ahem;
-webkit-font-smoothing: none;
}
#dragSource {
border: 1px solid black;
width: 100px;
height: 100px;
color: black;
margin-bottom: 50px;
}
#inputElement {
width: 100px;
height: 100px;
}
</style>
<div id="dragSource" draggable="true"
title="Drag this box onto the file input below">
</div>
<form action="#">
<p>
<input id="fileInput" type="file" />
</p>
</form>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
// FIXME: dragging will become unnecessary if/when we implement a FileList constructor
var dragSource = document.getElementById('dragSource');
var inputElement = document.getElementById('fileInput');
var outputFileList = null;
dragSource.addEventListener('dragstart', function (event) {
var testFile = new File(['Hello world!'], 'hello.txt');
console.log(event.dataTransfer);
event.dataTransfer.effectAllowed = 'copy';
event.dataTransfer.items.add(testFile);
outputFileList = event.dataTransfer.files;
});
inputElement.addEventListener('dragenter', function (event) {
event.preventDefault();
});
inputElement.addEventListener('dragover', function (event) {
event.preventDefault();
});
inputElement.addEventListener('drop', function (event) {
event.target.files = outputFileList;
if (window.testRunner)
testRunner.notifyDone();
});
function dragSourceToInput() {
var startX = dragSource.offsetLeft + dragSource.offsetWidth / 2;
var startY = dragSource.offsetTop + dragSource.offsetHeight / 2;
var targetX = inputElement.offsetLeft + inputElement.offsetWidth / 2;
var targetY = inputElement.offsetTop + inputElement.offsetHeight / 2;
if (window.eventSender) {
eventSender.dragMode = true;
eventSender.mouseMoveTo(startX, startY);
eventSender.mouseDown();
eventSender.leapForward(250);
eventSender.mouseMoveTo(targetX, targetY);
eventSender.mouseUp();
}
}
dragSourceToInput();
</script>