[iOS] Add tests to ensure CSS :active and :hover are applied when processing touch...
[WebKit-https.git] / ManualTests / ios / touchstart-touchend-on-same-element-should-not-clear-hover.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .square {
6     -webkit-box-align: center;
7     -webkit-user-select: none;
8     background-color: blue;
9     color: red;
10     display: -webkit-box;
11     font-weight: bold;
12     height: 128px;
13     left: 700px;
14     position: absolute;
15     text-align: center;
16     top: 105%; /* Position the element such that we must scroll to it. */
17     width: 128px;
18 }
19
20 .square:hover {
21     background-color: yellow;
22 }
23
24 </style>
25 </head>
26 <body>
27 <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>
28 <ol>
29     <li>Scroll the page until the blue square is visible.</li>
30     <li>Tap on the blue square.</li>
31 </ol>
32 <p>This test PASSED if there are three PASS messages followed by TEST COMPLETE below; otherwise, it FAILED.</p>
33 <div id="square" class="square">Tap me then scroll up to see results</div>
34 <pre id="console"></pre>
35 <script>
36 function addOrRemoveEventListeners(element, shouldAddListeners)
37 {
38     var functionToCall = shouldAddListeners == undefined || shouldAddListeners ? "addEventListener" : "removeEventListener";
39     element[functionToCall]("touchstart", checkHoverState, true);
40     element[functionToCall]("touchend", checkHoverState, true);
41     element[functionToCall]("click", checkHoverState, true);
42 }
43
44 function log(message)
45 {
46     document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
47 }
48
49 function testElementBackgroundColor(element, eventType, expectedResult)
50 {
51     var actualResult = window.getComputedStyle(square, null).backgroundColor;
52     if (actualResult === expectedResult)
53         log("PASS, backgroundColor on " +  eventType + " is " + expectedResult + ".");
54     else
55         log("FAIL, backgroundColor on " + eventType + " should be " + expectedResult + ". Was " + actualResult + ".");
56 }
57
58 function checkHoverState(e)
59 {
60     testElementBackgroundColor(square, e.type, "rgb(255, 255, 0)" /* Yellow */);
61     if (e.type === "click") {
62         addOrRemoveEventListeners(square, false /* Remove event listeners */);
63         log("TEST COMPLETE");
64     }
65 }
66
67 var square = document.getElementById("square");
68 addOrRemoveEventListeners(square);
69 </script>
70 </body>
71 </html>