<!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'" );
}
}
add_setup(async function init() {
// Wait for page full loaded.
await SimpleTest.promiseFocus();
});
[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 >
Messung V0.5 in Prozent C=100 H=100 G=100
¤ Dauer der Verarbeitung: 0.14 Sekunden
(vorverarbeitet am 2026-08-25)
¤
*© Formatika GbR, Deutschland