third_party/WebKit/LayoutTests/fast/canvas/canvas-composite-image.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Test drawImage(image) with canvas with different composite modes.</title>
   5     <script src="resources/canvas-composite-image-common.js"></script>
   6     <script type="application/x-javascript">
   7       function drawImage(context, compositeIndex, alpha) {
   8         context.globalCompositeOperation = compositeTypes[compositeIndex];
   9         if (alpha)
  10           context.globalAlpha = 0.5;
  11         var imageElement = document.getElementById('image');
  12         context.drawImage(imageElement, 10, 10);
  13       }
  14
  15       function setupTest() {}
  16
  17     </script>
  18     <style type="text/css">
  19       body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
  20       canvas { border: 1px solid #999; }
  21       div { margin: 10px; }
  22       #output h1 { font-size: medium; font-weight: normal; }
  23       #output h2 { font-size: small; font-weight: normal; }
  24       #output div { font-size: small; margin: 0px; }
  25       #output .pass { color: green; }
  26       #output .fail { color: rgb(255, 0, 0); }
  27       #output .error { color: rgb(255, 0, 64); }
  28       td { padding: 2px 5px; }
  29       table { border-collapse: collapse; }
  30     </style>
  31   </head>
  32   <body onload='runTest("dumpAsText");'>
  33     <div>Test Results</div>
  34     <div><table id='outputtable'></table></div>
  35     <div>Test Image</div>
  36     <div><img id = "image" src="data:image/png;base64,
  37       iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
  38       AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
  39       DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
  40       FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
  41       iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
  42       rkJggg==
  43     "></div>
  44     <div>Test Output</div>
  45     <div id='output'></div>
  46   </body>
  47 </html>