Chromium Code Reviews| 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; | |
| 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."); | 21 description("Tests that tap gesture events set and clear the active state of ele ments."); |
| 42 | 22 |
| 43 function runTests() | 23 function runTests() |
| 44 { | 24 { |
| 45 if (!window.eventSender) { | 25 if (!window.eventSender) { |
| 46 debug('This test requires DRT.'); | 26 debug('This test requires DRT.'); |
| 47 return; | 27 return; |
| 48 } | 28 } |
| 49 | 29 |
| 50 if (!eventSender.gestureShowPress) { | 30 if (!eventSender.gestureShowPress) { |
| 51 debug('GestureShowPress is not supported by this platform'); | 31 debug('GestureShowPress is not supported by this platform'); |
| 52 return; | 32 return; |
| 53 } | 33 } |
| 54 | 34 |
| 55 if (window.testRunner) { | 35 if (window.testRunner) { |
| 56 window.jsTestIsAsync = true; | 36 window.jsTestIsAsync = true; |
| 57 testRunner.waitUntilDone(); | 37 testRunner.waitUntilDone(); |
| 58 } | 38 } |
| 59 | 39 |
| 60 debug("Verify active isn't initially set"); | 40 debug("Verify active isn't initially set"); |
| 61 shouldBeFalse("isBoxActive()"); | 41 shouldBeTrue("isBoxDefault('box')"); |
| 62 | 42 |
| 63 debug("Verify tapdown,tap sets and clears active"); | 43 debug("Verify tapdown,tap sets and clears active"); |
| 44 eventSender.gestureTapDown(50, 50); | |
| 64 eventSender.gestureShowPress(50, 50); | 45 eventSender.gestureShowPress(50, 50); |
| 65 shouldBeTrue("isBoxActive()"); | 46 shouldBeTrue("isBoxHoverActive('box')"); |
| 66 eventSender.gestureTap(50, 50); | 47 eventSender.gestureTap(50, 50); |
| 67 // FIXME: Enable after implementing mocked timers (http://crbug.com/319529) | 48 // FIXME: Enable after implementing mocked timers (http://crbug.com/319529) |
| 68 // shouldBeTrue("isBoxActive()"); | 49 // shouldBeTrue("isBoxHoverActive('box')"); |
| 69 waitUntilActiveCleared(); | 50 waitUntilActiveCleared(); |
| 70 } | 51 } |
| 71 | 52 |
| 72 function waitUntilActiveCleared() | 53 function waitUntilActiveCleared() |
| 73 { | 54 { |
| 74 if (isBoxActive()) { | 55 if (isBoxHoverActive('box', true)) { |
| 75 return setTimeout(waitUntilActiveCleared, 10); | 56 return setTimeout(waitUntilActiveCleared, 10); |
| 76 } | 57 } |
| 77 | 58 |
| 78 shouldBeFalse("isBoxActive()"); | 59 shouldBeTrue("isBoxHovered('box')"); |
| 79 | 60 |
| 80 debug("Verify tapdown,tapcancel on the element sets and clears active"); | 61 debug("Verify tapdown,tapcancel on the element sets and clears active"); |
| 62 eventSender.gestureTapDown(50, 50); | |
| 81 eventSender.gestureShowPress(50, 50); | 63 eventSender.gestureShowPress(50, 50); |
| 82 shouldBeTrue("isBoxActive()"); | 64 shouldBeTrue("isBoxHoverActive('box')"); |
| 83 eventSender.gestureTapCancel(50, 50); | 65 eventSender.gestureTapCancel(50, 50); |
| 84 shouldBeFalse("isBoxActive()"); | 66 shouldBeTrue("isBoxHovered('box')"); |
| 85 | 67 |
| 86 debug("Verify tap elsewhere still clears active"); | 68 debug("Verify tap elsewhere still clears active"); |
| 69 eventSender.gestureTapDown(50, 50); | |
| 87 eventSender.gestureShowPress(50, 50); | 70 eventSender.gestureShowPress(50, 50); |
| 88 shouldBeTrue("isBoxActive()"); | 71 shouldBeTrue("isBoxHoverActive('box')"); |
| 89 eventSender.gestureTap(400, 250); | 72 eventSender.gestureTap(400, 250); |
| 90 // FIXME: Remove after mocked timers added (http://crbug.com/319529) | 73 // FIXME: Remove after mocked timers added (http://crbug.com/319529) |
| 91 waitUntilAnotherActiveCleared(); | 74 waitUntilAnotherActiveCleared(); |
| 92 } | 75 } |
| 93 | 76 |
| 94 function waitUntilAnotherActiveCleared() | 77 function waitUntilAnotherActiveCleared() |
| 95 { | 78 { |
| 96 if (isBoxActive()) { | 79 if (isBoxHoverActive('box', true)) { |
| 97 return setTimeout(waitUntilAnotherActiveCleared, 10); | 80 return setTimeout(waitUntilAnotherActiveCleared, 10); |
| 98 } | 81 } |
| 99 | 82 |
| 100 shouldBeFalse("isBoxActive()"); | 83 shouldBeTrue("isBoxDefault('box')"); |
| 101 | 84 |
| 102 debug("Verify tapCancel elsewhere still clears active"); | 85 debug("Verify tapCancel elsewhere still clears active"); |
| 86 eventSender.gestureTapDown(50, 50); | |
| 103 eventSender.gestureShowPress(50, 50); | 87 eventSender.gestureShowPress(50, 50); |
| 104 shouldBeTrue("isBoxActive()"); | 88 shouldBeTrue("isBoxHoverActive('box')"); |
| 105 eventSender.gestureTapCancel(400, 250); | 89 eventSender.gestureTapCancel(400, 250); |
| 106 shouldBeFalse("isBoxActive()"); | 90 shouldBeTrue("isBoxDefault('box')"); |
| 107 | 91 |
| 108 debug("Verify that touchstart doesn't trigger active state"); | 92 debug("Verify that touchstart doesn't trigger active state"); |
| 109 eventSender.addTouchPoint(50, 50); | 93 eventSender.addTouchPoint(50, 50); |
| 110 eventSender.touchStart(); | 94 eventSender.touchStart(); |
| 111 shouldBeFalse("isBoxActive()"); | 95 shouldBeTrue("isBoxDefault('box')"); |
| 112 eventSender.releaseTouchPoint(0); | 96 eventSender.releaseTouchPoint(0); |
| 113 eventSender.touchEnd(); | 97 eventSender.touchEnd(); |
| 114 | 98 |
| 115 debug("Verify that touchstart/touchend doesn't cancel active"); | 99 debug("Verify that touchstart/touchend doesn't cancel active"); |
| 100 eventSender.gestureTapDown(50, 50); | |
| 116 eventSender.gestureShowPress(50, 50); | 101 eventSender.gestureShowPress(50, 50); |
| 117 shouldBeTrue("isBoxActive()"); | 102 shouldBeTrue("isBoxHoverActive('box')"); |
| 118 eventSender.addTouchPoint(50, 50); | 103 eventSender.addTouchPoint(50, 50); |
| 119 eventSender.touchStart(); | 104 eventSender.touchStart(); |
| 120 shouldBeTrue("isBoxActive()"); | 105 shouldBeTrue("isBoxHoverActive('box')"); |
| 121 eventSender.releaseTouchPoint(0); | 106 eventSender.releaseTouchPoint(0); |
| 122 eventSender.touchEnd(); | 107 eventSender.touchEnd(); |
| 123 shouldBeTrue("isBoxActive()"); | 108 shouldBeTrue("isBoxHoverActive('box')"); |
| 109 eventSender.gestureTapCancel(50, 50); | |
|
tdresser
2014/03/14 14:24:51
Assert on the box state after the tap cancel.
| |
| 124 | 110 |
| 125 finishJSTest(); | 111 finishJSTest(); |
| 126 } | 112 } |
| 127 | 113 |
| 128 runTests(); | 114 window.onload = runTests; |
| 129 </script> | 115 </script> |
| 130 </body> | 116 </body> |
| 131 </html> | 117 </html> |
| OLD | NEW |