protectedDragDataTransfer-manual.html (4890B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>HTML Test: drag DataTransfer protected status</title> 6 <link rel='author' title='Nika Layzell' href='mailto:nika@thelayzells.com'> 7 <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 #drag { 12 width: 100px; 13 height: 100px; 14 display: inline-block; 15 color: #fff; 16 background-color: #f00; 17 } 18 #drop { 19 width: 100px; 20 height: 100px; 21 display: inline-block; 22 color: #fff; 23 background-color: #00f; 24 } 25 </style> 26 </head> 27 28 <body> 29 <h3>Instructions</h3> 30 <p> 31 Drag the box labeled "drag" to the box labeled "drop" and release. 32 </p> 33 34 <div id="drag" draggable="true">drag</div> 35 <div id="drop">drop</div> 36 37 <div id="log"> </div> 38 39 <script> 40 var MIME = "text/plain"; 41 42 var drop; 43 setup(function() { 44 drop = document.querySelector("#drop"); 45 }, {explicit_done: true, explicit_timeout: true}); 46 47 var STATUS_PROTECTED = "protected"; 48 var STATUS_READONLY = "readonly"; 49 var STATUS_READWRITE = "readwrite"; 50 var STATUS_DISCONNECTED = "disconnected"; 51 function status(dt) { 52 // Check if we can write to it. 53 try { 54 dt.setData("text/html", "_test"); 55 56 if (dt.getData("text/html") == "_test") { 57 dt.clearData("text/html"); 58 assert_true(!dt.getData("text/html"), "ClearData should work..."); 59 return STATUS_READWRITE; 60 } 61 } catch(e) {} 62 63 // If we can read the data then we're readonly 64 if (dt.getData(MIME)) { 65 return STATUS_READONLY; 66 } 67 68 // If we can see that items exist (and read types) then we're protected 69 if (dt.items.length > 0) { 70 return STATUS_PROTECTED; 71 } 72 73 // Otherwise we've been disconnected. 74 return STATUS_DISCONNECTED; 75 }; 76 77 var drag_dt = null; 78 var over_dt = null; 79 var drop_dt = null; 80 on_event(document.body, "dragstart", function(e) { 81 drag_dt = e.dataTransfer; 82 over_dt = null; 83 drop_dt = null; 84 drag_dt.setData(MIME, "b"); 85 test(function() { 86 assert_equals(status(drag_dt), STATUS_READWRITE, 87 "drag_dt must be readwrite during dragstart"); 88 }, "dragstart event status"); 89 }); 90 on_event(drop, "dragover", function(e) { 91 if (!over_dt) { 92 over_dt = e.dataTransfer; 93 test(function() { 94 assert_equals(status(drag_dt), STATUS_DISCONNECTED, 95 "drag_dt mustbe disconnected during dragover"); 96 assert_equals(status(over_dt), STATUS_PROTECTED, 97 "over_dt mustbe protected during dragover"); 98 }, "dragover event status"); 99 test(function() { 100 assert_not_equals(drag_dt, over_dt, 101 "drag_dt must be a different DataTransfer object than over_dt"); 102 }, "dragover event identity"); 103 } 104 e.preventDefault(); 105 }); 106 on_event(drop, "drop", function(e) { 107 drop_dt = e.dataTransfer; 108 test(function() { 109 assert_equals(status(drag_dt), STATUS_DISCONNECTED, 110 "drag_dt mustbe disconnected during drop"); 111 assert_equals(status(over_dt), STATUS_DISCONNECTED, 112 "over_dt mustbe disconnected during drop"); 113 assert_equals(status(drop_dt), STATUS_READONLY, 114 "drop_dt mustbe readonly during drop"); 115 }, "drop event status"); 116 test(function() { 117 assert_not_equals(drop_dt, over_dt, 118 "drop_dt must be a different DataTransfer object than over_dt"); 119 assert_not_equals(drop_dt, drag_dt, 120 "drop_dt must be a different DataTransfer object than drag_dt"); 121 }, "drop event identity"); 122 test(function() { 123 assert_equals(drop_dt.getData(MIME), "b", 124 "the data should have been persisted"); 125 }, "drop event data"); 126 e.preventDefault(); 127 128 setTimeout(function() { 129 test(function() { 130 assert_equals(status(drag_dt), STATUS_DISCONNECTED, 131 "drag_dt mustbe disconnected after drop"); 132 assert_equals(status(over_dt), STATUS_DISCONNECTED, 133 "over_dt mustbe disconnected after drop"); 134 assert_equals(status(drop_dt), STATUS_DISCONNECTED, 135 "drop_dt mustbe disconnected after drop"); 136 }, "after drop event status"); 137 done(); 138 }, 0); 139 }); 140 </script> 141 </body> 142 </html>