<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Uses CALayerOverlay Test</title>
<script>
async function main() {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('bitmaprenderer');
const bg_canvas = new OffscreenCanvas(canvas.width, canvas.height);
const bg_ctx = bg_canvas.getContext('2d');
bg_ctx.clearRect(0, 0, canvas.width, canvas.height);
bg_ctx.fillStyle = "Black";
bg_ctx.fillRect(0, 0, 100, 100);
const image1 = await createImageBitmap(bg_canvas);
context.transferFromImageBitmap(image1);
async function errorCodeHandler(errorCode) {
bg_ctx.clearRect(0, 0, canvas.width, canvas.height);
if (errorCode == 0) {
console.log("CALayerOverlay is being used");
bg_ctx.fillStyle = "DarkGreen";
if (window.domAutomationController) {
window.domAutomationController.send("SUCCESS");
}
} else {
console.log("CALayerOverlay is not used. Error code:" , errorCode);
bg_ctx.fillStyle = "Red";
if (window.domAutomationController) {
window.domAutomationController.send("FAILED");
}
}
bg_ctx.fillRect(0, 0, 100, 100);
const image = await createImageBitmap(bg_canvas);
context.transferFromImageBitmap(image);
}
async function draw() {
if (!chrome.gpuBenchmarking.addCoreAnimationStatusEventListener(errorCodeHandler)) {
console.log("addCoreAnimationStatusEventListener fails!");
if (window.domAutomationController) {
window.domAutomationController.send("FAILED");
}
}
}
window.requestAnimationFrame(draw);
}
</script>
</head>
<body onload="main()">
<canvas id="canvas" width="100" height="100">
</body>
</html>