image-orientation-none-cross-origin-canvas-css-image-value.sub.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-images/image-orientation/image-orientation-none-cross-origin-canvas-css-image-value.sub.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<head>

<meta charset="utf-8">

<title>CSS Images Module Level 3: image-orientation: none for a cross-origin CSSImageValue drawn to canvas</title>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">

<link rel="match" href="reference/image-orientation-none-cross-origin-canvas-css-image-value-ref.sub.html">

<style>

  #target { image-orientation: none; }

  #loader {

    width: 0;

    height: 0;

    background-image: url("http://{{hosts[][]}}:{{ports[http][1]}}/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg");

</style>

</head>

<body>

  <canvas id="target" width="100" height="50"></canvas>

  <div id="loader"></div>

  <img id="probe" style="display:none">

</body>

<script>

  const probe = document.getElementById('probe');

  probe.onload = () => {

    requestAnimationFrame(() => requestAnimationFrame(() => {

      const loader = document.getElementById('loader');

      const cssImage = loader.computedStyleMap().get('background-image');

      const ctx = document.getElementById('target').getContext('2d');

      ctx.drawImage(cssImage, 0, 0);

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

    }));

};

  probe.src = getComputedStyle(document.getElementById('loader'))

      .backgroundImage.slice(5, -2);

</script>

</html>