LayoutTests/fast/images/animated-gif-restored-from-bfcache.html

   1 <script>
   2     if (window.layoutTestController) {
   3         layoutTestController.dumpAsText();
   4         layoutTestController.overridePreference("WebKitUsesPageCachePreferenceKey", 1);
   5     }
   6
   7     function runTest() {
   8         if (window.layoutTestController)
   9             layoutTestController.waitUntilDone();
  10
  11         var image = document.getElementById("image");
  12         var console = document.getElementById("console");
  13         var context = document.getElementById("canvas").getContext("2d");
  14
  15         image.style.visibility = "visible";
  16
  17         context.drawImage(image, 0, 0);
  18         var frameOne = context.getImageData(0, 0, 1, 1).data;
  19
  20         window.setTimeout(function() {
  21             context.drawImage(image, 0, 0);
  22             var frameTwo = context.getImageData(0, 0, 1, 1).data;
  23
  24             // Compare RGBA of the two frames
  25             if (frameOne[0] == frameTwo[0]
  26                 && frameOne[1] == frameTwo[1]
  27                 && frameOne[2] == frameTwo[2]
  28                 && frameOne[3] == frameTwo[3])
  29                 console.innerHTML = "<span style='color:red'>FAIL</span>";
  30             else
  31                 console.innerHTML = "<span style='color:green'>PASS</span>";
  32
  33             if (window.layoutTestController)
  34                 layoutTestController.notifyDone();
  35         }, 100);
  36     }
  37
  38     window.onpageshow = function(event) {
  39         if (!event.persisted && window.layoutTestController) {
  40             layoutTestController.queueLoad("about:blank");
  41             layoutTestController.queueBackNavigation(1);
  42             return;
  43         }
  44
  45         if (event.persisted)
  46             runTest();
  47     }
  48 </script>
  49 <p>Test that animated GIFs resume animating after restoring a page from the back forward cache. To test manually, click <a href="about:blank">here</a> to visit about:blank, then press the browser's back button. On success, you should see a square that continuously animates through various shades of green followed by the word 'PASS'.</p>
  50 <img id="image" style="visibility:hidden" src="resources/animated-10color.gif">
  51 <div id="console"></div>
  52 <canvas id="canvas" style="visibility:hidden"><span style="color:red">FAIL</span></canvas>