dom/canvas/test/webgl-conf/checkout/conformance/extensions/webgl-polygon-mode.html

   1 <!--
   2 Copyright (c) 2023 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 WEBGL_polygon_mode 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 <canvas width="32" height="32" id="c"></canvas>
  18 <div id="description"></div>
  19 <div id="console"></div>
  20 <script>
  21 "use strict";
  22 description("This test verifies the functionality of the WEBGL_polygon_mode extension, if it is available.");
  23
  24 debug("");
  25
  26 var wtu = WebGLTestUtils;
  27 var gl = wtu.create3DContext("c");
  28 var ext;
  29 const w = gl.drawingBufferWidth;
  30 const h = gl.drawingBufferHeight;
  31
  32 function runTestNoExtension() {
  33     debug("");
  34     debug("Check the parameters without the extension");
  35     shouldBeNull("gl.getParameter(0x0B40 /* POLYGON_MODE_WEBGL */)");
  36     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "parameter unknown without enabling the extension");
  37     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  38     shouldBeNull("gl.getParameter(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */)");
  39     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "parameter unknown without enabling the extension");
  40     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  41
  42     debug("Check the cap without the extension");
  43     gl.disable(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */);
  44     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "cap unknown without enabling the extension");
  45     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  46
  47     gl.enable(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */);
  48     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "cap unknown without enabling the extension");
  49     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  50
  51     shouldBeFalse("gl.isEnabled(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */)");
  52     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "cap unknown without enabling the extension");
  53     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  54 }
  55
  56 function checkEnums() {
  57     debug("");
  58     debug("Check enums");
  59     shouldBe("ext.POLYGON_MODE_WEBGL", "0x0B40");
  60     shouldBe("ext.POLYGON_OFFSET_LINE_WEBGL", "0x2A02");
  61     shouldBe("ext.LINE_WEBGL", "0x1B01");
  62     shouldBe("ext.FILL_WEBGL", "0x1B02");
  63 }
  64
  65 function checkQueries() {
  66     debug("");
  67     debug("Check default state");
  68     shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.FILL_WEBGL');
  69     shouldBeFalse('gl.getParameter(ext.POLYGON_OFFSET_LINE_WEBGL)');
  70     shouldBeFalse('gl.isEnabled(ext.POLYGON_OFFSET_LINE_WEBGL)');
  71     debug("");
  72     debug("Check state updates");
  73     ext.polygonModeWEBGL(gl.FRONT_AND_BACK, ext.LINE_WEBGL);
  74     shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.LINE_WEBGL');
  75     ext.polygonModeWEBGL(gl.FRONT_AND_BACK, ext.FILL_WEBGL);
  76     shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.FILL_WEBGL');
  77     debug("");
  78     debug("Check errors");
  79     ext.polygonModeWEBGL(gl.FRONT, ext.LINE_WEBGL);
  80     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "invalid face");
  81     ext.polygonModeWEBGL(gl.FRONT_AND_BACK, 0);
  82     wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "invalid mode");
  83     shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.FILL_WEBGL');
  84     debug("");
  85     debug("Check cap updates");
  86     gl.enable(ext.POLYGON_OFFSET_LINE_WEBGL);
  87     shouldBeTrue('gl.getParameter(ext.POLYGON_OFFSET_LINE_WEBGL)');
  88     shouldBeTrue('gl.isEnabled(ext.POLYGON_OFFSET_LINE_WEBGL)');
  89     gl.disable(ext.POLYGON_OFFSET_LINE_WEBGL);
  90     shouldBeFalse('gl.getParameter(ext.POLYGON_OFFSET_LINE_WEBGL)');
  91     shouldBeFalse('gl.isEnabled(ext.POLYGON_OFFSET_LINE_WEBGL)');
  92     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  93 }
  94
  95 function checkDiagonal(r, g, b) {
  96     const pixels = new Uint8Array(w * h * 4);
  97     gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  98     for (let i = 0; i < w; i++)
  99     {
 100         const baseOffset = (i * w + i) * 4;
 101         if (pixels[baseOffset + 0] != r ||
 102             pixels[baseOffset + 1] != g ||
 103             pixels[baseOffset + 2] != b) {
 104             testFailed(`Unexpected diagonal color at (${i}, ${i})`);
 105             return;
 106         }
 107     }
 108     testPassed("Expected diagonal color");
 109 }
 110
 111 function checkLineMode() {
 112     debug("");
 113     debug("Check line polygon mode");
 114
 115     gl.enable(gl.DEPTH_TEST);
 116
 117     const program = wtu.setupProgram(gl, [wtu.simpleVertexShader,
 118                                           wtu.simpleColorFragmentShader]);
 119     gl.useProgram(program);
 120     const colorLoc = gl.getUniformLocation(program, "u_color");
 121
 122     wtu.setupUnitQuad(gl);
 123
 124     // Draw red quad with lines
 125     gl.uniform4f(colorLoc, 1, 0, 0, 1);
 126     ext.polygonModeWEBGL(gl.FRONT_AND_BACK, ext.LINE_WEBGL);
 127     wtu.clearAndDrawUnitQuad(gl);
 128
 129     // Nothing is drawn inside triangles
 130     wtu.checkCanvasRect(gl, 2, 17, 13, 13, [255, 255, 255, 255]);
 131     wtu.checkCanvasRect(gl, 17, 2, 13, 13, [255, 255, 255, 255]);
 132
 133     // Main diagonal is drawn
 134     checkDiagonal(255, 0, 0);
 135
 136     // Test polygon offset
 137     gl.polygonOffset(0, -2);
 138     gl.enable(gl.POLYGON_OFFSET_FILL);
 139
 140     // Depth test must fail because line mode uses its own polygon offset toggle
 141     gl.uniform4f(colorLoc, 0, 1, 0, 1);
 142     wtu.drawUnitQuad(gl);
 143     checkDiagonal(255, 0, 0);
 144
 145     // Depth test must pass
 146     gl.enable(ext.POLYGON_OFFSET_LINE_WEBGL)
 147     wtu.drawUnitQuad(gl);
 148     checkDiagonal(0, 255, 0);
 149
 150     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 151 }
 152
 153 function runTestExtension() {
 154     checkEnums();
 155     checkQueries();
 156     checkLineMode();
 157 }
 158
 159 function runTest() {
 160     if (!gl) {
 161         testFailed("WebGL context does not exist");
 162         return;
 163     }
 164     testPassed("WebGL context exists");
 165
 166     runTestNoExtension();
 167
 168     ext = gl.getExtension("WEBGL_polygon_mode");
 169
 170     wtu.runExtensionSupportedTest(gl, "WEBGL_polygon_mode", ext !== null);
 171
 172     if (ext !== null) {
 173         runTestExtension();
 174     } else {
 175         testPassed("No WEBGL_polygon_mode support -- this is legal");
 176     }
 177 }
 178
 179 runTest();
 180
 181 var successfullyParsed = true;
 182 </script>
 183 <script src="../../js/js-test-post.js"></script>
 184 </body>
 185 </html>