<!doctype html>
<html>
<body>
<canvas style="position:absolute; top:40px; left:40px" width="200" height="200"></canvas>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
var test = async_test("Test to copy image");
requestAnimationFrame(test.step_func(() => {
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  context.fillStyle = 'red';
  context.fillRect(0, 0, 200, 200);
  requestAnimationFrame(test.step_func(() => {
    testRunner.copyImageThen(50, 50, test.step_func_done((width, height, snapshot) => {
      try {
        assert_equals(width, 200, "The copied image must be 200x200");
        assert_equals(height, 200, "The copied image must be 200x200");
        const topleft = new Uint8Array(snapshot).subarray(0, 4);
        assert_equals(topleft[0], 255, "The copied image's top left must be red. " + JSON.stringify(topleft));
        assert_equals(topleft[1], 0, "The copied image's top left must be red. " + JSON.stringify(topleft));
        assert_equals(topleft[2], 0, "The copied image's top left must be red. " + JSON.stringify(topleft));
        assert_equals(topleft[3], 255, "The copied image's top left must be red. " + JSON.stringify(topleft));
      } catch (e) {
        assert_unreached('' + e);
      }
    }));
  }));
}));
</script>
</body>
</html>