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