<!DOCTYPE html>
<html>
<!--
Acquiring the swapchain texture without presenting should render transparent black.
This is a test for crbug.com/1240182 where previous frames' contents were presented
if the current texture for the frame was acquired but not rendered to.
-->
<head>
<style type="text/css">
.nomargin {
margin: 0;
}
</style>
<script type="text/javascript">
var g_swapsBeforeAck = 15;
function waitForFinish() {
if (g_swapsBeforeAck == 0) {
sendResult("SUCCESS");
} else {
g_swapsBeforeAck--;
window.requestAnimationFrame(waitForFinish);
}
}
function sendResult(status) {
if (window.domAutomationController) {
window.domAutomationController.send(status);
} else {
console.log(status);
}
}
async function main() {
const canvas = document.getElementById('canvas_gpu');
const adapter = await navigator.gpu?.requestAdapter();
const device = await adapter?.requestDevice();
const context = canvas.getContext('webgpu');
if (!device || !context) {
console.error("Failed to initialize WebGPU");
sendResult("FAILURE");
}
context.configure({
device: device,
format: 'bgra8unorm',
usage: GPUTextureUsage.RENDER_ATTACHMENT,
alphaMode: 'premultiplied',
});
let framesToRender = 30;
function renderCallback() {
// Fill the swap buffer cache with rendered textures.
if (framesToRender-- > 0) {
const renderPassDescriptor = {
colorAttachments: [
{
view: context.getCurrentTexture().createView(),
loadOp: 'clear',
clearValue: { r: 1.0, g: 0.0, b: 0.0, a: 1.0 },
storeOp: 'store',
},
],
};
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
window.requestAnimationFrame(renderCallback);
return;
}
// Acquire the texture and do nothing with it.
// We should expect to render transparent black (0, 0, 0, 0).
context.getCurrentTexture();
waitForFinish();
};
window.requestAnimationFrame(renderCallback);
}
</script>
</head>
<body onload="main()" style="background: rgb(100, 100, 100)">
<canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas>
</body>
</html>