tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_drag_image_file.html (3231B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>Test that dragging an image produces a File</title>
      6  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      7  <script src="/tests/SimpleTest/EventUtils.js"></script>
      8  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
      9 </head>
     10 <body>
     11 
     12 <img id="green-png" src="green.png">
     13 <img id="blob-img" alt="Blob image">
     14 
     15 <script>
     16 async function synthesizeDragAndCheck(aImgId, aImageAsFile) {
     17  const img = document.getElementById(aImgId);
     18  const dt = await synthesizePlainDragAndCancel({
     19      srcElement: img,
     20      finalY: 20,
     21  }, null);
     22 
     23  info(`DataTransfer number of types: ${dt.types.length}`);
     24  for (let type of dt.types) {
     25    info(`  getData(${type}) = ${dt.getData(type)}`)
     26  }
     27 
     28  // Test common types.
     29  [
     30    "text/x-moz-url",
     31    "text/x-moz-url-data",
     32    "text/x-moz-url-desc",
     33    "text/uri-list",
     34    "text/_moz_htmlcontext",
     35    "text/_moz_htmlinfo",
     36    "text/html",
     37    "text/plain",
     38    "application/x-moz-file-promise",
     39    "application/x-moz-file-promise-url",
     40    "application/x-moz-file-promise-dest-filename",
     41  ].forEach(type => {
     42    ok(dt.types.includes(type), `types should contains '${type}'`);
     43  });
     44 
     45  if (aImageAsFile) {
     46    ok(dt.types.includes("Files"), "types should contains 'Files'");
     47    is(dt.files.length, 1, "files contains one File");
     48 
     49    let fileItem = null;
     50    for (let item of dt.items) {
     51      if (item.kind === "file") {
     52        fileItem = item;
     53        break;
     54      }
     55    }
     56 
     57    is(fileItem.kind, "file", "Is a file");
     58    is(fileItem.type, "image/png", "Is a PNG file");
     59 
     60    let file = fileItem.getAsFile();
     61    is(file.name, "image.png", "Has generic image name")
     62    ok(file.size > 100, "Is not empty");
     63  } else {
     64    ok(dt.types.includes("application/x-moz-nativeimage"), "types should contains 'application/x-moz-nativeimage'");
     65  }
     66 }
     67 
     68 add_setup(async function init() {
     69  // Wait for page full loaded.
     70  await SimpleTest.promiseFocus();
     71 });
     72 
     73 [true, false].forEach((pref) => {
     74  add_task(async function test_drag_standard_image() {
     75    info(`test with dom.events.dataTransfer.imageAsFile.enabled=${pref}`);
     76    await SpecialPowers.pushPrefEnv({
     77      set: [["dom.events.dataTransfer.imageAsFile.enabled", pref]],
     78    });
     79 
     80    await synthesizeDragAndCheck("green-png", pref);
     81  });
     82 
     83  add_task(async function test_drag_blob_image() {
     84    info(`test with dom.events.dataTransfer.imageAsFile.enabled=${pref}`);
     85    await SpecialPowers.pushPrefEnv({
     86      set: [["dom.events.dataTransfer.imageAsFile.enabled", pref]],
     87    });
     88 
     89    // Setup blob image.
     90    const response = await fetch("green.png");
     91    ok(response.ok, "Fetched green.png for blob");
     92 
     93    const blob = await response.blob();
     94    is(blob.type, "image/png", "Fetched blob has correct MIME type");
     95 
     96    const blobURL = URL.createObjectURL(blob);
     97    const blobImg = document.getElementById("blob-img");
     98    const loadPromise = new Promise(resolve => {
     99      blobImg.onload = () => {
    100        requestAnimationFrame(() => requestAnimationFrame(resolve));
    101      };
    102    });
    103    blobImg.src = blobURL;
    104    await loadPromise;
    105 
    106    // Start drag test.
    107    await synthesizeDragAndCheck("blob-img", pref);
    108  });
    109 });
    110 </script>
    111 </body>
    112 </html>