testing/web-platform/tests/html/editing/dnd/platform/file-to-system.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Dragging a file to the system</title>
   5     <style type="text/css">
   6 span { display: inline-block; height: 100px; width: 100px; background: orange; }
   7     </style>
   8     <script type="text/javascript">
   9 window.onload = function () {
  10   var drag = document.getElementsByTagName('span')[0];
  11   drag.ondragstart = function (e) {
  12     e.dataTransfer.setData('text','PASS');
  13     e.dataTransfer.effectAllowed = 'copy';
  14     var filein = document.getElementsByTagName('input')[0];
  15     if( !filein.files ) {
  16       document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.';
  17       return;
  18     }
  19     if( !filein.files[0] ) {
  20       document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.';
  21       return;
  22     }
  23     var thefile = filein.files[0];
  24     try {
  25       e.dataTransfer.items.add(thefile);
  26     } catch(err) {
  27       document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file';
  28       e.preventDefault();
  29       return;
  30     }
  31     if( e.dataTransfer.files.length != 1 ) {
  32       document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store';
  33       e.preventDefault();
  34     }
  35   };
  36 };
  37     </script>
  38   </head>
  39   <body>
  40     <div>This test only applies to platforms where dropping a file onto a folder in the system's file manager copies/moves the file to that folder.</div>
  41     <ol>
  42       <li>Open an empty folder in your system's file manager.</li>
  43       <li>Select a non-empty file on your computer using the following input: <input type="file"></li>
  44       <li>Drag the orange square onto the folder in your system's file manager, and release it:<br><span draggable="true"></span></li>
  45       <li>Pass if the file is copied to the folder.</li>
  46     </ol>
  47     <p></p>
  48     <noscript><p>Enable JavaScript and reload</p></noscript>
  49   </body>
  50 </html>