<!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': 'host'},
                                createShadowRoot(
                                    createDOM('div', {'id': 'div1'}),
                                    createDOM('div', {'id': 'div2'})))));

        addEventListeners(['top', 'host', 'host/', 'host/div1', 'host/div2']);
        getNodeInShadowTreeStack('host/').id = 'shadow-root';
        showSandboxTree();

        var div1 = getNodeInShadowTreeStack('host/div1');
        var div2 = getNodeInShadowTreeStack('host/div2');

        clearEventRecords();
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("mouseover", true, false, window,
                             0, 10, 10, 10, 10, false, false, false, false, 0, div1);
        div2.dispatchEvent(event);

        debugDispatchedEvent('mouseout');
        debugDispatchedEvent('mouseover');
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>