<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="../../../resources/js-test-pre.js"></script>
<script src="resources/webgl-test.js"> </script>
</head>
<body>
<canvas id="example" width="400" height="400" style="width: 400px; height: 400px;"></canvas>
<div id="description"></div>
<div id="console"></div>
<script id="vshader" type="x-shader/x-vertex">
#ifdef GL_ES
precision highp float;
#endif
attribute vec2 vPosition;
uniform mat3 world;
void main()
{
    gl_Position = vec4((world * vec3(vPosition, 1)).xy, 0, 1);
}
</script>

<script id="fshader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main()
{
    gl_FragColor = vec4(0, 1, 0, 1);
}
</script>

<script>
function init()
{
    if (window.initNonKhronosFramework)
        window.initNonKhronosFramework(false);

    debug("Checks that multisample resolve has no timing issues");

    var canvas = document.getElementById("example");
    gl = initWebGL("example", "vshader", "fshader", [ "vPosition", "index" ], [ 1, 1, 1, 1 ], 1, { antialias: true });
    shouldBeTrue("gl.getContextAttributes().antialias");

    loc = gl.getUniformLocation(gl.program, "world");

    gl.disable(gl.DEPTH_TEST);
    gl.disable(gl.BLEND);

    var coordinates = new Float32Array([ 0,1, 1,1, 0,0, 0,0, 1,1, 1,0]);

    vertexObject = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
    gl.bufferData(gl.ARRAY_BUFFER, coordinates, gl.STATIC_DRAW);
    shouldBe("gl.getError()", "gl.NO_ERROR");
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
    shouldBe("gl.getError()", "gl.NO_ERROR");
}

function drawQuad(x, y) {
    gl.uniformMatrix3fv(loc, false, new Float32Array([2 * quadSizeInPixels / canvas.width, 0, 0, 0, 2 * quadSizeInPixels / canvas.height, 0, quadSizeInPixels * x * 2 / canvas.width - 1, quadSizeInPixels * y * 2 / canvas.height - 1, 1]));
    gl.drawArrays(gl.TRIANGLES, 0, 6);
	//shouldBe("gl.getError()", "gl.NO_ERROR");
}

var loc;
var vertexObject;
var canvas = document.getElementById("example");
var data = new Uint8Array(canvas.width * canvas.height * 4);
var width;
var height;

init();

var quadSizeInPixels = 4;

window.jsTestIsAsync = true;

var counter = 0;
function fillCanvas() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    for (var i = 0; i < canvas.width / quadSizeInPixels; ++i) {
    	for (var j = 0; j < canvas.height / quadSizeInPixels; ++j) {
		    drawQuad(i, j);
    	}
    }
    gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
    counter = counter + 1;
    for (width = 0; width < 1; ++width) {
    	for (height = 0; height < 1; ++height) {
    		// Reduce test spam
    		if (data[4 * (height * canvas.height + width) + 0] != 0)
	    		shouldBe("0", "data[4 * (height * canvas.height + width) + 0]");
    		if (data[4 * (height * canvas.height + width) + 1] != 255)
    			shouldBe("255", "data[4 * (height * canvas.height + width) + 1]");
    		if (data[4 * (height * canvas.height + width) + 2] != 0)
    			shouldBe("0", "data[4 * (height * canvas.height + width) + 2]");
    		if (data[4 * (height * canvas.height + width) + 3] != 255)
	    		shouldBe("255", "data[4 * (height * canvas.height + width) + 3]");
    	}
    }
    if (counter < 20)
		window.requestAnimationFrame(fillCanvas);
	else {
		finishJSTest();
    	gl.deleteBuffer(vertexObject);
	}
}
window.requestAnimationFrame(fillCanvas);


</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>