third_party/WebKit/LayoutTests/http/tests/filesystem/input-display.html

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