async-write-image-read-image.https.html (3112B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title> 4 Async Clipboard write [image/png ClipboardItem] -> 5 read [image/png ClipboardItem] tests 6 </title> 7 <link rel="help" href="https://w3c.github.io/clipboard-apis/#async-clipboard-api"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="resources/user-activation.js"></script> 13 <body>Body needed for test_driver.click() 14 <p> 15 <p>The bottom image should display the same image as the top image.</p> 16 <p>Original Image:</p> 17 <image id="image-to-copy" width="20" height="20" 18 src="resources/greenbox.png"></image> 19 <p>Image after copy/paste:</p> 20 <image id="image-on-clipboard"></image> 21 <canvas id="canvas" width="20" height="20"></canvas> 22 </p> 23 24 <script> 25 // Must compare a bitmap as opposed to simply blob data, because an encoded 26 // image may have different contents depending on encoder. 27 async function getBitmapString(blob) { 28 const imageBitmap = await createImageBitmap(blob); 29 const canvas = document.getElementById('canvas'); 30 const ctx = canvas.getContext('2d'); 31 32 ctx.drawImage(imageBitmap, 0,0); 33 34 let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 35 ctx.clearRect(0, 0, canvas.width, canvas.height); 36 return imageData.data.toString(); 37 }; 38 39 async function loadBlob(fileName) { 40 const fetched = await fetch(fileName); 41 return await fetched.blob(); 42 } 43 44 promise_test(async t => { 45 await tryGrantReadPermission(); 46 await tryGrantWritePermission(); 47 48 const blobInput = await loadBlob('resources/greenbox.png'); 49 50 assert_equals(blobInput.type, 'image/png'); 51 const clipboardItemInput = new ClipboardItem({'image/png' : blobInput}); 52 await waitForUserActivation(); 53 await navigator.clipboard.write([clipboardItemInput]); 54 await waitForUserActivation(); 55 const clipboardItems = await navigator.clipboard.read(); 56 57 assert_equals(clipboardItems.length, 1); 58 const clipboardItem = clipboardItems[0]; 59 assert_true(clipboardItem instanceof ClipboardItem); 60 assert_equals(clipboardItem.types.length, 1); 61 const blobOutput = await clipboardItem.getType('image/png'); 62 assert_equals(blobOutput.type, 'image/png'); 63 64 document.getElementById('image-on-clipboard').src = 65 window.URL.createObjectURL(blobOutput); 66 67 const comparableInput = await getBitmapString(blobInput); 68 const comparableOutput = await getBitmapString(blobOutput); 69 70 assert_equals(comparableOutput, comparableInput); 71 }, 'Verify write and read clipboard [image/png Blob]'); 72 73 promise_test(async t => { 74 await tryGrantReadPermission(); 75 await tryGrantWritePermission(); 76 77 const invalidPngBlob = new Blob(['this text is not a valid png image'], 78 {type: 'image/png'}); 79 const clipboardItemInput = new ClipboardItem({'image/png' : invalidPngBlob}); 80 await waitForUserActivation(); 81 await promise_rejects_dom(t, 'DataError', 82 navigator.clipboard.write([clipboardItemInput])); 83 }, 'Verify write error on malformed data [image/png ClipboardItem]'); 84 </script> 85 </body>