dom/canvas/test/webgl-conf/checkout/conformance2/rendering/draw-buffers-dirty-state-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>WebGL Draw Buffers Dirty State Bug Conformance Tests</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 <canvas id="canvas" width="64" height="64"> </canvas>
  19 <div id="console"></div>
  20 <script id="vshader" type="x-shader/x-vertex">#version 300 es
  21 in vec4 a_position;
  22 void main() {
  23     gl_Position = a_position;
  24 }
  25 </script>
  26 <script id="fshader" type="x-shader/x-fragment">#version 300 es
  27 precision mediump float;
  28
  29 out vec4 my_FragColor;
  30 void main() {
  31     my_FragColor = vec4(1, 0, 0, 1);
  32 }
  33 </script>
  34 <script>
  35 "use strict";
  36 description("This test verifies a bug in draw buffers dirty state management in Chrome (crbug.com/678153).");
  37
  38 debug("");
  39
  40 var wtu = WebGLTestUtils;
  41 var canvas = document.getElementById("canvas");
  42 var gl = wtu.create3DContext(canvas, null, 2);
  43
  44 if (!gl) {
  45   testFailed("WebGL context does not exist");
  46 } else {
  47   testPassed("WebGL context exists");
  48
  49   runTest();
  50
  51   debug("");
  52   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");
  53 }
  54
  55 function runTest() {
  56   debug("");
  57
  58   var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["a_position"]);
  59   wtu.setupUnitQuad(gl);
  60
  61   var width = 2, height = 2;
  62
  63   var colorTex = gl.createTexture();
  64   gl.bindTexture(gl.TEXTURE_2D, colorTex);
  65   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  66
  67   var depthTex = gl.createTexture();
  68   gl.bindTexture(gl.TEXTURE_2D, depthTex);
  69   gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
  70
  71   var fb = gl.createFramebuffer();
  72   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  73   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTex, 0);
  74
  75   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Setup should cause no GL errors");
  76
  77   wtu.clearAndDrawUnitQuad(gl);
  78   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Clear and draw should cause no GL errors");
  79   wtu.checkCanvasRect(gl, 0, 0, width, height, [255, 0, 0, 255], "should be red");
  80
  81   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTex, 0);
  82   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, null, 0);
  83
  84   wtu.clearAndDrawUnitQuad(gl);
  85   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Clear and draw should cause no GL errors");
  86
  87   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, null, 0);
  88   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTex, 0);
  89
  90   wtu.checkCanvasRect(gl, 0, 0, width, height, [255, 0, 0, 255], "should be red");
  91
  92   gl.clearColor(0.0, 1.0, 0.0, 1.0);
  93   gl.clear(gl.COLOR_BUFFER_BIT);
  94   // Previously in Chrome, switching around the attachments on a framebuffer
  95   // affected a DrawBuffers cache that was maintained properly during draw
  96   // calls, but not clears.
  97   wtu.checkCanvasRect(gl, 0, 0, width, height, [0, 255, 0, 255], "should be green");
  98
  99   gl.deleteProgram(program);
 100   gl.deleteFramebuffer(fb);
 101   gl.deleteTexture(colorTex);
 102   gl.deleteTexture(depthTex);
 103 }
 104
 105 debug("");
 106 var successfullyParsed = true;
 107 </script>
 108 <script src="../../js/js-test-post.js"></script>
 109
 110 </body>
 111 </html>