<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
function computePoint(selection, target) {
  const x = selection.document.offsetLeft + target.offsetLeft +
      target.offsetWidth / 2;
  const y = selection.document.offsetTop + target.offsetTop +
      target.offsetHeight / 2;
  return {x, y};
}

test(() => {
  if (!window.eventSender) {
    assert_unreached('This test requires eventSender.');
    return;
  }

  assert_selection(
    [
      '<div contenteditable>',
        '<a href="http://dev.chromium.org/"',
          ' title="some title" style="color:orange">^drag me|</a>',
      '</div>',
      '<p>to the box blow:</p>',
      '<div contenteditable id="drop"><br></div>',
    ].join(''),
    selection => {
      const source = selection.document.querySelector('a');
      const sourcePoint = computePoint(selection, source);
      eventSender.mouseMoveTo(sourcePoint.x, sourcePoint.y);
      eventSender.mouseDown();

      const drop = selection.document.getElementById('drop');
      const dropPoint = computePoint(selection, drop);
      eventSender.leapForward(300);
      eventSender.mouseMoveTo(dropPoint.x, dropPoint.y);
      eventSender.mouseUp();
    },
    [
      '<div contenteditable></div>',
      '<p>to the box blow:</p>',
      '<div contenteditable id="drop">',
        '<a href="http://dev.chromium.org/"',
          ' style="color: orange;" title="some title">^drag me|</a>',
      '</div>',
    ].join(''));
}, 'Drag-and-Drop should keep attributes of A');
</script>