<!DOCTYPE html>
<script src="/js-test-resources/ahem.js"></script>
<!--
Tests the string displayed when a File created using the FileSystem API 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');
inputElement.disabled = true;
var testFile = null;
webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
fs.root.getFile('hello.txt', {create: true, exclusive: false}, function (entry) {
entry.createWriter(function (writer) {
writer.onwriteend = function (event) {
entry.file(function (file) {
testFile = file;
inputElement.disabled = false;
dragSourceToInput();
});
};
writer.write(new Blob(['Hello world!']));
});
});
});
var outputFileList = null;
dragSource.addEventListener('dragstart', function (event) {
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();
}
}
</script>
Codebase Browser
chromium