001.html (2084B)
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>Canvas drag and drop carrying image as dataURL</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 p:first-child 19 {padding-left:12px;} 20 </style> 21 <script type="application/ecmascript"> 22 function addImage(event) 23 {var c = document.createElement('img'); 24 c.setAttribute('src',event.dataTransfer.getData('text/uri-list')); 25 document.querySelector('div').appendChild(c);} 26 function start(event) 27 {event.dataTransfer.effectAllowed = 'copy'; 28 event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png'));} 29 </script> 30 </head> 31 <body> 32 <p> 33 <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> 34 </p> 35 <p>Drag canvas pattern above to the box below. It should be copied to the box once you drop it there.</p> 36 <div 37 ondragenter="event.preventDefault()" 38 ondragover="return false" 39 /> 40 <script type="application/ecmascript"> 41 var canvas = document.querySelector('canvas'), 42 c = canvas.getContext('2d'); 43 for(var x = 0; x != 50; x++) 44 {c.fillStyle = (x%2 == 0)?'navy':'white'; 45 c.beginPath(); 46 c.moveTo(x,x); 47 c.lineTo(100-x,x); 48 c.lineTo(100-x,100-x); 49 c.lineTo(x,100-x); 50 c.closePath(); 51 c.fill();} 52 async function test() { 53 const canvas = document.querySelector('canvas'); 54 const div = document.querySelector('div'); 55 function onDropCallBack(event) { 56 addImage(event); 57 const img = document.querySelector('img'); 58 assert_equals(img.src, canvas.toDataURL('image/png')); 59 return true; 60 } 61 62 dragDropTest(canvas, div, onDropCallBack, 'Dragging the canvas to the bottom div should turn it green'); 63 } 64 test(); 65 </script> 66 </body> 67 </html>