mozilla-central/dom/events/test/test_drag_image_file.html (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test that dragging an image produces a File</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<img id="green-png" src="green.png">
<img id="blob-img" alt="Blob image">
<script>
async function synthesizeDragAndCheck(aImgId, aImageAsFile) {
const img = document.getElementById(aImgId);
const dt = await synthesizePlainDragAndCancel({
srcElement: img,
finalY: 20,
}, null);
info(`DataTransfer number of types: ${dt.types.length}`);
for (let type of dt.types) {
info(` getData(${type}) = ${dt.getData(type)}`)
}
// Test common types.
[
"text/x-moz-url",
"text/x-moz-url-data",
"text/x-moz-url-desc",
"text/uri-list",
"text/_moz_htmlcontext",
"text/_moz_htmlinfo",
"text/html",
"text/plain",
"application/x-moz-file-promise",
"application/x-moz-file-promise-url",
"application/x-moz-file-promise-dest-filename",
].forEach(type => {
ok(dt.types.includes(type), `types should contains '${type}'`);
});
if (aImageAsFile) {
ok(dt.types.includes("Files"), "types should contains 'Files'");
is(dt.files.length, 1, "files contains one File");
let fileItem = null;
for (let item of dt.items) {
if (item.kind === "file") {
fileItem = item;
break;
}
}
is(fileItem.kind, "file", "Is a file");
is(fileItem.type, "image/png", "Is a PNG file");
let file = fileItem.getAsFile();
is(file.name, "image.png", "Has generic image name")
ok(file.size > 100, "Is not empty");
} else {
ok(dt.types.includes("application/x-moz-nativeimage"), "types should contains 'application/x-moz-nativeimage'");
}
}
[true, false].forEach((pref) => {
add_task(async function test_drag_standard_image() {
info(`test with dom.events.dataTransfer.imageAsFile.enabled=${pref}`);
await SpecialPowers.pushPrefEnv({
set: [["dom.events.dataTransfer.imageAsFile.enabled", pref]],
});
await synthesizeDragAndCheck("green-png", pref);
});
add_task(async function test_drag_blob_image() {
info(`test with dom.events.dataTransfer.imageAsFile.enabled=${pref}`);
await SpecialPowers.pushPrefEnv({
set: [["dom.events.dataTransfer.imageAsFile.enabled", pref]],
});
// Setup blob image.
const response = await fetch("green.png");
ok(response.ok, "Fetched green.png for blob");
const blob = await response.blob();
is(blob.type, "image/png", "Fetched blob has correct MIME type");
const blobURL = URL.createObjectURL(blob);
const blobImg = document.getElementById("blob-img");
const loadPromise = new Promise(resolve => {
blobImg.onload = () => {
requestAnimationFrame(() => requestAnimationFrame(resolve));
};
});
blobImg.src = blobURL;
await loadPromise;
// Start drag test.
await synthesizeDragAndCheck("blob-img", pref);
});
});
</script>
</body>
</html>