<!DOCTYPE HTML>
<!--
This is a regression test for crbug.com/666259 .
It renders transparent green (0,255,0,0) into a canvas with
{alpha:false, preserveDrawingBuffer:false}, over a <div> with a CSS
background-color of red (#f00). Specifically, it does this while triggering an
implicit clear (due to the preserveDrawingBuffer:false setting).
This should result in a green (0,255,0) triangle on a black (0,0,0) background
with a red (255,0,0) box behind it.
Previously this was incorrectly blended on Mac (w/ IOSurface) and the result
would have been yellow (255,255,0). The implicit clear was clobbering the alpha
channel of the canvas (which should be impossible with alpha:false).
-->
<html>
<head>
<title>WebGL Test: Transparent Green Triangle over Red Background</title>
<style type="text/css">
.nomargin {
margin: 0px auto;
}
</style>
<script src="pixel_webgl_util.js"></script>
<script>
// Overwrite the vertexShader and fragmentShader created by pixel_webgl_util.
window.vertexShader = [
"attribute vec3 pos;",
"void main(void)",
"{",
" gl_Position = vec4(pos, 1.0);",
"}"
].join("\n");
window.fragmentShader = [
"precision mediump float;",
"void main(void)",
"{",
" gl_FragColor = vec4(0.0, 1.0, 0.0, 0.0);",
"}"
].join("\n");
function waitForComposite(callback) {
var frames = 5;
var countDown = function() {
if (frames == 0) {
callback();
} else {
--frames;
window.requestAnimationFrame(countDown);
}
};
countDown();
};
function main() {
var canvas = document.getElementById("c");
var gl = initGL(canvas, false, false);
if (gl && setup(gl)) {
waitForComposite(function() {
gl.drawArrays(gl.TRIANGLES, 0, 3);
domAutomationController.send("SUCCESS");
});
} else {
domAutomationController.send("FAILURE");
}
}
</script>
</head>
<body onload="main()">
<div style="position:relative; width:200px; height:200px; background-color:#f00"></div>
<div style="position:absolute; top:0px; left:0px">
<canvas id="c" width="200" height="200" class="nomargin"></canvas>
</div>
</body>
</html>
Codebase Browser
chromium