001-manual.xhtml (1774B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Cross-domain canvas data must not populate the dataTransfer</title> 5 <script src="../../resources/crossorigin.sub.js"></script> 6 <style type="text/css"> 7 div { 8 width:105px; 9 min-height:105px; 10 text-align:center; 11 margin-top:20px; 12 padding:10px; 13 border:solid thin navy; 14 } 15 p:first-child { 16 padding-left:12px; 17 } 18 #image { visibility: hidden; } 19 </style> 20 </head> 21 <body> 22 <p> 23 <canvas width="100" height="100" draggable="true">Canvas</canvas> 24 </p> 25 <p>Drag the navy square above to the box below.</p> 26 <div></div> 27 <p><img id="image" alt="" width="100" height="100" /></p> 28 29 <script><![CDATA[ 30 document.getElementsByTagName("img")[0].src = crossOriginUrl("www", "../../resources/100x100-navy.png"); 31 32 window.onload = function() { 33 var canvas = document.getElementsByTagName('canvas')[0], div = document.getElementsByTagName('div')[0], failed = []; 34 var context = canvas.getContext('2d'); 35 var image = document.getElementById('image'); 36 context.drawImage(image, 0, 0); 37 div.ondragover = div.ondragenter = function(e) { 38 e.preventDefault(); 39 e.dataTransfer.dropEffect = 'copy'; 40 }; 41 div.ondrop = canvas.ondragstart = function(e) { 42 if( e.type == 'dragstart' ) { 43 e.dataTransfer.setData('Text', 'dummy text'); 44 e.dataTransfer.dropEffect = 'copy'; 45 } 46 for( var i = 0; i < e.dataTransfer.types.length; i++ ) { 47 if( e.dataTransfer.types[i].match(/image\//) ) { 48 failed[failed.length] = e.dataTransfer.types[i]; 49 } 50 } 51 if( e.type == 'drop' ) { 52 e.preventDefault(); 53 document.getElementsByTagName('p')[1].innerHTML = failed.length ? ( 'FAIL (found ' + failed.join() + ')' ) : 'PASS'; 54 } 55 }; 56 }; 57 ]]></script> 58 </body> 59 </html>