<!DOCTYPE html>
<title>HitRegion devicePixelRatio 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"></canvas>
<style>

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

</style>
<script>

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

createFace(context);

coroutine(function*() {
  setup({ explicit_done : true, explicit_timeout : true });

  generate_tests(assert_equals, [
    [ 'devicePixelRatio', devicePixelRatio, 1 ],
    [ 'face', yield clickOrTouch(100, 100), 'face' ],
    [ 'nose', yield clickOrTouch(200, 200), 'nose' ],
    [ 'mouth', yield clickOrTouch(127, 242), 'mouth' ],
    [ 'eye', yield clickOrTouch(150, 125), 'eye' ],
    [ 'eye', yield clickOrTouch(250, 125), 'eye' ],
    [ 'face', yield clickOrTouch(200, 120), 'face' ],
    [ 'null', yield clickOrTouch(20, 10), null ]
  ]);

  if (window.eventSender)
    eventSender.setPageZoomFactor(2.0);

  generate_tests(assert_equals, [
    [ 'devicePixelRatio', devicePixelRatio, 2 ],
    [ 'face', yield clickOrTouch(200, 200), 'face' ],
    [ 'nose', yield clickOrTouch(400, 400), 'nose' ],
    [ 'mouth', yield clickOrTouch(254, 484), 'mouth' ],
    [ 'eye', yield clickOrTouch(300, 250), 'eye' ],
    [ 'eye', yield clickOrTouch(500, 250), 'eye' ],
    [ 'face', yield clickOrTouch(400, 240), 'face' ],
    [ 'null', yield clickOrTouch(40, 20), null ]
  ]);

  done();
});

</script>