<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
var aCanvas = new OffscreenCanvas(50, 50);
var ctx = aCanvas.getContext('2d');
ctx.rect(0, 0, 25, 50);
ctx.clip();
ctx.translate(20, 20);
// Verify backing is reset through transferToImageBitmap()
ctx.fillStyle = '#0f0';
var firstImage = aCanvas.transferToImageBitmap();
// transform should be preserved
ctx.fillRect(0, 0, 10, 10);
var secondImage = aCanvas.transferToImageBitmap();
var testCanvas = document.createElement('canvas');
var testCtx = testCanvas.getContext('2d', {willReadFrequently: true});
testCtx.drawImage(secondImage, 0, 0);
// Verify that transform was carried over.
var imgData = testCtx.getImageData(23, 25, 1, 1).data;
shouldBe("imgData[0]", "0");
shouldBe("imgData[1]", "255");
shouldBe("imgData[2]", "0");
shouldBe("imgData[3]", "255");
// Verify that clip was carried over.
var imgData = testCtx.getImageData(27, 25, 1, 1).data;
shouldBe("imgData[0]", "0");
shouldBe("imgData[1]", "0");
shouldBe("imgData[2]", "0");
shouldBe("imgData[3]", "0");
</script>