<!DOCTYPE html>
<html>
<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <script src="resources/shadow-dom.js"></script>
    <script src="resources/event-dispatching.js"></script>
</head>
<body>
    <p id="description"></p>
    <div id="sandbox"></div>
    <pre id="console"></pre>
    <script>
        var sandbox = document.getElementById('sandbox');

        // Makes sure an insertion point can receive a event when a distributed text node is clicked.
        sandbox.appendChild(
            createDOM('div', {'id': 'top'},
                      createDOM('div', {'id': 'shadow-host'},
                                createShadowRoot(
                                    createDOM('content', {'id': 'content'})),
                                document.createTextNode('Text Node'))));
        var shadowRoot = getNodeInShadowTreeStack('shadow-host/').id = 'shadow-root';
        addEventListeners(['top', 'shadow-host', 'shadow-host/', 'shadow-host/content']);
        showSandboxTree();

        // Calculates the position of the text node.
        var host = document.getElementById('shadow-host');
        var x = host.offsetLeft + 5;
        var y = host.offsetTop + defaultPaddingSize + 5;
        debug('\n' + 'Moving mouse from a distributed text node to top');
        eventSender.mouseMoveTo(x, y);
        clearEventRecords();

        moveMouseOver(document.getElementById('top'));
        debugDispatchedEvent('mouseout');
        debugDispatchedEvent('mouseover');

        clearEventRecords();
        scrollMouseWheel(host);
        debugDispatchedEvent('mousewheel');

        clearEventRecords();
        touchLocation(host);
        debugDispatchedEvent('touchstart');
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>