<!doctype html>
<meta charset="utf-8" />
<!-- This test checks whether we compute pointer coordinates correctly for the
     dragstart, dragend, and drop events issued during drag-and-drop operations.
     This is the easy case. The more interesting situations, which involve
     iframes, are tested in similarly named files. -->
<link rel="stylesheet" href="resources/event-mouse-coordinates.css" />
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/event-mouse-coordinates.js"></script>

<p>
  Please drag the "Drag Me" box into the "Drop Here" box.
</p>

<div class="dragged box" draggable="true">
  Drag Me
</div>

<div class="dropzone box">
  Drop Here
</div>

<script>

promise_test((t) => {
  const dragCenter = elementCenter(document.querySelector('.dragged'));
  const dropCenter = elementCenter(document.querySelector('.dropzone'));
  return runDragTest(t, {
    domRoot: document,
    frameOffset: { x: 0, y: 0 },
    start: { client: dragCenter, page: { x: 250, y: 150 }},
    end: { client: dropCenter, page: { x: 450, y: 350 }},
  });
}, 'Dragging and dropping a DOM node in the top-level frame');

</script>