Chromium Code Reviews Chromium Code Reviews
Issue 2441023003:
Align drag feedback for links with draggable="true" to Safari. (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../resources/testharness.js"></script> | |
| 3 <script src="../../resources/testharnessreport.js"></script> | |
| 4 | |
| 5 <style> | |
| 6 .box { | |
| 7 display: block; | |
| 8 border: 1px solid black; | |
| 9 width: 150px; | |
| 10 height: 100px; | |
| 11 margin: 10px; | |
| 12 float: left; | |
| 13 } | |
| 14 .dropzone { | |
| 15 border-style: dashed; | |
| 16 } | |
| 17 article { | |
| 18 visibility: hidden; | |
| 19 position: relative; | |
| 20 overflow: hidden; | |
| 21 } | |
| 22 article.active { | |
| 23 visibility: visible; | |
| 24 } | |
| 25 a { | |
| 26 display: block; | |
| 27 background: yellow; | |
| 28 } | |
| 29 </style> | |
| 30 | |
| 31 <p> | |
| 32 Please attempt to drag the into the "Drop Here" rectangle. No matter whether | |
|
dcheng
2016/10/27 06:37:53
drag the what? =)
pwnall
2016/10/29 00:24:24
Done.
Oops, thanks!
| |
| 33 the attempt was successful or not, click into the "End Test" zone. | |
|
dcheng
2016/10/27 06:37:53
Why do we need the "End Test" zone?
pwnall
2016/10/29 00:24:24
Done.
It is definitely not necessary now that each
| |
| 34 </p> | |
| 35 | |
| 36 <article id="non-draggable-link"> | |
| 37 <a class="dragged box" href="https://www.chromium.org"> | |
| 38 Drag Me | |
| 39 </a> | |
| 40 <div class="dropzone box"> | |
| 41 Drop Here | |
| 42 </div> | |
| 43 <div class="testend box"> | |
| 44 End Test | |
| 45 </div> | |
| 46 </article> | |
| 47 | |
| 48 <article id="draggable-link"> | |
| 49 <a class="dragged box" draggable="true" href="https://www.chromium.org"> | |
| 50 Drag Me | |
| 51 </a> | |
| 52 <div class="dropzone box"> | |
| 53 Drop Here | |
| 54 </div> | |
| 55 <div class="testend box"> | |
| 56 End Test | |
| 57 </div> | |
| 58 </article> | |
| 59 | |
| 60 <article id="draggable-div-with-link"> | |
| 61 <div class="dragged box" draggable="true"> | |
| 62 <a href="https://www.chromium.org"> | |
| 63 Drag the box, not the text | |
| 64 </a> | |
| 65 </div> | |
| 66 <div class="dropzone box"> | |
| 67 Drop Here | |
| 68 </div> | |
| 69 <div class="testend box"> | |
| 70 End Test | |
| 71 </div> | |
| 72 </article> | |
| 73 | |
| 74 <article id="draggable-div-with-dragged-link"> | |
| 75 <div class="box" draggable="true"> | |
| 76 <a class="dragged" href="https://www.chromium.org"> | |
| 77 Drag the text, not the box | |
| 78 </a> | |
| 79 </div> | |
| 80 <div class="dropzone box"> | |
| 81 Drop Here | |
| 82 </div> | |
| 83 <div class="testend box"> | |
| 84 End Test | |
| 85 </div> | |
| 86 </article> | |
| 87 | |
| 88 <script> | |
| 89 | |
| 90 function mouseMoveToCenter(element) { | |
| 91 const clientRect = element.getBoundingClientRect(); | |
| 92 const centerX = (clientRect.left + clientRect.right) / 2; | |
| 93 const centerY = (clientRect.top + clientRect.bottom) / 2; | |
| 94 eventSender.mouseMoveTo(centerX, centerY); | |
| 95 } | |
| 96 | |
| 97 function runDragTest(t, params) { | |
| 98 const article = params.article; | |
| 99 for (let element of document.querySelectorAll('article')) | |
| 100 element.removeAttribute('class'); | |
| 101 article.setAttribute('class', 'active'); | |
| 102 | |
| 103 let gotDragStart = false | |
| 104 let dragStartEffect = null; | |
| 105 let dragStartUriList = null; | |
| 106 let dragStartTypes = null; | |
| 107 | |
| 108 const dragged = article.querySelector('.dragged'); | |
| 109 dragged.ondragstart = (event) => { | |
| 110 console.log('dragstart'); | |
| 111 if (!gotDragStart) { | |
| 112 gotDragStart = true; | |
| 113 dragStartEffect = event.dataTransfer.dropEffect; | |
| 114 dragStartUriList = event.dataTransfer.getData('text/uri-list'); | |
| 115 dragStartTypes = [].concat(event.dataTransfer.types).sort(); | |
| 116 } | |
| 117 } | |
| 118 | |
| 119 let gotDrop = false; | |
| 120 let dropEffect = null; | |
| 121 const dropZone = article.querySelector('.dropzone'); | |
| 122 dropZone.ondragover = (event) => { console.log('dragover'); event.preventDefau lt(); } | |
| 123 dropZone.ondrop = (event) => { | |
| 124 console.log('drop'); | |
| 125 if (!gotDrop) { | |
| 126 gotDrop = true; | |
| 127 dropEffect = event.dataTransfer.dropEffect; | |
| 128 } | |
| 129 // Some of the drags would result in the link being followed in Firefox. | |
| 130 event.preventDefault(); | |
| 131 } | |
| 132 | |
| 133 const testEnd = article.querySelector('.testend'); | |
| 134 return new Promise((resolve, reject) => { | |
| 135 testEnd.onclick = () => { console.log('endclick'); resolve(true); } | |
| 136 | |
| 137 if (window.eventSender) { | |
| 138 console.log('s1'); | |
| 139 mouseMoveToCenter(dragged); | |
| 140 eventSender.mouseDown(); | |
| 141 setTimeout(() => { | |
| 142 console.log('s2'); | |
| 143 mouseMoveToCenter(dropZone); | |
| 144 eventSender.mouseUp(); | |
| 145 | |
| 146 setTimeout(() => { | |
| 147 mouseMoveToCenter(testEnd); | |
| 148 eventSender.mouseDown(); | |
| 149 eventSender.mouseUp(); | |
| 150 console.log('s3'); | |
| 151 }, 16); | |
|
dcheng
2016/10/27 06:37:53
What's the reason for the 16 ms delay?
pwnall
2016/10/29 00:24:24
Done.
This block got removed together with the "En
| |
| 152 }, 100); | |
| 153 } | |
| 154 }).then(() => t.step(() => { | |
| 155 assert_equals(gotDragStart, true, | |
| 156 'dragstart event should fire for all drags'); | |
| 157 if (gotDragStart) { | |
| 158 assert_equals(dragStartEffect, 'none', | |
| 159 'dataTransfer.dropEffect must always default to "none" in dragstart'); | |
| 160 assert_equals(dragStartUriList, params.dragStartUriList, | |
| 161 'incorrect dataTransfer.getData("text/uri-list") in dragstart'); | |
| 162 assert_array_equals(dragStartTypes, params.dragStartTypes, | |
| 163 'incorrect dataTransfer types in dragstart'); | |
| 164 } | |
| 165 | |
| 166 assert_equals(gotDrop, true, 'drop event should fire for all drags'); | |
| 167 if (gotDrop) { | |
| 168 assert_equals(dropEffect, 'none', | |
| 169 'dataTransfer.dropEffect must always default to "none" in drop'); | |
| 170 } | |
| 171 })); | |
| 172 } | |
| 173 | |
| 174 if (!window.eventSender) | |
| 175 setup({timeout: 4 * 90 * 1000 }); | |
| 176 | |
| 177 const caseTimeout = (window.eventSender) ? 1000 : 90 * 1000; | |
| 178 | |
| 179 promise_test((t) => { | |
| 180 return runDragTest(t, { | |
| 181 article: document.getElementById('non-draggable-link'), | |
| 182 dragStartUriList: 'https://www.chromium.org/', | |
| 183 dragStartTypes: ['text/html', 'text/plain', 'text/uri-list'], | |
| 184 }); | |
| 185 }, 'Link without draggable attribute', { timeout: caseTimeout }); | |
| 186 | |
| 187 promise_test((t) => { | |
| 188 return runDragTest(t, { | |
| 189 article: document.getElementById('draggable-link'), | |
| 190 dragStartUriList: 'https://www.chromium.org/', | |
| 191 dragStartTypes: ['text/html', 'text/plain', 'text/uri-list'], | |
| 192 }); | |
| 193 }, 'Link with draggable="true"', { timeout: caseTimeout }); | |
| 194 | |
| 195 promise_test((t) => { | |
| 196 return runDragTest(t, { | |
| 197 article: document.getElementById('draggable-div-with-link'), | |
| 198 dragStartUriList: '', | |
| 199 dragStartTypes: [], | |
| 200 }); | |
| 201 }, 'Link inside div with draggable="true"', { timeout: caseTimeout }); | |
| 202 | |
| 203 promise_test((t) => { | |
| 204 return runDragTest(t, { | |
| 205 article: document.getElementById('draggable-div-with-dragged-link'), | |
| 206 dragStartUriList: 'https://www.chromium.org/', | |
| 207 dragStartTypes: ['text/html', 'text/plain', 'text/uri-list'], | |
| 208 }); | |
| 209 }, 'Link inside div with draggable="true"', { timeout: caseTimeout }); | |
| 210 | |
| 211 </script> | |
| OLD | NEW |
