<!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': 'A'},
                                createShadowRoot(
                                    createDOM('div', {'id': 'B'},
                                              createDOM('div', {'id': 'C'}))),
                                createShadowRoot(
                                    createDOM('div', {'id': 'D'})),
                                createDOM('div', {'id': 'non-distributed-node'}))));

        addEventListeners(['top', 'A', 'A/', 'A/B', 'A/C', 'A//', 'A//D', 'non-distributed-node']);
        getNodeInShadowTreeStack('A/').id = 'orphaned-shadow-root';
        getNodeInShadowTreeStack('A//').id = 'youngest-shadow-root';
        parent.offsetLeft;
        showSandboxTree();

        clearEventRecords();
        debug('\nClick C');
        getNodeInShadowTreeStack('A/C').click();
        debugDispatchedEvent('click');

        clearEventRecords();
        debug('\nClick non-distributed-node');
        document.getElementById('non-distributed-node').click();
        debugDispatchedEvent('click');
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>