| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>This tests dragging text within the same contenteditable element. To manually test, move the target below to the destination. |
| You should see source:dragstart, destination:drop, and source:dragend in the log.</p> |
| <div id="source" contenteditable><span>Drag and drop this <span id="target">target</span> from here</div> |
| <div id="destination" contenteditable><span>to here, the_destination.</span></div> |
| <pre id="log"> |
| Log: |
| </pre> |
| <script> |
| |
| var log = document.getElementById('log'); |
| var source = document.getElementById('source'); |
| var destination = document.getElementById('destination'); |
| var eventLogs = []; |
| |
| function attachLogger(element) { |
| var logger = function(event) { |
| var text = element.id + ':' + event.type; |
| eventLogs.push(text); |
| log.innerHTML += text + '\n'; |
| } |
| element.addEventListener('dragstart', logger, false); |
| element.addEventListener('dragend', logger, false); |
| element.addEventListener('drop', logger, false); |
| } |
| |
| attachLogger(source); |
| attachLogger(destination); |
| |
| if (window.eventSender) { |
| testRunner.dumpAsText(); |
| |
| source.focus(); |
| var target = document.getElementById('target'); |
| getSelection().selectAllChildren(target); |
| |
| function mouseMoveToCenterOfElement(element) { |
| eventSender.mouseMoveTo(element.offsetLeft + element.offsetWidth / 2, element.offsetTop + element.offsetHeight / 2); |
| } |
| |
| eventSender.dragMode = true; |
| mouseMoveToCenterOfElement(target); |
| eventSender.mouseDown(); |
| eventSender.leapForward(500); |
| mouseMoveToCenterOfElement(destination); |
| eventSender.mouseUp(); |
| |
| source.style.display = 'none'; |
| destination.style.display = 'none'; |
| |
| log.innerHTML += '\n' + (eventLogs.join('') == ['source:dragstart', 'destination:drop', 'source:dragend'].join('') ? 'PASS' : 'FAIL'); |
| } |
| |
| </script> |
| </body> |
| </html> |
