<!DOCTYPE html>

<html>

<head>
    <title>Cobalt pointer event test on cropped element</title>
    <script src='black_box_js_test_utils.js'></script>
    <script src='pointer_event_test_utils.js'></script>
    <style>
        #upper_element {
            position: absolute;
            background-color: blue;
            height: 10rem;
            width: 200px;
            top: 250px;
        }

        #lower_element {
            position: absolute;
            background-color: red;
            height: 10rem;
            width: 200px;
            top: 280px;
        }
    </style>
</head>

<body>
    <div class="list">
        <div id="upper_element" class="upper_element"></div>
        <div id="lower_element" class="lower_element"></div>
    </div>
    <div id="end" class="end">End</div>
    <script>
        const expected_events = [
            // actions.move_to_element(lower_element).pause(_SLEEP_AFTER_MOVE_TIME)
            { name: 'pointermove', id: 'lower_element', phase: Event.AT_TARGET },
            // actions.click()
            { name: 'pointerdown', id: 'lower_element', phase: Event.AT_TARGET },
            { name: 'pointerup', id: 'lower_element', phase: Event.AT_TARGET },
            // actions.move_to_element_with_offset(upper_element, 5, 5).pause(_SLEEP_AFTER_MOVE_TIME)
            { name: 'pointermove', id: 'upper_element', phase: Event.AT_TARGET },
            // actions.click()
            { name: 'pointerdown', id: 'upper_element', phase: Event.AT_TARGET },
            { name: 'pointerup', id: 'upper_element', phase: Event.AT_TARGET },
            // actions.move_to_element(upper_element).pause(_SLEEP_AFTER_MOVE_TIME)
            // No pointer event on cropper element.
            { name: 'pointermove', id: 'lower_element', phase: Event.AT_TARGET },
            // actions.click()
            { name: 'pointerdown', id: 'lower_element', phase: Event.AT_TARGET },
            { name: 'pointerup', id: 'lower_element', phase: Event.AT_TARGET },
        ];

        function endTest(e) {
            assertTrue(failure_count === 0);
            onEndTest();
        }

        function setAllHandlers(prefix, selector, callback) {
            setHandlers(prefix + 'down', selector, callback);
            setHandlers(prefix + 'up', selector, callback);
            setHandlers(prefix + 'move', selector, callback);
            setHandlers(prefix + 'cancel', selector, callback);
        }

        window.onload = () => {
            setAllHandlers('pointer', '#upper_element', logEvent);
            setAllHandlers('pointer', '#lower_element', logEvent);
            setHandlers('click', '#end', endTest);
            setupFinished();
        }
    </script>
</body>


</html>