third_party/WebKit/LayoutTests/fast/events/dropzone-002.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
  30     runTest();
  31 }
  32
  33 function changeDropZone()
  34 {
  35     dropTarget.setAttribute("webkitdropzone", " StRinG:tExT/pLaIn sTrING:TeXt/UrI-lIsT " + dropEffectElem.options[dropEffectElem.selectedIndex].value);
  36 }
  37
  38 function printDropEvent(e)
  39 {
  40     chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
  41     debug("Received drop event when chosenDropEffect is " + chosenDropEffect);
  42 }
  43
  44 function runTest()
  45 {
  46     if (!window.eventSender)
  47         return;
  48
  49     if (window.testRunner)
  50         testRunner.dumpAsText();
  51
  52     var startX = dragMe.offsetLeft + 10;
  53     var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
  54     var endX = dropTarget.offsetLeft + 10;
  55     var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2
  56
  57     var numEffects = dropEffectElem.options.length;
  58
  59     for (var j = 0; j < numEffects; ++j) {
  60         dropEffectElem.options[j].selected = true;
  61         changeDropZone();
  62
  63         eventSender.mouseMoveTo(startX, startY);
  64         eventSender.mouseDown();
  65         eventSender.leapForward(100);
  66         eventSender.mouseMoveTo(endX, endY);
  67         eventSender.mouseUp();
  68     }
  69
  70     var testContainer = document.getElementById("test-container");
  71     if (testContainer)
  72         document.body.removeChild(testContainer);
  73     debug('<br /><span class="pass">TEST COMPLETE</span>');
  74 }
  75 </script>
  76 <script src="resources/dropzone.js"></script>
  77 </head>
  78 <body>
  79 <p id="description"></p>
  80 <div id="test-container">
  81 <div id="dropTarget">Drop the image onto me.<br/><br/>
  82 <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
  83 <option value="copy">Copy</option>
  84 <option value="move">Move</option>
  85 <option value="link">Link</option>
  86 <option value="dummy">Nonexistent (Dummy) Effect should be converted to copy</option>
  87 </select>
  88 </div>
  89 <hr/>
  90 <p>Items that can be dragged to the drop target:</p>
  91 <img id="dragMe" src="resources/greenbox.png">
  92 <hr/>
  93 </div>
  94 <div id="console"></div>
  95 <script>
  96 description("This test checks that drag-and-drop support works with images.<br/>");
  97 </script>
  98 </body>
  99 </html>