| <!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> |
