| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 |
| 3 <!-- READ BEFORE UPDATING: |
| 4 If this test is updated make sure to increment the "revision" value of the |
| 5 associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure |
| 6 that the baseline images are regenerated on the next run. |
| 7 --> |
| 8 |
| 9 <!-- |
| 10 This is a regression test for crbug.com/666259 . |
| 11 |
| 12 It renders transparent green (0,255,0,0) into a canvas with |
| 13 {alpha:false, preserveDrawingBuffer:false}, over a <div> with a CSS |
| 14 background-color of red (#f00). Specifically, it does this while triggering an |
| 15 implicit clear (due to the preserveDrawingBuffer:false setting). |
| 16 |
| 17 This should result in a green (0,255,0) triangle on a black (0,0,0) background |
| 18 with a red (255,0,0) box behind it. |
| 19 |
| 20 Previously this was incorrectly blended on Mac (w/ IOSurface) and the result |
| 21 would have been yellow (255,255,0). The implicit clear was clobbering the alpha |
| 22 channel of the canvas (which should be impossible with alpha:false). |
| 23 --> |
| 24 |
| 25 <html> |
| 26 <head> |
| 27 <title>WebGL Test: Transparent Green Triangle over Red Background</title> |
| 28 <style type="text/css"> |
| 29 .nomargin { |
| 30 margin: 0px auto; |
| 31 } |
| 32 </style> |
| 33 |
| 34 <script src="pixel_webgl_util.js"></script> |
| 35 |
| 36 <script> |
| 37 // Overwrite the vertexShader and fragmentShader created by pixel_webgl_util. |
| 38 window.vertexShader = [ |
| 39 "attribute vec3 pos;", |
| 40 "void main(void)", |
| 41 "{", |
| 42 " gl_Position = vec4(pos, 1.0);", |
| 43 "}" |
| 44 ].join("\n"); |
| 45 |
| 46 window.fragmentShader = [ |
| 47 "precision mediump float;", |
| 48 "void main(void)", |
| 49 "{", |
| 50 " gl_FragColor = vec4(0.0, 1.0, 0.0, 0.0);", |
| 51 "}" |
| 52 ].join("\n"); |
| 53 |
| 54 function waitForComposite(callback) { |
| 55 var frames = 5; |
| 56 var countDown = function() { |
| 57 if (frames == 0) { |
| 58 callback(); |
| 59 } else { |
| 60 --frames; |
| 61 window.requestAnimationFrame(countDown); |
| 62 } |
| 63 }; |
| 64 countDown(); |
| 65 }; |
| 66 |
| 67 function main() { |
| 68 var canvas = document.getElementById("c"); |
| 69 var gl = initGL(canvas, false, false); |
| 70 if (gl && setup(gl)) { |
| 71 waitForComposite(function() { |
| 72 gl.drawArrays(gl.TRIANGLES, 0, 3); |
| 73 domAutomationController.setAutomationId(1); |
| 74 domAutomationController.send("SUCCESS"); |
| 75 }); |
| 76 } else { |
| 77 domAutomationController.setAutomationId(1); |
| 78 domAutomationController.send("FAILURE"); |
| 79 } |
| 80 } |
| 81 </script> |
| 82 </head> |
| 83 <body onload="main()"> |
| 84 <div style="position:relative; width:200px; height:200px; background-color:#f00"
></div> |
| 85 <div style="position:absolute; top:0px; left:0px"> |
| 86 <canvas id="c" width="200" height="200" class="nomargin"></canvas> |
| 87 </div> |
| 88 </body> |
| 89 </html> |
| OLD | NEW |