Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(157)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/events/drag-and-drop-draggable-link.html

Issue 2441023003: Align drag feedback for links with draggable="true" to Safari. (Closed)
Patch Set: Rebased. Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/input/MouseEventManager.cpp » ('j') | third_party/WebKit/Source/core/page/DragController.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/events/drag-and-drop-draggable-link.html
diff --git a/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-draggable-link.html b/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-draggable-link.html
new file mode 100644
index 0000000000000000000000000000000000000000..0922d5bb98d5cd0344f9b329dcba6fd05ac1f917
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/events/drag-and-drop-draggable-link.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<style>
+.box {
+ display: block;
+ border: 1px solid black;
+ width: 150px;
+ height: 100px;
+ margin: 10px;
+ float: left;
+}
+.dropzone {
+ border-style: dashed;
+}
+article {
+ visibility: hidden;
+ position: relative;
+ overflow: hidden;
+}
+article.active {
+ visibility: visible;
+}
+a {
+ display: block;
+ background: yellow;
+}
+</style>
+
+<p>
+ 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!
+ 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
+</p>
+
+<article id="non-draggable-link">
+ <a class="dragged box" href="https://www.chromium.org">
+ Drag Me
+ </a>
+ <div class="dropzone box">
+ Drop Here
+ </div>
+ <div class="testend box">
+ End Test
+ </div>
+</article>
+
+<article id="draggable-link">
+ <a class="dragged box" draggable="true" href="https://www.chromium.org">
+ Drag Me
+ </a>
+ <div class="dropzone box">
+ Drop Here
+ </div>
+ <div class="testend box">
+ End Test
+ </div>
+</article>
+
+<article id="draggable-div-with-link">
+ <div class="dragged box" draggable="true">
+ <a href="https://www.chromium.org">
+ Drag the box, not the text
+ </a>
+ </div>
+ <div class="dropzone box">
+ Drop Here
+ </div>
+ <div class="testend box">
+ End Test
+ </div>
+</article>
+
+<article id="draggable-div-with-dragged-link">
+ <div class="box" draggable="true">
+ <a class="dragged" href="https://www.chromium.org">
+ Drag the text, not the box
+ </a>
+ </div>
+ <div class="dropzone box">
+ Drop Here
+ </div>
+ <div class="testend box">
+ End Test
+ </div>
+</article>
+
+<script>
+
+function mouseMoveToCenter(element) {
+ const clientRect = element.getBoundingClientRect();
+ const centerX = (clientRect.left + clientRect.right) / 2;
+ const centerY = (clientRect.top + clientRect.bottom) / 2;
+ eventSender.mouseMoveTo(centerX, centerY);
+}
+
+function runDragTest(t, params) {
+ const article = params.article;
+ for (let element of document.querySelectorAll('article'))
+ element.removeAttribute('class');
+ article.setAttribute('class', 'active');
+
+ let gotDragStart = false
+ let dragStartEffect = null;
+ let dragStartUriList = null;
+ let dragStartTypes = null;
+
+ const dragged = article.querySelector('.dragged');
+ dragged.ondragstart = (event) => {
+ console.log('dragstart');
+ if (!gotDragStart) {
+ gotDragStart = true;
+ dragStartEffect = event.dataTransfer.dropEffect;
+ dragStartUriList = event.dataTransfer.getData('text/uri-list');
+ dragStartTypes = [].concat(event.dataTransfer.types).sort();
+ }
+ }
+
+ let gotDrop = false;
+ let dropEffect = null;
+ const dropZone = article.querySelector('.dropzone');
+ dropZone.ondragover = (event) => { console.log('dragover'); event.preventDefault(); }
+ dropZone.ondrop = (event) => {
+ console.log('drop');
+ if (!gotDrop) {
+ gotDrop = true;
+ dropEffect = event.dataTransfer.dropEffect;
+ }
+ // Some of the drags would result in the link being followed in Firefox.
+ event.preventDefault();
+ }
+
+ const testEnd = article.querySelector('.testend');
+ return new Promise((resolve, reject) => {
+ testEnd.onclick = () => { console.log('endclick'); resolve(true); }
+
+ if (window.eventSender) {
+ console.log('s1');
+ mouseMoveToCenter(dragged);
+ eventSender.mouseDown();
+ setTimeout(() => {
+ console.log('s2');
+ mouseMoveToCenter(dropZone);
+ eventSender.mouseUp();
+
+ setTimeout(() => {
+ mouseMoveToCenter(testEnd);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+ console.log('s3');
+ }, 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
+ }, 100);
+ }
+ }).then(() => t.step(() => {
+ assert_equals(gotDragStart, true,
+ 'dragstart event should fire for all drags');
+ if (gotDragStart) {
+ assert_equals(dragStartEffect, 'none',
+ 'dataTransfer.dropEffect must always default to "none" in dragstart');
+ assert_equals(dragStartUriList, params.dragStartUriList,
+ 'incorrect dataTransfer.getData("text/uri-list") in dragstart');
+ assert_array_equals(dragStartTypes, params.dragStartTypes,
+ 'incorrect dataTransfer types in dragstart');
+ }
+
+ assert_equals(gotDrop, true, 'drop event should fire for all drags');
+ if (gotDrop) {
+ assert_equals(dropEffect, 'none',
+ 'dataTransfer.dropEffect must always default to "none" in drop');
+ }
+ }));
+}
+
+if (!window.eventSender)
+ setup({timeout: 4 * 90 * 1000 });
+
+const caseTimeout = (window.eventSender) ? 1000 : 90 * 1000;
+
+promise_test((t) => {
+ return runDragTest(t, {
+ article: document.getElementById('non-draggable-link'),
+ dragStartUriList: 'https://www.chromium.org/',
+ dragStartTypes: ['text/html', 'text/plain', 'text/uri-list'],
+ });
+}, 'Link without draggable attribute', { timeout: caseTimeout });
+
+promise_test((t) => {
+ return runDragTest(t, {
+ article: document.getElementById('draggable-link'),
+ dragStartUriList: 'https://www.chromium.org/',
+ dragStartTypes: ['text/html', 'text/plain', 'text/uri-list'],
+ });
+}, 'Link with draggable="true"', { timeout: caseTimeout });
+
+promise_test((t) => {
+ return runDragTest(t, {
+ article: document.getElementById('draggable-div-with-link'),
+ dragStartUriList: '',
+ dragStartTypes: [],
+ });
+}, 'Link inside div with draggable="true"', { timeout: caseTimeout });
+
+promise_test((t) => {
+ return runDragTest(t, {
+ article: document.getElementById('draggable-div-with-dragged-link'),
+ dragStartUriList: 'https://www.chromium.org/',
+ dragStartTypes: ['text/html', 'text/plain', 'text/uri-list'],
+ });
+}, 'Link inside div with draggable="true"', { timeout: caseTimeout });
+
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/input/MouseEventManager.cpp » ('j') | third_party/WebKit/Source/core/page/DragController.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698