| <!DOCTYPE html> |
| <html> |
| <body> |
| <style type="text/css"> |
| canvas { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <canvas id="source"></canvas> |
| <canvas id="target"></canvas> |
| <script src="../resources/runner.js"></script> |
| <script> |
| source.width = 2000; |
| source.height = 2000; |
| var ctx1 = source.getContext("2d"); |
| ctx1.globalCompositeOperation = "copy"; |
| |
| target.width = source.width; |
| target.height = source.height; |
| var ctx2 = target.getContext("2d"); |
| ctx2.globalCompositeOperation = "copy"; |
| |
| var isDone = false; |
| PerfTestRunner.prepareToMeasureValuesAsync({ done: done, unit: 'ms' }); |
| function done() { |
| isDone = true; |
| } |
| async function runTest() { |
| let startTime = PerfTestRunner.now(); |
| for (let i = 0.0; i < 100.0; i += 1.0) { |
| ctx1.fillStyle = `rgba(0, ${i}, 0, 0.5)`; |
| ctx1.fillRect(0, 0, source.width, source.height); |
| let imageBitmap = await createImageBitmap(source); |
| ctx2.drawImage(imageBitmap, 0, 0); |
| } |
| ctx2.getImageData(0, 0, 1, 1); // FIXME: WebKit does not have backpressure, draws too much. |
| PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime); |
| if (!isDone) |
| setTimeout(runTest, 0); |
| } |
| runTest(); |
| </script> |
| </body> |
| </html> |
