LayoutTests/fast/events/drag-and-drop-fire-drag-dragover.html

   1 <html>
   2 <head>
   3 <script src="../js/resources/js-test-pre.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 #console { height: 250px; overflow:scroll }
   9 </style>
  10 <script>
  11     var dragMe;
  12     var dropTarget;
  13     var consoleElm;
  14     var event;
  15
  16     var ALLOWED_EFFECTS = 'none';
  17     var DROP_EFFECT = 'copy';
  18
  19     var lastDragOrDragOverEventFired = null;
  20     var didDragEnterTarget = false;
  21
  22     var DRAG_EVENT = "drag";
  23     var DRAGOVER_EVENT = "dragover";
  24
  25     window.onload = function()
  26     {
  27         dragMe = document.getElementById("dragMe");
  28         dropTarget = document.getElementById("dropTarget");
  29         consoleElm = document.getElementById("console");
  30
  31         if (!dragMe || !dropTarget || !consoleElm)
  32             return;
  33
  34         dragMe.ondragstart = dragStart;
  35         dragMe.ondragend = dragEnd;
  36         dragMe.ondrag = dragOverWithRespectToSource;
  37
  38         dropTarget.ondragenter = dragEntered;
  39         dropTarget.ondragleave = dragLeft;
  40         dropTarget.ondragover = dragOver;
  41         dropTarget.ondrop = drop;
  42
  43         runTest();
  44     }
  45
  46     function dragStart(e)
  47     {
  48         event = e;
  49         e.dataTransfer.effectAllowed = ALLOWED_EFFECTS;
  50         e.dataTransfer.setData('Text', e.target.textContent);
  51     }
  52
  53     function dragEnd(e)
  54     {
  55         return;
  56     }
  57
  58     function dragEntered(e)
  59     {
  60         didDragEnterTarget = true;
  61         dragEnteredAndUpdated(e);
  62     }
  63
  64     function dragLeft(e)
  65     {
  66         didDragEnterTarget = false;
  67         cancelDrag(e);
  68     }
  69
  70     function dragOverWithRespectToSource(e)
  71     {
  72         checkDragState(e);
  73         lastDragOrDragOverEventFired = DRAG_EVENT;
  74         cancelDrag(e);
  75     }
  76
  77     function dragOver(e)
  78     {
  79         checkDragState(e);
  80         lastDragOrDragOverEventFired = DRAGOVER_EVENT;
  81         dragEnteredAndUpdated(e);
  82     }
  83
  84     function dragEnteredAndUpdated(e)
  85     {
  86         event = e;
  87         e.dataTransfer.dropEffect = DROP_EFFECT;
  88         cancelDrag(e);
  89     }
  90
  91     function drop(e)
  92     {
  93         cancelDrag(e);
  94     }
  95
  96     function cancelDrag(e)
  97     {
  98         if (e.preventDefault)
  99             e.preventDefault();
 100         else {
 101             // Assume this script is executing within Internet Explorer
 102             e.returnValue = false;
 103         }
 104     }
 105
 106     function checkDragState(e)
 107     {
 108         event = e;
 109         if (didDragEnterTarget && e.type == "drag" && lastDragOrDragOverEventFired == DRAG_EVENT)
 110             testFailed('dragover should have fired after drag. Instead, drag fired again.');
 111         else if (e.type == "dragover") {
 112             if (lastDragOrDragOverEventFired == DRAG_EVENT)
 113                 testPassed('drag fired before dragover.');
 114             else
 115                 testFailed('drag should have fired before dragover. Instead, dragover fired first.');
 116         }
 117     }
 118
 119     function runTest()
 120     {
 121         if (!window.eventSender)
 122             return;
 123
 124         if (window.layoutTestController)
 125             layoutTestController.dumpAsText();
 126
 127         var startX = dragMe.offsetLeft + 10;
 128         var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
 129         var endX = dropTarget.offsetLeft + 10;
 130         var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
 131
 132         eventSender.mouseMoveTo(startX, startY);
 133         eventSender.mouseDown();
 134         eventSender.leapForward(100);
 135         eventSender.mouseMoveTo(endX, endY);
 136         eventSender.mouseUp();
 137
 138         var testContainer = document.getElementById("test-container");
 139         if (testContainer)
 140             document.body.removeChild(testContainer);
 141         debug('<br /><span class="pass">TEST COMPLETE</span>');
 142     }
 143 </script>
 144 </head>
 145 <body>
 146     <p id="description"></p>
 147     <div id="test-container">
 148         <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code>
 149         <br/><br/>
 150         <div id="dropTarget">Drop the red square onto me.</div>
 151         <hr/>
 152         <p>Items that can be dragged to the drop target:</p>
 153         <div id="dragMe" draggable="true">Square</div>
 154         <hr/>
 155     </div>
 156     <div id="console"></div>
 157     <script>
 158         description("This test checks that the event handlers ondrag and ondragover fire in that order, " +
 159         "as per http://www.whatwg.org/specs/web-apps/current-work/#current-drag-operation.");
 160     </script>
 161 </body>
 162 </html>