<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="./resources/canvas-hit-region-event.js"></script>
<script>
test(function(t) {

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var testSet = [];

  function clickTests(message, tests)
  {
    for (var i = 0; i < tests.length; i++)
      testSet.push({
        actual : clickCanvas(tests[i].x, tests[i].y),
        expected : tests[i].expected
      });
  }

  function createHitRegion(pathMethod)
  {
    context.removeHitRegion("hit");
    context.beginPath();
    context.save();
    pathMethod();
    context.restore();
    context.addHitRegion({
      id : "hit"
    });
  }

  function drawStar()
  {
    context.beginPath();
    context.moveTo(0, -50);
    context.lineTo(-15, -10);
    context.lineTo(-50, -10);
    context.lineTo(-15, 10);
    context.lineTo(-35, 50);
    context.lineTo(0, 20);
    context.lineTo(35, 50);
    context.lineTo(15, 10);
    context.lineTo(50, -10);
    context.lineTo(15, -10);
    context.lineTo(0, -50);
  }

  // Rectangle with context.translate()
  createHitRegion(function() {
    context.translate(20, 20);
    context.rect(0, 0, 50, 50);
  });
  clickTests("Rectangle with context.translate():", [
    { x : 1, y : 1, expected : null },
    { x : 31, y : 21, expected : "hit" },
    { x : 51, y : 51, expected : "hit" },
    { x : 10, y : 5, expected : null },
    { x : 61, y : 61, expected : "hit" }
  ]);

  // Rectangle with context.rotate()
  createHitRegion(function() {
    context.rotate(Math.PI * 0.25); // 45 degrees
    context.rect(0, 0, 50, 50);
  });
  clickTests("Rectangle with context.rotate():", [
    { x : 20, y : 5, expected : null },
    { x : 0, y : 25, expected : "hit" },
    { x : 49, y : 49, expected : null },
    { x : 0, y : 51, expected : "hit" },
  ]);

  // Rectangle with context.scale()
  createHitRegion(function() {
    context.scale(2, 2);
    context.rect(0, 0, 50, 50);
  });
  clickTests("Rectangle with context.scale():", [
    { x : 1, y : 1, expected : "hit" },
    { x : 49, y : 49, expected : "hit" },
    { x : 51, y : 51, expected : "hit" },
    { x : 99, y : 99, expected : "hit" },
  ]);

  // Non rectangle (star) with context.translate()
  createHitRegion(function() {
    context.translate(50, 50);
    drawStar();
  });
  clickTests("Non rectangle (star) with context.translate():", [
    { x : 26, y : 23, expected : null },
    { x : 82, y : 65, expected : null },
    { x : 51, y : 21, expected : "hit" },
    { x : 74, y : 49, expected : "hit" },
    { x : 49, y : 88, expected : null },
    { x : 13, y : 65, expected : null },
    { x : 66, y : 76, expected : "hit" },
    { x : 76, y : 23, expected : null },
    { x : 38, y : 76, expected : "hit" },
    { x : 28, y : 47, expected : "hit" },
  ]);

  // Non rectangle (star) with context.rotate()
  createHitRegion(function() {
    context.translate(50, 50);
    context.rotate(Math.PI * 0.25);
    drawStar();
  });
  clickTests("Non rectangle (star) with context.rotate():", [
    { x : 26, y : 23, expected : "hit" },
    { x : 82, y : 65, expected : null },
    { x : 51, y : 21, expected : null },
    { x : 74, y : 49, expected : null },
    { x : 49, y : 88, expected : null },
    { x : 13, y : 65, expected : null },
    { x : 66, y : 76, expected : null },
    { x : 76, y : 23, expected : "hit" },
    { x : 38, y : 76, expected : "hit" },
    { x : 28, y : 47, expected : null },
  ]);

  // Non rectangle (star) with context.scale()
  createHitRegion(function() {
    context.translate(25, 25);
    context.scale(0.5, 0.5);
    drawStar();
  });
  clickTests("Non rectangle (star) with context.scale():", [
    { x : 28, y : 13, expected : "hit" },
    { x : 38, y : 24, expected : "hit" },
    { x : 34, y : 38, expected : "hit" },
    { x : 13, y : 12, expected : null },
    { x : 36, y : 12, expected : null },
    { x : 40, y : 33, expected : null },
    { x : 9, y : 31, expected : null },
    { x : 18, y : 41, expected : "hit" },
    { x : 12, y : 25, expected : "hit" },
    { x : 25, y : 42, expected : null },
  ]);

  for (var i = 0; i < testSet.length; i++) {
    var test = testSet[i];
    window.region = test.expected;
    assert_equals(region, test.actual);
  }

}, 'Canvas Hit Regions: transform test');
</script>
</body>