client/cros/touch_events_test_page.html

<!doctype html>
<!-- Modified from rbyers.github.io/eventTest.js

Changes were to remove some elements which don't make sense in this context,
including UI to toggle events and various non-mouse, keyboard, touch events.
There were also some formatting changes.  Finally, some test-friendly functions
like clearPreviousEvents() were added.

Add event handlers for all mouse, touch, and keyboard events.  Log any events
seen.  Intended to be queried by an autotest after input playback.

-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Touch Event Test Page</title>
<script type="text/javascript">
var pageReady = false; // Used to determine whether test can run yet.
var lastEvent; // The last event seen.
var eventCount = 0; // Count of events seen.
var timeOfLastEvent; // Timestamp of when last event occurred.
var netScrollDelta = {x: 0, y: 0}; // Net scroll seen.
var clickCount = 0; // Total number of clicks seen.
var eventLog = ''; // Log of all events seen.
var preventDefaults = true; // Boolean whether to prevent default events.


// Reset previously seen events.
function clearPreviousEvents() {
  lastEvent = undefined;
  eventCount = 0;
  timeOfLastEvent = undefined;
  netScrollDelta = {x: 0, y: 0};
  clickCount = 0;
  eventLog = '';
  pageReady = true;
}

// Add the given event and message to the running eventLog.
function logEvent(event, msg) {
  eventCount += 1;
  if (!msg) {
    msg = '';
  }
  if (timeOfLastEvent && event.timeStamp) {
    msg += ' timeDelta=' + round(event.timeStamp - timeOfLastEvent) + 'ms';
  }
  timeOfLastEvent = event.timeStamp;
  lastEvent = event;
  msg = event.type + ': ' + msg + '\n';
  eventLog += msg;
  console.log(msg);
}

// Call preventDefault() on the event if preventDefaults is set.
function preventDefault(event) {
  if (preventDefaults) {
    event.preventDefault();
  }
}

// Round the given value to 2 decimal places.
function round(val) {
  return Math.round(val * 100) / 100;
}

// addEventListener with the given handler for the given event types.
function setHandlerState(events, handler) {
  for (var i = 0; i < events.length; i++) {
    document.addEventListener(events[i], handler);
  }
};

// mouse event handler
function mouseEventHandler(event)
{
  var msg = '';
  if (event.type == 'click') {
    clickCount += 1;
  }
  if (event.type == 'mousewheel') {
    msg += ', wheelDelta=' + round(event.wheelDelta) +
        ' (' + round(event.wheelDeltaX) + ',' +
        round(event.wheelDeltaY) + ')';
    netScrollDelta.x += event.wheelDeltaX;
    netScrollDelta.y += event.wheelDeltaY;
  }
  if (event.type == 'wheel') {
    msg += ', deltaX=' + round(event.deltaX) + ', deltaY=' +
        round(event.deltaY) + ', deltaZ=' + round(event.deltaZ);
    netScrollDelta.x += event.deltaX;
    netScrollDelta.y += event.deltaY;
  }
  if (event.type == 'mousewheel' || event.type == 'wheel') {
    msg += ', deltaMode=' + (
        event.deltaMode == 0 ? 'PIXEL' :
        event.deltaMode == 1 ? 'LINE' :
        event.deltaMode == 2 ? 'PAGE' :
        event.deltaMode);
  }
  if (event.type.toLowerCase().indexOf('pointer') != -1) {
    msg += ', pointerType=' + event.pointerType + ', pointerId=' +
        event.pointerId + ', width=' + round(event.width) +
        ', height=' + round(event.height) + ', pressure=' +
        round(event.pressure) + ', tiltX=' + round(event.tiltX) +
        ', tiltY=' + round(event.tiltY);
  }

  msg = ' client=' + round(event.clientX) + ',' + round(event.clientY) +
      ' screen=' + round(event.screenX) + ',' + round(event.screenY) +
      ' button=' + event.button + ' buttons=' + event.buttons +
      ' detail=' + event.detail + ' cancelable=' +
      event.cancelable + msg;

  preventDefault(event);
  logEvent(event, msg);
}

// Helper function for touch handler.
function makeTouchList(touches, verbose) {
  var touchStr = '';
  for (var i = 0; i < touches.length; i++) {
    var tgt = '';
    if (i > 0)
      touchStr += ' ';

    if (verbose)
      tgt = '-' + touches[i].target.id;
    var id = touches[i].identifier;
    if (id >= 100) {
      if (!(id in touchMap)) {
        touchMap[id] = nextId;
        nextId++;
      }
      id = '#' + touchMap[id];
    }

    touchStr += id + tgt;
  }
  return touchStr;
}

activeTouchData = {};

// Touch event handler.
function touchEventHandler(event) {
  var touchStr =
      ' touches=' + makeTouchList(event.touches, true) +
      ' changed=' + makeTouchList(event.changedTouches) +
      ' target=' + makeTouchList(event.targetTouches) +
      ' cancelable=' + event.cancelable;

  preventDefault(event);
  logEvent(event, touchStr);

  for (var i = 0; i < event.changedTouches.length; i++) {
    var touch = event.changedTouches[i];

    if (event.type == 'touchstart') {
      var touchData = {
        startTime: event.timeStamp,
        startX: touch.screenX,
        startY: touch.screenY,
        maxDist: 0,
        maxMDist: 0
      };
      activeTouchData[touch.identifier] = touchData;
    } else {
      var touchData = activeTouchData[touch.identifier];
      var distX = Math.abs(touch.screenX - touchData.startX);
      var distY = Math.abs(touch.screenY - touchData.startY);
      touchData.maxDist = Math.max(touchData.maxDist,
          Math.sqrt(distX * distX + distY * distY));
      touchData.maxMDist = Math.max(touchData.maxMDist, distX + distY);
      if (event.type == 'touchend') {
        msg = ('touch ' + touch.identifier + ' summary:' +
               ' dist=(' + distX + ',' + distY + ')' +
               ' max-dist=' + Math.round(touchData.maxDist) +
               ' max-manhattan-dist=' + touchData.maxMDist +
               ' dur=' + (Math.round(event.timeStamp - touchData.startTime)));
        logEvent(event, msg);
        delete activeTouchData[touch.identifier];
      }
    }
  }
}

// Key event handler.
function keyEventHandler(event) {
  var msg = '';
  if ('charCode' in event)
    msg += ' charCode=' + event.charCode;
  if ('keyCode' in event)
    msg += ' keyCode=' + event.keyCode;
  if ('key' in event)
    msg += ' key=' + event.key;
  if ('code' in event)
    msg += ' code=' + event.code;
  if ('location' in event) {
    if (event.location == KeyboardEvent.DOM_KEY_LOCATION_LEFT)
      msg += ' LOCATION_LEFT';
    else if (event.location == KeyboardEvent.DOM_KEY_LOCATION_NUMPAD)
      msg += ' LOCATION_NUMPAD';
    else if (event.location == KeyboardEvent.DOM_KEY_LOCATION_RIGHT)
      msg += ' LOCATION_RIGHT';
  }
  if (event.repeat)
    msg += ' repeat';
  if (event.isComposing)
    msg += ' isComposing';

  preventDefault(event);
  logEvent(event, msg);
}


// On load, set handlers for mouse, touch, and key events.
function onLoad() {
  setHandlerState(
      ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup',
      'mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave',
      'mousewheel', 'wheel'],
      mouseEventHandler);

  setHandlerState(
      ['dragstart', 'dragenter', 'dragleave', 'drop', 'dragend'],
      mouseEventHandler);

  setHandlerState(
      ['touchstart', 'touchmove', 'touchend', 'touchcancel'],
      touchEventHandler);

  setHandlerState(
      ['keydown', 'keyup', 'keypress'],
      keyEventHandler);

  pageReady = true;
}

</script>
</head>
<body onload="onLoad()">
</body>
</html>