| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| var aCanvas = new OffscreenCanvas(60, 40); |
| |
| // TransferToImageBitmap on an OffscreenCanvas with no context |
| shouldThrow("aCanvas.transferToImageBitmap()"); |
| ctx = aCanvas.getContext('2d'); |
| |
| // Verify ImageBitmap is correctly sized |
| var image = aCanvas.transferToImageBitmap(); |
| shouldBe("image.width", "60"); |
| shouldBe("image.height", "40"); |
| |
| // Verify state is preserved through transferToImageBitmap() |
| ctx.lineWidth = 5; |
| aCanvas.transferToImageBitmap(); |
| shouldBe("ctx.lineWidth", "5"); |
| |
| // Verify backing is reset through transferToImageBitmap() |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, aCanvas.width, aCanvas.height); |
| var firstImage = aCanvas.transferToImageBitmap(); |
| var secondImage = aCanvas.transferToImageBitmap(); |
| var testCanvas = document.createElement('canvas'); |
| var testCtx = testCanvas.getContext('2d'); |
| testCtx.drawImage(firstImage, 0, 0); |
| var imgData = testCtx.getImageData(0, 0, 1, 1).data; |
| shouldBe("imgData[0]", "255"); |
| shouldBe("imgData[1]", "0"); |
| shouldBe("imgData[2]", "0"); |
| shouldBe("imgData[3]", "255"); |
| testCtx.clearRect(0, 0, testCanvas.width, testCanvas.height); |
| testCtx.drawImage(secondImage, 0, 0); |
| imgData = testCtx.getImageData(0, 0, 1, 1).data; |
| shouldBe("imgData[0]", "0"); |
| shouldBe("imgData[1]", "0"); |
| shouldBe("imgData[2]", "0"); |
| shouldBe("imgData[3]", "0"); |
| |
| </script> |
