third_party/WebKit/LayoutTests/fast/events/dropzone-005.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 <style>
   5 #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
   6 #dropTarget {width: 256px; height: 256px; border: 1px dashed}
   7 #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
   8 </style>
   9 <script>
  10 var dragMe;
  11 var dropTarget;
  12 var dropEffectElem;
  13 var consoleElm;
  14 var event;
  15
  16 window.onload = function()
  17 {
  18     dragMe = document.getElementById("dragMe");
  19     dropTarget = document.getElementById("dropTarget");
  20     dropEffectElem = document.getElementById("dropEffect");
  21     consoleElm = document.getElementById("console");
  22
  23     if (!dragMe || !dropTarget || !dropEffectElem || !consoleElm)
  24         return;
  25
  26     dropEffectElem.onclick = changeDropZone;
  27     changeDropZone();
  28     dropTarget.ondrop = drop;
  29     dragMe.ondragend = function()
  30     {
  31         debug("Received dragend event");
  32     }
  33
  34     runTest();
  35 }
  36
  37 function changeDropZone()
  38 {
  39     dropTarget.setAttribute("webkitdropzone", " StRinG:text/plain sTrING:url " + dropEffectElem.options[dropEffectElem.selectedIndex].value);
  40 }
  41
  42 function printDropEvent(e)
  43 {
  44     chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
  45     debug("Received drop event when chosenDropEffect is " + chosenDropEffect);
  46 }
  47
  48 function runTest()
  49 {
  50     if (!window.eventSender)
  51         return;
  52
  53     if (window.testRunner)
  54         testRunner.dumpAsText();
  55
  56     var startX = dragMe.offsetLeft + 10;
  57     var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
  58     var endX = dropTarget.offsetLeft + 10;
  59     var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2
  60
  61     var numEffects = dropEffectElem.options.length;
  62
  63     for (var j = 0; j < numEffects; ++j) {
  64         dropEffectElem.options[j].selected = true;
  65         changeDropZone();
  66
  67         eventSender.mouseMoveTo(startX, startY);
  68         eventSender.mouseDown();
  69         eventSender.leapForward(100);
  70         eventSender.mouseMoveTo(endX, endY);
  71         eventSender.mouseUp();
  72     }
  73
  74     var testContainer = document.getElementById("test-container");
  75     if (testContainer)
  76         document.body.removeChild(testContainer);
  77     debug('<br /><span class="pass">TEST COMPLETE</span>');
  78 }
  79 </script>
  80 <script src="resources/dropzone.js"></script>
  81 </head>
  82 <body>
  83 <p id="description"></p>
  84 <div id="test-container">
  85 <div id="dropTarget">Drop the image onto me.<br/><br/>
  86 <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
  87 <option value="copy">Copy</option>
  88 <option value="move">Move</option>
  89 <option value="link">Link</option>
  90 <option value="dummy">Nonexistent (Dummy) Effect should be converted to copy</option>
  91 </select>
  92 </div>
  93 <hr/>
  94 <p>Items that can be dragged to the drop target:</p>
  95 <img id="dragMe" src="resources/greenbox.png">
  96 <hr/>
  97 </div>
  98 <div id="console"></div>
  99 <script>
 100 description("This test checks that dragging an image on to a drop zone doesn't match string:url.<br/>");
 101 </script>
 102 </body>
 103 </html>