third_party/WebKit/LayoutTests/http/tests/images/drag-drop-image-filename.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5 if (window.testRunner) {
   6     testRunner.dumpAsText();
   7     testRunner.waitUntilDone();
   8 }
   9
  10 function imageError()
  11 {
  12     console.log("FAIL: test image failed to load.");
  13     if (window.testRunner)
  14         testRunner.notifyDone();
  15 }
  16
  17 function imageLoaded()
  18 {
  19     console.log("Test image loaded.");
  20     if (!window.testRunner)
  21         return;
  22
  23     e = document.getElementById("source");
  24     x = e.offsetLeft + e.offsetWidth / 2;
  25     y = e.offsetTop + e.offsetHeight / 2;
  26
  27     eventSender.mouseMoveTo(x, y);
  28     eventSender.mouseDown();
  29
  30     e = document.getElementById("target");
  31     x = e.offsetLeft + e.offsetWidth / 2;
  32     y = e.offsetTop + e.offsetHeight / 2;
  33
  34     eventSender.leapForward(100);
  35     eventSender.mouseMoveTo(x, y);
  36     eventSender.mouseUp();
  37 }
  38
  39 function dragEnterOrOver(event)
  40 {
  41     event.dataTransfer.dropEffect = "copy";
  42     event.preventDefault();
  43 }
  44
  45 function drop(event)
  46 {
  47     console.log("Drop event fired.");
  48     event.preventDefault();
  49     if (!window.testRunner)
  50         return;
  51     eventSender.dumpFilenameBeingDragged();
  52     testRunner.notifyDone();
  53 }
  54 </script>
  55 <style>
  56 #target { height: 100px; width: 100px; border: 2px solid green; }
  57 </style>
  58 </head>
  59
  60 <body>
  61 <!-- This test requires Content Shell. The drag-dropped image filename extension should be .gif -->
  62 <div id="target" ondragenter="dragEnterOrOver(event)" ondragover="dragEnterOrOver(event)" ondrop="drop(event)"></div>
  63 <img id="source" onerror="imageError(this)" onload="imageLoaded(this)" alt="Will it blend?"
  64   src="http://127.0.0.1:8000/resources/load-and-stall.php?name=drag-drop-test-image.gif&mimeType=application%2Fphp">
  65 </body>
  66 </html>