005-manual.html (13062B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Synthetic events with real data store must inherit protection status from real events</title> 5 <style type="text/css"> 6 blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } 7 blockquote + blockquote { background: blue; } 8 blockquote + blockquote + blockquote { background: fuchsia; } 9 blockquote + div { clear: left; } 10 </style> 11 <script type="text/javascript" src="/resources/testharness.js"></script> 12 <script type="text/javascript" src="/resources/testharnessreport.js"></script> 13 <script type="text/javascript"> 14 setup(function () {},{explicit_done:true,explicit_timeout:true}); 15 window.onload = function () { 16 17 var orange = document.getElementsByTagName('blockquote')[0], 18 blue = document.getElementsByTagName('blockquote')[1], 19 fuchsia = document.getElementsByTagName('blockquote')[2], 20 evtdone = {}; 21 22 orange.ondragstart = function (e) { 23 evtdone[e.type] = true; 24 e.dataTransfer.effectAllowed = 'copy'; 25 26 var t = async_test(e.type+' should share its data with the synthetic event'); 27 blue.ondragstart = function (e) { 28 t.step(function() { 29 assert_equals( e.dataTransfer.getData('text'), 'dragstart real data', 'step 1' ); 30 e.dataTransfer.setData('text','dragstart-dragstart synthetic data'); 31 assert_equals( e.dataTransfer.getData('text'), 'dragstart-dragstart synthetic data', 'step 2' ); 32 }); 33 }; 34 t.step(function() { 35 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 36 e.dataTransfer.setData('text','dragstart real data'); //changing in between steps, just to make sure it uses the underlying data store, not a temporary clone 37 blue.dispatchEvent(evt); 38 }); 39 t.done(); 40 41 test(function() { 42 assert_equals( e.dataTransfer.getData('text'), 'dragstart-dragstart synthetic data' ); 43 }, e.type+' should see the data from the synthetic event' ); 44 45 var t2 = async_test(e.type+' should share its protection status with the synthetic event'); 46 blue.ondrag = function (e) { 47 t2.step(function() { 48 e.dataTransfer.setData('text','dragstart-drag synthetic data'); 49 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag synthetic data' ); 50 }); 51 }; 52 t2.step(function() { 53 var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 54 blue.dispatchEvent(evt); 55 }); 56 t2.done(); 57 58 var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); 59 blue.ondrag = function (e) { 60 blue.ondragend = function (e) { 61 t3.step(function() { 62 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag synthetic data', 'step1' ); 63 e.dataTransfer.setData('text','dragstart-drag-dragend synthetic data'); 64 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step2' ); 65 }); 66 }; 67 t3.step(function() { 68 var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); 69 blue.dispatchEvent(evt); 70 }); 71 }; 72 t3.step(function() { 73 var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 74 blue.dispatchEvent(evt); 75 }); 76 t3.done(); 77 78 test(function() { 79 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data' ); 80 }, e.type+' should see the data from the nested synthetic event' ); 81 }; 82 83 blue.ondragenter = blue.ondragover = function (e) { 84 e.preventDefault(); 85 }; 86 orange.ondrag = blue.ondragleave = function (e) { 87 if( evtdone[e.type] ) { return; } 88 evtdone[e.type] = true; 89 var evtype = e.type; 90 91 var t = async_test(e.type+' should share its data with the synthetic event'); 92 blue.ondragstart = function (e) { 93 t.step(function() { 94 assert_true( e.dataTransfer.items.length > 0, 'items.length' ); 95 }); 96 }; 97 t.step(function() { 98 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 99 blue.dispatchEvent(evt); 100 }); 101 t.done(); 102 103 var t2 = async_test(e.type+' should share its protection status with the synthetic event'); 104 blue.ondragstart = function (e) { 105 t2.step(function() { 106 assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); 107 e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); 108 assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); 109 }); 110 }; 111 t2.step(function() { 112 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 113 blue.dispatchEvent(evt); 114 }); 115 t2.done(); 116 117 test(function() { 118 assert_equals( e.dataTransfer.getData('text'), '' ); 119 }, e.type+' protection status should not be modified by the synthetic event' ); 120 121 var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); 122 blue.ondragstart = function (e) { 123 var div = document.createElement('div'); 124 div.ondragstart = function (e) { 125 t3.step(function() { 126 assert_equals( e.dataTransfer.getData('text'), '', 'step1' ); 127 e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); 128 assert_equals( e.dataTransfer.getData('text'), '', 'step2' ); 129 }); 130 }; 131 t3.step(function() { 132 var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); 133 div.dispatchEvent(evt); 134 }); 135 }; 136 t3.step(function() { 137 var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 138 blue.dispatchEvent(evt); 139 }); 140 t3.done(); 141 }; 142 143 fuchsia.ondragenter = fuchsia.ondragover = function (e) { 144 e.preventDefault(); 145 if( evtdone[e.type] ) { return; } 146 evtdone[e.type] = true; 147 var evtype = e.type; 148 149 var t = async_test(e.type+' should share its data with the synthetic event'); 150 blue.ondragstart = function (e) { 151 t.step(function() { 152 assert_true( e.dataTransfer.items.length > 0, 'items.length' ); 153 }); 154 }; 155 t.step(function() { 156 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 157 blue.dispatchEvent(evt); 158 }); 159 t.done(); 160 161 var t2 = async_test(e.type+' should share its protection status with the synthetic event'); 162 blue.ondragstart = function (e) { 163 t2.step(function() { 164 assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); 165 e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); 166 assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); 167 }); 168 }; 169 t2.step(function() { 170 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 171 blue.dispatchEvent(evt); 172 }); 173 t2.done(); 174 175 test(function() { 176 assert_equals( e.dataTransfer.getData('text'), '' ); 177 }, e.type+' protection status should not be modified by the synthetic event' ); 178 179 var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); 180 blue.ondragstart = function (e) { 181 var div = document.createElement('div'); 182 div.ondragstart = function (e) { 183 t3.step(function() { 184 assert_equals( e.dataTransfer.getData('text'), '', 'step1' ); 185 e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); 186 assert_equals( e.dataTransfer.getData('text'), '', 'step2' ); 187 }); 188 }; 189 t3.step(function() { 190 var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); 191 div.dispatchEvent(evt); 192 }); 193 }; 194 t3.step(function() { 195 var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 196 blue.dispatchEvent(evt); 197 }); 198 t3.done(); 199 }; 200 201 fuchsia.ondrop = function (e) { 202 e.preventDefault(); 203 if( evtdone[e.type] ) { return; } 204 evtdone[e.type] = true; 205 var evtype = e.type; 206 207 var t = async_test(e.type+' should share its data with the synthetic event'); 208 blue.ondragstart = function (e) { 209 t.step(function() { 210 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data' ); 211 }); 212 }; 213 t.step(function() { 214 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 215 blue.dispatchEvent(evt); 216 }); 217 t.done(); 218 219 var t2 = async_test(e.type+' should share its protection status with the synthetic event'); 220 blue.ondragstart = function (e) { 221 t2.step(function() { 222 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 1' ); 223 e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); 224 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 2' ); 225 }); 226 }; 227 t2.step(function() { 228 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 229 blue.dispatchEvent(evt); 230 }); 231 t2.done(); 232 233 test(function() { 234 e.dataTransfer.setData('text','drop synthetic data'); 235 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data' ); 236 }, e.type+' protection status should not be modified by the synthetic event' ); 237 238 var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); 239 blue.ondragstart = function (e) { 240 var div = document.createElement('div'); 241 div.ondragstart = function (e) { 242 t3.step(function() { 243 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 1' ); 244 e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); 245 assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 2' ); 246 }); 247 }; 248 t3.step(function() { 249 var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); 250 div.dispatchEvent(evt); 251 }); 252 }; 253 t3.step(function() { 254 var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 255 blue.dispatchEvent(evt); 256 }); 257 t3.done(); 258 }; 259 260 orange.ondragend = function (e) { 261 if( evtdone[e.type] ) { return; } 262 evtdone[e.type] = true; 263 var evtype = e.type; 264 265 var t = async_test(e.type+' should share its data with the synthetic event'); 266 blue.ondragstart = function (e) { 267 t.step(function() { 268 assert_true( e.dataTransfer.items.length > 0, 'items.length' ); 269 }); 270 }; 271 t.step(function() { 272 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 273 blue.dispatchEvent(evt); 274 }); 275 t.done(); 276 277 var t2 = async_test(e.type+' should share its protection status with the synthetic event'); 278 blue.ondragstart = function (e) { 279 t2.step(function() { 280 assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); 281 e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); 282 assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); 283 }); 284 }; 285 t2.step(function() { 286 var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 287 blue.dispatchEvent(evt); 288 }); 289 t2.done(); 290 291 test(function() { 292 assert_equals( e.dataTransfer.getData('text'), '' ); 293 }, e.type+' protection status should not be modified by the synthetic event' ); 294 295 var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); 296 blue.ondragstart = function (e) { 297 var div = document.createElement('div'); 298 div.ondragstart = function (e) { 299 t3.step(function() { 300 assert_equals( e.dataTransfer.getData('text'), '', 'step1' ); 301 e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); 302 assert_equals( e.dataTransfer.getData('text'), '', 'step2' ); 303 }); 304 }; 305 t3.step(function() { 306 var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); 307 div.dispatchEvent(evt); 308 }); 309 }; 310 t3.step(function() { 311 var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 312 blue.dispatchEvent(evt); 313 }); 314 t3.done(); 315 316 test(function() { 317 var failtxt = '- Reload and try again'; 318 assert_true( evtdone.dragstart, 'dragstart event was not tested'+failtxt ); 319 assert_true( evtdone.drag, 'drag event was not tested'+failtxt ); 320 assert_true( evtdone.dragenter, 'dragenter event was not tested'+failtxt ); 321 assert_true( evtdone.dragleave, 'dragleave event was not tested'+failtxt ); 322 assert_true( evtdone.dragover, 'dragover event was not tested'+failtxt ); 323 assert_true( evtdone.drop, 'drop event was not tested'+failtxt ); 324 assert_true( evtdone.dragend, 'dragend event was not tested'+failtxt ); 325 }, 'all event types must now have been tested' ); 326 done(); 327 }; 328 329 }; 330 </script> 331 </head> 332 <body> 333 <p>Drag the orange square over the blue square then the fuchsia square, then release it.</p> 334 <blockquote draggable="true"></blockquote> 335 <blockquote></blockquote> 336 <blockquote></blockquote> 337 <div id="log"></div> 338 <noscript><p>Enable JavaScript and reload</p></noscript> 339 </body> 340 </html>