LayoutTests/editing/pasteboard/file-input-files-access.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../fast/js/resources/js-test-pre.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="console"></div>
   9 <script>
  10 description("Tests for multi-file drag onto file input elements for https://bugs.webkit.org/show_bug.cgi?id=25862");
  11
  12 var fileInput = document.createElement("input");
  13 fileInput.type = 'file';
  14 fileInput.style.width = "100%"; // So that any manual testing will show full file names
  15 // Important that we put this at the top of the doc so that logging does not cause it to go out of view (where it can't be dragged to)
  16 document.body.insertBefore(fileInput, document.body.firstChild);
  17
  18 function moveMouseToCenterOfElement(element)
  19 {
  20     var centerX = element.offsetLeft + element.offsetWidth / 2;
  21     var centerY = element.offsetTop + element.offsetHeight / 2;
  22     eventSender.mouseMoveTo(centerX, centerY);
  23 }
  24
  25 function dragFilesOntoInput(files) {
  26     fileInput.value = ""; // Clear the <input>
  27
  28     eventSender.beginDragWithFiles(files);
  29     moveMouseToCenterOfElement(fileInput);
  30     eventSender.mouseUp();
  31 }
  32
  33 function fileListShouldBe(fileListString, filesArray)
  34 {
  35     shouldBe(fileListString + ".length", "" + filesArray.length);
  36     for (var x = 0; x < filesArray.length; x++) {
  37         var fileValueString = fileListString + "[" + x + "]";
  38         shouldBeEqualToString(fileValueString + ".name", filesArray[x]['name']);
  39         shouldBeEqualToString(fileValueString + ".type", filesArray[x]['type']);
  40         shouldBe(fileValueString + ".size", "" + filesArray[x]['size']);
  41     }
  42 }
  43
  44 function filesShouldBe(filesArray)
  45 {
  46     fileListShouldBe("fileInput.files", filesArray);
  47 }
  48
  49 function draggingPathsShouldResultInFiles(pathsArray, filesArray)
  50 {
  51     dragFilesOntoInput(pathsArray);
  52     // WebKit seems to always take the first file in the dragged list as .value:
  53     shouldBeEqualToString("fileInput.value", filesArray[0] ? "C:\\fakepath\\" + filesArray[0]['name'] : '');
  54     filesShouldBe(filesArray);
  55 }
  56
  57 function testDraggingFiles(filesArray)
  58 {
  59     // We could make a way to parse the filename from the path, and then only need to pass
  60     // the path in the filesArray.
  61     var pathsOnly = filesArray.map(function(fileSpec) { return fileSpec['path']; });
  62     draggingPathsShouldResultInFiles(pathsOnly, filesArray);
  63 }
  64
  65 function testOrderedDraggingWithDirectory()
  66 {
  67     var inputType = fileInput.multiple ? "mutli-file" : "single-file";
  68
  69     // Note: The order of selection in the Finder changes the order of file paths in the pasteboard
  70     // thus it's important that we test different orders here as well (at least on the Mac)
  71     debug("Dragging a file and a directory onto a " + inputType + " input control:")
  72     draggingPathsShouldResultInFiles(['resources/apple.gif', 'resources/directory-for-dragging'], []);
  73
  74     debug("FIXME: <input> elements should refuse drags including directories: https://bugs.webkit.org/show_bug.cgi?id=25879.  The page is given File objects corresponding to directories, but form submission will fail.");
  75
  76     debug("Dragging a directory and a file onto a "  + inputType + " input control:")
  77     draggingPathsShouldResultInFiles(['resources/directory-for-dragging', 'resources/apple.gif'], []);
  78 }
  79
  80 function runTest()
  81 {
  82     debug("Dragging a single (non-existant) file to a file input control:");
  83     testDraggingFiles([
  84         { 'path': 'DRTFakeFile', 'name' : 'DRTFakeFile', 'size' : 0, 'type' : '' }
  85     ]);
  86
  87     debug("Dragging a real file to a file input control:");
  88     testDraggingFiles([
  89         { 'path': 'resources/apple.gif', 'name' : 'apple.gif', 'size' : 1476, 'type' : 'image/gif' }
  90     ]);
  91
  92     // Directory dragging behavior is covered by
  93     // https://bugs.webkit.org/show_bug.cgi?id=25852
  94     debug("Dragging a directory onto an file input control:");
  95     draggingPathsShouldResultInFiles(['resources/directory-for-dragging'], []);
  96
  97     debug("Dragging two files to a single-file input control:")
  98     draggingPathsShouldResultInFiles(['resources/apple.gif', 'resources/mozilla.gif'], []);
  99
 100     testOrderedDraggingWithDirectory();
 101
 102     fileInput.multiple = true;
 103
 104     debug("Dragging three files to a multi-file input control:");
 105     testDraggingFiles([
 106         { 'path': 'resources/apple.gif', 'name' : 'apple.gif', 'size' : 1476, 'type' : 'image/gif' },
 107         { 'path': 'resources/mozilla.gif', 'name' : 'mozilla.gif', 'size' : 2593, 'type' : 'image/gif' },
 108         { 'path': 'resources/file.invalidext', 'name' : 'file.invalidext', 'size' : 10, 'type' : '' }
 109     ]);
 110
 111     testOrderedDraggingWithDirectory();
 112
 113     debug("Dragging to a disabled file input control:");
 114     fileInput.disabled = true;
 115     draggingPathsShouldResultInFiles(['DRTFakeFile'], []);
 116
 117     // Clean up after ourselves
 118     fileInput.parentNode.removeChild(fileInput);
 119
 120     testRunner.notifyDone();
 121 }
 122
 123 var successfullyParsed = true;
 124
 125 if (window.eventSender) {
 126     runTest();
 127 } else {
 128     testFailed("This test is not interactive, please run using run-webkit-tests");
 129 }
 130
 131 </script>
 132 <script src="../../fast/js/resources/js-test-post.js"></script>
 133 </body>
 134 </html>