src/third_party/WebKit/LayoutTests/compositing/images/content-image-change.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4 <title>Image layer content change</title>
   5
   6 <style type="text/css" media="screen">
   7     #image {
   8         width: 200px;
   9         height: 200px;
  10         transform: translateZ(0);
  11     }
  12 </style>
  13 <script type="text/javascript" charset="utf-8">
  14     if (window.testRunner) {
  15         testRunner.waitUntilDone();
  16         testRunner.dumpAsTextWithPixelResults();
  17     }
  18     function doTest()
  19     {
  20         var image = document.getElementById("image");
  21
  22         window.setTimeout(function() {
  23             // Change the contents to green.
  24             image.src =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADElEQVR4nGNg+M8AAAICAQB7CYF4AAAAAElFTkSuQmCC"
  25             if (window.testRunner) {
  26                 window.setTimeout(function() {
  27                     testRunner.notifyDone();
  28                 }, 0);
  29             }
  30         }, 0);
  31     }
  32
  33     window.addEventListener('load', doTest, false);
  34 </script>
  35 </head>
  36 <body>
  37 <!-- When the test is done, there should only be a green square on the page -->
  38
  39 <!-- Start with a red image -->
  40 <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC" />
  41
  42 </body>
  43 </html>