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

   1 <html>
   2   <head>
   3     <title>A canvas globalCompositeOperation example</title>
   4     <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
   5     <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
   6     <script type="application/x-javascript">
   7       if (window.testRunner)
   8             testRunner.dumpAsTextWithPixelResults();
   9
  10       // This test should show a table of canvas elements. The canvas elements have transforms
  11       // applied, and onto the background a blue square is drawn, either fully opaque or with some
  12       // transparency.
  13
  14       // Then clip is added, which with the transform taken into account only allows drawing into
  15       // the bottom of the canvas.
  16
  17       // Then either a green rectangle or a green ellipse is drawn, either fully opaque or with
  18       // some transparency. These are drawn with a different compositing mode for every row.
  19
  20       // In each cell the top half should be same from one row to the next as changes here are
  21       // clipped out.
  22
  23       // In each row the green rectangle or ellipse should be drawn with the appropriate compositing
  24       // mode, as per the HTML5 canvas spec.
  25
  26       // In each cell the drawing should be contained within the cell boundary.
  27
  28       // These map to the rows of the table
  29       var compositeTypes = [
  30         'source-over','source-in','source-out','source-atop',
  31         'destination-over','destination-in','destination-out','destination-atop',
  32         'lighter','copy','xor'
  33       ];
  34       // These map to the columns of the table
  35       var testNames = [
  36         'solid rect on solid', 'alpha rect on solid', 'solid rect on alpha',
  37         'alpha rect on alpha', 'solid path on solid', 'alpha path on solid',
  38         'solid path on alpha', 'alpha path on alpha',
  39       ];
  40       function createOutputTable() {
  41         var tableEl = document.getElementById('outputtable');
  42         var row = tableEl.insertRow(-1);
  43         var cell = row.insertCell(-1);
  44         var label;
  45         var canvas;
  46         for (var i = 0; i < compositeTypes.length; i++) {
  47           row = tableEl.insertRow(-1);
  48           for (var j = 0; j < testNames.length; j++) {
  49             canvas = document.createElement('canvas');
  50             canvas.width = 65;
  51             canvas.height = 45;
  52             canvas.id = compositeTypes[i] + testNames[j];
  53             cell = row.insertCell(-1);
  54             cell.appendChild(canvas);
  55           }
  56         }
  57       }
  58       function getContext(compositeIndex, testIndex) {
  59         var id = compositeTypes[compositeIndex] + testNames[testIndex];
  60         var context = document.getElementById(id).getContext('2d');
  61         return context;
  62       }
  63       function setupContext(context, alpha) {
  64         context.translate(40, 0);
  65         context.rotate(Math.PI / 2);
  66         context.scale(0.2, 0.4);
  67         context.translate(-1000, -2000);
  68         if (alpha) {
  69           context.fillStyle = 'rgba(00,100,255,0.5)';
  70         } else {
  71           context.fillStyle = 'rgba(00,100,255,1)';
  72         }
  73         context.fillRect(1020, 2010, 160, 80);
  74         context.beginPath();
  75         context.moveTo(1100, 1900);
  76         context.lineTo(1500, 1900);
  77         context.lineTo(1500, 2200);
  78         context.lineTo(1100, 2200);
  79         context.clip();
  80       }
  81       function doFill(context, compositeIndex, alpha, path) {
  82         context.globalCompositeOperation = compositeTypes[compositeIndex];
  83         if (alpha) {
  84           context.fillStyle = 'rgba(64,255,0,0.5)';
  85         } else {
  86           context.fillStyle = 'rgba(64,255,0,1)';
  87         }
  88         if (path) {
  89           context.beginPath();
  90           context.arc(1100, 2000, 50  , 0, Math.PI*2, true);
  91           context.fill();
  92         } else {
  93           context.fillRect(1040, 1950, 120, 100);
  94         }
  95       }
  96       function draw() {
  97         createOutputTable();
  98         for (var i = 0; i < compositeTypes.length; i++) {
  99           for (var j = 0; j < testNames.length; j++) {
 100             var context = getContext(i, j);
 101             setupContext(context, j % 4 > 1);
 102             doFill(context, i, j % 2, j > 3);
 103           }
 104         }
 105       }
 106     </script>
 107     <style type="text/css">
 108       body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff;}
 109       canvas { border: 1px solid #999; }
 110       td { margin: 0px; padding: 0px; }
 111       table { border-collapse: collapse; }
 112     </style>
 113   </head>
 114   <body onload="draw();">
 115     <div>
 116       <table id='outputtable'>
 117       </table>
 118     </div>
 119   </body>
 120 </html>