| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Touch Adjustment : Testing that active will be set on a tapDown - bug 96677</title> |
| <script src="../resources/js-test.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| <style> |
| #sandbox { |
| position: absolute; |
| left: 0px; |
| top: 100px; |
| } |
| a { |
| background-color: rgb(255,255,255); |
| } |
| a:active { |
| background-color: rgb(0,0,255); |
| } |
| </style> |
| </head> |
| |
| <body> |
| |
| <div id="sandbox"> |
| <p><a href="" id="link1">I</a> propose to consider <a href="" id="link2">the question</a>, "Can machines think?"<br>This should begin with definitions of the meaning of the terms "machine" and <a href="" id="link3">"think."</a></p> |
| </div> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| var element; |
| var adjustedNode; |
| // Set up shortcut access to elements |
| var e = {}; |
| ['sandbox', 'link1', 'link2', 'link3'].forEach(function(a) { |
| e[a] = document.getElementById(a); |
| }); |
| |
| var curElement; |
| var uniqueId = 1234; |
| |
| function isLinkActive() |
| { |
| // These need to match the background-color used above, after round-tripping. |
| var defaultColor = "rgb(255, 255, 255)"; |
| var activeColor = "rgb(0, 0, 255)"; |
| |
| color = window.getComputedStyle(curElement).backgroundColor; |
| if (color == activeColor) |
| return true; |
| if (color != defaultColor) |
| testFailed('Got unexpected backgroundColor: ' + color); |
| return false; |
| } |
| |
| function testTapDown(touchpoint, element) |
| { |
| curElement = element; |
| if (isLinkActive()) testFailed('Link unexpectedly active on entry'); |
| |
| eventSender.addTouchPoint(touchpoint.x, touchpoint.y, touchpoint.width, touchpoint.height); |
| eventSender.touchStart(uniqueId + 1); |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(uniqueId + 2); |
| eventSender.gestureTapDown(touchpoint.x, touchpoint.y, touchpoint.width, touchpoint.height, uniqueId + 1); |
| eventSender.gestureShowPress(touchpoint.x, touchpoint.y, touchpoint.width, touchpoint.height, uniqueId + 2); |
| |
| shouldBeTrue("isLinkActive()"); |
| |
| eventSender.gestureTapCancel(touchpoint.x, touchpoint.y, uniqueId + 2); |
| |
| uniqueId += 2; |
| if (isLinkActive()) testFailed('Link unexpectedly active on exit'); |
| } |
| |
| function testDirectTouch(element) |
| { |
| // Touch directly in the center of the element. |
| var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 20, 30); |
| if (document.elementFromPoint(touchpoint.x, touchpoint.y) != element) |
| testFailed('Direct touch ended up on some other element'); |
| testTapDown(touchpoint, element); |
| } |
| |
| function isDescendantOf(parent, child) |
| { |
| var n = child; |
| while(n) { |
| if(n==parent) |
| return true; |
| n = n.parentNode; |
| } |
| return false; |
| } |
| |
| function testIndirectTouch(element) |
| { |
| // Touch just right of the element. |
| var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', 10, 30, 20); |
| if (isDescendantOf(element, document.elementFromPoint(touchpoint.x, touchpoint.y))) |
| testFailed('Indirect touch ended up still on top of the element'); |
| testTapDown(touchpoint, element); |
| } |
| |
| function testDirectTouches() |
| { |
| debug('Testing direct hits.'); |
| testDirectTouch(e.link1); |
| testDirectTouch(e.link2); |
| testDirectTouch(e.link3); |
| } |
| |
| function testIndirectTouches() |
| { |
| debug('Testing indirect hits.'); |
| testIndirectTouch(e.link1); |
| testIndirectTouch(e.link2); |
| testIndirectTouch(e.link3); |
| } |
| |
| function runTests() |
| { |
| if (!window.eventSender) { |
| debug('This test requires DumpRenderTree'); |
| return; |
| } |
| if (!eventSender.gestureShowPress) { |
| debug('GestureShowPress not supported by this platform'); |
| return; |
| } |
| |
| description('Tests that tapDown will trigger the active state.'); |
| testIndirectTouches(); |
| testDirectTouches(); |
| e.sandbox.style.display = 'none'; |
| } |
| runTests(); |
| </script> |
| </body> |
| </html> |