001.xhtml (2243B)
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 is correctly set when it matches effectAllowed</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 31 </style> 32 </head> 33 <body> 34 <p> 35 Drag these boxes. Each box has a different effectAllowed. 36 </p> 37 <p> 38 <div id="copy-drag" draggable="true" 39 ondragstart="event.dataTransfer.effectAllowed = 'copy'">copy</div> 40 <div id="move-drag" draggable="true" 41 ondragstart="event.dataTransfer.effectAllowed = 'move'">move</div> 42 <div id="link-drag" draggable="true" 43 ondragstart="event.dataTransfer.effectAllowed = 'link'">link</div> 44 </p> 45 <p> 46 Drop on these boxes. Each box has a different dropEffect. 47 </p> 48 <p> 49 <div id="copy-drop" ondragover="onDragOver(event, 'copy')">copy</div> 50 <div id="move-drop" ondragover="onDragOver(event, 'move')">move</div> 51 <div id="link-drop" ondragover="onDragOver(event, 'link')">link</div> 52 </p> 53 </body> 54 <script> 55 function onDragOver(event, effectAllowed) { 56 event.preventDefault(); 57 event.dataTransfer.dropEffect = effectAllowed; 58 } 59 60 async function test() { 61 await new Promise(loaded => window.addEventListener("load", loaded)); 62 63 for (const effect of ['copy', 'move', 'link']) { 64 const dragDiv = document.getElementById(effect + '-drag'); 65 const dropDiv = document.getElementById(effect + '-drop'); 66 dragDropTest( 67 dragDiv, dropDiv, dropEffectOnDropCallBack, 68 'dropEffect should match effectAllowed on drop for ' + effect); 69 } 70 } 71 test(); 72 </script> 73 </html>