Gastón Rodríguez
4ac3e2125c
Automatic update from web-platform-tests Make dropEffect and effectAllowed blink web tests a WPT test This CL makes the `fast/events/drag-and-drop.html` web test into a WPT test that uses the action driver API. The new tests verify that dragging with different `effectAllowed`s result in the correct behavior when dropping onto different `dropEffect`s. Test 029.html verifies that the values are properly set on the drop event (sent to the drop target), and test 030.html verifies that the values are properly set on the dragEnd event (sent to the drag div). Bug: 434151262, 441537624 Change-Id: Iffd1788508a847c6b928c50fc3f44ebce147c4f9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6956095 Reviewed-by: Mustaq Ahmed <mustaq@chromium.org> Commit-Queue: Gaston Rodriguez <gastonr@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1533261} -- wpt-commits: 7c68141cfe0266ec7fa87d6878b81d03abd85afd wpt-pr: 55087
77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<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>SVG image drag and drop: allowed effects 'copy','move','link'</title>
|
|
<style type="text/css">
|
|
div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background-color: olive;
|
|
color: white;
|
|
padding: 20px;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
div:nth-child(2) {
|
|
background-color: green;
|
|
}
|
|
|
|
div:nth-child(3) {
|
|
background-color: teal;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
Drag these SVG images. Each has a different effectAllowed and color.
|
|
</p>
|
|
<p>
|
|
<img id="copy-drag" ondragstart="event.dataTransfer.effectAllowed = 'copy'"
|
|
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22olive%22/%3E%3C/svg%3E"
|
|
alt="Olive SVG circle for copy" />
|
|
<img id="move-drag" ondragstart="event.dataTransfer.effectAllowed = 'move'"
|
|
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22green%22/%3E%3C/svg%3E"
|
|
alt="Green SVG circle for move" />
|
|
<img id="link-drag" ondragstart="event.dataTransfer.effectAllowed = 'link'"
|
|
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22teal%22/%3E%3C/svg%3E"
|
|
alt="Teal SVG circle for link" />
|
|
</p>
|
|
<p>
|
|
Drop targets for each effect:
|
|
</p>
|
|
<p>
|
|
<div id="copy-drop" ondragover="onDragOver(event, 'copy')">copy</div>
|
|
<div id="move-drop" ondragover="onDragOver(event, 'move')">move</div>
|
|
<div id="link-drop" ondragover="onDragOver(event, 'link')">link</div>
|
|
</p>
|
|
</body>
|
|
<script>
|
|
function onDragOver(event, effect) {
|
|
event.preventDefault();
|
|
event.dataTransfer.dropEffect = effect;
|
|
}
|
|
|
|
async function test() {
|
|
await new Promise(loaded => window.addEventListener("load", loaded));
|
|
|
|
for (const effect of ['copy', 'move', 'link']) {
|
|
const dragImage = document.getElementById(effect + '-drag');
|
|
const dropDiv = document.getElementById(effect + '-drop');
|
|
|
|
dragDropTest(
|
|
dragImage, dropDiv, dropEffectOnDropCallBack,
|
|
'dropEffect should match effectAllowed on drop for ' + effect);
|
|
}
|
|
}
|
|
test();
|
|
</script>
|
|
</html>
|