third_party/WebKit/LayoutTests/fast/canvas/canvas-composite-repaint-by-all-imagesource.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Check repaint region of fillRect() and drawImage() with different composite modes.</title>
   5     <style type="text/css">
   6       body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
   7       canvas { border: 1px solid #999; }
   8       div { margin: 10px; }
   9       #output h1 { font-size: medium; font-weight: normal; }
  10       #output h2 { font-size: small; font-weight: normal; }
  11       #output div { font-size: small; margin: 0px; }
  12       #output .pass { color: green; }
  13       #output .fail { color: rgb(255, 0, 0); }
  14       #output .error { color: rgb(255, 0, 64); }
  15       td { padding: 2px 5px; }
  16       table { border-collapse: collapse; }
  17     </style>
  18   </head>
  19   <body>
  20     <div>Test Results</div>
  21     <div><table id='outputtable'></table></div>
  22     <div>Test Image</div>
  23     <div><img id = "image" src="data:image/png;base64,
  24       iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
  25       AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
  26       DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
  27       FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
  28       iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
  29       rkJggg==
  30     "></div>
  31     <div>Test Canvas</div>
  32     <div><canvas id = "source-canvas"></canvas></div>
  33     <div>Test Video</div>
  34     <div><video id="video">
  35       <source src="resources/canvas_video.mp4"  type='video/mp4' />
  36       <source src="resources/canvas_video.webm" type='video/webm' />
  37       <source src="resources/canvas_video.ogv"  type='video/ogg' />
  38     </video></div>
  39     <script src="../repaint/resources/text-based-repaint.js"></script>
  40     <script type="application/x-javascript">
  41     // These map to the rows of the table
  42     var compositeTypes = [
  43       'source-over','source-in','source-out','source-atop',
  44       'destination-over','destination-in','destination-out','destination-atop',
  45       'lighter','copy','xor'
  46     ];
  47
  48     // These map to the columns of the table
  49     var testNames = [
  50       'solid color', 'image', 'canvas', 'video'
  51     ];
  52
  53     function createOutputTable() {
  54       var tableEl = document.getElementById('outputtable');
  55       var row = tableEl.insertRow(-1);
  56       var cell = row.insertCell(-1);
  57       var label;
  58       for (var j = 0; j < testNames.length; j++) {
  59         cell = row.insertCell(-1);
  60         label = document.createTextNode(testNames[j]);
  61         cell.appendChild(label);
  62       }
  63       for (var i = 0; i < compositeTypes.length; i++) {
  64         row = tableEl.insertRow(-1);
  65         cell = row.insertCell(-1);
  66         label = document.createTextNode(compositeTypes[i]);
  67         cell.appendChild(label);
  68         for (var j = 0; j < testNames.length; j++) {
  69           var canvas = document.createElement('canvas');
  70           canvas.width = 130;
  71           canvas.height = 40;
  72           canvas.id = compositeTypes[i] + testNames[j];
  73           cell = row.insertCell(-1);
  74           cell.appendChild(canvas);
  75         }
  76       }
  77     }
  78
  79     function getContext(compositeIndex, testIndex) {
  80       var id = compositeTypes[compositeIndex] + testNames[testIndex];
  81       var context = document.getElementById(id).getContext('2d');
  82       return context;
  83     }
  84
  85     function setupContext(context) {
  86       context.fillStyle = 'blue';
  87       context.fillRect(5, 5, 120, 30);
  88       context.beginPath();
  89       context.moveTo(0, 0);
  90       context.lineTo(0, 45);
  91       context.lineTo(80, 45);
  92       context.lineTo(80, 0);
  93       context.clip();
  94       context.translate(40, -10);
  95       context.scale(0.4, 0.6);
  96       context.rotate(Math.PI / 8);
  97       context.translate(-10, -10);
  98     }
  99
 100     function prepareRepaintTest() {
 101       if (window.testRunner)
 102         testRunner.dumpAsText();
 103       createOutputTable();
 104       for (var i = 0; i < compositeTypes.length; i++) {
 105         for (var j = 0; j < testNames.length; j++) {
 106           var context = getContext(i, j);
 107           context.save();
 108           setupContext(context);
 109         }
 110       }
 111     }
 112
 113     function drawRect(context) {
 114       context.fillStyle = 'green';
 115       context.fillRect(10, 10, 150, 60);
 116     }
 117
 118     function drawImage(context) {
 119       context.drawImage(document.getElementById('image'), 10, 10);
 120     }
 121
 122     function drawCanvas(context) {
 123       context.drawImage(document.getElementById('source-canvas'), 10, 10);
 124     }
 125
 126     function drawVideo(context) {
 127       context.drawImage(document.getElementById('video'), 10, 10);
 128     }
 129
 130     // callback from text-based-repaint.js
 131     function repaintTest() {
 132       for (var i = 0; i < compositeTypes.length; i++) {
 133         for (var j = 0; j < testNames.length; j++) {
 134           var context = getContext(i, j);
 135           context.globalCompositeOperation = compositeTypes[i];
 136           switch (testNames[j]) {
 137           case 'solid color':
 138             drawRect(context);
 139             break;
 140           case 'image':
 141             drawImage(context);
 142             break;
 143           case 'canvas':
 144             drawCanvas(context);
 145             break;
 146           case 'video':
 147             drawVideo(context);
 148           }
 149           context.restore();
 150         }
 151       }
 152       // Because canvas invalidations are processed at the end of the current task,
 153       // the repaint test has to end in a subsequent task in order to capture the repaint.
 154       setTimeout(finishRepaintTest, 0);
 155     }
 156
 157     // we can start this test after the video can be played.
 158     function startTest() {
 159       video.removeEventListener("playing", startTest, true);
 160       prepareRepaintTest();
 161       runRepaintTest();
 162     }
 163
 164     var video = document.getElementById("video");
 165     video.addEventListener("playing", startTest, true);
 166     video.play();
 167
 168     var imageElement = document.getElementById('image');
 169     var canvas = document.getElementById('source-canvas');
 170     canvas.width = imageElement.width;
 171     canvas.height = imageElement.height;
 172     var context = canvas.getContext('2d');
 173     context.drawImage(imageElement, 0, 0);
 174
 175     window.testIsAsync = true;
 176     </script>
 177   </body>
 178 </html>