| <!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> |