| <!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> |
