| 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="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 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)
