dom/canvas/test/webgl-conf/checkout/conformance/rendering/canvas-alpha-bug.html

   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>