<style>
    .box { width: 100px; height: 90px; margin-bottom: 10px; background-color: lightblue; }
    .drag-element { -webkit-user-drag: element; }
    .drag-none { -webkit-user-drag: none; }
    a { display: block; width: 80px; height: 80px; background-color: yellow; font-family: ahem; font-size: 25px; }
    a span { color: orange; }
    a img { vertical-align: bottom; }
</style>
<div id="container" style="position: relative;">
    <div class="box" expect="IMG nil">
        <img src="resources/greenbox.png">
    </div>

    <div class="box" expect="nil nil">
        <img class="drag-none" src="resources/greenbox.png">
    </div>

    <div class="box drag-element" expect="DIV DIV">
        <img class="drag-none" src="resources/greenbox.png">
    </div>

    <div class="box" expect="IMG A A A nil">
        <a href="#"><img src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box" expect="IMG A A A nil">
        <a href="#" class="drag-element"><img src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box" expect="IMG nil nil nil nil">
        <a href="#" class="drag-none"><img src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box" expect="A A A A nil">
        <a href="#"><img class="drag-none" src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box" expect="A A A A nil">
        <a href="#" class="drag-element"><img class="drag-none" src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box drag-element" expect="IMG DIV DIV DIV DIV">
        <a href="#" class="drag-none"><img src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box drag-element" expect="A A A A DIV">
        <a href="#"><img class="drag-none" src="resources/greenbox.png">x<br><span>y</span></a>
    </div>

    <div class="box drag-element" expect="A A A A DIV">
        <a href="#" class="drag-element"><img class="drag-none" src="resources/greenbox.png">x<br><span>y</span></a>
    </div>
</div>
<pre id="console"></pre>
<script>
    function log(message)
    {
        document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
    }

    onload = window.testRunner ? function()
    {
        testRunner.dumpAsText();

        var container = document.getElementById("container");
        var y = container.getBoundingClientRect().top;
        for (var i = 0; i < container.childElementCount; ++i) {
            var listener = function(event)
            {
                result = event.target.nodeType === Node.TEXT_NODE ? "text" : event.target.tagName;
            };

            container.addEventListener("dragstart", listener);

            var child = container.children[i];
            log("Test #" + i);

            var expectedResults = child.getAttribute("expect").split(" ");
            var result;

            function test(h, v)
            {
                if (expectedResults.length) {
                    getSelection().empty();
                    result = "nil";
                    eventSender.mouseMoveTo(h, y - scrollY + v);
                    eventSender.mouseDown();
                    eventSender.mouseMoveTo(220, y - scrollY + v);
                    eventSender.mouseUp();
                    var expected = expectedResults.shift();
                    log(result === expected ? "PASS" : "FAIL: expected " + expected + " but got " + result);
                }
            }

            test(20, 20);
            test(45, 20);
            test(20, 45);
            test(45, 45);
            test(95, 85);

            container.removeEventListener("dragstart", listener);
            y += 100;
            scrollBy(0, 100);
        }
    } : undefined;
</script>