LayoutTests/fast/events/drag-dataTransferItemList-file-handling.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #drag {
   6     border: 1px solid black;
   7     height: 200px;
   8     width: 200px;
   9 }
  10 #drop {
  11     border: 1px solid black;
  12     height: 200px;
  13     width: 200px;
  14 }
  15 </style>
  16 <script>
  17 function assertEq(left, right)
  18 {
  19     if (left === right)
  20         log('PASS: ' + left + " === " + right);
  21     else
  22         log('FAIL: ' + left + " (of type " + (typeof left) + ") !== " + right + " (of type " + (typeof right) + ")");
  23 }
  24 function log(str)
  25 {
  26     var result = document.getElementById('result');
  27     result.appendChild(document.createTextNode(str));
  28     result.appendChild(document.createElement('br'));
  29 }
  30
  31 var testFile;
  32 function dragstart(event)
  33 {
  34     event.dataTransfer.items.add(testFile);
  35 }
  36
  37 function dragenter(event)
  38 {
  39     event.preventDefault();
  40 }
  41
  42 function dragover(event)
  43 {
  44     event.preventDefault();
  45 }
  46
  47 function drop(event)
  48 {
  49     assertEq(1, event.dataTransfer.items.length);
  50     assertEq('file', event.dataTransfer.items[0].kind);
  51     assertEq('text/plain', event.dataTransfer.items[0].type);
  52     layoutTestController.notifyDone();
  53 }
  54
  55 function runTest()
  56 {
  57     // First, we need to generate a File object to use for our tests.
  58     eventSender.beginDragWithFiles(['test.txt']);
  59     var inputElement = document.getElementsByTagName('input')[0];
  60     eventSender.mouseMoveTo(inputElement.offsetLeft + inputElement.offsetWidth / 2,
  61                             inputElement.offsetTop + inputElement.offsetHeight / 2);
  62     eventSender.mouseUp();
  63     testFile = inputElement.files[0];
  64
  65     // Now run the actual test.
  66     var dragElement = document.getElementById('drag');
  67     eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
  68                             dragElement.offsetTop + dragElement.offsetHeight / 2);
  69     eventSender.mouseDown();
  70     eventSender.leapForward(100);
  71     var dropElement = document.getElementById('drop');
  72     eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
  73                             dropElement.offsetTop + dropElement.offsetHeight / 2);
  74     eventSender.mouseUp();
  75 }
  76
  77 window.onload = function()
  78 {
  79     if (!window.layoutTestController)
  80         return;
  81     layoutTestController.dumpAsText();
  82     layoutTestController.waitUntilDone();
  83
  84     runTest();
  85 }
  86 </script>
  87 </head>
  88 <body>
  89 <p>To manually test, select a text file for the file input element, and then drag 'Drag Me' to 'Drop Here' and drop.  Several lines that say 'PASS' should appear below.
  90 <input type="file"></input>
  91 <div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div>
  92 <div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div>
  93 </div>
  94 <div id="result"></div>
  95 </body>
  96 </html>