002.xhtml (3017B)
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>Text input selection drag and drop: allowed effects 12 'copy','move','link'</title> 13 <style type="text/css"> 14 div { 15 display: inline-block; 16 vertical-align: top; 17 background-color: olive; 18 color: white; 19 padding: 20px; 20 width: 100px; 21 height: 100px; 22 } 23 div:nth-child(2) { 24 background-color: green; 25 } 26 div:nth-child(3) { 27 background-color: teal; 28 } 29 </style> 30 </head> 31 <body> 32 <p> 33 Drag the text from these input fields. Each has a different effectAllowed. 34 </p> 35 <p> 36 <input id="copy-drag" value="Copy me" 37 ondragstart="event.dataTransfer.effectAllowed = 'copy'" /> 38 <input id="move-drag" value="Move me" 39 ondragstart="event.dataTransfer.effectAllowed = 'move'" /> 40 <input id="link-drag" value="Link me" 41 ondragstart="event.dataTransfer.effectAllowed = 'link'" /> 42 </p> 43 <p> 44 Drop targets for each effect: 45 </p> 46 <p> 47 <div id="copy-drop" ondragover="onDragOver(event, 'copy')">copy</div> 48 <div id="move-drop" ondragover="onDragOver(event, 'move')">move</div> 49 <div id="link-drop" ondragover="onDragOver(event, 'link')">link</div> 50 </p> 51 </body> 52 <script> 53 function onDragOver(event, effect) { 54 event.preventDefault(); 55 event.dataTransfer.dropEffect = effect; 56 } 57 58 async function test() { 59 await new Promise(loaded => window.addEventListener("load", loaded)); 60 61 for (const effect of ['copy', 'move', 'link']) { 62 // Run tests sequentially due to text selection requirements. 63 promise_test(async (t) => { 64 const dragInput = document.getElementById(effect + '-drag'); 65 const dropDiv = document.getElementById(effect + '-drop'); 66 67 // Select the text before drag 68 dragInput.select(); 69 dragInput.focus(); 70 71 await new Promise(async (resolve, reject) => { 72 dropDiv.addEventListener('drop', t.step_func(( 73 event) => { 74 try { 75 dropEffectOnDropCallBack(event); 76 resolve(); 77 } catch (e) { 78 reject(e); 79 } 80 })); 81 try { 82 let actions = new test_driver.Actions(); 83 actions = movePointerToCenter(dragInput, /*iframe=*/ 84 null, actions) 85 .pointerDown(); 86 actions = movePointerToCenter(dropDiv, /*iframe=*/ 87 null, actions) 88 .pointerUp(); 89 await actions.send(); 90 } catch (e) { 91 reject(e); 92 } 93 }); 94 }); 95 } 96 } 97 test(); 98 </script> 99 </html>