src/content/test/data/gpu/pixel_webgl.html

   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>