<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<div id="sandbox"></div>
<script>
description('Tests whether we can start dragging a node in shadow trees.');

sandbox.appendChild(
    createDOM('div', {'id': 'host', 'draggable': 'true'},
              createShadowRoot({'id': 'shadow-root'},
                               createDOM('div', {'id': 'shadow-root-child'},
                                         document.createTextNode('Shadow Root Child')),
                               createDOM('slot', {})),
              createDOM('div', {'id': 'host-child'},
                        document.createTextNode('Host Child'))));

var hostChild = document.getElementById('host-child');
var shadowRootChild = host.shadowRoot.getElementById('shadow-root-child');
var dragstartCount = 0;

host.addEventListener('dragstart', function(e) {
    dragstartCount++;
    if (dragstartCount == 2) {
        debug("dragstart event occurred twice.");
        if (window.testRunner) {
            testRunner.notifyDone();
        }
    }
}, false);

function dragAndDrop(element) {
    var rect = element.getBoundingClientRect();
    var x = rect.left + rect.width / 2;
    var y = rect.top + rect.height / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.leapForward(400);
    eventSender.mouseMoveTo(x + 100, y + 100);
    eventSender.mouseUp();
}

if (window.testRunner) {
    testRunner.waitUntilDone();
}

document.body.offsetLeft;

if (window.eventSender) {
    dragAndDrop(hostChild);
    dragAndDrop(shadowRootChild);
}
</script>