| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <script src="../../../../resources/js-test.js"></script> | 3 <script src="../../../../resources/js-test.js"></script> |
| 4 <link rel="stylesheet" href="../resources/touch-hover-active-tests.css"> |
| 4 <style type="text/css"> | 5 <style type="text/css"> |
| 5 #box { | 6 #box { |
| 6 background-color: blue; | |
| 7 width: 300px; | 7 width: 300px; |
| 8 height: 100px; | 8 height: 100px; |
| 9 } | 9 } |
| 10 | |
| 11 #box:active { | |
| 12 background-color: red; | |
| 13 } | |
| 14 | |
| 15 </style> | 10 </style> |
| 16 <body> | 11 <body> |
| 17 <div id="box">Gestures go here</div> | 12 <div id="box" class="touch-interactive">Gestures go here</div> |
| 18 | 13 |
| 19 <p id="description"></p> | 14 <p id="description"></p> |
| 20 <p>See https://bugs.webkit.org/show_bug.cgi?id=96060 for details</p> | 15 <p>See https://bugs.webkit.org/show_bug.cgi?id=96060 for details</p> |
| 21 | 16 |
| 22 <div id="console"></div> | 17 <div id="console"></div> |
| 23 | 18 |
| 19 <script src="../resources/touch-hover-active-tests.js"></script> |
| 24 <script> | 20 <script> |
| 25 var color; | 21 var box = document.getElementById("box"); |
| 26 function isBoxActive() | |
| 27 { | |
| 28 // These need to match the background-color used above, after round-tripping
. | |
| 29 var defaultColor = "rgb(0, 0, 255)"; | |
| 30 var activeColor = "rgb(255, 0, 0)"; | |
| 31 | |
| 32 var b = document.getElementById('box'); | |
| 33 color = window.getComputedStyle(b).backgroundColor; | |
| 34 if (color == activeColor) | |
| 35 return true; | |
| 36 if (color != defaultColor) | |
| 37 testFailed('Got unexpected backgroundColor: ' + color); | |
| 38 return false; | |
| 39 } | |
| 40 | |
| 41 description("Tests that tap gesture events set and clear the active state of ele
ments."); | 22 description("Tests that tap gesture events set and clear the active state of ele
ments."); |
| 42 | 23 |
| 43 function runTests() | 24 function runTests() |
| 44 { | 25 { |
| 45 if (!window.eventSender) { | 26 if (!window.eventSender) { |
| 46 debug('This test requires DRT.'); | 27 debug('This test requires DRT.'); |
| 47 return; | 28 return; |
| 48 } | 29 } |
| 49 | 30 |
| 50 if (!eventSender.gestureShowPress) { | 31 if (!eventSender.gestureShowPress) { |
| 51 debug('GestureShowPress is not supported by this platform'); | 32 debug('GestureShowPress is not supported by this platform'); |
| 52 return; | 33 return; |
| 53 } | 34 } |
| 54 | 35 |
| 55 if (window.testRunner) { | 36 if (window.testRunner) { |
| 56 window.jsTestIsAsync = true; | 37 window.jsTestIsAsync = true; |
| 57 testRunner.waitUntilDone(); | 38 testRunner.waitUntilDone(); |
| 58 } | 39 } |
| 59 | 40 |
| 60 debug("Verify active isn't initially set"); | 41 debug("Verify active isn't initially set"); |
| 61 shouldBeFalse("isBoxActive()"); | 42 shouldBeDefault("getHoverActiveState(box)"); |
| 62 | 43 |
| 63 debug("Verify tapdown,tap sets and clears active"); | 44 debug("Verify showPress, tap sets and clears active"); |
| 45 eventSender.gestureTapDown(50, 50); |
| 64 eventSender.gestureShowPress(50, 50); | 46 eventSender.gestureShowPress(50, 50); |
| 65 shouldBeTrue("isBoxActive()"); | 47 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 66 eventSender.gestureTap(50, 50); | 48 eventSender.gestureTap(50, 50); |
| 67 // FIXME: Enable after implementing mocked timers (http://crbug.com/319529) | 49 // FIXME: Enable after implementing mocked timers (http://crbug.com/319529) |
| 68 // shouldBeTrue("isBoxActive()"); | 50 // shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 69 waitUntilActiveCleared(); | 51 waitUntilActiveCleared(); |
| 70 } | 52 } |
| 71 | 53 |
| 72 function waitUntilActiveCleared() | 54 function waitUntilActiveCleared() |
| 73 { | 55 { |
| 74 if (isBoxActive()) { | 56 if (getHoverActiveState(box) == "hoveredAndActive") { |
| 75 return setTimeout(waitUntilActiveCleared, 10); | 57 return setTimeout(waitUntilActiveCleared, 10); |
| 76 } | 58 } |
| 77 | 59 |
| 78 shouldBeFalse("isBoxActive()"); | 60 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 79 | 61 |
| 80 debug("Verify tapdown,tapcancel on the element sets and clears active"); | 62 debug("Verify showPress, tapCancel on the element sets and clears active"); |
| 63 eventSender.gestureTapDown(50, 50); |
| 81 eventSender.gestureShowPress(50, 50); | 64 eventSender.gestureShowPress(50, 50); |
| 82 shouldBeTrue("isBoxActive()"); | 65 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 83 eventSender.gestureTapCancel(50, 50); | 66 eventSender.gestureTapCancel(50, 50); |
| 84 shouldBeFalse("isBoxActive()"); | 67 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 85 | 68 |
| 86 debug("Verify tap elsewhere still clears active"); | 69 debug("Verify tap elsewhere still clears active"); |
| 70 eventSender.gestureTapDown(50, 50); |
| 87 eventSender.gestureShowPress(50, 50); | 71 eventSender.gestureShowPress(50, 50); |
| 88 shouldBeTrue("isBoxActive()"); | 72 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 89 eventSender.gestureTap(400, 250); | 73 eventSender.gestureTap(400, 250); |
| 90 // FIXME: Remove after mocked timers added (http://crbug.com/319529) | 74 // FIXME: Remove after mocked timers added (http://crbug.com/319529) |
| 91 waitUntilAnotherActiveCleared(); | 75 waitUntilAnotherActiveCleared(); |
| 92 } | 76 } |
| 93 | 77 |
| 94 function waitUntilAnotherActiveCleared() | 78 function waitUntilAnotherActiveCleared() |
| 95 { | 79 { |
| 96 if (isBoxActive()) { | 80 if (getHoverActiveState(box) == "hoveredAndActive") { |
| 97 return setTimeout(waitUntilAnotherActiveCleared, 10); | 81 return setTimeout(waitUntilAnotherActiveCleared, 10); |
| 98 } | 82 } |
| 99 | 83 |
| 100 shouldBeFalse("isBoxActive()"); | 84 shouldBeDefault("getHoverActiveState(box)"); |
| 101 | 85 |
| 102 debug("Verify tapCancel elsewhere still clears active"); | 86 debug("Verify tapCancel elsewhere still clears active"); |
| 87 eventSender.gestureTapDown(50, 50); |
| 103 eventSender.gestureShowPress(50, 50); | 88 eventSender.gestureShowPress(50, 50); |
| 104 shouldBeTrue("isBoxActive()"); | 89 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 105 eventSender.gestureTapCancel(400, 250); | 90 eventSender.gestureTapCancel(400, 250); |
| 106 shouldBeFalse("isBoxActive()"); | 91 shouldBeDefault("getHoverActiveState(box)"); |
| 107 | 92 |
| 108 debug("Verify that touchstart doesn't trigger active state"); | 93 debug("Verify that touchStart doesn't trigger active state"); |
| 109 eventSender.addTouchPoint(50, 50); | 94 eventSender.addTouchPoint(50, 50); |
| 110 eventSender.touchStart(); | 95 eventSender.touchStart(); |
| 111 shouldBeFalse("isBoxActive()"); | 96 shouldBeDefault("getHoverActiveState(box)"); |
| 112 eventSender.releaseTouchPoint(0); | 97 eventSender.releaseTouchPoint(0); |
| 113 eventSender.touchEnd(); | 98 eventSender.touchEnd(); |
| 114 | 99 |
| 115 debug("Verify that touchstart/touchend doesn't cancel active"); | 100 debug("Verify that touchStart/touchEnd doesn't cancel active"); |
| 101 eventSender.gestureTapDown(50, 50); |
| 116 eventSender.gestureShowPress(50, 50); | 102 eventSender.gestureShowPress(50, 50); |
| 117 shouldBeTrue("isBoxActive()"); | 103 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 118 eventSender.addTouchPoint(50, 50); | 104 eventSender.addTouchPoint(50, 50); |
| 119 eventSender.touchStart(); | 105 eventSender.touchStart(); |
| 120 shouldBeTrue("isBoxActive()"); | 106 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 121 eventSender.releaseTouchPoint(0); | 107 eventSender.releaseTouchPoint(0); |
| 122 eventSender.touchEnd(); | 108 eventSender.touchEnd(); |
| 123 shouldBeTrue("isBoxActive()"); | 109 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 110 eventSender.gestureTapCancel(50, 50); |
| 111 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 124 | 112 |
| 125 finishJSTest(); | 113 finishJSTest(); |
| 126 } | 114 } |
| 127 | 115 |
| 128 runTests(); | 116 window.onload = runTests; |
| 129 </script> | 117 </script> |
| 130 </body> | 118 </body> |
| 131 </html> | 119 </html> |
| OLD | NEW |