third_party/WebKit/LayoutTests/fast/files/file-in-input-display.html

   1 <!DOCTYPE html>
   2 <!--
   3 Tests the string displayed when a File created using the File constructor is
   4 used in the FileList of a <input type="file"> element. To run this test
   5 manually, drag the black box over the input field.
   6
   7 Expectation: the file name displayed by the <input> UI should be hello.txt. The
   8 renderer should not crash after the name shows up.
   9 -->
  10
  11 <style>
  12 html {
  13   font: 10px Ahem;
  14   -webkit-font-smoothing: none;
  15 }
  16 #dragSource {
  17   border: 1px solid black;
  18   width: 100px;
  19   height: 100px;
  20   color: black;
  21   margin-bottom: 50px;
  22 }
  23 #inputElement {
  24   width: 100px;
  25   height: 100px;
  26 }
  27 </style>
  28
  29 <div id="dragSource" draggable="true"
  30      title="Drag this box onto the file input below">
  31 </div>
  32
  33 <form action="#">
  34     <p>
  35         <input id="fileInput" type="file" />
  36     </p>
  37 </form>
  38
  39 <script>
  40 if (window.testRunner)
  41     testRunner.waitUntilDone();
  42
  43 // FIXME: dragging will become unnecessary if/when we implement a FileList constructor
  44 var dragSource = document.getElementById('dragSource');
  45 var inputElement = document.getElementById('fileInput');
  46
  47 var outputFileList = null;
  48 dragSource.addEventListener('dragstart', function (event) {
  49     var testFile = new File(['Hello world!'], 'hello.txt');
  50     console.log(event.dataTransfer);
  51     event.dataTransfer.effectAllowed = 'copy';
  52     event.dataTransfer.items.add(testFile);
  53     outputFileList = event.dataTransfer.files;
  54 });
  55
  56 inputElement.addEventListener('dragenter', function (event) {
  57     event.preventDefault();
  58 });
  59 inputElement.addEventListener('dragover', function (event) {
  60     event.preventDefault();
  61 });
  62 inputElement.addEventListener('drop', function (event) {
  63     event.target.files = outputFileList;
  64     if (window.testRunner)
  65         testRunner.notifyDone();
  66 });
  67
  68 function dragSourceToInput() {
  69     var startX = dragSource.offsetLeft + dragSource.offsetWidth / 2;
  70     var startY = dragSource.offsetTop + dragSource.offsetHeight / 2;
  71     var targetX = inputElement.offsetLeft + inputElement.offsetWidth / 2;
  72     var targetY = inputElement.offsetTop + inputElement.offsetHeight / 2;
  73
  74     if (window.eventSender) {
  75         eventSender.dragMode = true;
  76         eventSender.mouseMoveTo(startX, startY);
  77         eventSender.mouseDown();
  78         eventSender.leapForward(250);
  79         eventSender.mouseMoveTo(targetX, targetY);
  80         eventSender.mouseUp();
  81     }
  82 }
  83 dragSourceToInput();
  84 </script>