003.html (1982B)
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 from iframe: dropping block element onto canvas</title> 10 <style type="text/css"> 11 iframe 12 {width:150px; 13 height:150px; 14 border-style:none;} 15 </style> 16 <script> 17 function paint(color) 18 {var canvas = document.querySelector('canvas'), 19 c = canvas.getContext('2d'); 20 c.fillStyle = color; 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 <p><iframe src="003-1.xhtml">Green box</iframe></p> 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 await new Promise(loaded => window.addEventListener("load", loaded)); 42 const iframe = document.querySelector('iframe'); 43 const innerDoc = iframe.contentDocument || iframe.contentWindow.document; 44 const div = innerDoc.querySelector('div'); 45 const canvas = document.querySelector('canvas'); 46 function onDropCallBack(event) { 47 paint(event.dataTransfer.getData('text/plain')); 48 let style = window.getComputedStyle(canvas); 49 let currentColor = "rgba(0, 0, 0, 0)"; 50 assert_equals(style.getPropertyValue("background-color"), currentColor); 51 return true; 52 } 53 54 dragDropTest(iframe, canvas, onDropCallBack, 'Dragging the canvas to the bottom iframe should turn it green'); 55 } 56 test(); 57 </script> 58 </body> 59 </html>