<!DOCTYPE HTML>
<!-- READ BEFORE UPDATING:
If this test is updated make sure to increment the "revision" value of the
associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure
that the baseline images are regenerated on the next run.
-->
<html>
<head>
<title>WebGL Test: Green Triangle over Black Background</title>
<style type="text/css">
.nomargin {
margin: 0px auto;
}
</style>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 pos;
void main(void)
{
gl_Position = vec4(pos, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void)
{
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
</script>
<script>
var g_swapsBeforeAck = 15;
var gl;
function main()
{
var canvas = document.getElementById("c");
gl = initGL(canvas);
if (gl && setup(gl)) {
drawSomeFrames();
} else {
domAutomationController.setAutomationId(1);
domAutomationController.send("FAILURE");
}
}
function drawSomeFrames()
{
if (g_swapsBeforeAck == 0) {
domAutomationController.setAutomationId(1);
domAutomationController.send("SUCCESS");
} else {
g_swapsBeforeAck--;
draw(gl);
window.webkitRequestAnimationFrame(drawSomeFrames);
}
}
function initGL(canvas)
{
var gl = null;
try {
gl = canvas.getContext("experimental-webgl");
} catch (e) {}
if (!gl) {
try {
gl = canvas.getContext("webgl");
} catch (e) { }
}
return gl;
}
function setupShader(gl, source, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
return null;
return shader;
}
function setupProgram(gl, vs_id, fs_id) {
var vs_node = document.getElementById(vs_id);
var fs_node = document.getElementById(fs_id);
if (!vs_node || !fs_node)
return null;
var vs = setupShader(gl, vs_node.text, gl.VERTEX_SHADER);
var fs = setupShader(gl, fs_node.text, gl.FRAGMENT_SHADER);
if (!vs || !fs)
return null;
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
return null;
gl.useProgram(program);
return program;
}
function setupBuffer(gl) {
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var vertexData = [
0.0, 0.6, 0.0, // Vertex 1 position
-0.6, -0.6, 0.0, // Vertex 2 position
0.6, -0.6, 0.0, // Vertex 3 position
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
}
function setup(gl) {
var program = setupProgram(gl, "shader-vs", "shader-fs");
if (!program)
return false;
var posAttr = gl.getAttribLocation(program, "pos");
gl.enableVertexAttribArray(posAttr);
setupBuffer(gl);
var stride = 3 * Float32Array.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(posAttr, 3, gl.FLOAT, false, stride, 0);
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.viewport(0, 0, 200, 200);
gl.disable(gl.DEPTH_TEST);
if (gl.getError() != gl.NO_ERROR)
return false;
return true;
}
function draw(gl) {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
</script>
</head>
<body onload="main()">
<div style="position:relative; width:200px; height:200px; background-color:black"></div>
<div style="position:absolute; top:0px; left:0px">
<canvas id="c" width="200" height="200" class="nomargin"></canvas>
</div>
</body>
</html>