<!DOCTYPE html>
<html>
<body>
<canvas id="draw" style="background:black; border:solid" width="10" height="10"></canvas>
<img id="feedback-png" style="background:black; border:solid">
<img id="feedback-jpeg" style="background:black; border:solid">
<img id="feedback-webp" style="background:black; border:solid">
<script>
var canvas = document.getElementById("draw");
var gl = canvas.getContext("webgl", {premultipliedAlpha: true});
gl.clearColor(0.5, 1, 0.3, 0.6);
gl.clear(gl.COLOR_BUFFER_BIT);

var hiddenCanvas = document.createElement('canvas');
hiddenCanvas.width = hiddenCanvas.height = 10;
var hiddengl = hiddenCanvas.getContext("webgl", {premultipliedAlpha: true});
hiddengl.clearColor(0.5, 0.6, 0.3, 0.6); // green clamped to alpha
hiddengl.clear(gl.COLOR_BUFFER_BIT);
// Ref test requires encode/decode round trip in order to repro compression
// artifacts exactly.
document.getElementById("feedback-png").src = hiddenCanvas.toDataURL("image/png");
document.getElementById("feedback-jpeg").src = hiddenCanvas.toDataURL("image/jpeg");
document.getElementById("feedback-webp").src = hiddenCanvas.toDataURL("image/webp");
</script>
</body>
</html>