<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<head>
<script src="../../../../resources/js-test.js"></script>
<script src="../../../../resources/ui-helper.js"></script>
<script>
jsTestIsAsync = true;

async function waitForTapHighlightRectToChange(fromRect)
{
    let rect;
    do {
        rect = await UIHelper.tapHighlightViewRect();
    } while (rect.top == fromRect.top && rect.left == fromRect.left && rect.width == fromRect.width && rect.height == fromRect.height);
    return rect;
}

addEventListener("load", async () => {
    const target1 = document.getElementById("target1");
    const target2 = document.getElementById("target2");
    const target3 = document.getElementById("target3");

    target1.addEventListener("touchend", event => {
        event.preventDefault();
    });
    target2.addEventListener("touchend", event => { });

    description("This test verifies that tap highlights are shown when tapping on clickable elements. To run the test manually, tap on the three target buttons; a tap highlight should *not* appear over the first target, but should appear over targets 2 and 3.")

    if (!window.testRunner)
        return;

    // Since the touch event was prevented, no tap highlight rect should be shown.
    initialTapHighlightRect = await UIHelper.tapHighlightViewRect();
    await UIHelper.activateElement(target1);
    await UIHelper.waitForDoubleTapDelay();
    lastKnownHighlightRect = await UIHelper.tapHighlightViewRect();
    shouldBe("initialTapHighlightRect.left", "lastKnownHighlightRect.left");
    shouldBe("initialTapHighlightRect.top", "lastKnownHighlightRect.top");
    shouldBe("initialTapHighlightRect.width", "lastKnownHighlightRect.width");
    shouldBe("initialTapHighlightRect.height", "lastKnownHighlightRect.height");

    await UIHelper.activateElement(target2);
    await UIHelper.waitForDoubleTapDelay();
    lastKnownHighlightRect = await waitForTapHighlightRectToChange(lastKnownHighlightRect);
    testPassed("Tap highlight shown after tapping on target 2.");

    await UIHelper.activateElement(target3);
    await UIHelper.waitForDoubleTapDelay();
    lastKnownHighlightRect = await waitForTapHighlightRectToChange(lastKnownHighlightRect);
    testPassed("Tap highlight shown after tapping on target 3.");

    finishJSTest();
});
</script>
<style>
#target1 {
    background-color: orange;
}

#target2 {
    background-color: purple;
}

#target3 {
    background-color: tomato;
}

.target {
    width: 150px;
    height: 50px;
    margin: 3em;
    display: block;
}
</style>
</head>
<body>
<button id="target1" class="target">Target 1</button>
<button id="target2" class="target">Target 2</button>
<button id="target3" class="target">Target 3</button>
<div id="console"></div>
</body>
</html>