1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
content / test / data / gpu / pixel_webgl_noalpha_implicit_clear.html [blame]
<!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>