third_party/WebKit/LayoutTests/svg/custom/touch-events.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script>
   5   var eventCount = 0;
   6
   7   function handleClick(evt) {
   8     eventCount++;
   9     document.getElementById('click').textContent = 'PASS';
  10   }
  11
  12   function handleTouchStart(evt) {
  13     eventCount++;
  14     document.getElementById('touchstart').textContent = 'PASS';
  15   }
  16
  17   function handleTouchMove(evt) {
  18     eventCount++;
  19     document.getElementById('touchmove').textContent = 'PASS';
  20   }
  21
  22   function handleTouchEnd(evt) {
  23     eventCount++;
  24     document.getElementById('touchend').textContent = 'PASS';
  25   }
  26
  27   function handleTouchCancel(evt) {
  28     eventCount++;
  29     document.getElementById('touchcancel').textContent = 'PASS';
  30   }
  31
  32   function fireEvents() {
  33     if (!window.testRunner || !window.eventSender) {
  34       document.write('This test does not work in manual mode.');
  35     } else {
  36       var svg = document.getElementById('svg');
  37       var positionX = svg.offsetLeft + 30;
  38       var positionY = svg.offsetTop + 30;
  39
  40       // Touch, move, end.
  41       eventSender.addTouchPoint(positionX, positionY);
  42       eventSender.touchStart();
  43       eventSender.updateTouchPoint(0, positionX + 10, positionY + 10);
  44       eventSender.touchMove();
  45       eventSender.releaseTouchPoint(0);
  46       eventSender.touchEnd();
  47       // Touch, cancel.
  48       eventSender.addTouchPoint(positionX, positionY);
  49       eventSender.touchStart();
  50       eventSender.updateTouchPoint(0, positionX + 10, positionY + 10);
  51       eventSender.cancelTouchPoint(0);
  52       eventSender.touchCancel();
  53       // Click.
  54       eventSender.mouseMoveTo(positionX, positionY);
  55       eventSender.mouseDown();
  56       eventSender.mouseUp();
  57
  58       // Fire some events that do not hit the rect.
  59       eventSender.addTouchPoint(positionX - 30, positionY - 30);
  60       eventSender.touchStart();
  61       eventSender.updateTouchPoint(0, positionX + 5, positionY + 5);
  62       eventSender.touchMove();
  63       eventSender.releaseTouchPoint(0);
  64       eventSender.touchEnd();
  65
  66       document.getElementById('eventcount').textContent =
  67           eventCount == 6 ? 'PASS' : 'FAIL: expected 6 events, got ' + eventCount;
  68
  69       testRunner.dumpAsText();
  70     }
  71   }
  72 </script>
  73 </head>
  74 <body onload="fireEvents()">
  75   This test passes if you see a series of PASS lines below:<br/>
  76   onclick fired: <span id="click">FAIL</span><br/>
  77   ontouchstart fired: <span id="touchstart">FAIL</span><br/>
  78   ontouchmove fired: <span id="touchmove">FAIL</span><br/>
  79   ontouchend fired: <span id="touchend">FAIL</span><br/>
  80   ontouchcancel fired: <span id="touchcancel">FAIL</span><br/>
  81   total event count is 6: <span id="eventcount">FAIL</span><br/>
  82   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" id="svg">
  83     <rect id="rect" x="20" y="20" width="60" height="60" fill="green" onclick="handleClick()" ontouchstart="handleTouchStart()" ontouchmove="handleTouchMove()"   ontouchend="handleTouchEnd()" ontouchcancel="handleTouchCancel()"/>
  84   </svg>
  85 </body>
  86 </html>