canvas-drawImage-animated-images.html

<html>
<!-- canvas.drawImage() for animated images should draw the initial
  frame (or poster frame) of the animated image. -->

<body>
  <style>
    canvas { width : 315px; height: 236px; }
  </style>
  <canvas id='canvas1'></canvas>
    <img onload='loaded(this, "GIF ", 1)'><br>
  <canvas id='canvas2'></canvas>
    <img onload='loaded(this, "APNG", 2)'><br>
  <canvas id='canvas3'></canvas>
    <img onload='loaded(this, "WEBP", 3)'><br>
  <pre id='results'></pre>
</body>

<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
  testRunner.dumpAsText();
}

var sources = [
  '../../images/resources/count-down-color-test.gif',
  '../../images/resources/count-down-color-test.png',
  '../../images/resources/count-down-color-test.webp',
];

function loaded(img, name, i) {
  // Advance the image away from frame 0 to a frame that has black,
  // white and gray pixels, viz., no color pixels.
  var noColorFrameDelayInMS = 1500;
  setTimeout(runTest, noColorFrameDelayInMS);

  function runTest() {
    requestAnimationFrame(function test() {
      results.textContent += name + ' image test: ';
      drawImageToCanvasTest(img, i);
      startNextTestIfNeeded(i);
    });
  }
}

function drawImageToCanvasTest(img, i) {
  var canvas = document.querySelector('#canvas' + i);
  canvas.width = img.width;
  canvas.height = img.height;

  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  testImagePixel(context, img);
}

function testImagePixel(context, img) {
  var center = { x : img.width / 2, y : img.height / 2 };

  try {
    var pixel = context.getImageData(center.x, center.y, 1, 1);
  } catch (exception) {
    results.textContent += 'FAIL: ' + exception + '\n';
    return;
  }

  // Frame 0 has color pixels: PASS if the center pixel is ~green.
  var green =
    pixel.data[0] < 5 && pixel.data[1] > 180 && pixel.data[2] < 5;
  results.textContent += green ? 'PASS\n' : 'FAIL\n';
}

function startNextTestIfNeeded(i) {
  if (i < sources.length) {
    document.querySelectorAll('img')[i].src = sources[i];
  } else if (window.testRunner) {
    testRunner.notifyDone();
  }
}

startNextTestIfNeeded(0);
</script>
</html>
chromium/third_party/blink/web_tests/fast/canvas/canvas-drawImage-animated-images.html
