third_party/WebKit/LayoutTests/fast/canvas/check-stale-putImageData.html

   1 <html><head></head><body>
   2     1, 3, and 4 should all show the same red square. 2 should show nothing.
   3 <ol>
   4 <li><canvas id="canvas" width="100" height="100"></canvas></li>
   5 <li><img src="" id="a"></li>
   6 <li><img src="" id="b"></li>
   7 <li><img src="" id="c"></li>
   8 </ol>
   9
  10 <script type="text/javascript">
  11
  12 if (window.testRunner)
  13   testRunner.dumpAsTextWithPixelResults();
  14
  15 var canvas = document.getElementById( 'canvas' );
  16 var context = canvas.getContext( '2d' );
  17 var img = context.getImageData( 0, 0, canvas.width, canvas.height );
  18
  19 var img_a = canvas.toDataURL( 'image/png' );
  20
  21 /* fill with red */
  22 for ( var i = 0; i < img.data.length; i += 4 )
  23         img.data[i] = img.data[i+3] = 255;
  24
  25 context.putImageData( img, 0, 0 );
  26 var img_b = canvas.toDataURL( 'image/png' );
  27
  28 console.log( 'a == b? ' + (img_a == img_b) );
  29
  30 context.moveTo( 0, 0 );
  31 context.lineTo( 0, 0 );
  32 context.stroke();
  33
  34 var img_c = canvas.toDataURL( 'image/png' );
  35 console.log( 'a == c? ' + (img_a == img_c) );
  36
  37 document.getElementById( 'a' ).src = img_a;
  38 document.getElementById( 'b' ).src = img_b;
  39 document.getElementById( 'c' ).src = img_c;
  40 </script>
  41
  42 </body></html>