<!DOCTYPE html>
<html>
<head>
<style>
.square {
    -webkit-box-align: center;
    -webkit-user-select: none;
    background-color: blue;
    color: red;
    display: -webkit-box;
    font-weight: bold;
    height: 128px;
    left: 700px;
    position: absolute;
    text-align: center;
    top: 105%; /* Position the element such that we must scroll to it. */
    width: 128px;
}

.square:hover {
    background-color: yellow;
}

</style>
</head>
<body>
<p>This test can be used to verify that we don't temporarily remove the CSS hover style between the touchend and click events when finger-pressing and -releasing on the same element that is positioned outside the visible content area initially. Perform the following:</p>
<ol>
    <li>Scroll the page until the blue square is visible.</li>
    <li>Tap on the blue square.</li>
</ol>
<p>This test PASSED if there are three PASS messages followed by TEST COMPLETE below; otherwise, it FAILED.</p>
<div id="square" class="square">Tap me then scroll up to see results</div>
<pre id="console"></pre>
<script>
function addOrRemoveEventListeners(element, shouldAddListeners)
{
    var functionToCall = shouldAddListeners == undefined || shouldAddListeners ? "addEventListener" : "removeEventListener";
    element[functionToCall]("touchstart", checkHoverState, true);
    element[functionToCall]("touchend", checkHoverState, true);
    element[functionToCall]("click", checkHoverState, true);
}

function log(message)
{
    document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
}

function testElementBackgroundColor(element, eventType, expectedResult)
{
    var actualResult = window.getComputedStyle(square, null).backgroundColor;
    if (actualResult === expectedResult)
        log("PASS, backgroundColor on " +  eventType + " is " + expectedResult + ".");
    else
        log("FAIL, backgroundColor on " + eventType + " should be " + expectedResult + ". Was " + actualResult + ".");
}

function checkHoverState(e)
{
    testElementBackgroundColor(square, e.type, "rgb(255, 255, 0)" /* Yellow */);
    if (e.type === "click") {
        addOrRemoveEventListeners(square, false /* Remove event listeners */);
        log("TEST COMPLETE");
    }
}

var square = document.getElementById("square");
addOrRemoveEventListeners(square);
</script>
</body>
</html>