| 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:hover { | |
| 12 background-color: red; | |
| 13 } | |
| 14 | |
| 15 #box:active { | |
| 16 background-color: green; | |
| 17 } | |
| 18 | |
| 19 #box:hover:active { | |
| 20 background-color: yellow; | |
| 21 } | |
| 22 | |
| 23 </style> | 10 </style> |
| 24 <body> | 11 <body> |
| 25 <div id="box">Gestures go here</div> | 12 <div id="box" class="touch-interactive">Gestures go here</div> |
| 26 | 13 |
| 27 <p id="description"></p> | 14 <p id="description"></p> |
| 28 <p>See http://crbug.com/316974 for details</p> | 15 <p>See http://crbug.com/316974 for details</p> |
| 29 | 16 |
| 30 <div id="console"></div> | 17 <div id="console"></div> |
| 31 | 18 |
| 19 <script src="../resources/touch-hover-active-tests.js"></script> |
| 32 <script> | 20 <script> |
| 33 var color; | 21 var box = document.getElementById("box"); |
| 34 | |
| 35 function isBoxOfColor(givenColor) | |
| 36 { | |
| 37 var b = document.getElementById('box'); | |
| 38 color = window.getComputedStyle(b).backgroundColor; | |
| 39 if (color == givenColor) | |
| 40 return true; | |
| 41 | |
| 42 testFailed('Box had backgroundColor: ' + color); | |
| 43 return false; | |
| 44 } | |
| 45 | |
| 46 function isBoxHovered() | |
| 47 { | |
| 48 return isBoxOfColor("rgb(255, 0, 0)"); | |
| 49 } | |
| 50 | |
| 51 function isBoxActive() | |
| 52 { | |
| 53 return isBoxOfColor("rgb(0, 255, 0)"); | |
| 54 } | |
| 55 | |
| 56 function isBoxHoverActive() | |
| 57 { | |
| 58 return isBoxOfColor("rgb(255, 255, 0)"); | |
| 59 } | |
| 60 | |
| 61 function isBoxDefault() | |
| 62 { | |
| 63 return isBoxOfColor("rgb(0, 0, 255)"); | |
| 64 } | |
| 65 | |
| 66 description("Tests that gesture tapcancel clears hover properly"); | 22 description("Tests that gesture tapcancel clears hover properly"); |
| 67 | 23 |
| 68 function runTests() | 24 function runTests() |
| 69 { | 25 { |
| 70 if (!window.eventSender) { | 26 if (!window.eventSender) { |
| 71 debug('This test requires DRT.'); | 27 debug('This test requires DRT.'); |
| 72 return; | 28 return; |
| 73 } | 29 } |
| 74 | 30 |
| 75 if (!eventSender.gestureShowPress | 31 if (!eventSender.gestureShowPress |
| 76 || !eventSender.gestureTapCancel) { | 32 || !eventSender.gestureTapCancel) { |
| 77 debug('Gesture events are not supported by this platform'); | 33 debug('Gesture events are not supported by this platform'); |
| 78 return; | 34 return; |
| 79 } | 35 } |
| 80 | 36 |
| 81 debug("Verify hover, active aren't initially set"); | 37 debug("Verify hover, active aren't initially set"); |
| 82 shouldBeTrue("isBoxDefault()"); | 38 shouldBeDefault("getHoverActiveState(box)"); |
| 83 | 39 |
| 84 debug("tapcancel on element when it is Active should keep hover"); | 40 debug("tapCancel on element when it is Active should keep hover"); |
| 41 eventSender.gestureTapDown(50, 50); |
| 85 eventSender.gestureShowPress(50, 50); | 42 eventSender.gestureShowPress(50, 50); |
| 86 shouldBeTrue("isBoxHoverActive()"); | 43 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 87 eventSender.gestureTapCancel(50, 50); | 44 eventSender.gestureTapCancel(50, 50); |
| 88 shouldBeTrue("isBoxHovered()"); | 45 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 89 | 46 |
| 90 debug("tapcancel outside element when it is Active should clear it"); | 47 debug("tapCancel outside element when it is Active should clear it"); |
| 48 eventSender.gestureTapDown(50, 50); |
| 91 eventSender.gestureShowPress(50, 50); | 49 eventSender.gestureShowPress(50, 50); |
| 92 shouldBeTrue("isBoxHoverActive()"); | 50 shouldBeHoveredAndActive("getHoverActiveState(box)"); |
| 93 eventSender.gestureTapCancel(400, 250); | 51 eventSender.gestureTapCancel(400, 250); |
| 94 shouldBeTrue("isBoxDefault()"); | 52 shouldBeDefault("getHoverActiveState(box)"); |
| 95 | 53 |
| 96 debug("tapcancel on element when it is hovered but not active should keep ho
ver"); | 54 debug("tapCancel on element when it is hovered but not active should keep ho
ver"); |
| 97 eventSender.mouseMoveTo(50, 50); | 55 eventSender.mouseMoveTo(50, 50); |
| 98 shouldBeTrue("isBoxHovered()"); | 56 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 99 eventSender.gestureTapCancel(50, 50); | 57 eventSender.gestureTapCancel(50, 50); |
| 100 shouldBeTrue("isBoxHovered()"); | 58 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 101 | 59 |
| 102 debug("tapcancel outside element when it is hovered but not active should ke
ep hover"); | 60 debug("tapCancel outside element when it is hovered but not active should ke
ep hover"); |
| 103 eventSender.mouseMoveTo(50, 50); | 61 eventSender.mouseMoveTo(50, 50); |
| 104 shouldBeTrue("isBoxHovered()"); | 62 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 105 eventSender.gestureTapCancel(400, 250); | 63 eventSender.gestureTapCancel(400, 250); |
| 106 shouldBeTrue("isBoxHovered()"); | 64 shouldBeOnlyHovered("getHoverActiveState(box)"); |
| 107 } | 65 } |
| 108 | 66 |
| 109 runTests(); | 67 window.onload = runTests; |
| 110 </script> | 68 </script> |
| 111 </body> | 69 </body> |
| 112 </html> | 70 </html> |
| 113 | 71 |
| OLD | NEW |