| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Check repaint region of fillRect() and drawImage() with different com
posite 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="../../fast/canvas/resources/canvas_video.mp4" type='video/mp
4' /> |
| 36 <source src="../../fast/canvas/resources/canvas_video.webm" type='video/we
bm' /> |
| 37 <source src="../../fast/canvas/resources/canvas_video.ogv" type='video/og
g' /> |
| 38 </video></div> |
| 39 <script src="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 ta
sk, |
| 153 // the repaint test has to end in a subsequent task in order to capture th
e 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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2321183002:
Move repaint tests (except for svg/) to paint/invalidation (Closed)
