canvas-alpha-bug.html (3246B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <title>Alpha blending bug on WebGL canvas</title> 12 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 13 <script src="../../js/js-test-pre.js"></script> 14 <script src="../../js/webgl-test-utils.js"></script> 15 </head> 16 <body> 17 <div id="description"></div> 18 <div id="console"></div> 19 <canvas id="canvas" width="128" height="128"> </canvas> 20 21 <script id="vshader" type="x-shader/x-vertex"> 22 attribute vec2 a_position; 23 varying vec2 v_uv; 24 void main() 25 { 26 v_uv = a_position.xy * vec2(0.5, 0.5) + vec2(0.5, 0.5); 27 gl_Position = vec4(a_position.xy, 0.0, 1.0); 28 } 29 </script> 30 31 <script id="fshader" type="x-shader/x-fragment"> 32 precision mediump float; 33 varying vec2 v_uv; 34 uniform sampler2D u_texture; 35 uniform vec4 u_color; 36 void main() 37 { 38 vec4 tex = texture2D(u_texture, v_uv); 39 gl_FragColor = tex * u_color; 40 } 41 </script> 42 43 <script> 44 "use strict"; 45 // This test exposes an Intel driver issue on macOS. 46 var wtu = WebGLTestUtils; 47 var gl = wtu.create3DContext("canvas"); 48 49 var program; 50 var offscreen_tex; 51 var fbo; 52 53 function init() 54 { 55 // Init program 56 program = wtu.setupProgram(gl, ["vshader", "fshader"], ["a_position"]); 57 58 // Init offscreen render targets and specify the format of offscreen texture to be RGB. 59 offscreen_tex = gl.createTexture(); 60 gl.activeTexture(gl.TEXTURE0); 61 gl.bindTexture(gl.TEXTURE_2D, offscreen_tex); 62 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 63 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 64 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, canvas.width, canvas.height, 0, gl.RGB, gl.UNSIGNED_BYTE, null); 65 66 fbo = gl.createFramebuffer(); 67 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 68 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, offscreen_tex, 0); 69 70 // Init blend state 71 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 72 } 73 74 function draw_rect() 75 { 76 gl.useProgram(program); 77 78 gl.bindTexture(gl.TEXTURE_2D, offscreen_tex); 79 var u_tex_loc = gl.getUniformLocation(program, 'u_texture'); 80 gl.uniform1i(u_tex_loc, 0); 81 82 wtu.setupUnitQuad(gl); 83 wtu.drawFloatColorQuad(gl, [1.0, 1.0, 1.0, 1.0]); 84 } 85 86 function test_canvas_alpha() { 87 init(); 88 89 // Clear offscreen texture to Green 90 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 91 gl.viewport(0, 0, canvas.width, canvas.height); 92 gl.clearColor(0.0, 1.0, 0.0, 1.0); 93 gl.clear(gl.COLOR_BUFFER_BIT); 94 95 // Clear default framebuffer 96 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 97 gl.viewport(0, 0, canvas.width, canvas.height); 98 gl.clearColor(1.0, 0.0, 0.0, 1.0); 99 gl.clear(gl.COLOR_BUFFER_BIT); 100 101 // Enable alpha blending and render to default framebuffer 102 gl.enable(gl.BLEND); 103 draw_rect(); 104 wtu.checkCanvasRect(gl, 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, [0, 255, 0, 255]); 105 } 106 107 test_canvas_alpha(); 108 109 description("Exposes alpha blending bug in Intel drivers on macOS - see https://crbug.com/886970"); 110 var successfullyParsed = true; 111 112 </script> 113 <script src="../../js/js-test-post.js"></script> 114 115 </body> 116 </html>