LayoutTests/editing/pasteboard/drag-drop-list.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <div contenteditable="true" id="editable">
   5 <li id="li" style="border: 1px solid black;"><span><div id="contents" style="border: 1px solid red;">DropAboveMe</div></span></li>
   6 <div><span id="drag">DragMe</span></div>
   7 </div>
   8
   9 <ul id="console"></ul>
  10 <script src="../../resources/dump-as-markup.js"></script>
  11 <script>
  12 function log(str) {
  13     var li = document.createElement("li");
  14     li.appendChild(document.createTextNode(str));
  15     var console = document.getElementById("console");
  16     console.appendChild(li);
  17 }
  18
  19 function runTest() {
  20     if (!window.testRunner)
  21         log("This can only be run automatically using the layout test engine.  To run it manually, drag 'Dragme' and drop it above 'DropAboveMe'.");
  22
  23     window.testRunner.waitUntilDone();
  24
  25     var drag = document.getElementById("drag");
  26     var dragx = drag.offsetParent.offsetLeft + drag.offsetLeft + drag.offsetWidth / 2;
  27     var dragy = drag.offsetParent.offsetTop +  drag.offsetTop + drag.offsetHeight / 2;
  28
  29     eventSender.mouseMoveTo(dragx, dragy);
  30     eventSender.mouseDown();
  31     eventSender.mouseUp();
  32     eventSender.mouseDown();
  33     eventSender.mouseUp();
  34     // Leap forward so that the next mouseDown doesn't trigger a triple click.
  35     eventSender.leapForward(1200);
  36
  37     eventSender.mouseDown();
  38     // Leap forward so that the mouse movement causes a drag instead of selection creation.
  39     eventSender.leapForward(500);
  40
  41     var li = document.getElementById("li");
  42
  43     var dropx = li.offsetLeft + li.offsetWidth / 2;
  44     var dropy = li.offsetTop + 15;
  45
  46     eventSender.mouseMoveTo(dropx, dropy);
  47     eventSender.mouseUp();
  48
  49     window.testRunner.notifyDone();
  50     Markup.description("This tests dropping content onto a list items content when the content is wrapped in a span.  You should see 'DropAboveMe DragMe'. "
  51         + "See <rdar://4861080>, but note that the expected behavior is different than what's described there, since the rendering bug <rdar://4907469> has been fixed.");
  52     Markup.dump(editable);
  53 }
  54
  55 runTest();
  56 </script>
  57 </body>
  58 </html>