dragevent-manual.html (3173B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>HTML Test: DragEvent</title> 6 <link rel='author' title='Intel' href='http://www.intel.com'> 7 <link rel='help' href='https://html.spec.whatwg.org/multipage/#dndevents'> 8 <script src='/resources/testharness.js'></script> 9 <script src='/resources/testharnessreport.js'></script> 10 <style> 11 #drop { 12 border: 2px solid black; 13 width: 100px; 14 height: 100px; 15 padding: 20px; 16 } 17 #drag { 18 color: blue; 19 margin: 20px auto; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div>Select and drag the blue text to rectangular box.</div> 26 <div id='drag' draggable>blue text</div> 27 <div id='drop' dropzone='copy string:text/plain'></div> 28 <div id='log'> </div> 29 30 <script> 31 var drag, element; 32 var Events = ['ondragstart', 'ondrag', 'ondragover', 'ondragenter', 'ondragleave', 'ondrop', 'ondragend']; 33 34 setup(function() { 35 drag = document.querySelector('#drag'); 36 element = document.createElement('div'); 37 }, {explicit_done: true, explicit_timeout: true}); 38 39 for(var i=0; i< Events.length; i++) { 40 test(function() { 41 assert_true(Events[i] in document, 'Check ' + Events[i] + ' in document'); 42 }, 'Check ' + Events[i] + ' in document'); 43 } 44 45 test(function() { 46 assert_inherits(element, 'ondragstart', 'Check if have ondragstart attribute'); 47 }, 'Check if have ondragstart attribute'); 48 49 test(function() { 50 assert_inherits(element, 'ondrag', 'Check if have ondrag attribute'); 51 }, 'Check if have ondrag attribute'); 52 53 test(function() { 54 assert_inherits(element, 'ondragenter', 'Check if have ondragenter attribute'); 55 }, 'Check if have ondragenter attribute'); 56 57 test(function() { 58 assert_inherits(element, 'ondragleave', 'Check if have dragleave attribute'); 59 }, 'Check if have dragleave attribute'); 60 61 test(function() { 62 assert_inherits(element, 'ondragover', 'Check if have dragover attribute'); 63 }, 'Check if have dragover attribute'); 64 65 test(function() { 66 assert_inherits(element, 'ondrop', 'Check if have ondrop attribute'); 67 }, 'Check if have ondrop attribute'); 68 69 test(function() { 70 assert_inherits(element, 'ondragend', 'Check if have ondragend attribute'); 71 }, 'Check if have ondragend attribute'); 72 73 on_event(drag, 'dragstart', function(event) { 74 test(function() { 75 assert_equals(event.type, 'dragstart', 'Check if the dragstart event captured'); 76 }, 'Check if the dragstart event captured'); 77 }); 78 79 on_event(drag, 'dragenter', function(event) { 80 test(function() { 81 assert_equals(event.type, 'dragenter', 'Check if the dragenter event captured'); 82 }, 'Check if the dragenter event captured'); 83 }); 84 85 on_event(drag, 'dragend', function(event) { 86 test(function() { 87 assert_equals(event.type, 'dragend', 'Check if the dragend event captured'); 88 }, 'Check if the dragend event captured'); 89 done(); 90 }); 91 92 93 </script> 94 </body> 95 </html>