touch-events.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<head>
<script>
  var eventCount = 0;

  function handleClick(evt) {
    eventCount++;
    document.getElementById('click').textContent = 'PASS';
  }

  function handleTouchStart(evt) {
    eventCount++;
    document.getElementById('touchstart').textContent = 'PASS';
  }

  function handleTouchMove(evt) {
    eventCount++;
    document.getElementById('touchmove').textContent = 'PASS';
  }

  function handleTouchEnd(evt) {
    eventCount++;
    document.getElementById('touchend').textContent = 'PASS';
  }

  function handleTouchCancel(evt) {
    eventCount++;
    document.getElementById('touchcancel').textContent = 'PASS';
  }

  function fireEvents() {
    if (!window.testRunner || !window.eventSender) {
      document.write('This test does not work in manual mode.');
    } else {
      var svg = document.getElementById('svg');
      var clientRect = svg.getBoundingClientRect();
      var positionX = clientRect.left + 30;
      var positionY = clientRect.top + 30;

      // Touch, move, end.
      eventSender.addTouchPoint(positionX, positionY);
      eventSender.touchStart();
      eventSender.updateTouchPoint(0, positionX + 10, positionY + 10);
      eventSender.touchMove();
      eventSender.releaseTouchPoint(0);
      eventSender.touchEnd();
      // Touch, cancel.
      eventSender.addTouchPoint(positionX, positionY);
      eventSender.touchStart();
      eventSender.updateTouchPoint(0, positionX + 10, positionY + 10);
      eventSender.cancelTouchPoint(0);
      eventSender.touchCancel();
      // Click.
      eventSender.mouseMoveTo(positionX, positionY);
      eventSender.mouseDown();
      eventSender.mouseUp();

      // Fire some events that do not hit the rect.
      eventSender.addTouchPoint(positionX - 30, positionY - 30);
      eventSender.touchStart();
      eventSender.updateTouchPoint(0, positionX + 5, positionY + 5);
      eventSender.touchMove();
      eventSender.releaseTouchPoint(0);
      eventSender.touchEnd();

      document.getElementById('eventcount').textContent =
          eventCount == 6 ? 'PASS' : 'FAIL: expected 6 events, got ' + eventCount;

      testRunner.dumpAsText();
    }
  }
</script>
</head>
<body onload="fireEvents()">
  This test passes if you see a series of PASS lines below:<br/>
  onclick fired: <span id="click">FAIL</span><br/>
  ontouchstart fired: <span id="touchstart">FAIL</span><br/>
  ontouchmove fired: <span id="touchmove">FAIL</span><br/>
  ontouchend fired: <span id="touchend">FAIL</span><br/>
  ontouchcancel fired: <span id="touchcancel">FAIL</span><br/>
  total event count is 6: <span id="eventcount">FAIL</span><br/>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" id="svg">
    <rect id="rect" x="20" y="20" width="60" height="60" fill="green" onclick="handleClick()" ontouchstart="handleTouchStart()" ontouchmove="handleTouchMove()"   ontouchend="handleTouchEnd()" ontouchcancel="handleTouchCancel()"/>
  </svg>
</body>
</html>
chromium/third_party/blink/web_tests/svg/custom/touch-events.html
