<!DOCTYPE html>
<body onload="runRepaintTest()">
<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.
The canvases in the first two rows should have a single triangle. The canvases on the left should have two triangles superimposed on top of each other.
If multisampling is supported, the odd columns should have smooth edges instead of jagged stair-stepping.
</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 src="../../repaint/resources/repaint.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]);
}

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, offset) {
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        80 + offset, 20,
        10 + offset, 10,
        10 + offset, 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);
}

function drawAll(offset) {
    for (var i=0; i<8; ++i)
        draw(ctxs[i], offset);
}

drawAll(0);

function repaintTest() {
    drawAll(50);
}
</script>