<!DOCTYPE html>
<meta charset="utf-8">
<title>Draw an SVG image with a foreignObject to a canvas</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function loadImage(url) {
  return new Promise(resolve => {
    const image = new window.Image();
    image.onload = () => {
      resolve(image);
    };
    image.src = url;
  });
}

promise_test(async (t) => {
  // Load a data URL for an SVG image with a foreign object.
  const url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject></foreignObject></svg>';
  const image = await loadImage(url);

  // Draw the image to a canvas.
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);

  // The canvas should not be tainted, so the following shouldn't throw.
  assert_true(canvas.toDataURL().length > 0);
}, 'Canvas should not be tainted after drawing SVG including <foreignObject>');
</script>
