<!DOCTYPE html>
<html>
<head>
    <script src="../../../resources/js-test.js"></script>
    <script src="../../../resources/gesture-util.js"></script>
    <script src="resources/shadow-dom.js"></script>
    <script src="resources/event-dispatching.js"></script>
</head>
<body onload="runTest();">
    <p id="description"></p>
    <div id="sandbox"></div>
    <pre id="console"></pre>
    <script>
        jsTestIsAsync = true;

        async function runTest() {
            var sandbox = document.getElementById('sandbox');

            sandbox.appendChild(
                createDOM('div', {'id': 'top'},
                          createDOM('div', {'id': 'shadow-host'},
                                    attachShadow({mode: 'open', 'id': 'shadow-root'}))));
            var shadowRoot = getNodeInComposedTree('shadow-host/');
            shadowRoot.innerHTML = 'Text Nodes';
            addEventListeners(['top', 'shadow-host', 'shadow-host/']);
            showSandboxTree();

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

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

            touchLocation(host);
            debugDispatchedEvent('touchstart');

            var host_center = elementCenter(host);
            await wheelTick(0, 1, host_center);
            debugDispatchedEvent('mousewheel');
            finishJSTest();
        }
    </script>
</body>
</html>