async-write-image-read-image.https.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /clipboard-apis/async-write-image-read-image.https.html - WPT Dashboard Interop Dashboard

<!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>