Chromium Code Reviews Chromium Code Reviews
Issue 2401503002:
Align drag threshold across content types. (Closed)
| Index: third_party/WebKit/LayoutTests/fast/events/drag-and-drop-thresholds.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-thresholds.html b/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-thresholds.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..1da61a5aae90f33e678b7243b0e27a59da2e8aa2 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-thresholds.html |
| @@ -0,0 +1,103 @@ |
| +<!DOCTYPE html> |
| + |
| +<style> |
| +#draggable, #testend { |
| + border: 1px solid black; |
| + width: 100px; |
| + height: 100px; |
| + margin: 20px; |
| +} |
| +</style> |
| + |
| +<div id="draggable" draggable="true"> |
| +</div> |
| +<div id="testend"> |
| +</div> |
| +<a id="link" href="https://www.chromium.org">A draggable link</a> |
| + |
| +<p> |
| +This tests WebKit's drag and drop thresholds. Due to the fine movements |
| +required, manual testing is not possible. |
| +</p> |
| + |
| +<pre id="results"></pre> |
| + |
| +<script> |
| + |
| +function runCase(name, target, deltaX, deltaY, expectedDrag) { |
| + const draggableCenterX = target.offsetLeft + target.offsetWidth / 2; |
| + const draggableCenterY = target.offsetTop + target.offsetHeight / 2; |
| + |
| + const testEnd = document.getElementById('testend'); |
| + const endCenterX = testEnd.offsetLeft + testEnd.offsetWidth / 2; |
| + const endCenterY = testEnd.offsetTop + testEnd.offsetHeight / 2; |
| + |
| + let dragStarted = false; |
| + target.ondragstart = () => { dragStarted = true; } |
| + |
| + const testEndPromise = new Promise((resolve, reject) => { |
| + testEnd.onmouseup = () => { resolve(true); } |
| + |
| + eventSender.mouseMoveTo(draggableCenterX, draggableCenterY); |
| + eventSender.mouseDown(); |
| + setTimeout(() => { |
| + eventSender.mouseMoveTo( |
| + draggableCenterX + deltaX, draggableCenterY + deltaY); |
| + eventSender.mouseUp(); |
| + |
| + eventSender.mouseMoveTo(endCenterX, endCenterY); |
| + eventSender.mouseDown(); |
| + eventSender.mouseUp(); |
| + }, 100); |
| + }); |
| + |
| + return testEndPromise.then(() => { |
| + verdict = (expectedDrag === dragStarted) ? 'OK' : 'FAILED'; |
| + results.textContent += |
| + `${name}: ${verdict} expected ${expectedDrag} got ${dragStarted}\n`; |
| + }); |
| +} |
| + |
| +window.onload = () => { |
| + if (!window.testRunner) |
| + return; |
| + |
| + testRunner.dumpAsText(); |
| + testRunner.waitUntilDone(); |
| + |
| + const draggable = document.getElementById('draggable'); |
| + const link = document.getElementById('link'); |
| + link.onclick = (event) => event.preventDefault(); |
| + |
| + const testCases = [ |
| + ['No movement', draggable, 0, 0, false], |
| + ['Small positive X movement', draggable, 2, 0, false], |
| + ['Large positive X movement', draggable, 20, 0, true], |
| + ['Small negative X movement', draggable, -2, 0, false], |
| + ['Large negative X movement', draggable, -20, 0, true], |
| + ['Small positive Y movement', draggable, 0, 2, false], |
| + ['Large positive Y movement', draggable, 0, 20, true], |
| + ['Small negative Y movement', draggable, 0, -2, false], |
| + ['Large negative Y movement', draggable, 0, 20, true], |
| + ['Small positive X + positive Y movement', draggable, 2, 2, false], |
| + ['Small negative X + positive Y movement', draggable, -2, 2, false], |
| + ['Small positive X + negative Y movement', draggable, 2, -2, false], |
| + ['Small negative X + negative Y movement', draggable, -2, -2, false], |
| + ['Link, small positive X movement', link, 2, 0, false], |
| + ['Link, large positive X movement', link, 20, 0, true], |
| + ['Link, small negative X movement', link, -2, 0, false], |
| + ['Link, large negative X movement', link, -20, 0, true], |
| + ['Link, small positive Y movement', link, 0, 2, false], |
| + ['Link, large positive Y movement', link, 0, 20, true], |
| + ['Link, small negative Y movement', link, 0, -2, false], |
| + ['Link, large negative Y movement', link, 0, 20, true], |
| + ]; |
| + |
| + let promise = Promise.resolve(true); |
| + for (const testCase of testCases) { |
| + promise = promise.then(() => runCase(...testCase)); |
| + } |
| + promise.then(() => testRunner.notifyDone()); |
| +}; |
| + |
| +</script> |
|
dcheng
2016/10/20 02:40:47
Thanks for the good test! Would you be willing to
pwnall
2016/10/20 05:25:30
Done.
Thank you for the suggestion! I didn't think
|
