OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 | 2 |
3 <!-- READ BEFORE UPDATING: | 3 <!-- READ BEFORE UPDATING: |
4 If this test is updated make sure to increment the "revision" value of the | 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 | 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. | 6 that the baseline images are regenerated on the next run. |
7 --> | 7 --> |
8 | 8 |
9 <html> | 9 <html> |
10 <head> | 10 <head> |
11 <title>WebGL Test: Green Triangle over Black Background</title> | 11 <title>WebGL Test: Green Triangle over Black Background</title> |
12 <style type="text/css"> | 12 <style type="text/css"> |
13 .nomargin { | 13 .nomargin { |
14 margin: 0px auto; | 14 margin: 0px auto; |
15 } | 15 } |
16 </style> | 16 </style> |
17 | 17 |
18 <script id="shader-vs" type="x-shader/x-vertex"> | 18 <script src="pixel_webgl_util.js"></script> |
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 | 19 |
34 <script> | 20 <script> |
35 var g_swapsBeforeAck = 15; | 21 var g_swapsBeforeAck = 15; |
36 var gl; | 22 var gl; |
37 | 23 |
38 function main() | 24 function main() |
39 { | 25 { |
40 var canvas = document.getElementById("c"); | 26 var canvas = document.getElementById("c"); |
41 gl = initGL(canvas); | 27 gl = initGL(canvas); |
42 if (gl && setup(gl)) { | 28 if (gl && setup(gl)) { |
43 drawSomeFrames(); | 29 drawSomeFrames(); |
44 } else { | 30 } else { |
45 domAutomationController.setAutomationId(1); | 31 domAutomationController.setAutomationId(1); |
46 domAutomationController.send("FAILURE"); | 32 domAutomationController.send("FAILURE"); |
47 } | 33 } |
48 } | 34 } |
49 | 35 |
50 function drawSomeFrames() | 36 function drawSomeFrames() |
51 { | 37 { |
52 if (g_swapsBeforeAck == 0) { | 38 if (g_swapsBeforeAck == 0) { |
53 domAutomationController.setAutomationId(1); | 39 domAutomationController.setAutomationId(1); |
54 domAutomationController.send("SUCCESS"); | 40 domAutomationController.send("SUCCESS"); |
55 } else { | 41 } else { |
56 g_swapsBeforeAck--; | 42 g_swapsBeforeAck--; |
57 draw(gl); | 43 drawTriangle(gl); |
58 window.webkitRequestAnimationFrame(drawSomeFrames); | 44 window.webkitRequestAnimationFrame(drawSomeFrames); |
59 } | 45 } |
60 } | 46 } |
61 | 47 |
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 | 48 |
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 | 49 |
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> | 50 </script> |
137 </head> | 51 </head> |
138 <body onload="main()"> | 52 <body onload="main()"> |
139 <div style="position:relative; width:200px; height:200px; background-color:black
"></div> | 53 <div style="position:relative; width:200px; height:200px; background-color:black
"></div> |
140 <div style="position:absolute; top:0px; left:0px"> | 54 <div style="position:absolute; top:0px; left:0px"> |
141 <canvas id="c" width="200" height="200" class="nomargin"></canvas> | 55 <canvas id="c" width="200" height="200" class="nomargin"></canvas> |
142 </div> | 56 </div> |
143 </body> | 57 </body> |
144 </html> | 58 </html> |
OLD | NEW |