1<!DOCTYPE HTML> 2 3<!-- READ BEFORE UPDATING: 4If this test is updated make sure to increment the "revision" value of the 5associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure 6that the baseline images are regenerated on the next run. 7--> 8 9<html> 10<head> 11<title>WebGL Test: Green Triangle over Black Background</title> 12<style type="text/css"> 13.nomargin { 14 margin: 0px auto; 15} 16</style> 17 18<script id="shader-vs" type="x-shader/x-vertex"> 19attribute vec3 pos; 20void main(void) 21{ 22 gl_Position = vec4(pos, 1.0); 23} 24</script> 25 26<script id="shader-fs" type="x-shader/x-fragment"> 27precision mediump float; 28void main(void) 29{ 30 gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 31} 32</script> 33 34<script> 35var g_swapsBeforeAck = 15; 36var gl; 37 38function main() 39{ 40 var canvas = document.getElementById("c"); 41 gl = initGL(canvas); 42 if (gl && setup(gl)) { 43 drawSomeFrames(); 44 } else { 45 domAutomationController.setAutomationId(1); 46 domAutomationController.send("FAILURE"); 47 } 48} 49 50function drawSomeFrames() 51{ 52 if (g_swapsBeforeAck == 0) { 53 domAutomationController.setAutomationId(1); 54 domAutomationController.send("SUCCESS"); 55 } else { 56 g_swapsBeforeAck--; 57 draw(gl); 58 window.webkitRequestAnimationFrame(drawSomeFrames); 59 } 60} 61 62function initGL(canvas) 63{ 64 var gl = null; 65 try { 66 gl = canvas.getContext("experimental-webgl"); 67 } catch (e) {} 68 if (!gl) { 69 try { 70 gl = canvas.getContext("webgl"); 71 } catch (e) { } 72 } 73 return gl; 74} 75 76function setupShader(gl, source, type) { 77 var shader = gl.createShader(type); 78 gl.shaderSource(shader, source); 79 gl.compileShader(shader); 80 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) 81 return null; 82 return shader; 83} 84 85function setupProgram(gl, vs_id, fs_id) { 86 var vs_node = document.getElementById(vs_id); 87 var fs_node = document.getElementById(fs_id); 88 if (!vs_node || !fs_node) 89 return null; 90 var vs = setupShader(gl, vs_node.text, gl.VERTEX_SHADER); 91 var fs = setupShader(gl, fs_node.text, gl.FRAGMENT_SHADER); 92 if (!vs || !fs) 93 return null; 94 var program = gl.createProgram(); 95 gl.attachShader(program, vs); 96 gl.attachShader(program, fs); 97 gl.linkProgram(program); 98 if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 99 return null; 100 gl.useProgram(program); 101 return program; 102} 103 104function setupBuffer(gl) { 105 var buffer = gl.createBuffer(); 106 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 107 var vertexData = [ 108 0.0, 0.6, 0.0, // Vertex 1 position 109 -0.6, -0.6, 0.0, // Vertex 2 position 110 0.6, -0.6, 0.0, // Vertex 3 position 111 ]; 112 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 113} 114 115function setup(gl) { 116 var program = setupProgram(gl, "shader-vs", "shader-fs"); 117 if (!program) 118 return false; 119 var posAttr = gl.getAttribLocation(program, "pos"); 120 gl.enableVertexAttribArray(posAttr); 121 setupBuffer(gl); 122 var stride = 3 * Float32Array.BYTES_PER_ELEMENT; 123 gl.vertexAttribPointer(posAttr, 3, gl.FLOAT, false, stride, 0); 124 gl.clearColor(0.0, 0.0, 0.0, 0.0); 125 gl.viewport(0, 0, 200, 200); 126 gl.disable(gl.DEPTH_TEST); 127 if (gl.getError() != gl.NO_ERROR) 128 return false; 129 return true; 130} 131 132function draw(gl) { 133 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 134 gl.drawArrays(gl.TRIANGLES, 0, 3); 135} 136</script> 137</head> 138<body onload="main()"> 139<div style="position:relative; width:200px; height:200px; background-color:black"></div> 140<div style="position:absolute; top:0px; left:0px"> 141<canvas id="c" width="200" height="200" class="nomargin"></canvas> 142</div> 143</body> 144</html> 145