src/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-animated.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3     <head>
   4         <script src="../../resources/js-test.js"></script>
   5     </head>
   6     <body onload="javascript:ready()">
   7
   8         <!-- This image is an animated GIF (1px by 1px). Animation time is 0ms. First frame has the color rgb(64, 4, 30). The second one has the color rgb(10, 153, 30) -->
   9         <img id="image" src="data:image/gif;base64,R0lGODlhAQABAIACAEAEHgqZHiH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAkAAAEALAAAAAABAAEAAAICRAEAIfkECAAA/wAsAAAAAAEAAQAAAgJMAQA7" alt="Animated Image" />
  10         <canvas id="canvas" width="1" height="1"></canvas>
  11
  12         <script>
  13             description("When drawing an animated image to a canvas, the poster frame (or the first frame) should be printed.<br/>This test passes if the canvas is filled with the color rgb(64, 4, 30).");
  14
  15             if (window.testRunner) {
  16                 testRunner.waitUntilDone();
  17             }
  18
  19
  20             function ready() {
  21                 var canvas = document.getElementById("canvas");
  22                 var image = document.getElementById("image");
  23
  24                 var canvasContext = canvas.getContext("2d");
  25
  26                 window.setTimeout(function() {
  27
  28                     canvasContext.drawImage(image, 0, 0);
  29
  30                     imageData = canvasContext.getImageData(0, 0, 1, 1);
  31
  32                     shouldBe("imageData.data[0]", "64");
  33                     shouldBe("imageData.data[1]", "4");
  34                     shouldBe("imageData.data[2]", "30");
  35
  36                     if (window.testRunner)
  37                         testRunner.notifyDone();
  38
  39                 }, 200);
  40             }
  41         </script>
  42
  43     </body>
  44 </html>