events-cross-document-suite-HELPER-1.html (9624B)
1 <!DOCTYPE html> 2 <title>drag & drop - event sequence for cross-document drag</title> 3 <style type="text/css"> 4 /* use margins instead of padding to make sure the body begins at the top of the page */ 5 html, body { 6 margin: 0; 7 } 8 body { 9 padding: 116px 8px 8px; 10 } 11 #testhere div { 12 height: 100px; 13 width: 100px; 14 position: absolute; 15 top: 8px; 16 } 17 #orange { 18 background-color: orange; 19 left: 8px; 20 } 21 #fuchsia { 22 background-color: fuchsia; 23 left: 158px; 24 } 25 </style> 26 27 <script> 28 parent.setup(function () {},{explicit_done:true,explicit_timeout:true}); 29 window.onload = function () { 30 var orange = document.querySelector('#orange') 31 var fuchsia = document.querySelector('#fuchsia') 32 var body = document.body; 33 34 orange.ondragstart = function (e) { 35 parent.events.push('doc1.orange.ondragstart'); 36 e.dataTransfer.effectAllowed = 'all'; 37 e.dataTransfer.setData('Text', 'foo'); 38 }; 39 orange.ondrag = function () { parent.events.push('doc1.orange.ondrag'); }; 40 orange.ondragenter = function () { parent.events.push('doc1.orange.ondragenter'); }; 41 orange.ondragover = function () { parent.events.push('doc1.orange.ondragover'); }; 42 orange.ondrop = function () { parent.events.push('doc1.orange.ondrop'); return false; }; 43 orange.ondragend = function () { parent.events.push('doc1.orange.ondragend'); setTimeout(finish,100); }; 44 orange.onmousedown = function () { parent.events.push('doc1.orange.onmousedown'); }; 45 orange.onmouseup = function () { parent.events.push('doc1.orange.onmouseup'); }; 46 47 /* Events for the fuchsia box */ 48 fuchsia.ondragstart = function () { parent.events.push('doc1.pink.ondragstart'); }; 49 fuchsia.ondrag = function () { parent.events.push('doc1.pink.ondrag'); }; 50 fuchsia.ondragenter = function () { parent.events.push('doc1.pink.ondragenter'); }; 51 fuchsia.ondragover = function () { parent.events.push('doc1.pink.ondragover'); }; 52 fuchsia.ondrop = function () { parent.events.push('doc1.pink.ondrop'); return false; }; 53 fuchsia.ondragend = function () { parent.events.push('doc1.pink.ondragend'); }; 54 fuchsia.onmousedown = function () { parent.events.push('doc1.pink.onmousedown'); }; 55 fuchsia.onmouseup = function () { parent.events.push('doc1.pink.onmouseup'); }; 56 57 /* Events for the page body */ 58 body.ondragstart = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragstart': 'doc1.bubble.ondragstart' ); }; 59 body.ondrag = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrag': 'doc1.bubble.ondrag' ); }; 60 body.ondragenter = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragenter': 'doc1.bubble.ondragenter' ); }; 61 body.ondragover = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragover': 'doc1.bubble.ondragover' ); }; 62 body.ondrop = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrop': 'doc1.bubble.ondrop' ); }; 63 body.ondragend = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragend': 'doc1.bubble.ondragend' ); }; 64 body.onmousedown = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmousedown': 'doc1.bubble.onmousedown' ); }; 65 body.onmouseup = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmouseup': 'doc1.bubble.onmouseup' ); }; 66 67 function finish(e) { 68 var i, evindex; 69 var events = parent.events.join('-'); 70 /* 71 Normalise; reduce repeating event sequences to only 2 occurrences. 72 This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat. 73 Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating. 74 */ 75 //spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target 76 //repeats while drag is over orange or fuchsia or the body 77 events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.body\.ondragover){3,}/g,'$1$1'); 78 events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.body\.ondragover){3,}/g,'$1$1'); 79 //repeats while dragging over yellow 80 events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.yellow\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1'); 81 //repeats while dragging over blue 82 events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.blue\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1'); 83 //non-spec-compliant repeats while dragging over orange 84 events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.orange\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1'); 85 //non-spec-compliant repeats while dragging over fuchsia 86 events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.pink\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1'); 87 events = events.split(/-/g); 88 89 parent.test(function () { 90 parent.assert_array_equals(events, 91 92 ['doc1.orange.onmousedown', //mouse down 93 'doc1.bubble.onmousedown', 94 95 'doc1.orange.ondragstart', //dragging begins 96 'doc1.bubble.ondragstart', 97 98 'doc1.orange.ondrag', //mouse is over orange 99 'doc1.bubble.ondrag', 100 'doc1.orange.ondragenter', //not cancelled 101 'doc1.bubble.ondragenter', 102 'doc1.body.ondragenter', //so body becomes current target, and the event fires there as well 103 'doc1.body.ondragover', 104 105 'doc1.orange.ondrag', //start repeating (some over orange, some over body) 106 'doc1.bubble.ondrag', 107 'doc1.body.ondragover', 108 'doc1.orange.ondrag', //...twice to make sure it actually repeats 109 'doc1.bubble.ondrag', 110 'doc1.body.ondragover', //end repeating 111 112 'doc1.orange.ondrag', //mouse moves over pink 113 'doc1.bubble.ondrag', 114 'doc1.pink.ondragenter', //not cancelled 115 'doc1.bubble.ondragenter', 116 'doc1.body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again 117 118 'doc1.orange.ondrag', //start repeating (some over pink, some over body) 119 'doc1.bubble.ondrag', 120 'doc1.body.ondragover', 121 'doc1.orange.ondrag', //...twice to make sure it actually repeats 122 'doc1.bubble.ondrag', 123 'doc1.body.ondragover', //end repeating 124 125 'doc1.orange.ondrag', //mouse moves over second frame 126 'doc1.bubble.ondrag', 127 'doc2.body.ondragenter', //not cancelled 128 'doc2.body.ondragenter', //so it fires again and sets body as current target 129 'doc2.body.ondragover', 130 131 'doc1.orange.ondrag', //start repeating (over second body) 132 'doc1.bubble.ondrag', 133 'doc2.body.ondragover', 134 'doc1.orange.ondrag', //...twice to make sure it actually repeats 135 'doc1.bubble.ondrag', 136 'doc2.body.ondragover', //end repeating 137 138 'doc1.orange.ondrag', //mouse moves over yellow 139 'doc1.bubble.ondrag', 140 'doc2.yellow.ondragenter', 141 'doc2.bubble.ondragenter', 142 'doc2.yellow.ondragover', 143 'doc2.bubble.ondragover', 144 145 'doc1.orange.ondrag', //start repeating (over yellow) 146 'doc1.bubble.ondrag', 147 'doc2.yellow.ondragover', 148 'doc2.bubble.ondragover', 149 'doc1.orange.ondrag', //...twice to make sure it actually repeats 150 'doc1.bubble.ondrag', 151 'doc2.yellow.ondragover', 152 'doc2.bubble.ondragover', //end repeating 153 154 'doc1.orange.ondrag', //mouse moves over body 155 'doc1.bubble.ondrag', 156 'doc2.body.ondragenter', //not cancelled 157 'doc2.body.ondragenter', //so it fires again and sets body as current target 158 'doc2.body.ondragover', 159 160 'doc1.orange.ondrag', //start repeating (over body) 161 'doc1.bubble.ondrag', 162 'doc2.body.ondragover', 163 'doc1.orange.ondrag', //...twice to make sure it actually repeats 164 'doc1.bubble.ondrag', 165 'doc2.body.ondragover', //end repeating 166 167 'doc1.orange.ondrag', //mouse moves over blue 168 'doc1.bubble.ondrag', 169 'doc2.blue.ondragenter', 170 'doc2.bubble.ondragenter', 171 'doc2.blue.ondragover', 172 'doc2.bubble.ondragover', 173 174 'doc1.orange.ondrag', //start repeating (over blue) 175 'doc1.bubble.ondrag', 176 'doc2.blue.ondragover', 177 'doc2.bubble.ondragover', 178 'doc1.orange.ondrag', //...twice to make sure it actually repeats 179 'doc1.bubble.ondrag', 180 'doc2.blue.ondragover', 181 'doc2.bubble.ondragover', //end repeating 182 183 'doc2.blue.ondrop', //release 184 'doc2.bubble.ondrop', 185 'doc1.orange.ondragend', 186 'doc1.bubble.ondragend'] 187 188 ); 189 }, 'Overall sequence'); 190 var div = parent.document.createElement("div"); 191 div.setAttribute("id", "log"); 192 parent.document.documentElement.appendChild(div); 193 parent.done(); 194 document.body.appendChild(parent.document.querySelector("div")); 195 } 196 }; 197 </script> 198 199 <div id="testhere"> 200 <div draggable='true' id='orange'></div> 201 <div id='fuchsia'></div> 202 </div> 203 204 <p>If you have already clicked on this page, reload it.</p> 205 <p>Use your pointing device to slowly drag the orange square over the pink square, then the grey 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). Fail if no new text appears below.</p>