<!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');

        sandbox.appendChild(
            createDOM('div', {'id': 'top'},
                      createDOM('div', {'id': 'shadow-host'},
                                createShadowRoot(
                                    createDOM('content', {'id': 'content', 'select': '#distributed-light-child',}),
                                    createDOM('div', {'id': 'shadow-root-child'})),
                                createDOM('div', {'id': 'distributed-light-child'}),
                                createDOM('div', {'id': 'non-distributed-light-child'}))));

        addEventListeners(['top', 'shadow-host', 'shadow-host/', 'shadow-host/content', 'shadow-host/shadow-root-child',
                           'distributed-light-child', 'non-distributed-light-child']);
        getNodeInShadowTreeStack('shadow-host/').id = 'shadow-root';
        showSandboxTree();

        moveMouse('shadow-host', 'shadow-host/shadow-root-child');
        moveMouse('shadow-host/shadow-root-child', 'shadow-host');

        moveMouse('shadow-host', 'distributed-light-child');
        moveMouse('distributed-light-child', 'shadow-host');

        moveMouse('shadow-host/shadow-root-child', 'distributed-light-child');
        moveMouse('distributed-light-child', 'shadow-host/shadow-root-child');
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>