002.html (1790B)
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>Drag and drop: dropping block element onto canvas</title> 10 <style type="text/css"> 11 div 12 {width:20px; 13 height:20px; 14 background-color:green;} 15 </style> 16 <script type="application/ecmascript"> 17 function paint(color) 18 {var canvas = document.querySelector('canvas'), 19 c = canvas.getContext('2d'); 20 c.fillStyle = 'green'; 21 c.beginPath(); 22 c.moveTo(0,0); 23 c.lineTo(100,0); 24 c.lineTo(100,100); 25 c.lineTo(0,100); 26 c.closePath(); 27 c.fill();} 28 function start(event) 29 {event.dataTransfer.effectAllowed = 'copy'; 30 event.dataTransfer.setData('text/plain', 'green');} 31 </script> 32 </head> 33 <body onload="paint('gray')"> 34 <div draggable="true" ondragstart="start(event)"></div> 35 <p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> 36 <p> 37 <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false">Canvas</canvas> 38 </p> 39 <script> 40 async function test(){ 41 const canvas = document.querySelector('canvas'); 42 const div = document.querySelector('div'); 43 function onDropCallBack(event) { 44 paint(event.dataTransfer.getData('text/plain')); 45 let style = getComputedStyle(div); 46 let currentColor = "rgb(0, 128, 0)"; 47 assert_equals(style.getPropertyValue("background-color"), currentColor); 48 return true; 49 } 50 51 dragDropTest(div, canvas, onDropCallBack, 'Dragging the canvas to the bottom div should turn it green'); 52 }; 53 test(); 54 </script> 55 </body> 56 </html>