Home | History | Annotate | Download | only in gpu 
      1 <!DOCTYPE HTML>
      2 
      3 <!-- READ BEFORE UPDATING:
      4 If this test is updated make sure to increment the "revision" value of the
      5 associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure
      6 that 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">
     19 attribute vec3 pos;
     20 void main(void)
     21 {
     22   gl_Position = vec4(pos, 1.0);
     23 }
     24 </script>
     25 
     26 <script id="shader-fs" type="x-shader/x-fragment">
     27 precision mediump float;
     28 void main(void)
     29 {
     30   gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
     31 }
     32 </script>
     33 
     34 <script>
     35 var g_swapsBeforeAck = 15;
     36 var gl;
     37 
     38 function 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 
     50 function 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 
     62 function 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 
     76 function 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 
     85 function 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 
    104 function 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 
    115 function 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 
    132 function 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