ManualTests/drag-with-div-or-image-as-data-image.html

   1 <html>
   2     <head>
   3         <title>Test for WebKit bug 24735: Poor setDragImage support on Windows</title>
   4         <style type="text/css">
   5
   6             .draggable {
   7                 -webkit-user-drag: element;
   8                 -webkit-user-select: none;
   9             }
  10
  11             #linkToUseAsImage {
  12                 background-color: silver;
  13             }
  14
  15             #divToUseAsImage {
  16                 background-color: pink;
  17             }
  18
  19         </style>
  20
  21         <script type="text/javascript">
  22             function dragDivAndSeeImageDragged()
  23             {
  24                 event.dataTransfer.setDragImage(document.getElementById("imgToUseAsImage"), event.pageX, event.pageY);
  25             }
  26
  27             function dragImageAndSeeDivDragged()
  28             {
  29                 event.dataTransfer.setDragImage(document.getElementById("divToUseAsImage"), event.pageX, event.pageY);
  30             }
  31         </script>
  32     </head>
  33     <body >
  34         <h3>Test for <a href='https://bugs.webkit.org/show_bug.cgi?id=24735'>WebKit bug 24735</a>: Poor setDragImage support on Windows</h3>
  35
  36         <p>Instructions: </p>
  37         <p>When you drag the first div, the image under the cursor should be of the second image. </p>
  38         <p>When you drag the first image, the image under the cursor should be of the second div. </p>
  39
  40         <br />
  41         <br />
  42
  43         <div class="draggable" ondragstart="dragDivAndSeeImageDragged()"> Drag me, I am a div! (first div)</div>\r
  44         <br />\r
  45         <br />\r
  46         <img src="resources/webkit-background.png" class="draggable" ondragstart="dragImageAndSeeDivDragged()" />\r
  47         <br />\r
  48         <br />\r
  49         <img src="resources/drag-image.png" id="imgToUseAsImage" />\r
  50         <br />\r
  51         <br />\r
  52         <div id="divToUseAsImage"> When a drag is started on the image, this is the div that is used as the drag image! (second div)</div>\r
  53
  54     </body>
  55 </html>