color-profile-image-canvas-svg.html

<!DOCTYPE html>
<html>
<script src="../resources/run-after-layout-and-paint.js"></script>

<style>
  canvas, img { margin-bottom: -10px; }
</style>

<body style="overflow: hidden">
  <!-- The red sector of the canvas images should be at 12 o'clock. -->
  <p title="html canvas 2d element">
    <canvas width="700px" height="200px" />
  </p>
  <!-- The blue sector of the source images should be at 12 o'clock. -->
  <img title="source image to draw on canvas">
</body>

<script>
window.onload = function() {
  var image = document.querySelector('img');

  image.onload = function() {
    runAfterLayoutAndPaint(loadedImage);
  };

  image.src = 'resources/color-profile-image-data-url.svg';
};

function loadedImage() {
  setTimeout(drawImageToCanvas, 0, document.querySelector('img'));
}

function drawImageToCanvas(image) {
  var canvas = document.querySelector('canvas');

  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
  canvas.getContext('2d').drawImage(image, 0, 0);

  if (window.testRunner)
    setTimeout(function() { testRunner.notifyDone() }, 0);
}

if (window.testRunner)
  testRunner.waitUntilDone();
</script>
</html>
chromium/third_party/blink/web_tests/images/color-profile-image-canvas-svg.html
