events-file-suite-manual.html (8170B)
1 <!DOCTYPE html> 2 <title>drag & drop - event sequence for file drops</title> 3 <script type="text/javascript" src="/resources/testharness.js"></script> 4 <script type="text/javascript" src="/resources/testharnessreport.js"></script> 5 <style type="text/css"> 6 /* use margins instead of padding to make sure the body begins at the top of the page */ 7 html, body { 8 margin: 0; 9 } 10 body { 11 padding: 116px 8px 8px; 12 } 13 body::before { 14 height: 108px; 15 width: 108px; 16 position: absolute; 17 top: 0px; 18 left: 0px; 19 content: ""; 20 background-color: orange; 21 } 22 #testhere div { 23 height: 100px; 24 width: 100px; 25 position: absolute; 26 top: 8px; 27 } 28 #fuchsia { 29 background-color: fuchsia; 30 left: 158px; 31 } 32 #yellow { 33 background-color: yellow; 34 left: 308px; 35 } 36 #blue { 37 background-color: navy; 38 left: 458px; 39 } 40 </style> 41 42 <script> 43 setup(function () {},{explicit_done:true,explicit_timeout:true}); 44 window.onload = function () { 45 var fuchsia = document.querySelector('#fuchsia') 46 var yellow = document.querySelector('#yellow') 47 var blue = document.querySelector('#blue') 48 var body = document.body; 49 50 var events = new Array 51 52 /* Events for the fuchsia box */ 53 fuchsia.ondragstart = function () { events.push('pink.ondragstart'); }; 54 fuchsia.ondrag = function () { events.push('pink.ondrag'); }; 55 fuchsia.ondragenter = function () { events.push('pink.ondragenter'); }; 56 fuchsia.ondragover = function () { events.push('pink.ondragover'); }; 57 fuchsia.ondragleave = function () { events.push('pink.ondragleave'); }; 58 fuchsia.ondrop = function () { events.push('pink.ondrop'); return false; }; 59 fuchsia.ondragend = function () { events.push('pink.ondragend'); }; 60 fuchsia.onmousedown = function () { events.push('pink.onmousedown'); }; 61 fuchsia.onmouseup = function () { events.push('pink.onmouseup'); }; 62 63 /* Events for the fuchsia box */ 64 yellow.ondragstart = function () { events.push('yellow.ondragstart'); }; 65 yellow.ondrag = function () { events.push('yellow.ondrag'); }; 66 yellow.ondragenter = function () { events.push('yellow.ondragenter'); return false; }; 67 yellow.ondragover = function () { events.push('yellow.ondragover'); return false; }; 68 yellow.ondragleave = function () { events.push('yellow.ondragleave'); }; 69 yellow.ondrop = function () { events.push('yellow.ondrop'); return false; }; 70 yellow.ondragend = function () { events.push('yellow.ondragend'); }; 71 yellow.onmousedown = function () { events.push('yellow.onmousedown'); }; 72 yellow.onmouseup = function () { events.push('yellow.onmouseup'); }; 73 74 /* Events for the blue box (droppable) */ 75 blue.ondragstart = function () { events.push('blue.ondragstart'); }; 76 blue.ondrag = function () { events.push('blue.ondrag'); }; 77 blue.ondragenter = function () { events.push('blue.ondragenter'); return false; }; 78 blue.ondragover = function () { events.push('blue.ondragover'); return false; }; 79 blue.ondragleave = function () { events.push('blue.ondragleave'); }; 80 blue.ondrop = function () { events.push('blue.ondrop'); return false; }; 81 blue.ondragend = function () { events.push('blue.ondragend'); }; 82 blue.onmousedown = function () { events.push('blue.onmousedown'); }; 83 blue.onmouseup = function () { events.push('blue.onmouseup'); }; 84 85 /* Events for the page body */ 86 body.ondragstart = function (e) { events.push( ( e.target == body ) ? 'body.ondragstart': 'bubble.ondragstart' ); }; 87 body.ondrag = function (e) { events.push( ( e.target == body ) ? 'body.ondrag': 'bubble.ondrag' ); }; 88 body.ondragenter = function (e) { events.push( ( e.target == body ) ? 'body.ondragenter': 'bubble.ondragenter' ); }; 89 body.ondragover = function (e) { events.push( ( e.target == body ) ? 'body.ondragover': 'bubble.ondragover' ); }; 90 body.ondragleave = function (e) { events.push( ( e.target == body ) ? 'body.ondragleave': 'bubble.ondragleave' ); }; 91 body.ondrop = function (e) { events.push( ( e.target == body ) ? 'body.ondrop': 'bubble.ondrop' ); setTimeout(finish,200); }; 92 body.ondragend = function (e) { events.push( ( e.target == body ) ? 'body.ondragend': 'bubble.ondragend' ); }; 93 body.onmousedown = function (e) { events.push( ( e.target == body ) ? 'body.onmousedown': 'bubble.onmousedown' ); }; 94 body.onmouseup = function (e) { events.push( ( e.target == body ) ? 'body.onmouseup': 'bubble.onmouseup' ); }; 95 96 function finish(e) { 97 var i, evindex; 98 events = events.join('-'); 99 /* 100 Normalise; reduce repeating event sequences to only 2 occurrences. 101 This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat. 102 Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating. 103 */ 104 //spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target 105 //repeats while drag is over fuchsia or the body 106 events = events.replace(/(-body\.ondragover){3,}/g,'$1$1'); 107 //repeats while dragging over yellow 108 events = events.replace(/(-yellow\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); 109 //repeats while dragging over blue 110 events = events.replace(/(-blue\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); 111 //non-spec-compliant repeats while dragging over fuchsia 112 events = events.replace(/(-pink\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); 113 events = events.split(/-/g); 114 115 test(function () { 116 assert_array_equals(events, 117 118 [/* 1 */ 'body.ondragenter', //mouse moves over body, which does not cancel event 119 /* 2 */ 'body.ondragenter', //so it fires again and sets body as current target 120 121 /* 3 */ 'body.ondragover', //start repeating over body 122 /* 4 */ 'body.ondragover', //...twice to make sure it actually repeats 123 124 /* 5 */ 'pink.ondragenter', //mouse moves over pink - not cancelled 125 /* 6 */ 'bubble.ondragenter', 126 127 /* 7 */ 'body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again 128 /* 8 */ 'body.ondragover', //...twice to make sure it actually repeats 129 130 /* 9 */ 'yellow.ondragenter', //mouse moves over yellow 131 /* 10 */ 'bubble.ondragenter', 132 /* 11 */ 'body.ondragleave', 133 134 /* 12 */ 'yellow.ondragover', //start repeating (over yellow) 135 /* 13 */ 'bubble.ondragover', 136 /* 14 */ 'yellow.ondragover', //...twice to make sure it actually repeats 137 /* 15 */ 'bubble.ondragover', //end repeating 138 139 /* 16 */ 'body.ondragenter', //mouse moves over body, not cancelled 140 /* 17 */ 'body.ondragenter', //so it fires again and sets body as current target 141 /* 18 */ 'yellow.ondragleave', 142 /* 19 */ 'bubble.ondragleave', 143 144 /* 20 */ 'body.ondragover', //start repeating (over body) 145 /* 21 */ 'body.ondragover', //...twice to make sure it actually repeats 146 147 /* 22 */ 'blue.ondragenter', //mouse moves over blue 148 /* 23 */ 'bubble.ondragenter', 149 /* 24 */ 'body.ondragleave', 150 151 /* 25 */ 'blue.ondragover', //start repeating (over blue) 152 /* 26 */ 'bubble.ondragover', 153 /* 27 */ 'blue.ondragover', //...twice to make sure it actually repeats 154 /* 28 */ 'bubble.ondragover', 155 156 /* 29 */ 'blue.ondrop', //release 157 /* 30 */ 'bubble.ondrop'] 158 159 ); 160 }, 'Overall sequence'); 161 162 done(); 163 } 164 }; 165 </script> 166 167 <div id="testhere"> 168 <div id='fuchsia'></div> 169 <div id='yellow'></div> 170 <div id='blue'></div> 171 </div> 172 173 <p>If you have already clicked on this page, reload it.</p> 174 <p>Use your pointing device to slowly drag a file from your system's file manager, over the orange square (ensure that this is the first part of the page that you drag the file over, not an otherwise blank part of the page), then the pink square, then the yellow square, then the blue square, and release it over the blue square (make sure the mouse remains over each square for at least 1 second, and over the gaps between squares for at least 1 second). If a prompt appears, accept it. Fail if no new text appears below.</p> 175 176 <div id="log"></div>