<!DOCTYPE HTML>
<html>
<script src='test.js'></script>
<script src='dispatch_touch_event.js'></script>
<script>

function setup(state, classes) {
  for (let c of classes) {
    state[c] = {};
    state[c].onTouchStart = function(event) {
      state[c].touchStart = event;
    };
    state[c].onTouchMove = function(event) {
      state[c].touchMove = event;
    };
    state[c].onTouchEnd = function(event) {
      state[c].touchEnd = event;
    };
    state[c].el = document.querySelector('.' + c);
    state[c].el.addEventListener('touchstart', state[c].onTouchStart, false);
    state[c].el.addEventListener('touchmove', state[c].onTouchMove, false);
    state[c].el.addEventListener('touchend', state[c].onTouchEnd, false);
  }
}

function teardown(state) {
  for (let c in state) {
    state[c].el.removeEventListener('touchstart', state[c].onTouchStart, false);
    state[c].el.removeEventListener('touchmove', state[c].onTouchMove, false);
    state[c].el.removeEventListener('touchend', state[c].onTouchEnd, false);
  }
}

function testCorrectTarget1() {
  var s = {};
  setup(s, ['div1', 'div2']);
  dispatchTouchEvent(50, 50, 'touchstart');
  teardown(s);
  assert(s.div1.touchStart && s.div1.touchStart.target === s.div1.el);
  assert(!s.div2.touchStart);
}

function testCorrectTarget2() {
  var s = {};
  setup(s, ['div1', 'div2']);
  dispatchTouchEvent(50, 150, 'touchstart');
  teardown(s);
  assert(s.div2.touchStart && s.div2.touchStart.target === s.div2.el);
  assert(!s.div1.touchStart);
}

function testAllEvents() {
  var s = {};
  setup(s, ['div1', 'div2']);
  dispatchTouchEvent(10, 20, 'touchstart');
  dispatchTouchEvent(30, 40, 'touchmove');
  dispatchTouchEvent(50, 60, 'touchend');
  teardown(s);
  assert(s.div1.touchStart);
  assert(s.div1.touchStart.target === s.div1.el);
  assert(s.div1.touchStart.touches[0].clientX === 10);
  assert(s.div1.touchStart.touches[0].clientY === 20);
  assert(s.div1.touchMove);
  assert(s.div1.touchMove.target === s.div1.el);
  assert(s.div1.touchMove.touches[0].clientX === 30);
  assert(s.div1.touchMove.touches[0].clientY === 40);
  assert(s.div1.touchEnd);
  assert(s.div1.touchEnd.target === s.div1.el);
  assert(s.div1.touchEnd.touches[0].clientX === 50);
  assert(s.div1.touchEnd.touches[0].clientY === 60);
}

</script>
<body>
<div style="width:100px;height:100px;" class="div1"></div>
<div style="width:100px;height:100px;" class="div2"></div>
</body>
</html>