﻿<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Frag Depth Conformance Tests</title>
<link rel="stylesheet" href="../../resources/js-test-style.css"/>
<script src="../../js/js-test-pre.js"></script>
<script src="../../js/webgl-test-utils.js"></script>
</head>
<body>
<div id="description"></div>
<canvas id="canvas" style="width: 50px; height: 50px;"> </canvas>
<div id="console"></div>
<!-- Shaders for testing fragment depth writing -->

<!-- Shader omitting the required #version -->
<script id="fragmentShaderESSL1" type="x-shader/x-fragment">
precision mediump float;
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    gl_FragDepth = 1.0;
}
</script>
<!-- Shader with required #version -->
<script id="fragmentShaderESSL3" type="x-shader/x-fragment">#version 300 es
precision mediump float;
out vec4 my_FragColor;
void main() {
    my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    gl_FragDepth = 1.0;
}
</script>
<!-- Shader using the EXT suffix -->
<script id="fragmentShaderESSL3EXT" type="x-shader/x-fragment">#version 300 es
precision mediump float;
out vec4 my_FragColor;
void main() {
    my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    gl_FragDepthEXT = 1.0;
}
</script>
<!-- Shaders to link with test fragment shaders -->
<script id="vertexShaderESSL1" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
    gl_Position = vPosition;
}
</script>
<script id="vertexShaderESSL3" type="x-shader/x-vertex">#version 300 es
in vec4 vPosition;
void main() {
    gl_Position = vPosition;
}
</script>

<!-- Shader to test output -->
<script id="outputFragmentShader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
uniform float uDepth;

out vec4 my_FragColor;
void main() {
    my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    gl_FragDepth = uDepth;
}
</script>

<script>
"use strict";
description("This test verifies the functionality of setting fragment depth in a shader.");

debug("");

var wtu = WebGLTestUtils;
var canvas = document.getElementById("canvas");
var gl = wtu.create3DContext(canvas, null, 2);

if (!gl) {
    testFailed("WebGL context does not exist");
} else {
    testPassed("WebGL context exists");

    runShaderTests();
    debug("");
    runOutputTests();
}

function runShaderTests() {
    debug("");
    debug("Testing various shader compiles");

    // Always expect ESSL1 shaders to fail
    var fragmentProgramESSL1 = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL1", "fragmentShaderESSL1");
    if (fragmentProgramESSL1) {
        testFailed("gl_FragDepth allowed in ESSL1 shader - should be disallowed");
    } else {
        testPassed("gl_FragDepth disallowed in ESSL1 shader");
    }

    // Try to compile a shader using the built-ins that should only succeed if enabled
    var testFragmentProgram = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL3", "fragmentShaderESSL3");
    if (testFragmentProgram) {
        testPassed("gl_FragDepth allowed in ESSL3 shader");
    } else {
        testFailed("gl_FragDepth disallowed in ESSL3 shader");
    }

    var testFragmentProgram = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL3", "fragmentShaderESSL3EXT");
    if (testFragmentProgram) {
        testFailed("gl_FragDepthEXT allowed in ESSL3 shader - should only allow gl_FragDepth");
    } else {
        testPassed("gl_FragDepthEXT disallowed in ESSL3 shader");
    }
}

function runOutputTests() {
    debug("Testing rendering results from writing to gl_FragData");

    canvas.width = 50; canvas.height = 50;
    gl.viewport(0, 0, canvas.width, canvas.height);

    // Enable depth testing with a clearDepth of 0.5
    // This makes it so that fragments are only rendered when
    // gl_FragDepth is < 0.5
    gl.clearDepth(0.5);
    gl.enable(gl.DEPTH_TEST);

    var positionLoc = 0;
    var texcoordLoc = 1;
    var program = wtu.setupProgram(gl, ["vertexShaderESSL3", "outputFragmentShader"], ['vPosition'], [0]);
    var quadParameters = wtu.setupUnitQuad(gl, 0, 1);
    var depthUniform = gl.getUniformLocation(program, "uDepth");

    // Draw 1: Greater than clear depth
    gl.uniform1f(depthUniform, 1.0);
    wtu.clearAndDrawUnitQuad(gl);
    wtu.checkCanvas(gl, [255, 255, 255, 255]);

    // Draw 2: Less than clear depth
    gl.uniform1f(depthUniform, 0.0);
    wtu.clearAndDrawUnitQuad(gl);
    wtu.checkCanvas(gl, [255, 0, 0, 255]);
}

debug("");
var successfullyParsed = true;
</script>
<script src="../../js/js-test-post.js"></script>

</body>
</html>
