<script id="vertexShaderSource" type="text/glsl">
attribute vec2 position;

void main() {
    gl_Position = vec4(position.x, position.y, 1.0, 1.0);
}
</script>
<script id="fragmentShaderSource" type="text/glsl">
void main() {
  gl_FragColor = vec4(0.0, 0.7, 0.0, 1.0);
}
</script>

<canvas width="200" height="200"></canvas>

<div id="output"></div>

<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    window.addEventListener("load", _ => {
        var canvas = document.querySelector("canvas")
        var gl = canvas.getContext("webgl");

        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, document.getElementById("vertexShaderSource").textContent);
        gl.compileShader(vertexShader);
        document.getElementById("output").textContent += gl.getShaderInfoLog(vertexShader);

        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, document.getElementById("fragmentShaderSource").textContent);
        gl.compileShader(fragmentShader);
        document.getElementById("output").textContent += gl.getShaderInfoLog(fragmentShader);
    }, false);
</script>