| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #drag { |
| border: 1px solid black; |
| height: 200px; |
| width: 200px; |
| } |
| #drop { |
| border: 1px solid black; |
| height: 200px; |
| width: 200px; |
| } |
| </style> |
| <script> |
| function log(str) |
| { |
| var result = document.getElementById('result'); |
| result.appendChild(document.createTextNode(str)); |
| result.appendChild(document.createElement('br')); |
| } |
| function dragstart(event) { |
| event.dataTransfer.setData('text', 'sample'); |
| event.dataTransfer.setData('custom-data', 'hello world'); |
| } |
| function dragenter(event) { |
| event.preventDefault(); |
| } |
| function dragover(event) { |
| event.preventDefault(); |
| } |
| function drop(event) { |
| var failed = false; |
| if (event.dataTransfer.types.indexOf('text/plain') < 0 |
| || event.dataTransfer.types.indexOf('custom-data') < 0) |
| failed = true; |
| if (event.dataTransfer.getData('text') != 'sample' |
| || event.dataTransfer.getData('custom-data') != 'hello world') |
| failed = true; |
| log(failed ? 'FAILURE' : 'SUCCESS'); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| window.onload = function() |
| { |
| if (!window.testRunner) |
| return; |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| |
| var dragElement = document.getElementById('drag'); |
| eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2, |
| dragElement.offsetTop + dragElement.offsetHeight / 2); |
| eventSender.mouseDown(); |
| eventSender.leapForward(100); |
| var dropElement = document.getElementById('drop'); |
| eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2, |
| dropElement.offsetTop + dropElement.offsetHeight / 2); |
| eventSender.mouseUp(); |
| } |
| </script> |
| </head> |
| <body> |
| <p>To manually test, drag 'Drag Me' to 'Drop Here' and drop. The word 'SUCCESS' should appear. |
| <div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div> |
| <div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div> |
| </div> |
| <div id="result"></div> |
| </body> |
| </html> |
