<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body onload="startTest();">
<p id="description"></p>
<div id="console"></div>
<div id="editable" contentEditable=true style="width:200px; height:200px"></div>
<script>
description('If we drag files onto an editable area, then the filenames should be inserted into the editable area.');

var result;

jsTestIsAsync = true;
function startTest()
{
    var editable = document.getElementById("editable");
    if (window.eventSender) {
        dragFilesOntoEditable([
          './resources/drag-files-to-editable-element-fail', 
          './resources/foo',
          './resources/bar']);
        result = editable.innerHTML.replace(/file.*?LayoutTests/g, "LayoutTests");
        shouldBeEqualToString('result',
          '<div>LayoutTests/editing/pasteboard/resources/drag-files-to-editable-element-fails</div>'+
          '<div>LayoutTests/editing/pasteboard/resources/foo</div>'+
          '<div>LayoutTests/editing/pasteboard/resources/bar</div>');
        editable.innerHTML = '';
        finishJSTest();
    }
}

function moveMouseToCenterOfElement(element)
{
    var centerX = element.offsetLeft + element.offsetWidth / 2;
    var centerY = element.offsetTop + element.offsetHeight / 2;
    eventSender.mouseMoveTo(centerX, centerY);
}

function dragFilesOntoEditable(files)
{
    eventSender.beginDragWithFiles(files);
    moveMouseToCenterOfElement(editable);
    eventSender.mouseUp();
}

var successfullyParsed = true;
</script>
</body>
</html>