javascript/atoms/test/gestures_test.html - external/github.com/SeleniumHQ/selenium - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>gestures_test.html</title>
   <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.action');
     goog.require('bot.userAgent');
     goog.require('goog.dom');
     goog.require('goog.events');
     goog.require('goog.events.EventType');
     goog.require('goog.userAgent.product');
   </script>
   <script type="text/javascript">
     var elem, startCoords, firstMoveCoords, secondMoveCoords, endCoords;

     QUnit.testStart(function() {
       elem = goog.dom.getElement('multitouch');
       goog.events.removeAll(elem);
       startCoords = [];
       firstMoveCoords = [];
       secondMoveCoords = [];
       endCoords = [];

       function handleCoords(event, touchListName) {
         event.preventDefault();
         var e = event.getBrowserEvent();
         var touches = e[touchListName];
         if (touches.length !== 2) {
           throw new Error('Expected 2 touches, got ' + touches.length);
         }
         var touch0 = touches[0], touch1 = touches[1];
         return [
           new goog.math.Coordinate(touch0.clientX, touch0.clientY),
           new goog.math.Coordinate(touch1.clientX, touch1.clientY)
         ];
       }

       goog.events.listen(elem, goog.events.EventType.TOUCHSTART, function(e) {
         if (startCoords.length) {
           throw new Error('touchstart already fired');
         }
         startCoords = handleCoords(e, 'touches');
       });

       goog.events.listen(elem, goog.events.EventType.TOUCHMOVE, function(e) {
         if (secondMoveCoords.length) {
           throw new Error('two touchmoves already fired');
         }
         if (!firstMoveCoords.length) {
           firstMoveCoords = handleCoords(e, 'touches');
         } else {
           secondMoveCoords = handleCoords(e, 'touches');
         }
       });

       goog.events.listen(elem, goog.events.EventType.TOUCHEND, function(e) {
         if (endCoords.length) {
           throw new Error('touchend already fired');
         }
         endCoords = handleCoords(e, 'changedTouches');
       });

       function handlePointerCoords(event) {
         event.preventDefault();
         var e = event.getBrowserEvent();
         return new goog.math.Coordinate(e.clientX, e.clientY);
       }

       goog.events.listen(elem, goog.events.EventType.MSPOINTERDOWN,
                          function(e) {
         if (startCoords.length >= 2) {
           throw new Error('MSPointerDown already fired');
         }
         startCoords.push(handlePointerCoords(e));
       });

       goog.events.listen(elem, goog.events.EventType.MSPOINTERMOVE,
                          function(e) {
         if (secondMoveCoords.length >= 2) {
           throw new Error('MSPointerMoves already fired');
         }
         if (firstMoveCoords.length < 2) {
           firstMoveCoords.push(handlePointerCoords(e));
         } else {
           secondMoveCoords.push(handlePointerCoords(e));
         }
       });

       goog.events.listen(elem, goog.events.EventType.MSPOINTERUP, function(e) {
         if (endCoords.length >= 2) {
           throw new Error('MSPointerUp already fired');
         }
         endCoords.push(handlePointerCoords(e));
       });
     });

     var EPSILON = 0.01;

     function assertApproxEquals(assert, comment, expected, actual) {
       if (goog.userAgent.product.ANDROID &&
           bot.userAgent.isProductVersion(4)) {
         var expectedMinFloor = Math.floor(expected - EPSILON);
         var expectedMaxFloor = Math.floor(expected + EPSILON);
         assert.ok(actual >= expectedMinFloor, comment + ' (min floor)');
         assert.ok(actual <= expectedMaxFloor, comment + ' (max floor)');
       } else {
         assert.ok(Math.abs(expected - actual) <= EPSILON, comment + ': expected ' + expected + ', got ' + actual);
       }
     }

     function assertMultitouchPoints(assert, start0X, start0Y, start1X, start1Y,
         mid0X, mid0Y, mid1X, mid1Y, end0X, end0Y, end1X, end1Y) {
       assertApproxEquals(assert, 'start 0 x', start0X, startCoords[0].x);
       assertApproxEquals(assert, 'start 0 y', start0Y, startCoords[0].y);
       assertApproxEquals(assert, 'start 1 x', start1X, startCoords[1].x);
       assertApproxEquals(assert, 'start 1 y', start1Y, startCoords[1].y);

       assertApproxEquals(assert, 'first move 0 x', mid0X, firstMoveCoords[0].x);
       assertApproxEquals(assert, 'first move 0 y', mid0Y, firstMoveCoords[0].y);
       assertApproxEquals(assert, 'first move 1 x', mid1X, firstMoveCoords[1].x);
       assertApproxEquals(assert, 'first move 1 y', mid1Y, firstMoveCoords[1].y);

       assertApproxEquals(assert, 'second move 0 x', end0X, secondMoveCoords[0].x);
       assertApproxEquals(assert, 'second move 0 y', end0Y, secondMoveCoords[0].y);
       assertApproxEquals(assert, 'second move 1 x', end1X, secondMoveCoords[1].x);
       assertApproxEquals(assert, 'second move 1 y', end1Y, secondMoveCoords[1].y);

       assertApproxEquals(assert, 'end 0 x', end0X, endCoords[0].x);
       assertApproxEquals(assert, 'end 0 y', end0Y, endCoords[0].y);
       assertApproxEquals(assert, 'end 1 x', end1X, endCoords[1].x);
       assertApproxEquals(assert, 'end 1 y', end1Y, endCoords[1].y);
     }

     QUnit.test('PinchInward', function(assert) {
       if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
         assert.ok(true, 'Skipping: touch events not supported');
         return;
       }
       var pinchDistance = Math.sqrt(2 * 50 * 50) / 2;
       bot.action.pinch(elem, pinchDistance);
       assertMultitouchPoints(assert, /* start */ 100, 100, 0, 0,
                              /* mid */ 87.5, 87.5, 12.5, 12.5,
                              /* end */ 75, 75, 25, 25);
     });

     QUnit.test('PinchOutward', function(assert) {
       if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
         assert.ok(true, 'Skipping: touch events not supported');
         return;
       }
       var pinchDistance = -Math.sqrt(2 * 50 * 50) / 2;
       bot.action.pinch(elem, pinchDistance);
       assertMultitouchPoints(assert, /* start */ 75, 75, 25, 25,
                              /* mid */ 87.5, 87.5, 12.5, 12.5,
                              /* end */ 100, 100, 0, 0);
     });

     QUnit.test('RotateClockwise', function(assert) {
       if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
         assert.ok(true, 'Skipping: touch events not supported');
         return;
       }
       bot.action.rotate(elem, 90);
       var midYOffset = Math.sqrt(2 * 25 * 25);
       assertMultitouchPoints(assert, /* start */ 75, 75, 25, 25,
                              /* mid */ 50, 50 + midYOffset, 50, 50 - midYOffset,
                              /* end */ 25, 75, 75, 25);
     });

     QUnit.test('RotateCounterClockwise', function(assert) {
       if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
         assert.ok(true, 'Skipping: touch events not supported');
         return;
       }
       bot.action.rotate(elem, -90);
       var midXOffset = Math.sqrt(2 * 25 * 25);
       assertMultitouchPoints(assert, /* start */ 75, 75, 25, 25,
                              /* mid */ 50 + midXOffset, 50, 50 - midXOffset, 50,
                              /* end */ 75, 25, 25, 75);
     });
     </script>
 </head>
 <body>
   <div id="qunit"></div>
   <div id="qunit-fixture"></div>
   <div id="multitouch"
        style="position:fixed;
               left:0px;
               top:0px;
               width:100px;
               height:100px;
               -ms-touch-action:none">
     multitouch
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>gestures_test.html</title>
	<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.action');
	goog.require('bot.userAgent');
	goog.require('goog.dom');
	goog.require('goog.events');
	goog.require('goog.events.EventType');
	goog.require('goog.userAgent.product');
	</script>
	<script type="text/javascript">
	var elem, startCoords, firstMoveCoords, secondMoveCoords, endCoords;

	QUnit.testStart(function() {
	elem = goog.dom.getElement('multitouch');
	goog.events.removeAll(elem);
	startCoords = [];
	firstMoveCoords = [];
	secondMoveCoords = [];
	endCoords = [];

	function handleCoords(event, touchListName) {
	event.preventDefault();
	var e = event.getBrowserEvent();
	var touches = e[touchListName];
	if (touches.length !== 2) {
	throw new Error('Expected 2 touches, got ' + touches.length);
	}
	var touch0 = touches[0], touch1 = touches[1];
	return [
	new goog.math.Coordinate(touch0.clientX, touch0.clientY),
	new goog.math.Coordinate(touch1.clientX, touch1.clientY)
	];
	}

	goog.events.listen(elem, goog.events.EventType.TOUCHSTART, function(e) {
	if (startCoords.length) {
	throw new Error('touchstart already fired');
	}
	startCoords = handleCoords(e, 'touches');
	});

	goog.events.listen(elem, goog.events.EventType.TOUCHMOVE, function(e) {
	if (secondMoveCoords.length) {
	throw new Error('two touchmoves already fired');
	}
	if (!firstMoveCoords.length) {
	firstMoveCoords = handleCoords(e, 'touches');
	} else {
	secondMoveCoords = handleCoords(e, 'touches');
	}
	});

	goog.events.listen(elem, goog.events.EventType.TOUCHEND, function(e) {
	if (endCoords.length) {
	throw new Error('touchend already fired');
	}
	endCoords = handleCoords(e, 'changedTouches');
	});

	function handlePointerCoords(event) {
	event.preventDefault();
	var e = event.getBrowserEvent();
	return new goog.math.Coordinate(e.clientX, e.clientY);
	}

	goog.events.listen(elem, goog.events.EventType.MSPOINTERDOWN,
	function(e) {
	if (startCoords.length >= 2) {
	throw new Error('MSPointerDown already fired');
	}
	startCoords.push(handlePointerCoords(e));
	});

	goog.events.listen(elem, goog.events.EventType.MSPOINTERMOVE,
	function(e) {
	if (secondMoveCoords.length >= 2) {
	throw new Error('MSPointerMoves already fired');
	}
	if (firstMoveCoords.length < 2) {
	firstMoveCoords.push(handlePointerCoords(e));
	} else {
	secondMoveCoords.push(handlePointerCoords(e));
	}
	});

	goog.events.listen(elem, goog.events.EventType.MSPOINTERUP, function(e) {
	if (endCoords.length >= 2) {
	throw new Error('MSPointerUp already fired');
	}
	endCoords.push(handlePointerCoords(e));
	});
	});

	var EPSILON = 0.01;

	function assertApproxEquals(assert, comment, expected, actual) {
	if (goog.userAgent.product.ANDROID &&
	bot.userAgent.isProductVersion(4)) {
	var expectedMinFloor = Math.floor(expected - EPSILON);
	var expectedMaxFloor = Math.floor(expected + EPSILON);
	assert.ok(actual >= expectedMinFloor, comment + ' (min floor)');
	assert.ok(actual <= expectedMaxFloor, comment + ' (max floor)');
	} else {
	assert.ok(Math.abs(expected - actual) <= EPSILON, comment + ': expected ' + expected + ', got ' + actual);
	}
	}

	function assertMultitouchPoints(assert, start0X, start0Y, start1X, start1Y,
	mid0X, mid0Y, mid1X, mid1Y, end0X, end0Y, end1X, end1Y) {
	assertApproxEquals(assert, 'start 0 x', start0X, startCoords[0].x);
	assertApproxEquals(assert, 'start 0 y', start0Y, startCoords[0].y);
	assertApproxEquals(assert, 'start 1 x', start1X, startCoords[1].x);
	assertApproxEquals(assert, 'start 1 y', start1Y, startCoords[1].y);

	assertApproxEquals(assert, 'first move 0 x', mid0X, firstMoveCoords[0].x);
	assertApproxEquals(assert, 'first move 0 y', mid0Y, firstMoveCoords[0].y);
	assertApproxEquals(assert, 'first move 1 x', mid1X, firstMoveCoords[1].x);
	assertApproxEquals(assert, 'first move 1 y', mid1Y, firstMoveCoords[1].y);

	assertApproxEquals(assert, 'second move 0 x', end0X, secondMoveCoords[0].x);
	assertApproxEquals(assert, 'second move 0 y', end0Y, secondMoveCoords[0].y);
	assertApproxEquals(assert, 'second move 1 x', end1X, secondMoveCoords[1].x);
	assertApproxEquals(assert, 'second move 1 y', end1Y, secondMoveCoords[1].y);

	assertApproxEquals(assert, 'end 0 x', end0X, endCoords[0].x);
	assertApproxEquals(assert, 'end 0 y', end0Y, endCoords[0].y);
	assertApproxEquals(assert, 'end 1 x', end1X, endCoords[1].x);
	assertApproxEquals(assert, 'end 1 y', end1Y, endCoords[1].y);
	}

	QUnit.test('PinchInward', function(assert) {
	if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
	assert.ok(true, 'Skipping: touch events not supported');
	return;
	}
	var pinchDistance = Math.sqrt(2 * 50 * 50) / 2;
	bot.action.pinch(elem, pinchDistance);
	assertMultitouchPoints(assert, /* start */ 100, 100, 0, 0,
	/* mid */ 87.5, 87.5, 12.5, 12.5,
	/* end */ 75, 75, 25, 25);
	});

	QUnit.test('PinchOutward', function(assert) {
	if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
	assert.ok(true, 'Skipping: touch events not supported');
	return;
	}
	var pinchDistance = -Math.sqrt(2 * 50 * 50) / 2;
	bot.action.pinch(elem, pinchDistance);
	assertMultitouchPoints(assert, /* start */ 75, 75, 25, 25,
	/* mid */ 87.5, 87.5, 12.5, 12.5,
	/* end */ 100, 100, 0, 0);
	});

	QUnit.test('RotateClockwise', function(assert) {
	if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
	assert.ok(true, 'Skipping: touch events not supported');
	return;
	}
	bot.action.rotate(elem, 90);
	var midYOffset = Math.sqrt(2 * 25 * 25);
	assertMultitouchPoints(assert, /* start */ 75, 75, 25, 25,
	/* mid */ 50, 50 + midYOffset, 50, 50 - midYOffset,
	/* end */ 25, 75, 75, 25);
	});

	QUnit.test('RotateCounterClockwise', function(assert) {
	if (!bot.events.SUPPORTS_TOUCH_EVENTS) {
	assert.ok(true, 'Skipping: touch events not supported');
	return;
	}
	bot.action.rotate(elem, -90);
	var midXOffset = Math.sqrt(2 * 25 * 25);
	assertMultitouchPoints(assert, /* start */ 75, 75, 25, 25,
	/* mid */ 50 + midXOffset, 50, 50 - midXOffset, 50,
	/* end */ 75, 25, 25, 75);
	});
	</script>
	</head>
	<body>
	<div id="qunit"></div>
	<div id="qunit-fixture"></div>
	<div id="multitouch"
	style="position:fixed;
	left:0px;
	top:0px;
	width:100px;
	height:100px;
	-ms-touch-action:none">
	multitouch
	</div>
	</body>
	</html>