dom/canvas/test/webgl-conf/checkout/conformance2/query/occlusion-query-scissor.html

   1 <!--
   2 Copyright (c) 2022 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 Occlusion Query w/Scissor 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" style="width: 50px; height: 50px;"> </canvas>
  19 <div id="console"></div>
  20 <script>
  21 "use strict";
  22 description("This test verifies the functionality of occlusion query objects with the scissor test.");
  23 debug('Regression test for <a href="http://anglebug.com/7157">http://anglebug.com/7157</a>');
  24
  25 debug("");
  26
  27 const wtu = WebGLTestUtils;
  28
  29 const wait = () => new Promise(resolve => setTimeout(resolve));
  30
  31 async function runOcclusionQueryTest(gl) {
  32     const kSize = 4;
  33     const colors = [
  34       [0, 0, 0, 255],
  35       [255, 0, 0, 255],
  36       [0, 255, 0, 255],
  37       [255, 255, 0, 255],
  38     ];
  39     const framebuffers = colors.map((color, index) => {
  40       const tex = gl.createTexture();
  41       gl.bindTexture(gl.TEXTURE_2D, tex);
  42       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, kSize, kSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  43
  44       const fb = gl.createFramebuffer();
  45       gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  46       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  47
  48       gl.clearColor(index & 1, (index >> 1) & 1, (index >> 2) & 1, 1);
  49       gl.clear(gl.COLOR_BUFFER_BIT);
  50
  51       wtu.checkCanvasRect(gl, 0, 0, kSize, kSize, color);
  52
  53       return fb;
  54     });
  55
  56     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "setup should succeed");
  57
  58     gl.viewport(0, 0, kSize, kSize);
  59
  60     const program = wtu.setupSimpleColorProgram(gl, 0);
  61     gl.uniform4f(gl.getUniformLocation(program, "u_color"), 0, 1, 0, 1);
  62     wtu.setupUnitQuad(gl, 0);
  63
  64     const query = gl.createQuery();;
  65
  66     for (let i = 0; i < 256; ++i)
  67     {
  68         gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);
  69         let drawn = false;
  70
  71         framebuffers.forEach((fb, index) => {
  72             gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  73             const scissor = (i >> 4 >> index) & 1;
  74             if (i & (1 << index))
  75             {
  76                 if (scissor)
  77                 {
  78                     gl.enable(gl.SCISSOR_TEST);
  79                     gl.scissor(0, 0, 0, 0);
  80                 }
  81                 wtu.drawUnitQuad(gl);
  82                 drawn ||= !scissor;
  83                 if (scissor)
  84                 {
  85                     gl.disable(gl.SCISSOR_TEST);
  86                     gl.scissor(0, 0, kSize, kSize);
  87                 }
  88             }
  89         });
  90
  91         gl.endQuery(gl.ANY_SAMPLES_PASSED);
  92         wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should draw");
  93
  94         do {
  95           await wait();
  96         } while (!gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE));
  97
  98         const result = gl.getQueryParameter(query, gl.QUERY_RESULT);
  99
 100         const expected = drawn ? 1 : 0;
 101         assertMsg(result === expected, `pass ${i}, result: ${result} === expected: ${expected}`);
 102     }
 103     finishTest();
 104 }
 105
 106 const canvas = document.getElementById("canvas");
 107 const gl = wtu.create3DContext(canvas, null, 2);
 108
 109 if (!gl) {
 110     testFailed("WebGL context does not exist");
 111 } else {
 112     testPassed("WebGL context exists");
 113     runOcclusionQueryTest(gl);
 114 }
 115 </script>
 116 </body>
 117 </html>