diff --git a/html/editing/dnd/drop/001.xhtml b/html/editing/dnd/drop/001.xhtml index 32dd0f7fa0c3d6..b6cda736a4ea51 100644 --- a/html/editing/dnd/drop/001.xhtml +++ b/html/editing/dnd/drop/001.xhtml @@ -5,6 +5,7 @@ + dropEffect is correctly set when it matches effectAllowed @@ -59,17 +60,11 @@ async function test() { await new Promise(loaded => window.addEventListener("load", loaded)); - function onDropCallBack(event) { - assert_equals(event.target.textContent, event.dataTransfer.dropEffect); - assert_equals(event.target.textContent, event.dataTransfer - .effectAllowed); - return true; - } for (const effect of ['copy', 'move', 'link']) { const dragDiv = document.getElementById(effect + '-drag'); const dropDiv = document.getElementById(effect + '-drop'); dragDropTest( - dragDiv, dropDiv, onDropCallBack, + dragDiv, dropDiv, dropEffectOnDropCallBack, 'dropEffect should match effectAllowed on drop for ' + effect); } } diff --git a/html/editing/dnd/drop/002.xhtml b/html/editing/dnd/drop/002.xhtml index 1c81c9ec1e4b8e..5ce105178a681f 100644 --- a/html/editing/dnd/drop/002.xhtml +++ b/html/editing/dnd/drop/002.xhtml @@ -5,6 +5,7 @@ + Text input selection drag and drop: allowed effects diff --git a/html/editing/dnd/drop/003.xhtml b/html/editing/dnd/drop/003.xhtml index b1d94ab2e3d572..10c3baed0baa87 100644 --- a/html/editing/dnd/drop/003.xhtml +++ b/html/editing/dnd/drop/003.xhtml @@ -5,6 +5,7 @@ <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> <script src="/resources/testdriver-actions.js"></script> +<script src="support/dropEffect-test-helper.js"></script> <script src="../resources/test-helper.js"></script> <head> <title>dropEffect matches effectAllowed for link drag and drop diff --git a/html/editing/dnd/drop/004.xhtml b/html/editing/dnd/drop/004.xhtml index ae2448ff5a316f..806427dcbbaf1a 100644 --- a/html/editing/dnd/drop/004.xhtml +++ b/html/editing/dnd/drop/004.xhtml @@ -5,6 +5,7 @@ + dropEffect matches effectAllowed for PNG image drag and drop diff --git a/html/editing/dnd/drop/005.xhtml b/html/editing/dnd/drop/005.xhtml index 06a98957aad2e6..95290b7979e011 100644 --- a/html/editing/dnd/drop/005.xhtml +++ b/html/editing/dnd/drop/005.xhtml @@ -5,6 +5,7 @@ + SVG image drag and drop: allowed effects 'copy','move','link' diff --git a/html/editing/dnd/drop/006.xhtml b/html/editing/dnd/drop/006.xhtml index 8ba107dfc24504..70d4933db301fb 100644 --- a/html/editing/dnd/drop/006.xhtml +++ b/html/editing/dnd/drop/006.xhtml @@ -5,6 +5,7 @@ + Canvas drag and drop: allowed effects 'copy','move','link' diff --git a/html/editing/dnd/drop/029.html b/html/editing/dnd/drop/029.html new file mode 100644 index 00000000000000..6a9eee15f79e08 --- /dev/null +++ b/html/editing/dnd/drop/029.html @@ -0,0 +1,37 @@ + + + + + + + + + + Test all effectAllowed against none dropEffect on drop + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

none
+

+ + + diff --git a/html/editing/dnd/drop/030.html b/html/editing/dnd/drop/030.html new file mode 100644 index 00000000000000..4250ad5ca7e389 --- /dev/null +++ b/html/editing/dnd/drop/030.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against copy dropEffect on drop + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

copy
+

+ + + + diff --git a/html/editing/dnd/drop/031.html b/html/editing/dnd/drop/031.html new file mode 100644 index 00000000000000..a5d1cfcedc809a --- /dev/null +++ b/html/editing/dnd/drop/031.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against link dropEffect on drop + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

+

+ + + + diff --git a/html/editing/dnd/drop/032.html b/html/editing/dnd/drop/032.html new file mode 100644 index 00000000000000..debf848b53f769 --- /dev/null +++ b/html/editing/dnd/drop/032.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against move dropEffect on drop + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

move
+

+ + + + diff --git a/html/editing/dnd/drop/033.html b/html/editing/dnd/drop/033.html new file mode 100644 index 00000000000000..c71860abc3763b --- /dev/null +++ b/html/editing/dnd/drop/033.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against dummy dropEffect on drop + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

dummy
+

+ + + + diff --git a/html/editing/dnd/drop/034.html b/html/editing/dnd/drop/034.html new file mode 100644 index 00000000000000..e6333dd4fc511b --- /dev/null +++ b/html/editing/dnd/drop/034.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against none dropEffect on dragEnd + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

none
+

+ + + + diff --git a/html/editing/dnd/drop/035.html b/html/editing/dnd/drop/035.html new file mode 100644 index 00000000000000..020ab36edf0e14 --- /dev/null +++ b/html/editing/dnd/drop/035.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against copy dropEffect on dragEnd + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

copy
+

+ + + + diff --git a/html/editing/dnd/drop/036.html b/html/editing/dnd/drop/036.html new file mode 100644 index 00000000000000..0d51d971987f09 --- /dev/null +++ b/html/editing/dnd/drop/036.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against link dropEffect on dragEnd + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

+

+ + + + diff --git a/html/editing/dnd/drop/037.html b/html/editing/dnd/drop/037.html new file mode 100644 index 00000000000000..1a1a4138534394 --- /dev/null +++ b/html/editing/dnd/drop/037.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against move dropEffect on dragEnd + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

move
+

+ + + + diff --git a/html/editing/dnd/drop/038.html b/html/editing/dnd/drop/038.html new file mode 100644 index 00000000000000..1a3d1307e3d33d --- /dev/null +++ b/html/editing/dnd/drop/038.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Test all effectAllowed against dummy dropEffect on dragEnd + + + + +

These are the draggable elements with different effectAllowed + settings: +

+

+

Drop targets with different dropEffects: +

dummy
+

+ + + + diff --git a/html/editing/dnd/drop/support/dropEffect-test-helper.js b/html/editing/dnd/drop/support/dropEffect-test-helper.js new file mode 100644 index 00000000000000..d760621d3c1544 --- /dev/null +++ b/html/editing/dnd/drop/support/dropEffect-test-helper.js @@ -0,0 +1,122 @@ +const effectAllowedList = ["uninitialized", "undefined", "none", "all", + "copy", + "move", "link", "copyMove", "copyLink", "linkMove", "dummy" +]; + +function dropEffectOnDropCallBack(event) { + assert_equals(event.target.textContent, event.dataTransfer.dropEffect); + assert_equals(event.target.textContent, event.dataTransfer.effectAllowed); + return true; +} + +function buildEffectAllowedDivs() { + effectAllowedList.forEach(effectAllowed => { + document.getElementById('drag-container').innerHTML += + `
${effectAllowed}
`; + }); +} + +function expectedDropEffectForEffectAllowed(chosenDropEffect, + chosenEffectAllowed) { + if (chosenDropEffect == "dummy") { + switch (chosenEffectAllowed) { + case "undefined": + case "copyLink": + case "copyMove": + case "uninitialized": + case "all": + return "copy"; + case "linkMove": + return "link"; + case "move": + return "move"; + default: + return chosenEffectAllowed; + } + } + return chosenDropEffect; +} + +function dropEventShouldBeSent(dropEffect, effectAllowed) { + dropEffect = expectedDropEffectForEffectAllowed(dropEffect, effectAllowed); + if (effectAllowed === 'dummy' || effectAllowed === 'undefined') { + effectAllowed = 'uninitialized'; + } + if (effectAllowed === 'none' || dropEffect === 'none') { + return false; + } + if (effectAllowed === 'uninitialized' || effectAllowed === 'all') { + return true; + } + // Matches cases like `copyLink` / `link`. + if (effectAllowed.toLowerCase().includes(dropEffect)) { + return true; + } + return false; +} + +function onDropCallBack(event, chosenDropEffect, chosenEffectAllowed) { + const actualDropEffect = event.dataTransfer.dropEffect; + const actualEffectAllowed = event.dataTransfer.effectAllowed; + let expectedEffectAllowed = chosenEffectAllowed; + if (chosenEffectAllowed === 'dummy' || chosenEffectAllowed === + 'undefined') { + expectedEffectAllowed = 'uninitialized'; + } + assert_equals(actualEffectAllowed, expectedEffectAllowed, + `effectAllowed: expected ${expectedEffectAllowed} but got ${actualEffectAllowed}` + ); + let expectedDropEffect = expectedDropEffectForEffectAllowed( + chosenDropEffect, actualEffectAllowed); + // dragend events with invalid dropEffect-effectAllowed combinations have a + // `none` dropEffect. + if (!dropEventShouldBeSent(chosenDropEffect, chosenEffectAllowed)) { + expectedDropEffect = 'none'; + } + assert_equals(actualDropEffect, expectedDropEffect, + `dropEffect: expected ${expectedDropEffect} but got ${actualDropEffect}`); + return true; +} + +function onDragOver(event, dropEffect) { + event.dataTransfer.dropEffect = dropEffect; + event.preventDefault(); +} + +// This function creates the divs with all the effectAlloweds defined in +// `effectAllowedList` and runs a drag and drop test that verifies that +// the correct events are sent (or not) depending on the combination of +// `dropEffect` and all the possible `effectAllowed`s. +// `testDropEvent`: boolean that decides if the function will test the +// `ondrop` event on the drop target, or the `dragend` +// event on the drag element. +// `dropEffect`: string with the `dropEffect` that will be matched against +// the different `effectAllowed`s. +function runDropEffectTest(testDropEvent, dropEffect) { + buildEffectAllowedDivs(); + effectAllowedList.forEach(effectAllowed => { + const dragDiv = document.getElementById("drag-" + + effectAllowed); + const dropDiv = document.getElementById("drop-" + dropEffect); + if (testDropEvent) { + runDropTest(dragDiv, dropDiv, effectAllowed, dropEffect); + } else { + dragEndTest(dragDiv, dropDiv, (e) => onDropCallBack(e, + dropEffect, effectAllowed), + `${effectAllowed} / ${dropEffect}`); + } + }); +} + +function runDropTest(dragDiv, dropDiv, effectAllowed, dropEffect) { + const shouldReceiveDropEvent = dropEventShouldBeSent(dropEffect, + effectAllowed); + if (shouldReceiveDropEvent) { + dragDropTest(dragDiv, dropDiv, (e) => onDropCallBack(e, + dropEffect, effectAllowed), + `${effectAllowed} / ${dropEffect}`); + } else { + dragDropTestNoDropEvent(dragDiv, dropDiv, + `${effectAllowed} / ${dropEffect}`); + } +} diff --git a/html/editing/dnd/resources/test-helper.js b/html/editing/dnd/resources/test-helper.js index 917954068a641c..8977c9a66995d3 100644 --- a/html/editing/dnd/resources/test-helper.js +++ b/html/editing/dnd/resources/test-helper.js @@ -125,6 +125,31 @@ function dragDropTest(dragElement, dropElement, onDropCallBack, testDescription, }, testDescription)); } +// Similar to `dragDropTest`, but instead of listening to the `drop` event on the +// `dropElement`, this function listens to `dragend` on the `dragElement`. +function dragEndTest(dragElement, dropElement, onDropCallBack, testDescription, + dragIframe = undefined, dropIframe = undefined) { + promise_test((t) => new Promise(async (resolve, reject) => { + dragElement.addEventListener('dragend', t.step_func((event) => { + if (onDropCallBack(event) == true) { + resolve(); + } else { + reject(); + } + })); + try { + var actions = new test_driver.Actions(); + actions = movePointerToCenter(dragElement, dragIframe, actions) + .pointerDown(); + actions = movePointerToCenter(dropElement, dropIframe, actions) + .pointerUp(); + await actions.send(); + } catch (e) { + reject(e); + } + }, testDescription)); +} + // The dragDropTestNoDropEvent function performs a drag-and-drop test but expects // no drop event to occur. This is useful for testing scenarios where drag-and-drop // should be blocked or ignored (e.g., dropping on root scrollbars). The test