<!DOCTYPE html>
<title>HitRegion Event Test</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="./resources/test-helpers.js"></script>
<canvas width="400" height="400">
  <button id="button"></button>
  <button id="button2"></button>
</canvas>
<style>

body {
  margin : 0px;
  padding : 0px;
}

</style>
<script>

var canvas = document.querySelector('canvas');
var button = document.querySelector('canvas > #button');
var button2 = document.querySelector('canvas > #button2');
var context = canvas.getContext('2d');

function assert_event_equivalent(actual, expected) {
  assert_equals(actual.type, expected.type);
  assert_equals(actual.target, expected.target);
  if (actual.region !== undefined)
    assert_equals(actual.region, expected.region);
  else
    assert_equals(actual.changedTouches[0].region, expected.region);
}

function assert_event_array_equivalent(actual, expected) {
  assert_true(Array.isArray(actual));
  assert_equals(actual.length, expected.length);
  for (var i = 0; i < actual.length; i++)
    assert_event_equivalent(actual[i], expected[i]);
}

async_test(function() {
  var fallback_element = document.createElement('button');
  canvas.appendChild(fallback_element);

  context.clearRect(0, 0, 400, 400);
  context.rect(0, 0, 50, 50);
  context.fill();
  context.addHitRegion({ id: 'button', control: fallback_element });

  var expected = [
    { type: 'mousedown', target: fallback_element, region: 'button' }
  ];
  var actual = [];
  fallback_element.addEventListener('mousedown', e => actual.push(e));

  if (eventSender) {
    eventSender.mouseMoveTo(40, 10);
    eventSender.mouseDown();
    eventSender.mouseUp();
  }

  // After the following code, the fallback element is no longer descendant of canvas.
  fallback_element.parentNode.parentNode.appendChild(fallback_element);

  if (eventSender) {
    eventSender.mouseMoveTo(40, 10);
    eventSender.mouseDown();
    eventSender.mouseUp();
  }

  assert_event_array_equivalent(actual, expected);
  this.done();
}, 'If the control is not descendant of canvas, event should not be fired.');

async_test(function() {
  context.clearRect(0, 0, 400, 400);
  context.rect(0, 0, 50, 50);
  context.fill();
  context.addHitRegion({ id: 'button' });

  var expected = [
    { type: 'click', target: canvas, region: 'button' },
    { type: 'click', target: canvas, region: 'button' },
  ];
  var actual = [];

  canvas.addEventListener('click', e => { canvas.style.width = '0px'; actual.push(e); });
  canvas.addEventListener('click', e => { actual.push(e); canvas.style.width = '400px'; });

  if (eventSender) {
    eventSender.mouseMoveTo(40, 10);
    eventSender.mouseDown();
    eventSender.mouseUp();
  }

  assert_event_array_equivalent(actual, expected);
  this.done();
}, 'The event object should not be changed even if mutate the DOM.');

async_test(function() {
  context.rect(1, 1, 50, 50);
  context.fill();
  context.addHitRegion({ id: 'button', control: button });

  var expected = [
    { type: 'mouseover', target: button, region: 'button' },
    { type: 'mouseenter', target: button, region: 'button' },
    { type: 'mousemove', target: button, region: 'button' },
    { type: 'mousemove', target: button, region: 'button' },
    { type: 'mousedown', target: button, region: 'button' },
    { type: 'mouseup', target: button, region: 'button' },
    { type: 'mouseout', target: button, region: 'button' },
    { type: 'mouseleave', target: button, region: 'button' },
    { type: 'touchstart', target: button, region: 'button' },
    { type: 'touchend', target: button, region: 'button' },
  ];
  var actual = [];

  button.addEventListener('mouseover', e => actual.push(e));
  button.addEventListener('mouseenter', e => actual.push(e));
  button.addEventListener('mousemove', e => actual.push(e));
  button.addEventListener('mousedown', e => actual.push(e));
  button.addEventListener('mouseup', e => actual.push(e));
  button.addEventListener('mouseout', e => actual.push(e));
  button.addEventListener('mouseleave', e => actual.push(e));
  button.addEventListener('touchstart', e => actual.push(e));
  button.addEventListener('touchend', e => actual.push(e));

  if (eventSender) {
    eventSender.mouseMoveTo(0, 0);
    eventSender.mouseMoveTo(10, 10);
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.mouseMoveTo(60, 60);

    eventSender.clearTouchPoints();
    eventSender.addTouchPoint(10, 10);
    eventSender.touchStart();
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
  }

  assert_event_array_equivalent(actual, expected);
  this.done();
}, 'Rerouting mouse/touch event test');

async_test(function() {
  context.rect(1, 1, 50, 50);
  context.fill();
  context.addHitRegion({ control: button });

  var expected = [
    { type: 'mouseover', target: button, region: null },
    { type: 'mouseenter', target: button, region: null },
    { type: 'mousemove', target: button, region: null },
    { type: 'mousemove', target: button, region: null },
    { type: 'mousedown', target: button, region: null },
    { type: 'mouseup', target: button, region: null },
    { type: 'mouseout', target: button, region: null },
    { type: 'mouseleave', target: button, region: null },
    { type: 'touchstart', target: button, region: null },
    { type: 'touchend', target: button, region: null },
  ];
  var actual = [];

  button.addEventListener('mouseover', e => actual.push(e));
  button.addEventListener('mouseenter', e => actual.push(e));
  button.addEventListener('mousemove', e => actual.push(e));
  button.addEventListener('mousedown', e => actual.push(e));
  button.addEventListener('mouseup', e => actual.push(e));
  button.addEventListener('mouseout', e => actual.push(e));
  button.addEventListener('mouseleave', e => actual.push(e));
  button.addEventListener('touchstart', e => actual.push(e));
  button.addEventListener('touchend', e => actual.push(e));

  if (eventSender) {
    eventSender.mouseMoveTo(0, 0);
    eventSender.mouseMoveTo(10, 10);
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.mouseMoveTo(60, 60);

    eventSender.clearTouchPoints();
    eventSender.addTouchPoint(10, 10);
    eventSender.touchStart();
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
  }

  assert_event_array_equivalent(actual, expected);
  this.done();
}, 'Rerouting mouse/touch event test but the id of hit region is unset.');

async_test(function() {
  context.clearRect(0, 0, 400, 400);
  context.rect(0, 0, 50, 50);
  context.fill();
  context.addHitRegion({ id: 'button', control: button });
  context.beginPath();
  context.rect(50, 0, 50, 50);
  context.fill();
  context.addHitRegion({ id: 'button2', control: button2 });

  var expected = [
    { type: 'mousemove', target: button, region: 'button' },
    { type: 'mousemove', target: button2, region: 'button2' },
    { type: 'touchmove', target: button, region: 'button' },
    { type: 'touchmove', target: button, region: 'button' },
  ];
  var actual = [];

  button.addEventListener('mousemove', e => actual.push(e));
  button2.addEventListener('mousemove', e => actual.push(e));
  button.addEventListener('touchmove', e => actual.push(e));
  button2.addEventListener('touchmove', () => assert_unreached());

  if (eventSender) {
    eventSender.mouseMoveTo(10, 10);
    eventSender.mouseMoveTo(60, 10);

    eventSender.clearTouchPoints();
    eventSender.addTouchPoint(10, 10);
    eventSender.touchStart();
    eventSender.updateTouchPoint(0, 11, 11);
    eventSender.touchMove();
    eventSender.updateTouchPoint(0, 60, 10);
    eventSender.touchMove();
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
  }

  assert_event_array_equivalent(actual, expected);
  this.done();
}, 'Touch events are defined to have "implicit capture".');

async_test(function() {
  var tmp_canvas = document.createElement('canvas');

  var without_initializer = new MouseEvent('click');
  assert_equals(without_initializer.region, null);

  var default_value = new MouseEvent('click', {});
  assert_equals(default_value.region, null);

  var set_null = new MouseEvent('click', { region: null });
  assert_equals(set_null.region, null);

  var set_region = new MouseEvent('click', { region: 'test' });
  assert_equals(set_region.region, 'test');

  var called = [];
  tmp_canvas.addEventListener('click', e => { tmp_canvas.remove(); called.push(e.region) });
  tmp_canvas.addEventListener('click', e => { tmp_canvas.remove(); called.push(e.region) });

  tmp_canvas.dispatchEvent(set_null);
  tmp_canvas.dispatchEvent(set_region);
  assert_array_equals(called, [ null, null, 'test', 'test' ]);
  this.done();
}, 'MouseEventInit.');

async_test(function() {
  var tmp_canvas = document.createElement('canvas');

  var touch1 = new Touch({
      identifier: 0,
      target: tmp_canvas
  });
  var touch2 = new Touch({
      identifier: 0,
      target: tmp_canvas,
      region: null
  });
  var touch3 = new Touch({
      identifier: 0,
      target: tmp_canvas,
      region: 'touch'
  });

  var touch_event = new TouchEvent('touchstart', {
    touches: [touch1, touch2, touch3],
    targetTouches: [touch1, touch3]
  });

  assert_equals(touch_event.touches.length, 3);
  assert_equals(touch_event.touches[0].region, null);
  assert_equals(touch_event.touches[1].region, null);
  assert_equals(touch_event.touches[2].region, 'touch');
  assert_equals(touch_event.targetTouches.length, 2);
  assert_equals(touch_event.targetTouches[0].region, null);
  assert_equals(touch_event.targetTouches[1].region, 'touch');

  var called = [];
  tmp_canvas.addEventListener('touchstart', function(e) {
    tmp_canvas.remove();
    called.push(e.touches[0].region);
    called.push(e.touches[1].region);
    called.push(e.touches[2].region);
  });

  tmp_canvas.addEventListener('touchstart', function(e) {
    tmp_canvas.remove();
    called.push(e.touches[0].region);
    called.push(e.touches[1].region);
    called.push(e.touches[2].region);
  });

  tmp_canvas.dispatchEvent(touch_event);
  assert_array_equals(called, [ null, null, 'touch', null, null, 'touch' ]);
  this.done();
}, 'TouchEventInit.');

</script>