| <!DOCTYPE HTML> |
| |
| <!-- READ BEFORE UPDATING: |
| If this test is updated make sure to increment the "revision" value of the |
| associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure |
| that the baseline images are regenerated on the next run. |
| --> |
| |
| <!-- |
| 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> |
