<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../utils.js"></script>
<script>

'use strict';

target_test({ width: "200px", height: "200px" }, (target, test) => {
    // Add a child element covering the same bounds as the target so that it hit tests when tapping.
    target.appendChild(document.createElement("div")).setAttribute("style", "position: absolute; width: 100%; height: 100%;");

    // FIXME: https://bugs.webkit.org/show_bug.cgi?id=197882
    // [Pointer Events] Listening to a "pointerover", "pointerenter", "pointerout" or "pointerleave" event alone does not fire the event on iOS
    target.addEventListener("pointerdown", event => { });

    const entered = new Promise(resolve => {
        target.addEventListener("pointerenter", event => {
            assert_equals(event.target, target, `The ${event.type} event target matches the element on which the event listener was added.`);
            resolve();
        });
    });

    const left = new Promise(resolve => {
        target.addEventListener("pointerleave", event => {
            assert_equals(event.target, target, `The ${event.type} event target matches the element on which the event listener was added.`);
            resolve();
        });
    });

    const tapped = ui.tap({ x: 100, y: 100 });

    Promise.all([entered, left, tapped]).then(() => test.done());
}, `Testing that "pointerenter" and "pointerleave" have the element on which the event listener was added as their target.`);

</script>
</body>
</html>