72 lines
2.3 KiB
HTML
72 lines
2.3 KiB
HTML
<!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>
|