tools/perf/page_sets/tough_scheduling_cases/simple_touch_drag.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset=utf-8 />
   5 <meta name="viewport" content="width=device-width,initial-scale=1">
   6 <title>Touch handler dragging</title>
   7
   8 <style type="text/css">
   9   #card {
  10     background-color: blue;
  11     border: 1px solid black;
  12     width: 100px;
  13     height: 50px;
  14   }
  15 </style>
  16 <script>
  17   /*
  18    This test case drags a div on touch move events. This serves as the baseline
  19    of latency measurement for pages with non-empty JS touch handler.
  20   */
  21   var card;
  22   var startX = 0;
  23   var startY = 0;
  24   var deltaX = 0;
  25   var deltaY = 0;
  26   function startExperiment() {
  27     card = document.getElementById('card');
  28     card.addEventListener('touchstart', onTouchStart, false);
  29     card.addEventListener('touchmove', onTouchMove, false);
  30     card.addEventListener('touchend', onTouchEnd, false);
  31     card.addEventListener('touchcancel', onTouchEnd, false);
  32   }
  33
  34   window.addEventListener('load', startExperiment);
  35
  36   function onTouchStart(e) {
  37     var touch = e.targetTouches[0];
  38     startX = touch.clientX;
  39     startY = touch.clientY;
  40     e.preventDefault();
  41   }
  42
  43   function onTouchMove(e) {
  44     var touch = e.targetTouches[0];
  45     deltaX = touch.clientX - startX;
  46     deltaY = touch.clientY - startY;
  47     window.requestAnimationFrame(onAnimationTouchMove);
  48     e.preventDefault();
  49   }
  50
  51   function onAnimationTouchMove() {
  52     card.style.webkitTransform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
  53   }
  54
  55   function onTouchEnd(e) {
  56     window.requestAnimationFrame(onAnimationTouchEnd);
  57     e.preventDefault();
  58   }
  59
  60   function onAnimationTouchEnd() {
  61     card.style.webkitTransform = '';
  62   }
  63 </script>
  64 </head>
  65 <body>
  66     <div id='card'></div>
  67 </body>
  68 </html>