LayoutTests/fast/events/moving-text-should-fire-drop-and-dragend-events-2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <p>This tests dragging text within the same contenteditable element. To manually test, move the target below to the destination.
   5 You should see source:dragstart, destination:drop, and source:dragend in the log.</p>
   6 <div id="source" contenteditable><span>Drag and drop this <span id="target">target</span> from here</div>
   7 <div id="destination" contenteditable><span>to here, the_destination.</span></div>
   8 <pre id="log">
   9 Log:
  10 </pre>
  11 <script>
  12
  13 var log = document.getElementById('log');
  14 var source = document.getElementById('source');
  15 var destination = document.getElementById('destination');
  16 var eventLogs = [];
  17
  18 function attachLogger(element) {
  19     var logger = function(event) {
  20         var text = element.id + ':' + event.type;
  21         eventLogs.push(text);
  22         log.innerHTML += text + '\n';
  23     }
  24     element.addEventListener('dragstart', logger, false);
  25     element.addEventListener('dragend', logger, false);
  26     element.addEventListener('drop', logger, false);
  27 }
  28
  29 attachLogger(source);
  30 attachLogger(destination);
  31
  32 if (window.eventSender) {
  33     layoutTestController.dumpAsText();
  34
  35     source.focus();
  36     var target = document.getElementById('target');
  37     getSelection().selectAllChildren(target);
  38
  39     function mouseMoveToCenterOfElement(element) {
  40         eventSender.mouseMoveTo(element.offsetLeft + element.offsetWidth / 2, element.offsetTop + element.offsetHeight / 2);
  41     }
  42
  43     eventSender.dragMode = true;
  44     mouseMoveToCenterOfElement(target);
  45     eventSender.mouseDown();
  46     eventSender.leapForward(500);
  47     mouseMoveToCenterOfElement(destination);
  48     eventSender.mouseUp();
  49
  50     source.style.display = 'none';
  51     destination.style.display = 'none';
  52
  53     log.innerHTML += '\n' + (eventLogs.join('') == ['source:dragstart', 'destination:drop', 'source:dragend'].join('') ? 'PASS' : 'FAIL');
  54 }
  55
  56 </script>
  57 </body>
  58 </html>