003.xhtml (2227B)
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>dropEffect matches effectAllowed for link drag and drop</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 23 div:nth-child(2) { 24 background-color: green; 25 } 26 27 div:nth-child(3) { 28 background-color: teal; 29 } 30 </style> 31 </head> 32 <body> 33 <p> 34 Drag these links. Each has a different effectAllowed. 35 </p> 36 <p> 37 <a id="copy-drag" href="data:text/plain,copy" ondragstart="event.dataTransfer.effectAllowed = 'copy'">Copy Link</a> 38 <a id="move-drag" href="data:text/plain,move" ondragstart="event.dataTransfer.effectAllowed = 'move'">Move Link</a> 39 <a id="link-drag" href="data:text/plain,link" ondragstart="event.dataTransfer.effectAllowed = 'link'">Link Link</a> 40 </p> 41 <p> 42 Drop targets for each effect: 43 </p> 44 <p> 45 <div id="copy-drop" ondragover="onDragOver(event, 'copy')">copy</div> 46 <div id="move-drop" ondragover="onDragOver(event, 'move')">move</div> 47 <div id="link-drop" ondragover="onDragOver(event, 'link')">link</div> 48 </p> 49 </body> 50 <script> 51 function onDragOver(event, effect) { 52 event.preventDefault(); 53 event.dataTransfer.dropEffect = effect; 54 } 55 56 async function test() { 57 await new Promise(loaded => window.addEventListener("load", loaded)); 58 59 for (const effect of ['copy', 'move', 'link']) { 60 const dragLink = document.getElementById(effect + '-drag'); 61 const dropDiv = document.getElementById(effect + '-drop'); 62 63 dragDropTest( 64 dragLink, dropDiv, dropEffectOnDropCallBack, 65 'dropEffect should match effectAllowed on drop for ' + effect); 66 } 67 } 68 test(); 69 </script> 70 </html>