drag-drop-image-filename.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function imageError()
{
    console.log("FAIL: test image failed to load.");
    if (window.testRunner)
        testRunner.notifyDone();
}

function imageLoaded()
{
    console.log("Test image loaded.");
    if (!window.testRunner)
        return;

    e = document.getElementById("source");
    x = e.offsetLeft + e.offsetWidth / 2;
    y = e.offsetTop + e.offsetHeight / 2;

    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();

    e = document.getElementById("target");
    x = e.offsetLeft + e.offsetWidth / 2;
    y = e.offsetTop + e.offsetHeight / 2;

    eventSender.leapForward(100);
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp();
}

function dragEnterOrOver(event)
{
    event.dataTransfer.dropEffect = "copy";
    event.preventDefault();
}

function drop(event)
{
    console.log("Drop event fired.");
    event.preventDefault();
    if (!window.testRunner)
        return;
    eventSender.dumpFilenameBeingDragged();
    testRunner.notifyDone();
}
</script>
<style>
#target { height: 100px; width: 100px; border: 2px solid green; }
</style>
</head>

<body>
<!-- This test requires Content Shell. The drag-dropped image filename extension should be .gif -->
<div id="target" ondragenter="dragEnterOrOver(event)" ondragover="dragEnterOrOver(event)" ondrop="drop(event)"></div>
<img id="source" onerror="imageError(this)" onload="imageLoaded(this)" alt="Will it blend?"
  src="http://127.0.0.1:8000/resources/load-and-stall.php?name=drag-drop-test-image.gif&mimeType=application%2Fphp">
</body>
</html>
chromium/third_party/blink/web_tests/http/tests/images/drag-drop-image-filename.html
