006.xhtml (3068B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="support/dropEffect-test-helper.js"></script> 9 <script src="../resources/test-helper.js"></script> 10 <head> 11 <title>Canvas drag and drop: allowed effects 'copy','move','link'</title> 12 <style type="text/css"> 13 div { 14 display: inline-block; 15 vertical-align: top; 16 background-color: olive; 17 color: white; 18 padding: 20px; 19 width: 100px; 20 height: 100px; 21 } 22 div:nth-child(2) { 23 background-color: green; 24 } 25 div:nth-child(3) { 26 background-color: teal; 27 } 28 </style> 29 </head> 30 <body> 31 <p> 32 Drag these canvas elements. Each has a different effectAllowed and color 33 pattern. 34 </p> 35 <p> 36 <canvas id="copy-drag" width="100" height="100" draggable="true" 37 ondragstart="event.dataTransfer.effectAllowed = 'copy'">Copy 38 Canvas</canvas> 39 <canvas id="move-drag" width="100" height="100" draggable="true" 40 ondragstart="event.dataTransfer.effectAllowed = 'move'">Move 41 Canvas</canvas> 42 <canvas id="link-drag" width="100" height="100" draggable="true" 43 ondragstart="event.dataTransfer.effectAllowed = 'link'">Link 44 Canvas</canvas> 45 </p> 46 <p> 47 Drop targets for each effect: 48 </p> 49 <p> 50 <div id="copy-drop" ondragover="onDragOver(event, 'copy')">copy</div> 51 <div id="move-drop" ondragover="onDragOver(event, 'move')">move</div> 52 <div id="link-drop" ondragover="onDragOver(event, 'link')">link</div> 53 </p> 54 </body> 55 <script> 56 // Draw patterns on the three canvases with different colors 57 function drawCanvasPattern(canvasId, primaryColor, secondaryColor) { 58 var canvas = document.getElementById(canvasId), 59 c = canvas.getContext('2d'); 60 for (var x = 0; x != 50; x++) { 61 c.fillStyle = (x % 2 == 0) ? primaryColor : secondaryColor; 62 c.beginPath(); 63 c.moveTo(x, x); 64 c.lineTo(100 - x, x); 65 c.lineTo(100 - x, 100 - x); 66 c.lineTo(x, 100 - x); 67 c.closePath(); 68 c.fill(); 69 } 70 } 71 72 // Draw the three canvas patterns 73 drawCanvasPattern('copy-drag', 'olive', 'white'); 74 drawCanvasPattern('move-drag', 'green', 'white'); 75 drawCanvasPattern('link-drag', 'teal', 'white'); 76 77 function onDragOver(event, effect) { 78 event.preventDefault(); 79 event.dataTransfer.dropEffect = effect; 80 } 81 82 async function test() { 83 await new Promise(loaded => window.addEventListener("load", loaded)); 84 85 for (const effect of ['copy', 'move', 'link']) { 86 const dragCanvas = document.getElementById(effect + '-drag'); 87 const dropDiv = document.getElementById(effect + '-drop'); 88 89 dragDropTest( 90 dragCanvas, dropDiv, dropEffectOnDropCallBack, 91 'dropEffect should match effectAllowed on drop for ' + effect); 92 } 93 } 94 test(); 95 </script> 96 </html>