001.html (1739B)
1 <!doctype html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <script src="../resources/test-helper.js"></script> 8 <head> 9 <title>Image drag and drop</title> 10 <style type="text/css"> 11 div[ondragenter] { 12 width: 105px; 13 min-height: 105px; 14 text-align: center; 15 margin-top: 20px; 16 padding: 10px; 17 border: solid thin navy; 18 } 19 p:first-child { 20 padding-left: 12px; 21 } 22 </style> 23 <script> 24 function addImage(event) { 25 var c = document.createElement('img'); 26 c.setAttribute('src', event.dataTransfer.getData('text/uri-list').replace(/\r\n$/, '')); 27 document.querySelector('div').appendChild(c); 28 } 29 </script> 30 </head> 31 <body> 32 <p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'" /></p> 33 <p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> 34 <div ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)"></div> 35 <script> 36 async function test() { 37 await new Promise(loaded => window.addEventListener("load", loaded)); 38 const img = document.querySelector('img'); 39 const div = document.querySelector('div'); 40 41 function onDropCallBack(event) { 42 assert_equals(div.querySelector('img').src, img.src); 43 return true; 44 } 45 46 dragDropTest(img, div, onDropCallBack, 'Dragging the image to the bottom div should copy the image there'); 47 } 48 test(); 49 </script> 50 </body> 51 </html>