fune/testing/web-platform/tests/clipboard-apis/async-write-image-read-image.https.html
Kagami Sascha Rosylight 52f9697770 Bug 1875837 - Make clipboard-read/write permission optional in clipboard WPT r=webdriver-reviewers,dom-core,edgar,whimboo
Blink is the only engine supporting it, and thus it should not be the WPT requirement.

Some tests still need the testing pref, and for now this patch gives the pref for such failing tests without modifying them, for simplicity sake. Modification can happen separately.

Differential Revision: https://phabricator.services.mozilla.com/D201999
2024-03-27 17:38:18 +00:00

85 lines
3 KiB
HTML

<!doctype html>
<meta charset="utf-8">
<title>
Async Clipboard write [image/png ClipboardItem] ->
read [image/png ClipboardItem] tests
</title>
<link rel="help" href="https://w3c.github.io/clipboard-apis/#async-clipboard-api">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/user-activation.js"></script>
<body>Body needed for test_driver.click()
<p>
<p>The bottom image should display the same image as the top image.</p>
<p>Original Image:</p>
<image id="image-to-copy" width="20" height="20"
src="resources/greenbox.png"></image>
<p>Image after copy/paste:</p>
<image id="image-on-clipboard"></image>
<canvas id="canvas" width="20" height="20"></canvas>
</p>
<script>
// Must compare a bitmap as opposed to simply blob data, because an encoded
// image may have different contents depending on encoder.
async function getBitmapString(blob) {
const imageBitmap = await createImageBitmap(blob);
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(imageBitmap, 0,0);
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
return imageData.data.toString();
};
async function loadBlob(fileName) {
const fetched = await fetch(fileName);
return await fetched.blob();
}
promise_test(async t => {
await tryGrantReadPermission();
await tryGrantWritePermission();
const blobInput = await loadBlob('resources/greenbox.png');
assert_equals(blobInput.type, 'image/png');
const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
await waitForUserActivation();
await navigator.clipboard.write([clipboardItemInput]);
await waitForUserActivation();
const clipboardItems = await navigator.clipboard.read();
assert_equals(clipboardItems.length, 1);
const clipboardItem = clipboardItems[0];
assert_true(clipboardItem instanceof ClipboardItem);
assert_equals(clipboardItem.types.length, 1);
const blobOutput = await clipboardItem.getType('image/png');
assert_equals(blobOutput.type, 'image/png');
document.getElementById('image-on-clipboard').src =
window.URL.createObjectURL(blobOutput);
const comparableInput = await getBitmapString(blobInput);
const comparableOutput = await getBitmapString(blobOutput);
assert_equals(comparableOutput, comparableInput);
}, 'Verify write and read clipboard [image/png Blob]');
promise_test(async t => {
await tryGrantReadPermission();
await tryGrantWritePermission();
const invalidPngBlob = new Blob(['this text is not a valid png image'],
{type: 'image/png'});
const clipboardItemInput = new ClipboardItem({'image/png' : invalidPngBlob});
await waitForUserActivation();
await promise_rejects_dom(t, 'DataError',
navigator.clipboard.write([clipboardItemInput]));
}, 'Verify write error on malformed data [image/png ClipboardItem]');
</script>
</body>