third_party/WebKit/LayoutTests/editing/pasteboard/drag-prioritizes-draggable-container-over-image.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       #draggableContainer {
   6         -webkit-user-drag: element;
   7       }
   8       #draggableContainer img {
   9         -webkit-user-drag: none;
  10       }
  11       #drop {
  12         border: 1px solid black;
  13         height: 200px;
  14         width: 200px;
  15       }
  16     </style>
  17     <script>
  18       function runTest() {
  19         var drag = document.getElementById('drag');
  20         var drop = document.getElementById('drop');
  21
  22         drop.addEventListener('dragenter', onDragEnterOrOver);
  23         drop.addEventListener('dragover', onDragEnterOrOver);
  24         drop.addEventListener('drop', onDrop);
  25
  26         if (!window.testRunner)
  27           return;
  28
  29         testRunner.dumpAsText();
  30         testRunner.waitUntilDone();
  31
  32         var x;
  33         var y;
  34
  35         x = drag.offsetLeft + drag.offsetWidth / 2;
  36         y = drag.offsetTop + drag.offsetHeight / 2;
  37         eventSender.mouseMoveTo(x, y);
  38         eventSender.mouseDown();
  39         eventSender.leapForward(500);
  40         x = drop.offsetLeft + drop.offsetWidth / 2;
  41         y = drop.offsetTop + drop.offsetHeight / 2;
  42         eventSender.mouseMoveTo(x, y);
  43         eventSender.mouseUp();
  44       }
  45
  46       function onDragEnterOrOver(e) {
  47         e.preventDefault();
  48       }
  49
  50       function onDrop() {
  51         var console = document.getElementById('console');
  52         console.appendChild(document.createTextNode('PASS'));
  53         console.appendChild(document.createElement('br'));
  54
  55         if (window.testRunner)
  56           testRunner.notifyDone();
  57       }
  58     </script>
  59   </head>
  60   <body onload="runTest()">
  61     <p>This test verifies that starting a drag on an image inside a
  62     -webkit-user-drag: element container succeeds. To run this test manually,
  63     try dragging the image to the box below. You should see the word "PASS"
  64     appear if it succeeds.</p>
  65     <div id="draggableContainer">
  66       <img id="drag" src="resources/apple.gif">
  67     </div>
  68     <div id="drop"></div>
  69     <div id="console"></div>
  70   </body>
  71 </html>