drag-list-item.html | Explore in Territory

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

function dragSelectionToTarget(selection, sourceId, dropId) {
  const sourcePoint = computePoint(selection, sourceId);
  eventSender.mouseMoveTo(sourcePoint.x, sourcePoint.y);
  eventSender.mouseDown();
  eventSender.leapForward(200);

  const dropPoint = computePoint(selection, dropId);
  eventSender.mouseMoveTo(dropPoint.x, dropPoint.y);
  eventSender.mouseUp();
}

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

  assert_selection(
    [
      '<div contenteditable>',
        '<ol id="test">',
          '<li id="one">one</li>',
          '<li id="two">^two|</li>',
          '<li id="three">three</li>',
          '<li id="four">four</li>',
        '</ol>',
      '</div>',
    ].join(''),
    selection => dragSelectionToTarget(selection, 'two', 'four'),
    [
      '<div contenteditable>',
        '<ol id="test">',
          '<li id="one">one</li>',
          '<li id="three">three</li>',
          '<li id="four">four</li>',
          '<li id="two">^two|</li>',
        '</ol>',
      '</div>',
    ].join(''),
    'Move list item two to four');


  assert_selection(
    [
      '<div contenteditable>',
        '<ol id="test">',
          '<li id="one">one</li>',
          '<li id="two">^two</li>',
          '<li id="three">three|</li>',
          '<li id="four">four</li>',
        '</ol>',
      '</div>',
    ].join(''),
    selection => dragSelectionToTarget(selection, 'two', 'four'),
    [
      '<div contenteditable>',
        '<ol id="test">',
          '<li id="one">one</li>',
          '<li id="four">four</li>',
          '<li id="two">^two</li>',
          '<li id="three">three|</li>',
        '</ol>',
      '</div>',
    ].join(''),
    'Move list item two and three to four');
}, 'Drag-and-Drop list item');
</script>
chromium/third_party/blink/web_tests/editing/pasteboard/drag-list-item.html
