<!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>