simple_touch_drag.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Touch handler dragging</title>

<style type="text/css">
  #card {
    background-color: blue;
    border: 1px solid black;
    width: 100px;
    height: 50px;
  }
</style>
<script>
  /*
   This test case drags a div on touch move events. This serves as the baseline
   of latency measurement for pages with non-empty JS touch handler.
  */
  var card;
  var startX = 0;
  var startY = 0;
  var deltaX = 0;
  var deltaY = 0;
  function startExperiment() {
    card = document.getElementById('card');
    card.addEventListener('touchstart', onTouchStart, false);
    card.addEventListener('touchmove', onTouchMove, false);
    card.addEventListener('touchend', onTouchEnd, false);
    card.addEventListener('touchcancel', onTouchEnd, false);
  }

  window.addEventListener('load', startExperiment);

  function onTouchStart(e) {
    var touch = e.targetTouches[0];
    startX = touch.clientX;
    startY = touch.clientY;
    e.preventDefault();
  }

  function onTouchMove(e) {
    var touch = e.targetTouches[0];
    deltaX = touch.clientX - startX;
    deltaY = touch.clientY - startY;
    window.requestAnimationFrame(onAnimationTouchMove);
    e.preventDefault();
  }

  function onAnimationTouchMove() {
    card.style.webkitTransform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
  }

  function onTouchEnd(e) {
    window.requestAnimationFrame(onAnimationTouchEnd);
    e.preventDefault();
  }

  function onAnimationTouchEnd() {
    card.style.webkitTransform = '';
  }
</script>
</head>
<body>
    <div id='card'></div>
</body>
</html>
chromium/tools/perf/page_sets/tough_scheduling_cases/simple_touch_drag.html
