dom/canvas/test/webgl-mochitest/test_hidden_depth_stencil.html

   1 <!DOCTYPE HTML>
   2 <title>WebGL test: Hidden depth/stencil passes without a depth/stencil buffer respectively</title>
   3 <script src='/tests/SimpleTest/SimpleTest.js'></script>
   4 <link rel='stylesheet' href='/tests/SimpleTest/test.css'>
   5 <script src='webgl-util.js'></script>
   6 <body>
   7 <script id='vs' type='x-shader/x-vertex'>
   8   void main(void) {
   9     gl_PointSize = 1.0; // Note that this is undefined if we don't write to it!
  10     gl_Position = vec4(vec3(0), 1);
  11   }
  12 </script>
  13
  14 <script id='fs' type='x-shader/x-fragment'>
  15   precision mediump float;
  16
  17   void main(void) {
  18     gl_FragColor = vec4(0, 1, 0, 1);
  19   }
  20 </script>
  21 <script>
  22
  23 function ColorString(arr) {
  24   return '[' + arr[0] + ', ' + arr[1] + ', ' + arr[2] + ', ' + arr[3] + ']';
  25 }
  26
  27 function DrawAndCheck(gl, infoPrefix, refColorStr) {
  28   gl.viewport(0, 0, 1, 1);
  29
  30   gl.clearColor(1, 0, 0, 1);
  31   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
  32   gl.drawArrays(gl.POINTS, 0, 1);
  33
  34   var pixel = new Uint8Array(4);
  35   gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  36   var pixelStr = ColorString(pixel);
  37
  38   ok(pixelStr == refColorStr, infoPrefix + pixelStr + ' should be ' + refColorStr);
  39 }
  40
  41 function TestCurrent(gl, attribs, infoPrefix) {
  42   infoPrefix = infoPrefix + JSON.stringify(attribs) + ': ';
  43
  44   var CLEAR_COLOR = ColorString([255, 0, 0, 255]);
  45   var DRAW_COLOR = ColorString([0, 255, 0, 255]);
  46
  47   gl.disable(gl.DEPTH_TEST);
  48   gl.disable(gl.STENCIL_TEST);
  49
  50   DrawAndCheck(gl, infoPrefix + 'initial: ', DRAW_COLOR);
  51
  52   if (!attribs.depth) {
  53     gl.enable(gl.DEPTH_TEST);
  54     gl.depthFunc(gl.NEVER);
  55
  56     gl.disable(gl.STENCIL_TEST);
  57
  58     // Depth test is enabled, and should pass NEVER.
  59     // Since there is no depth buffer, the depth test is not run.
  60     // Stencil test is disabled.
  61     DrawAndCheck(gl, infoPrefix + 'no-depth: ', DRAW_COLOR);
  62   }
  63
  64   if (!attribs.stencil) {
  65     gl.disable(gl.DEPTH_TEST);
  66
  67     gl.enable(gl.STENCIL_TEST);
  68     gl.stencilFunc(gl.NEVER, 0, 0);
  69
  70     // Depth test is disabled.
  71     // Stencil test is enabled, and should pass NEVER.
  72     // Since there is no stencil buffer, the stencil test is not run.
  73     DrawAndCheck(gl, infoPrefix + 'no-stencil: ', DRAW_COLOR);
  74   }
  75 }
  76
  77 function TestBackbuffer(requestedAttribs) {
  78   var canvas = document.createElement('canvas');
  79   canvas.width = 1;
  80   canvas.height = 1;
  81   var gl = canvas.getContext('experimental-webgl', requestedAttribs);
  82   if (!gl) {
  83     ok(true, 'WebGL doesn\'t work, skipping test.');
  84     return;
  85   }
  86
  87   ok(gl.drawingBufferWidth == 1 && gl.drawingBufferHeight == 1,
  88      'backbuffer should be 1x1');
  89
  90   var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
  91   gl.useProgram(prog);
  92
  93   var attribs = {
  94     depth: gl.getContextAttributes().depth,
  95     stencil: gl.getContextAttributes().stencil,
  96   };
  97   TestCurrent(gl, attribs, 'Backbuffer: ');
  98 }
  99
 100 function TestUserFB() {
 101   var canvas = document.createElement('canvas');
 102   var gl = canvas.getContext('experimental-webgl');
 103   if (!gl) {
 104     ok(true, 'WebGL doesn\'t work, skipping test.');
 105     return;
 106   }
 107
 108   var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
 109   gl.useProgram(prog);
 110
 111   var rb = gl.createRenderbuffer();
 112   gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
 113   gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, 1, 1);
 114
 115   var fb = gl.createFramebuffer();
 116   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
 117   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, rb);
 118
 119   var depthRB = gl.createRenderbuffer();
 120   gl.bindRenderbuffer(gl.RENDERBUFFER, depthRB);
 121   gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 1, 1);
 122
 123   var stencilRB = gl.createRenderbuffer();
 124   gl.bindRenderbuffer(gl.RENDERBUFFER, stencilRB);
 125   gl.renderbufferStorage(gl.RENDERBUFFER, gl.STENCIL_INDEX8, 1, 1);
 126
 127   do {
 128     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRB);
 129     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.STENCIL_ATTACHMENT, gl.RENDERBUFFER, null);
 130     var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 131     if (status != gl.FRAMEBUFFER_COMPLETE) {
 132       ok(true, 'Depth-only user FB is incomplete. This is allowed.');
 133       break;
 134     }
 135
 136     TestCurrent(gl, {depth: true, stencil: false}, 'Depth-only user FB');
 137   } while (false);
 138
 139   do {
 140     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, null);
 141     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.STENCIL_ATTACHMENT, gl.RENDERBUFFER, stencilRB);
 142     var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 143     if (status != gl.FRAMEBUFFER_COMPLETE) {
 144       ok(true, 'Stencil-only user FB is incomplete. This is allowed.');
 145       break;
 146     }
 147
 148     TestCurrent(gl, {depth: false, stencil: true}, 'Stencil-only user FB');
 149   } while (false);
 150 }
 151
 152 (function(){
 153   TestBackbuffer({depth: true, stencil: false});
 154   TestBackbuffer({depth: false, stencil: true});
 155   TestUserFB();
 156 })();
 157
 158 </script>
 159 </body>