third_party/WebKit/LayoutTests/fast/canvas/webgl/triangle.html

   1
   2 <!DOCTYPE html>
   3 <html>
   4   <head>
   5     <title>Rendering Test</title>
   6     <script src="../../../resources/js-test.js"></script>
   7     <script src="resources/webgl-test.js"> </script>
   8 </head>
   9 <body>
  10 <canvas id="example" width="50" height="50">
  11 There is supposed to be an example drawing here, but it's not important.
  12 </canvas>
  13 <div id="description"></div>
  14 <div id="console"></div>
  15     <script id="vshader" type="x-shader/x-vertex">
  16         attribute vec4 vPosition;
  17         void main()
  18         {
  19             gl_Position = vPosition;
  20         }
  21     </script>
  22
  23     <script id="fshader" type="x-shader/x-fragment">
  24         void main()
  25         {
  26             gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  27         }
  28     </script>
  29
  30     <script>
  31         function fail(x,y, buf, shouldBe)
  32         {
  33             var i = (y*50+x) * 4;
  34             var reason = "pixel at ("+x+","+y+") is ("+buf[i]+","+buf[i+1]+","+buf[i+2]+","+buf[i+3]+"), should be "+shouldBe;
  35             testFailed(reason);
  36         }
  37
  38         function pass()
  39         {
  40             testPassed("drawing is correct");
  41         }
  42
  43         function init()
  44         {
  45             if (window.initNonKhronosFramework) {
  46                 window.initNonKhronosFramework(false);
  47             }
  48
  49             gl = initWebGL("example", "vshader", "fshader", [ "vPosition"], [ 0, 0, 0, 1 ], 1);
  50
  51             var vertexObject = gl.createBuffer();
  52             gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
  53             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW);
  54             gl.enableVertexAttribArray(0);
  55             gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  56
  57             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  58             gl.drawArrays(gl.TRIANGLES, 0, 3);
  59
  60             var buf = new Uint8Array(50 * 50 * 4);
  61             gl.readPixels(0, 0, 50, 50, gl.RGBA, gl.UNSIGNED_BYTE, buf);
  62
  63             // Test several locations
  64             // First line should be all black
  65             for (var i = 0; i < 50; ++i)
  66                 if (buf[i*4] != 0 || buf[i*4+1] != 0 || buf[i*4+2] != 0 || buf[i*4+3] != 255) {
  67                     fail(i, 0, buf, "(0,0,0,255)");
  68                     return;
  69                 }
  70
  71             // Line 15 should be red for at least 10 red pixels starting 20 pixels in
  72             var offset = (15*50+20) * 4;
  73             for (var i = 0; i < 10; ++i)
  74                 if (buf[offset+i*4] != 255 || buf[offset+i*4+1] != 0 || buf[offset+i*4+2] != 0 || buf[offset+i*4+3] != 255) {
  75                     fail(20 + i, 15, buf, "(255,0,0,255)");
  76                     return;
  77                 }
  78             // Last line should be all black
  79             offset = (49*50) * 4;
  80             for (var i = 0; i < 50; ++i)
  81                 if (buf[offset+i*4] != 0 || buf[offset+i*4+1] != 0 || buf[offset+i*4+2] != 0 || buf[offset+i*4+3] != 255) {
  82                     fail(i, 49, buf, "(0,0,0,255)");
  83                     return;
  84                 }
  85
  86             pass();
  87        }
  88
  89        init();
  90     </script>
  91 </body>
  92
  93 </body>
  94 </html>