ladybird/Tests/LibWeb/Text/input/HTML/canvas-transparent-copy-composite.html
Andreas Kling 4c03a6f5fc LibWeb: Honor transparent copy compositing in canvas
Do not skip fully transparent canvas fill and stroke styles when the
current compositing operator can still affect the destination bitmap.
TradingView uses transparent copy fills while repainting its chart
canvases, and skipping those draws left old translucent chart pixels in
place so later source-over draws accumulated on top.

Add text coverage for transparent copy replacing an existing translucent
pixel before another translucent draw.
2026-05-23 19:11:01 +02:00

25 lines
928 B
HTML

<!DOCTYPE html>
<script src="../include.js"></script>
<script>
test(() => {
const canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
const context = canvas.getContext("2d");
context.fillStyle = "rgba(255, 0, 0, 0.2)";
context.fillRect(0, 0, 1, 1);
println(`first draw: ${Array.from(context.getImageData(0, 0, 1, 1).data).join(",")}`);
context.globalCompositeOperation = "copy";
context.fillStyle = "rgba(0, 0, 0, 0)";
context.fillRect(0, 0, 1, 1);
println(`transparent copy: ${Array.from(context.getImageData(0, 0, 1, 1).data).join(",")}`);
context.globalCompositeOperation = "source-over";
context.fillStyle = "rgba(255, 0, 0, 0.2)";
context.fillRect(0, 0, 1, 1);
println(`second draw: ${Array.from(context.getImageData(0, 0, 1, 1).data).join(",")}`);
});
</script>