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..7efa5d55111442833518ccd1b9fe3abe9c45cfa6 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-thresholds.html |
| @@ -0,0 +1,96 @@ |
| +<!DOCTYPE html> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| + |
| +<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> |
| + |
| +<script> |
| + |
| +function runTest(t, _, target, deltaX, deltaY, expectedDrag) { |
|
dcheng
2016/10/20 09:11:55
Might be slightly clearer to just name _ "descript
pwnall
2016/10/20 09:47:46
Done.
|
| + 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(() => { |
| + t.step(() => { |
| + assert_equals(dragStarted, expectedDrag, |
| + 'dragstart did not occur as expected'); |
| + }); |
| + }); |
| +} |
| + |
| +(() => { |
| + 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], |
| + ]; |
| + |
| + for (const testCase of testCases) { |
| + promise_test((t) => runTest(t, ...testCase), testCase[0]); |
| + } |
| +})(); |
| + |
| +</script> |
