зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1692804 [wpt PR 27627] - Add manual wpt test for clipboard files, a=testonly
Automatic update from web-platform-tests Add manual wpt test for clipboard files Add new wpt/clipboard-apis/clipboard-file-manual.html test, and update wpt/entries-api/* tests to work with both drag-and-drop, and copy-paste. Bug: 1175483 Change-Id: I5d099bdd3bab616886dcc549b3e4c5b197271308 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2695188 Commit-Queue: Joel Hockey <joelhockey@chromium.org> Reviewed-by: Joshua Bell <jsbell@chromium.org> Cr-Commit-Position: refs/heads/master@{#855614} -- wpt-commits: 3d345fd2a1e43595e20af547b11e7b65bbebefc3 wpt-pr: 27627
This commit is contained in:
Joel Hockey
moz-wptsync-bot
Родитель
ca8c52c69e
Коммит
e14f86800d
|
|
@ -0,0 +1,87 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Clipboard: DataTransfer File manual test</title>
|
||||
<link rel="help" href="https://w3c.github.io/clipboard-apis/#to-fire-a-clipboard-event">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#pastewrapper {
|
||||
display: block;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
padding: 50px 0 0 100px;
|
||||
}
|
||||
#pastezone {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Please download <a download href="resources/copied-file.txt">this file</a>,
|
||||
and copy and paste it into the box below.
|
||||
</p>
|
||||
|
||||
<div id="pastewrapper">
|
||||
<div id="pastezone">
|
||||
Paste Here
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const pasteWrapper = document.querySelector('#pastewrapper');
|
||||
const pasteZone = document.querySelector('#pastezone');
|
||||
|
||||
const pastePromise = new Promise((resolve, reject) => {
|
||||
pasteZone.onpaste = event => {
|
||||
event.preventDefault();
|
||||
|
||||
// Copy the information out of the DataTransfer instance before it is
|
||||
// neutered when the event handler exits.
|
||||
const dataTransfer = event.clipboardData;
|
||||
const items = Array.from(dataTransfer.items).map(item => {
|
||||
return {kind: item.kind, type: item.type, file: item.getAsFile() };
|
||||
});
|
||||
resolve({ types: dataTransfer.types, files: dataTransfer.files, items });
|
||||
};
|
||||
});
|
||||
|
||||
promise_test(async () => {
|
||||
const dataTransfer = await pastePromise;
|
||||
assert_true(dataTransfer.types.includes('Files'));
|
||||
}, 'DataTransfer.types in paste file');
|
||||
|
||||
promise_test(async () => {
|
||||
const dataTransfer = await pastePromise;
|
||||
assert_equals(
|
||||
dataTransfer.files.length, 1,
|
||||
'DataTransfer.files should have one element');
|
||||
const file = dataTransfer.files[0];
|
||||
assert_true(
|
||||
file instanceof File,
|
||||
'DataTransfer.files[0] should be a File instance');
|
||||
assert_equals(file.name, 'copied-file.txt');
|
||||
assert_equals(file.type, 'text/plain');
|
||||
assert_equals(file.size, 21);
|
||||
assert_equals(await file.text(), 'copied-file-contents\n');
|
||||
}, 'DataTransfer.files in paste');
|
||||
|
||||
promise_test(async () => {
|
||||
const dataTransfer = await pastePromise;
|
||||
const items = dataTransfer.items.filter(i => i.kind === 'file');
|
||||
assert_equals(items.length, 1,
|
||||
'DataTransfer.items[kind="file"] should have 1 element');
|
||||
const item = items[0];
|
||||
assert_true(
|
||||
item.file instanceof File,
|
||||
'DataTransfer.items[0] should be a File instance');
|
||||
assert_equals(item.file.name, 'copied-file.txt');
|
||||
assert_equals(item.file.type, 'text/plain');
|
||||
assert_equals(item.file.size, 21);
|
||||
assert_equals(await item.file.text(), 'copied-file-contents\n');
|
||||
}, 'DataTransfer.items in paste');
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
copied-file-contents
|
||||
|
|
@ -11,15 +11,14 @@ window.addEventListener('DOMContentLoaded', e => {
|
|||
document.body.appendChild(header);
|
||||
const elem = document.createElement('div');
|
||||
elem.style.cssText = 'height: 50px; border: 1px dotted red;';
|
||||
elem.innerHTML = 'Drop the <b>support/upload</b> directory here.</div>';
|
||||
elem.innerHTML = 'Drop or paste the <b>support/upload</b> directory here.</div>';
|
||||
document.body.appendChild(elem);
|
||||
elem.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
});
|
||||
elem.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
for (let i = 0; i < e.dataTransfer.items.length; ++i) {
|
||||
const item = e.dataTransfer.items[i];
|
||||
const onDropOrPaste = dataTransfer => {
|
||||
for (let i = 0; i < dataTransfer.items.length; ++i) {
|
||||
const item = dataTransfer.items[i];
|
||||
if (item.kind !== 'file')
|
||||
continue;
|
||||
const entry = item.webkitGetAsEntry();
|
||||
|
|
@ -27,6 +26,14 @@ window.addEventListener('DOMContentLoaded', e => {
|
|||
tests.forEach(f => f(entry, item));
|
||||
break;
|
||||
}
|
||||
};
|
||||
elem.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
onDropOrPaste(e.dataTransfer);
|
||||
});
|
||||
elem.addEventListener('paste', e => {
|
||||
e.preventDefault();
|
||||
onDropOrPaste(e.clipboardData);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче