Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Check repaint region of fillRect() and drawImage() with different com posite modes.</title> | 4 <title>Check repaint region of fillRect() and drawImage() with different com posite modes.</title> |
| 5 <style type="text/css"> | 5 <style type="text/css"> |
| 6 body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff ; } | 6 body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff ; } |
| 7 canvas { border: 1px solid #999; } | 7 canvas { border: 1px solid #999; } |
| 8 div { margin: 10px; } | 8 div { margin: 10px; } |
| 9 #output h1 { font-size: medium; font-weight: normal; } | 9 #output h1 { font-size: medium; font-weight: normal; } |
| 10 #output h2 { font-size: small; font-weight: normal; } | 10 #output h2 { font-size: small; font-weight: normal; } |
| (...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 120 } | 120 } |
| 121 | 121 |
| 122 function drawCanvas(context) { | 122 function drawCanvas(context) { |
| 123 context.drawImage(document.getElementById('source-canvas'), 10, 10); | 123 context.drawImage(document.getElementById('source-canvas'), 10, 10); |
| 124 } | 124 } |
| 125 | 125 |
| 126 function drawVideo(context) { | 126 function drawVideo(context) { |
| 127 context.drawImage(document.getElementById('video'), 10, 10); | 127 context.drawImage(document.getElementById('video'), 10, 10); |
| 128 } | 128 } |
| 129 | 129 |
| 130 function repaintTestAt(i, j) { | |
|
wkorman
2016/07/19 21:49:21
This looks like it is from a different change?
chrishtr
2016/07/19 21:55:06
Removed. Was for debugging.
| |
| 131 var context = getContext(i, j); | |
| 132 context.globalCompositeOperation = compositeTypes[i]; | |
| 133 switch (testNames[j]) { | |
| 134 case 'solid color': | |
| 135 drawRect(context); | |
| 136 break; | |
| 137 case 'image': | |
| 138 drawImage(context); | |
| 139 break; | |
| 140 case 'canvas': | |
| 141 drawCanvas(context); | |
| 142 break; | |
| 143 case 'video': | |
| 144 drawVideo(context); | |
| 145 } | |
| 146 context.restore(); | |
| 147 } | |
| 148 | |
| 130 // callback from text-based-repaint.js | 149 // callback from text-based-repaint.js |
| 131 function repaintTest() { | 150 function repaintTest() { |
| 132 for (var i = 0; i < compositeTypes.length; i++) { | 151 for (var i = 0; i < compositeTypes.length; i++) { |
| 133 for (var j = 0; j < testNames.length; j++) { | 152 for (var j = 0; j < testNames.length; j++) { |
| 134 var context = getContext(i, j); | 153 repaintTestAt(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 } | 154 } |
| 151 } | 155 } |
| 152 // Because canvas invalidations are processed at the end of the current ta sk, | 156 // 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. | 157 // the repaint test has to end in a subsequent task in order to capture th e repaint. |
| 154 setTimeout(finishRepaintTest, 0); | 158 setTimeout(finishRepaintTest, 0); |
| 155 } | 159 } |
| 156 | 160 |
| 157 // we can start this test after the video can be played. | 161 // we can start this test after the video can be played. |
| 158 function startTest() { | 162 function startTest() { |
| 159 video.removeEventListener("playing", startTest, true); | 163 video.removeEventListener("playing", startTest, true); |
| 160 prepareRepaintTest(); | 164 prepareRepaintTest(); |
| 161 runRepaintTest(); | 165 runRepaintTest(); |
| 162 } | 166 } |
| 163 | 167 |
| 164 var video = document.getElementById("video"); | 168 var video = document.getElementById("video"); |
| 165 video.addEventListener("playing", startTest, true); | 169 video.addEventListener("playing", startTest, true); |
| 166 video.play(); | 170 video.play(); |
| 167 | 171 |
| 168 var imageElement = document.getElementById('image'); | 172 var imageElement = document.getElementById('image'); |
| 169 var canvas = document.getElementById('source-canvas'); | 173 var canvas = document.getElementById('source-canvas'); |
| 170 canvas.width = imageElement.width; | 174 canvas.width = imageElement.width; |
| 171 canvas.height = imageElement.height; | 175 canvas.height = imageElement.height; |
| 172 var context = canvas.getContext('2d'); | 176 var context = canvas.getContext('2d'); |
| 173 context.drawImage(imageElement, 0, 0); | 177 context.drawImage(imageElement, 0, 0); |
| 174 | 178 |
| 175 window.testIsAsync = true; | 179 window.testIsAsync = true; |
| 176 </script> | 180 </script> |
| 177 </body> | 181 </body> |
| 178 </html> | 182 </html> |
| 183 <script> | |
| 184 onload = function() { | |
| 185 setTimeout(() => repaintTestAt(10, 3), 3000); | |
| 186 } | |
| 187 </script> | |
| OLD | NEW |