<!DOCTYPE html>
<body>
<span id="description" style="color: white">
This test is only useful as a pixel test. You should see two rows with 4 canvases in each. The top row of canvases should have a black background, the bottom row should have a dark blue background.
Each canvas should have a green triangle in it. If multisampling is supported, the odd columns should have smooth edges instead of jagged stair-stepping. Otherwise, all canvases within a row should be identical to each other.
</span>
<br>
<style>
canvas {
    outline: 1px solid blue;
}
body {
    background-color: darkblue;
}
</style>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform vec4 u_color;

void main() {
  gl_FragColor = u_color;
}
</script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform vec2 u_resolution;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
}
</script>
<script src="resources/webgl-test-utils.js"></script>
<script>

var ctxs = []

if (window.testRunner) {
    testRunner.dumpAsText(true);
    document.getElementById("description").style.position = "absolute";
    document.getElementById("description").style.top = "-5000px";
}

for (var i=0; i<8; ++i) {
    var attrs = {
        'alpha': (i >= 4),
        'preserveDrawingBuffer': (i % 4) >= 2,
        'antialias': (i % 2) == 1
    };
    var can = document.createElement('canvas');
    can.width = can.height = 100;
    can.style.position = "absolute";
    can.style.left = 10 + (i % 4) * 120 + "px";
    can.style.top = (i < 4 ? 40 : 150) + "px";
    document.body.appendChild(can);
    if (i == 3)
        document.body.appendChild(document.createElement('br'));
    ctxs[i] = can.getContext("experimental-webgl", attrs);
    setup(ctxs[i]);
    draw(ctxs[i]);
}

function setup(gl) {
    // setup a GLSL program
    var wtu = WebGLTestUtils;
    var vertexShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-vertex-shader");
    var fragmentShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-fragment-shader");
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader, gl.VERTEX_SHADER);
    gl.attachShader(program, fragmentShader, gl.FRAGMENT_SHADER);
    gl.linkProgram(program);
    gl.useProgram(program);

    // look up where the vertex data needs to go.
    gl.myPositionLocation = gl.getAttribLocation(program, "a_position");

    // set the resolution
    var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
    gl.uniform2f(resolutionLocation, 100, 100);

    var colorLocation = gl.getUniformLocation(program, "u_color");
    gl.uniform4f(colorLocation, 0, 1, 0, 1);
}

function draw(gl) {
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        80, 20,
        10, 10,
        10, 80]), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(gl.myPositionLocation);
    gl.vertexAttribPointer(gl.myPositionLocation, 2, gl.FLOAT, false, 0, 0);

    // draw
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}
</script>