LayoutTests/fast/webgpu/draw-element-image-transparent-rect.html

<!DOCTYPE html><!-- webkit-test-runner [ HTMLInCanvasEnabled=true ] -->
<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-320">
<style>
    canvas {
        width: 240px;
        height: 240px;
        border: solid 1px black;
        image-rendering: crisp-edges;
    }
    .box {
        height: 100px;
        width: 100px;
        background-color: rgb(0 255 0 / 0.5);
        border: solid 10px rgb(0 0 255);
    }
    .right-bottom {
        background-color: rgb(255 0 0 / 0.5);
    }
</style>
<body>
    <h3>Test drawing a canvas drawable element in a WebGPU canvas.</h3>
    <canvas id="canvas" width="240" height="240" content="drawable">
        <div id="box1" class="box" drawable></div>
        <div id="box2" class="right-bottom box" drawable></div>
    </canvas>
    <script>
        (async () => {
            if (window.testRunner)
                testRunner.waitUntilDone();

            const canvas = document.getElementById("canvas");
            const adapter = await navigator.gpu.requestAdapter();
            const device = await adapter.requestDevice();

            const context = canvas.getContext("webgpu");
            const format = navigator.gpu.getPreferredCanvasFormat();

            context.configure({ 
                device, 
                format, 
                alphaMode: "premultiplied", 
                usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
            });

            const texture = device.createTexture({
                size: [240, 240],
                format,
                usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
            });

            function runTest() {
                const box2Image = canvas.captureElementImage(box2);

                device.queue.drawElementImageToTexture({ source: box1 }, { texture, size: [120, 120], premultipliedAlpha: true });
                device.queue.drawElementImageToTexture({ source: box2Image }, { texture, origin: [120, 120], size: [120, 120], premultipliedAlpha: true });

                const encoder = device.createCommandEncoder();
                encoder.copyTextureToTexture({ texture }, { texture: context.getCurrentTexture() }, [240, 240]);
                device.queue.submit([encoder.finish()]);

                if (window.testRunner)
                    testRunner.notifyDone();
            }

            // Let the drawable child be painted so that a snapshot exists.
            requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(runTest, 0)));
        })();
    </script>
</body>