createImageBitmap-svg-resize.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/imagebitmap/createImageBitmap-svg-resize.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<meta charset="UTF-8">

<link rel="match" href="createImageBitmap-svg-resize-ref.html">

<meta name="fuzzy" content="maxDifference=0-27; totalPixels=0-1900">

<title>createImageBitmap from SVG with resize options renders at target resolution</title>

<canvas id="canvas" width="500" height="500"></canvas>

<div id="svgSrc" hidden>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="20" height="20">

    <polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="gold" stroke="orange" stroke-width="2"/>

  </svg>

</div>

<script type="module">

  const svg = 'data:image/svg+xml;utf8,' + encodeURIComponent(svgSrc.innerHTML.trim());

  const image = new Image();

  await new Promise(resolve => { image.onload = resolve; image.src = svg; });

  const bitmap = await createImageBitmap(image, {

    resizeWidth: 500,

    resizeHeight: 500,

});

  canvas.getContext('2d').drawImage(bitmap, 0, 0);

  document.documentElement.classList.remove("reftest-wait");

</script>

</html>