| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>touchscreen_test</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css"> |
| <script src="/filez/_main/third_party/js/qunit/qunit.js"></script> |
| <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script> |
| <script src="test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.Touchscreen'); |
| goog.require('bot.action'); |
| goog.require('bot.dom'); |
| goog.require('goog.Promise'); |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| goog.require('goog.math.Coordinate'); |
| goog.require('goog.userAgent'); |
| </script> |
| <script type="text/javascript"> |
| var captureTarget; |
| var target; |
| var lowerTarget; |
| var innerCaptureTarget; |
| var noTouchTarget; |
| var coordsTarget; |
| |
| var touchscreen; |
| var events = []; |
| var TOUCH_EVENTS = [ |
| goog.events.EventType.TOUCHSTART, |
| goog.events.EventType.TOUCHEND, |
| goog.events.EventType.TOUCHMOVE, |
| goog.events.EventType.MOUSEMOVE, |
| goog.events.EventType.MOUSEDOWN, |
| goog.events.EventType.MOUSEOUT, |
| goog.events.EventType.MOUSEOVER, |
| goog.events.EventType.MOUSEUP, |
| goog.events.EventType.CLICK, |
| goog.events.EventType.MSPOINTERCANCEL, |
| goog.events.EventType.MSPOINTERDOWN, |
| goog.events.EventType.MSPOINTERMOVE, |
| goog.events.EventType.MSPOINTEROVER, |
| goog.events.EventType.MSPOINTEROUT, |
| goog.events.EventType.MSPOINTERUP |
| ]; |
| |
| function setUpPage() { |
| target = document.getElementById('target'); |
| lowerTarget = document.getElementById('lower'); |
| captureTarget = document.getElementById('captureTarget'); |
| innerCaptureTarget = document.getElementById('innerCaptureTarget'); |
| noTouchTarget = document.getElementById('notouch'); |
| coordsTarget = document.getElementById('coordsTarget'); |
| } |
| |
| function setUp() { |
| touchscreen = new bot.Touchscreen(); |
| events = []; |
| goog.events.removeAll(target); |
| goog.events.removeAll(lowerTarget); |
| goog.events.removeAll(captureTarget); |
| goog.events.removeAll(innerCaptureTarget); |
| goog.events.removeAll(noTouchTarget); |
| goog.events.removeAll(coordsTarget); |
| |
| goog.events.listen(target, TOUCH_EVENTS, function(e) { |
| events.push(e.type); |
| events.push(e.target); |
| if (e.type == goog.events.EventType.TOUCHSTART || |
| e.type == goog.events.EventType.TOUCHEND || |
| e.type == goog.events.EventType.TOUCHMOVE) { |
| var event = e.getBrowserEvent(); |
| events.push(event.changedTouches.length); |
| } |
| }); |
| goog.events.listen(lowerTarget, TOUCH_EVENTS, function(e) { |
| events.push(e.type); |
| events.push(e.target); |
| }); |
| goog.events.listen(captureTarget, TOUCH_EVENTS, function(e) { |
| if (e.type == goog.events.EventType.MSPOINTERDOWN) { |
| captureTarget.msSetPointerCapture(e.getBrowserEvent().pointerId); |
| } |
| events.push(e.type); |
| events.push(e.target); |
| }); |
| goog.events.listen(noTouchTarget, TOUCH_EVENTS, function(e) { |
| events.push(e.type); |
| events.push(e.target); |
| }); |
| goog.events.listen(coordsTarget, goog.events.EventType.TOUCHSTART, |
| function(e) { |
| var event = e.getBrowserEvent(); |
| if (event.changedTouches.length == 1) { |
| events.push(event.changedTouches[0].clientX); |
| events.push(event.changedTouches[0].clientY); |
| events.push(event.changedTouches[0].pageX); |
| events.push(event.changedTouches[0].pageY); |
| } |
| }); |
| } |
| |
| function msPointerDownEvents(elem) { |
| return [goog.events.EventType.MOUSEMOVE, elem].concat( |
| [goog.events.EventType.MSPOINTEROVER, elem], |
| [goog.events.EventType.MOUSEOVER, elem], |
| [goog.events.EventType.MSPOINTERDOWN, elem], |
| [goog.events.EventType.MOUSEDOWN, elem]); |
| } |
| |
| function msPointerMoveEvents(elem) { |
| return [goog.events.EventType.MSPOINTERMOVE, elem].concat( |
| [goog.events.EventType.MOUSEMOVE, elem]); |
| } |
| |
| function msPointerUpEventsWithClick(elem) { |
| return [goog.events.EventType.MSPOINTERUP, elem].concat( |
| [goog.events.EventType.MOUSEUP, elem], |
| [goog.events.EventType.CLICK, elem], |
| [goog.events.EventType.MSPOINTEROUT, elem], |
| [goog.events.EventType.MOUSEOUT, elem]); |
| } |
| |
| function msPointerUpEventsWithoutClick(elem) { |
| return [goog.events.EventType.MSPOINTERUP, elem].concat( |
| [goog.events.EventType.MOUSEUP, elem], |
| [goog.events.EventType.MSPOINTEROUT, elem], |
| [goog.events.EventType.MOUSEOUT, elem]); |
| } |
| |
| function assertEvents(assert, var_args) { |
| var expectedEvents = goog.array.concat.apply(null, |
| Array.prototype.slice.call(arguments, 1)); |
| assert.deepEqual(events, expectedEvents); |
| events = []; |
| } |
| |
| QUnit.begin(function() { |
| setUpPage(); |
| }); |
| |
| QUnit.testStart(function() { |
| setUp(); |
| }); |
| |
| QUnit.test('touchScreenPress', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| assert.ok(touchscreen.isPressed()); |
| |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 1]); |
| } |
| }); |
| |
| QUnit.test('touchScreen2FingerPress', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, |
| new goog.math.Coordinate(0, 0), |
| new goog.math.Coordinate(10, 10)); |
| touchscreen.press(/* opt_press2 */ true); |
| assert.ok(touchscreen.isPressed()); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerDownEvents(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 2]); |
| } |
| }); |
| |
| QUnit.test('touchScreen2FingerPinch', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, |
| new goog.math.Coordinate(0, 0), |
| new goog.math.Coordinate(0, 50)); |
| touchscreen.press(/* opt_press2 */ true); |
| touchscreen.move(target, |
| new goog.math.Coordinate(0, 10), |
| new goog.math.Coordinate(0, 40)); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerDownEvents(target), |
| msPointerMoveEvents(target), |
| msPointerMoveEvents(target), |
| msPointerUpEventsWithClick(target), |
| msPointerUpEventsWithClick(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 2, |
| goog.events.EventType.TOUCHMOVE, target, 2, |
| goog.events.EventType.TOUCHEND, target, 2]); |
| } |
| }); |
| |
| QUnit.test('touchScreen2FingerPinchReleaseOnNoTouchElement', function(assert) { |
| if (!bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: not IE 10'); |
| return; |
| } |
| touchscreen.move(noTouchTarget, |
| new goog.math.Coordinate(0, 0), |
| new goog.math.Coordinate(0, 50)); |
| touchscreen.press(/* opt_press2 */ true); |
| touchscreen.move(noTouchTarget, |
| new goog.math.Coordinate(0, 10), |
| new goog.math.Coordinate(0, 40)); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(noTouchTarget), |
| [goog.events.EventType.MSPOINTEROUT, noTouchTarget, |
| goog.events.EventType.MOUSEOUT, noTouchTarget, |
| goog.events.EventType.MSPOINTERCANCEL, noTouchTarget]); |
| } |
| }); |
| |
| QUnit.test('touchScreen2FingerRotate', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, |
| new goog.math.Coordinate(0, 0), |
| new goog.math.Coordinate(0, 50)); |
| touchscreen.press(/* opt_press2 */ true); |
| touchscreen.move(target, new goog.math.Coordinate(10, 40)); |
| touchscreen.move(target, new goog.math.Coordinate(50, 50)); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerDownEvents(target), |
| msPointerMoveEvents(target), |
| msPointerMoveEvents(target), |
| msPointerMoveEvents(target), |
| msPointerMoveEvents(target), |
| msPointerUpEventsWithClick(target), |
| msPointerUpEventsWithClick(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 2, |
| goog.events.EventType.TOUCHMOVE, target, 2, |
| goog.events.EventType.TOUCHMOVE, target, 2, |
| goog.events.EventType.TOUCHEND, target, 2]); |
| } |
| }); |
| |
| function verifyTapEvents(assert, elem) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| return false; |
| } |
| touchscreen.move(elem, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.release(); |
| assert.notOk(touchscreen.isPressed()); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(elem), |
| msPointerUpEventsWithClick(elem)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, elem, 1, |
| goog.events.EventType.TOUCHEND, elem, 1, |
| goog.events.EventType.MOUSEMOVE, elem, |
| goog.events.EventType.MOUSEDOWN, elem, |
| goog.events.EventType.MOUSEUP, elem, |
| goog.events.EventType.CLICK, elem]); |
| } |
| return true; |
| } |
| |
| QUnit.test('touchScreenRelease', function(assert) { |
| if (!verifyTapEvents(assert, target)) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| } |
| }); |
| |
| QUnit.test('touchScreenReleaseOnNoTouchElement', function(assert) { |
| if (!bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: not IE 10'); |
| return; |
| } |
| verifyTapEvents(assert, noTouchTarget); |
| }); |
| |
| QUnit.test('touchScreenReleaseAfterMove', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(target, new goog.math.Coordinate(10, 10)); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerMoveEvents(target), |
| msPointerUpEventsWithClick(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 1, |
| goog.events.EventType.TOUCHMOVE, target, 1, |
| goog.events.EventType.TOUCHEND, target, 1]); |
| } |
| }); |
| |
| QUnit.test('msSetPointerCapture', function(assert) { |
| if (!bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: not IE 10'); |
| return; |
| } |
| |
| touchscreen.move(captureTarget, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(lowerTarget, new goog.math.Coordinate(10, 10)); |
| touchscreen.release(); |
| |
| assertEvents(assert, msPointerDownEvents(captureTarget), |
| msPointerMoveEvents(captureTarget), |
| msPointerUpEventsWithoutClick(captureTarget)); |
| }); |
| |
| QUnit.test('bubblingMsSetPointerCapture', function(assert) { |
| if (!bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: not IE 10'); |
| return; |
| } |
| |
| touchscreen.move(innerCaptureTarget, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(lowerTarget, new goog.math.Coordinate(10, 10)); |
| touchscreen.release(); |
| |
| assertEvents(assert, msPointerDownEvents(innerCaptureTarget), |
| msPointerMoveEvents(captureTarget), |
| msPointerUpEventsWithoutClick(captureTarget)); |
| }); |
| |
| QUnit.test('clickDoesNotFireOnCapturedPointer', function(assert) { |
| if (!bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: not IE 10'); |
| return; |
| } |
| |
| touchscreen.move(innerCaptureTarget, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(innerCaptureTarget, new goog.math.Coordinate(10, 10)); |
| touchscreen.release(); |
| |
| assertEvents(assert, msPointerDownEvents(innerCaptureTarget), |
| msPointerMoveEvents(captureTarget), |
| [goog.events.EventType.MSPOINTERUP, captureTarget], |
| [goog.events.EventType.MOUSEUP, captureTarget], |
| [goog.events.EventType.CLICK, innerCaptureTarget], |
| [goog.events.EventType.MSPOINTEROUT, captureTarget], |
| [goog.events.EventType.MOUSEOUT, captureTarget]); |
| }); |
| |
| QUnit.test('touchScreenReleaseAfterMoveOnNoTouchElement_IE', function(assert) { |
| if (!bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: not IE 10'); |
| return; |
| } |
| touchscreen.move(noTouchTarget, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(noTouchTarget, new goog.math.Coordinate(10, 10)); |
| touchscreen.move(noTouchTarget, new goog.math.Coordinate(20, 20)); |
| touchscreen.release(); |
| |
| assertEvents(assert, msPointerDownEvents(noTouchTarget), |
| [goog.events.EventType.MSPOINTEROUT, noTouchTarget, |
| goog.events.EventType.MOUSEOUT, noTouchTarget, |
| goog.events.EventType.MSPOINTERCANCEL, noTouchTarget]); |
| }); |
| |
| QUnit.test('touchScreenReleaseAfterNewElement', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(lowerTarget, new goog.math.Coordinate(0, 0)); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerMoveEvents(lowerTarget), |
| msPointerUpEventsWithoutClick(lowerTarget)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 1, |
| goog.events.EventType.TOUCHMOVE, target, 1, |
| goog.events.EventType.TOUCHEND, target, 1]); |
| } |
| }); |
| |
| QUnit.test('touchScreenMoveWithoutPress', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| assert.notOk(touchscreen.isPressed()); |
| }); |
| |
| QUnit.test('touchScreenMoveWithPress', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.move(target, new goog.math.Coordinate(20, 20)); |
| assert.ok(touchscreen.isPressed()); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerMoveEvents(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 1, |
| goog.events.EventType.TOUCHMOVE, target, 1]); |
| } |
| }); |
| |
| QUnit.test('exceptionReleasingWhenNotPressed', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| assert.throws( |
| goog.bind(touchscreen.release, touchscreen), |
| 'Releasing when not pressed should throw an exception' |
| ); |
| }); |
| |
| QUnit.test('exceptionPressedWhenAlreadyPressed', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| assert.throws( |
| goog.bind(touchscreen.press, touchscreen), |
| 'Pressing when already pressed should throw an exception' |
| ); |
| }); |
| |
| QUnit.test('preventDefaultOnTouchstart', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| goog.events.listen(target, goog.events.EventType.TOUCHSTART, function(e) { |
| e.preventDefault(); |
| }); |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerUpEventsWithClick(target)); |
| } else { |
| assertEvents(assert, [goog.events.EventType.TOUCHSTART, target, 1, |
| goog.events.EventType.TOUCHEND, target, 1]); |
| } |
| }); |
| |
| QUnit.test('preventDefaultOnTouchend', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS) { |
| assert.ok(true, 'Skipping: touch events not supported'); |
| return; |
| } |
| goog.events.listen(target, goog.events.EventType.TOUCHEND, function(e) { |
| e.preventDefault(); |
| }); |
| touchscreen.move(target, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.release(); |
| if (bot.userAgent.IE_DOC_10) { |
| assertEvents(assert, msPointerDownEvents(target), |
| msPointerUpEventsWithClick(target)); |
| } else { |
| var expectedEvents = [goog.events.EventType.TOUCHSTART, target, 1, |
| goog.events.EventType.TOUCHEND, target, 1]; |
| if (!bot.userAgent.IOS && !goog.userAgent.product.CHROME) { |
| expectedEvents.push(goog.events.EventType.MOUSEMOVE, target, |
| goog.events.EventType.MOUSEDOWN, target, |
| goog.events.EventType.MOUSEUP, target, |
| goog.events.EventType.CLICK, target); |
| } |
| assertEvents(assert, expectedEvents); |
| } |
| }); |
| |
| QUnit.test('touchEventCoords', function(assert) { |
| if (!bot.events.SUPPORTS_TOUCH_EVENTS || bot.userAgent.IE_DOC_10) { |
| assert.ok(true, 'Skipping: touch events not supported or IE 10'); |
| return; |
| } |
| var done = assert.async(); |
| window.scrollTo(20, 30); |
| goog.Promise.resolve().then(function() { |
| var coords = bot.dom.getClientRect(coordsTarget); |
| touchscreen.move(coordsTarget, new goog.math.Coordinate(0, 0)); |
| touchscreen.press(); |
| touchscreen.release(); |
| assertEvents(assert, [coords.left, coords.top, |
| coords.left + 20, coords.top + 30]); |
| done(); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="qunit"></div> |
| <div id="qunit-fixture"></div> |
| TouchScreen Test.<br> |
| <div id="target" |
| style="background-color:blue; |
| width:200px; |
| height:100px; |
| -ms-touch-action:none"> |
| touch here |
| </div> |
| <div id="lower" |
| style="background-color:red; |
| width:50px; |
| height:50px; |
| position relative; |
| top:25px; |
| -ms-touch-action:none"> |
| lower |
| </div> |
| <div id="captureTarget" |
| style="background-color:green; |
| width:200px; |
| height:200px; |
| -ms-touch-action:none"> |
| ie 10 target |
| |
| <div id="innerCaptureTarget" |
| style="background-color:cyan; |
| width:100px; |
| height:50px; |
| -ms-touch-action:none"> |
| inner ie 10 target |
| </div> |
| </div> |
| <div id="notouch" |
| style="background-color:green; |
| width:100px; |
| height:100px; |
| position relative; |
| top:50px; |
| -ms-touch-action:auto"> |
| no touch |
| </div> |
| <div id="coordsTarget" |
| style="background-color:magenta; |
| width:8000px; |
| height:8000px; |
| -ms-touch-action:none"> |
| coords target |
| </div> |
| </body> |
| </html> |
