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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6 #drag {
   7     border: 1px solid black;
   8     height: 200px;
   9     width: 200px;
  10 }
  11 #drop {
  12     border: 1px solid black;
  13     height: 200px;
  14     width: 200px;
  15 }
  16 </style>
  17 <script>
  18 var testFile;
  19 var testItem;
  20 function dragstart(event)
  21 {
  22     testItem = event.dataTransfer.items.add(testFile);
  23     shouldBeEqualToString('testItem.kind', 'file');
  24     shouldBeEqualToString('testItem.type', 'text/plain');
  25 }
  26
  27 function dragenter(event)
  28 {
  29     event.preventDefault();
  30 }
  31
  32 function dragover(event)
  33 {
  34     event.preventDefault();
  35 }
  36
  37 var testItems;
  38 function drop(event)
  39 {
  40     testItems = event.dataTransfer.items;
  41     shouldBe('testItems.length', '1');
  42     shouldBeNull('testItems.add(testFile)'); // Read-only.
  43     shouldBe('testItems.length', '1');
  44     shouldBeEqualToString('testItems[0].kind', 'file');
  45     shouldBeEqualToString('testItems[0].type', 'text/plain');
  46     finishJSTest();
  47 }
  48
  49 function runTest()
  50 {
  51     if (!window.testRunner)
  52         return;
  53
  54     // First, we need to generate a File object to use for our tests.
  55     eventSender.beginDragWithFiles(['test.txt']);
  56     var inputElement = document.getElementsByTagName('input')[0];
  57     eventSender.mouseMoveTo(inputElement.offsetLeft + inputElement.offsetWidth / 2,
  58                             inputElement.offsetTop + inputElement.offsetHeight / 2);
  59     eventSender.mouseUp();
  60     testFile = inputElement.files[0];
  61
  62     // Now run the actual test.
  63     var dragElement = document.getElementById('drag');
  64     eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
  65                             dragElement.offsetTop + dragElement.offsetHeight / 2);
  66     eventSender.mouseDown();
  67     eventSender.leapForward(100);
  68     var dropElement = document.getElementById('drop');
  69     eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
  70                             dropElement.offsetTop + dropElement.offsetHeight / 2);
  71     eventSender.mouseUp();
  72 }
  73
  74 </script>
  75 </head>
  76 <body>
  77 <p>To manually test, select a text file for the file input element, and then drag 'Drag Me' to 'Drop Here' and drop.
  78 <input type="file"></input>
  79 <div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div>
  80 <div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div>
  81 </div>
  82 <div id="console"></div>
  83 <script>
  84 description("Tests DataTransferItemList file handling");
  85 window.jsTestIsAsync = true;
  86
  87 window.onload = runTest;
  88 </script>
  89 </body>
  90 </html>