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

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

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

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

/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-css-image-value-ref.sub.html

<!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 (reference)</title>
<style>
  #target { image-orientation: none; }
</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 ctx = document.getElementById('target').getContext('2d');
      ctx.drawImage(probe, 0, 0);
      document.documentElement.classList.remove('reftest-wait');
    }));
  };
  probe.src = "http://{{hosts[][]}}:{{ports[http][1]}}/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg";
</script>
</html>