| <!DOCTYPE html> |
| <canvas id='canvas'></canvas> |
| <script> |
| var documentCanvas = document.getElementById('canvas'); |
| documentCanvas.width = documentCanvas.height = 100; |
| var offscreenContext = documentCanvas.transferControlToOffscreen().getContext( |
| "2d"); |
| offscreenContext.fillStyle = "green"; |
| offscreenContext.fillRect(0, 0, 100, 100); |
| |
| // For testing that the offscreen canvas has drawn |
| var testCanvas = document.createElement("canvas"); |
| var testContext = testCanvas.getContext("2d"); |
| |
| // Make sure that the canvas has been drawn to before capturing |
| function waitForCanvasToDraw() { |
| return new Promise(resolve => { |
| var testPixel = function() { |
| testContext.drawImage(documentCanvas, 0, 0); |
| // Get the pixel in the upper left corner |
| var pixel = testContext.getImageData(0, 0, 1, 1).data; |
| if (pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0) { |
| // pixel is still empty, wait |
| requestAnimationFrame(testPixel); |
| return; |
| } else { |
| resolve(); |
| } |
| } |
| testPixel(); |
| }); |
| } |
| |
| if (window.testRunner) { |
| testRunner.setPrinting(); |
| testRunner.waitUntilDone(); |
| waitForCanvasToDraw().then(() => { |
| testRunner.notifyDone() |
| }); |
| } |
| </script> |