Chromium Code Reviews| Index: LayoutTests/fast/events/touch/gesture/gesture-tap-down-special-elements.html |
| diff --git a/LayoutTests/fast/events/touch/gesture/gesture-tap-down-special-elements.html b/LayoutTests/fast/events/touch/gesture/gesture-tap-down-special-elements.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..793d39b75b2abe301f6e5463032436d60289b8c4 |
| --- /dev/null |
| +++ b/LayoutTests/fast/events/touch/gesture/gesture-tap-down-special-elements.html |
| @@ -0,0 +1,198 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| +<script src="../../../../resources/js-test.js"></script> |
| +<style> |
| +#box { |
| + width: 300px; |
| + height: 50px; |
| +} |
| + |
| +#overflowBox { |
| + width: 300px; |
| + height: 600px; |
| +} |
| + |
| +#container { |
| + width: 300px; |
| + height: 50px; |
| + overflow-y: scroll; |
| + overflow-x: hidden; |
| + margin: 10px 0 10px 0; |
| +} |
| + |
| +#frame { |
| + width: 200px; |
| + height: 50px; |
| +} |
| + |
| +.interactive { background-color: blue; } |
| + |
| +.interactive:hover { background-color: red; } |
| + |
| +.interactive:active { background-color: green; } |
| + |
| +.interactive:hover:active { background-color: yellow; } |
| + |
| +</style> |
| +</head> |
| +<body onload="runTests()"> |
| + |
| +<select id="combobox" class="interactive"> |
| + <option value="1"> One </option> |
| + <option value="2"> Two </option> |
| + <option value="3"> Three </option> |
| + <option value="4"> Four </option> |
| + <option value="5"> Five </option> |
| + <option value="6"> Six </option> |
| + <option value="7"> Sever </option> |
| + <option value="8"> Eight </option> |
| + <option value="9"> Nine </option> |
| + <option value="10"> Ten </option> |
| + <option value="11"> Eleven </option> |
| + <option value="12"> Twelve </option> |
| + <option value="13"> Thirteen </option> |
| + <option value="14"> Fourteen </option> |
| + <option value="15"> Fifteen </option> |
| + <option value="16"> Sixteen </option> |
| + <option value="17"> Seventeen </option> |
| + <option value="18"> Eighteen </option> |
| + <option value="19"> Nineteen </option> |
| + <option value="20"> Twenty </option> |
| +</select> |
| + |
| +<select id="listbox" class="interactive" multiple="5"> |
| + <option value="1"> One </option> |
| + <option value="2"> Two </option> |
| + <option value="3"> Three </option> |
| + <option value="4"> Four </option> |
| + <option value="5"> Five </option> |
| + <option value="6"> Six </option> |
| + <option value="7"> Sever </option> |
| + <option value="8"> Eight </option> |
| + <option value="9"> Nine </option> |
| + <option value="10"> Ten </option> |
| +</select> |
| + |
| +<input type="text" id="textbox" class="interactive" value="The input element represents a typed data field, usually with a form control to allow the user to edit the data."/> |
| + |
| +<textarea id="textarea" class="interactive" rows="3"> |
| +The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value. |
| + |
| +The raw value of a textarea control must be initially the empty string. |
| +</textarea> |
| + |
| +<iframe id="frame" src="resources/gesture-tap-down-iframe.html"></iframe> |
| + |
| +<p id="description"></p> |
| +<p>See http://crbug.com/316974 for details</p> |
| + |
| +<div id="console" style="clear:both; float: left"></div> |
| + |
| +<script> |
| +var console = document.getElementById('console'); |
| +document.onmousemove = function(e) { |
| + console.innerHTML = e.pageX + ', ' + e.pageY; |
| +} |
| + |
| +if (window.internals) { |
| + internals.settings.setViewportEnabled(true); |
| + internals.settings.setViewportMetaEnabled(true); |
| +} |
| + |
| +var color; |
| + |
| +function isBoxOfColor(e, givenColor) |
| +{ |
| + color = window.getComputedStyle(e).backgroundColor; |
| + if (color == givenColor) |
| + return true; |
| + |
| + testFailed('Box had backgroundColor: ' + color); |
| + return false; |
| +} |
| + |
| +function isBoxHoverActive(id) |
| +{ |
| + var e = document.getElementById(id); |
| + return isBoxOfColor(e, "rgb(255, 255, 0)"); |
| +} |
| + |
| +function isBoxDefault(id) |
| +{ |
| + var e = document.getElementById(id); |
| + return isBoxOfColor(e, "rgb(0, 0, 255)"); |
| +} |
| + |
| +function isFrameDefault() |
| +{ |
| + var e = document.getElementById('frame').contentDocument.body; |
| + return isBoxOfColor(e, "rgb(0, 0, 255)"); |
| +} |
| + |
| +description("Tests gesture tapdown behaviour on different form elements."); |
| + |
| +function runTests() |
| +{ |
| + if (!window.eventSender) { |
| + debug('This test requires DRT.'); |
| + return; |
| + } |
| + |
| + if (!eventSender.gestureTapDown |
| + || !eventSender.gestureShowPress) { |
| + debug('Gesture events are not supported by this platform'); |
| + return; |
| + } |
| + |
| + // Insert meta tag after viewport has been enabled via internals |
| + var meta = document.createElement('meta'); |
| + meta.name = 'viewport'; |
| + meta.content = 'width=device-width, initial-scale=1, user-scalable=no'; |
| + document.head.appendChild(meta); |
| + |
| + debug("Scroll and Pinch are disabled on the page"); |
| + debug("Verify hover, active aren't initially set"); |
| + shouldBeTrue("isBoxDefault('combobox')"); |
| + eventSender.gestureTapDown(50, 65); |
|
bokan
2014/03/03 13:01:19
Get the coordinates of the element you're trying t
|
| + debug("combobox should always be activated on tapdown"); |
| + shouldBeTrue("isBoxHoverActive('combobox')"); |
| + eventSender.gestureShowPress(50, 65); |
| + eventSender.gestureTapCancel(50, 65); |
| + |
| + debug("Verify hover, active aren't initially set"); |
| + shouldBeTrue("isBoxDefault('listbox')"); |
| + eventSender.gestureTapDown(125, 50); |
| + debug("Overflow listbox should remain unchanged"); |
| + shouldBeTrue("isBoxDefault('listbox')"); |
| + eventSender.gestureShowPress(125, 50); |
| + eventSender.gestureTapCancel(125, 50); |
| + |
| + debug("Verify hover, active aren't initially set"); |
| + shouldBeTrue("isBoxDefault('textbox')"); |
| + eventSender.gestureTapDown(240, 65); |
| + debug("Overflow textbox should remain unchanged"); |
| + shouldBeTrue("isBoxDefault('textbox')"); |
| + eventSender.gestureShowPress(240, 65); |
| + eventSender.gestureTapCancel(240, 65); |
| + |
| + debug("Verify hover, active aren't initially set"); |
| + shouldBeTrue("isBoxDefault('textarea')"); |
| + eventSender.gestureTapDown(400, 45); |
| + debug("Overflow textarea should remain unchanged"); |
| + shouldBeTrue("isBoxDefault('textarea')"); |
| + eventSender.gestureShowPress(400, 45); |
| + eventSender.gestureTapCancel(400, 45); |
| + |
| + debug("Verify hover, active aren't initially set"); |
| + shouldBeTrue("isFrameDefault()"); |
| + eventSender.gestureTapDown(600, 45); |
| + debug("Overflow iframe should remain unchanged"); |
| + shouldBeTrue("isFrameDefault()"); |
| + eventSender.gestureShowPress(600, 45); |
| + eventSender.gestureTapCancel(600, 45); |
| +} |
| +</script> |
| +</body> |
| +</html> |
| + |