<!DOCTYPE html>
<html>
<script src="../resources/run-after-layout-and-paint.js"></script>

<style>
  img, canvas { margin: 5px; width: 48% }
</style>

<body style="overflow: hidden">
  <!-- The _blue_ sector of the <img> image should be at 12 o'clock. -->
  <img>
  <!-- The red sector of the <canvas> image should be at 12 o'clock. -->
  <canvas></canvas>
</body>

<script>
if (window.testRunner) {
  // The pixel result will be the drag image. The blue sector if the
  // drag image should be at 12 o'clock.
  testRunner.dumpDragImage();
}

window.onload = function() {
  if (window.testRunner)
    testRunner.waitUntilDone();

  var image = document.querySelector('img');
  image.onload = function() {
    runAfterLayoutAndPaint(drawImagePatternToCanvas);
  };

  image.src = 'resources/red-at-12-oclock-with-color-profile.jpg';
};

function drawImagePatternToCanvas() {
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var pattern = ctx.createPattern(document.querySelector('img'), null);
  var scale = 0.1870;

  ctx.clearRect(0, 0, canvas.width = 300, canvas.height = 300);
  ctx.save();
  ctx.scale(scale, scale);
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale);
  ctx.restore();

  if (window.testRunner)
    runAfterLayoutAndPaint(dragImage);
}

function dragImage() {
  var image = document.querySelector('img');

  if (window.eventSender) {
    var x = image.offsetLeft + image.offsetWidth / 2;
    var y = image.offsetTop + image.offsetHeight / 2;

    eventSender.dragMode = true;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();

    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(x + 100, y + 100);
    eventSender.mouseUp();
  }

  if (window.testRunner)
    setTimeout(function() { testRunner.notifyDone() }, 100);
}

</script>
</html>