<!DOCTYPE html>
<html>
<head>
<script src="resources/polyfill.js"></script>
<script src="../resources/event-sender-util.js"></script>
<script src="../../../resources/js-test-pre.js"></script>
<script>
function createBox(name) {
    var div = document.createElement('div');
    div.style.width = '100px';
    div.style.height = '100px';

    div.addEventListener('dragover', function(e) {
        e.preventDefault();
    });
    div.addEventListener('drop', function(e) {
        debug('PASS: drop event is fired.');
    });

    return div;
}

function runTest() {
    var shadowRoot = host.webkitCreateShadowRoot();
    var shadowDiv = createBox('shadow');
    shadowRoot.appendChild(shadowDiv);

    eventSender.beginDragWithFiles(["../resources/apple.gif"]);
    mouseMoveToElem(shadowDiv);
    eventSender.mouseUp();
}
</script>
</head>
<body onload="runTest()">

<div id="host"></div>
<pre id="console"></pre>
</body>
</html>