<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
#drop-container > div {
    height: 256px;
    width: 256px;
    color: gray;
}
#drop-instructions {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
#drop-target {
    border: 1px dashed black;
    margin-top: -256px; /* Paint on top of #drop-instructions. */
}
</style>
<script>
var dropTarget;
var draggingElement;
var event;

var svgHyperlink;
var htmlHyperlink;
var numberOfTestsToRun;

window.jsTestIsAsync = true;

window.onload = function ()
{
    svgHyperlink = document.getElementById("svgHyperlink");
    htmlHyperlink = document.getElementById("htmlHyperlink");

    svgHyperlink.ondragstart = dragStart;
    svgHyperlink.ondragend = dragEnd;
    htmlHyperlink.ondragstart = dragStart;
    htmlHyperlink.ondragend = dragEnd;

    dropTarget = document.getElementById("drop-target");
    dropTarget.ondrop = drop;

    runTests();
}

function dragStart(e)
{
    event = e;
    draggingElement = e.target;
}

function dragEnd(e)
{
    dropTarget.innerHTML = "";
    draggingElement = null;
}

function drop(e)
{
    event = e;
    var expectedHref = draggingElement instanceof SVGElement ? draggingElement.href.baseVal : draggingElement.href;
    shouldBeEqualToString('event.dataTransfer.getData("url")', expectedHref);
    if (window.testRunner && !--numberOfTestsToRun)
        done();
}

function done()
{
    var testContainer = document.getElementById("test-container");
    if (testContainer)
        document.body.removeChild(testContainer);
    debug('<br><span class="pass">TEST COMPLETE</span>');
    finishJSTest();
}

function dragAndDrop(beginX, beginY, endX, endY)
{
    if (!window.eventSender)
        return;
    eventSender.mouseMoveTo(beginX, beginY);
    eventSender.mouseDown();
    eventSender.leapForward(100);
    eventSender.mouseMoveTo(endX, endY);
    eventSender.mouseUp();
}

function runTests()
{
    if (!window.testRunner)
        return;

    var endX = dropTarget.offsetLeft + 10;
    var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;

    numberOfTestsToRun = 2;

    debug("<br>Dragging HTML hyperlink<br>");
    dragAndDrop(htmlHyperlink.offsetLeft, htmlHyperlink.offsetTop + htmlHyperlink.offsetHeight / 2, endX, endY);

    debug("<br>Dragging SVG hyperlink<br>");
    const clientRect = svgHyperlink.ownerSVGElement.getBoundingClientRect();
    dragAndDrop(clientRect.left, clientRect.top + 10, endX, endY);
}
</script>
</head>
<body>
<div id="description"></div>
<div id="test-container">
    <div id="drop-container">
        <div id="drop-instructions">Drop a hyperlink on me.</div>
        <div id="drop-target" contenteditable="true"></div>
    </div>
    <hr>
    <p>Items that can be dragged to the drop target:</p>
    <svg width="200" height="30">
        <a xlink:href="http://www.w3.org/TR/SVG11/" id="svgHyperlink"><text x="0" y="20" style="text-decoration: underline">SVG hyperlink</text></a>
    </svg>
    <a href="http://www.whatwg.org/html" id="htmlHyperlink">HTML hyperlink</a>
    <hr>
</div>
<div id="console"></div>
<script>
description("This test checks that drag-and-drop support works for a hyperlink.");
</script>
</body>
</html>