third_party/WebKit/LayoutTests/compositing/webgl/webgl-reflection.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style type="text/css" media="screen">
   5       canvas {
   6         margin: 20px;
   7         width: 200px;
   8         height: 200px;
   9         padding: 0 20px;
  10         border: 2px solid black;
  11         -webkit-box-reflect: below 20px;
  12         outline: 10px solid transparent; /* affects layer sizes */
  13       }
  14
  15     </style>
  16     <script id="vertexShader" type="x-shader/x-vertex">
  17       attribute vec4 vPosition;
  18
  19       void main() {
  20          gl_Position = vPosition;
  21       }
  22     </script>
  23
  24     <script id="fragmentShader" type="x-shader/x-fragment">
  25       void main() {
  26           gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0);
  27       }
  28     </script>
  29     <script>
  30     if (window.testRunner)
  31         testRunner.overridePreference("WebKitWebGLEnabled", "1");
  32
  33     var gl = null;
  34
  35     function draw()
  36     {
  37         var vertices = [ 0.0, 0.8, 0.0,
  38                         -0.8, -0.8, 0.0,
  39                          0.8, -0.8, 0.0 ];
  40         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  41
  42         gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data
  43         gl.enableVertexAttribArray(0);
  44         gl.drawArrays(gl.TRIANGLES, 0, 3);
  45         gl.flush();
  46     }
  47
  48     function getFragmentShader()
  49     {
  50         var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top
  51         var shaderSource = getShaderSource(shaderNode);
  52
  53         var shader = gl.createShader(gl.FRAGMENT_SHADER);
  54         gl.shaderSource(shader, shaderSource);
  55         gl.compileShader(shader);
  56
  57         return shader;
  58     }
  59
  60     function getShaderSource(shaderNode)
  61     {
  62         var shaderSource = "";
  63         var node = shaderNode.firstChild;
  64         while (node) {
  65             if (node.nodeType == 3) // Node.TEXT_NODE
  66                 shaderSource += node.textContent;
  67             node = node.nextSibling;
  68         }
  69
  70         return shaderSource;
  71     }
  72
  73     function getVertexShader()
  74     {
  75         var shaderNode = document.getElementById("vertexShader");
  76         var shaderSource = getShaderSource(shaderNode);
  77
  78         var shader = gl.createShader(gl.VERTEX_SHADER);
  79         gl.shaderSource(shader, shaderSource);
  80         gl.compileShader(shader);
  81
  82         return shader;
  83     }
  84
  85     function initialize()
  86     {
  87         var theCanvas = document.getElementById("canvas");
  88         gl = theCanvas.getContext("webgl");
  89
  90         var vertexShader = getVertexShader();
  91         var fragmentShader = getFragmentShader();
  92
  93         var shaderProgram = gl.createProgram();
  94         gl.attachShader(shaderProgram, vertexShader);
  95         gl.attachShader(shaderProgram, fragmentShader);
  96         gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has been defined at the top
  97         gl.linkProgram(shaderProgram);
  98
  99         gl.useProgram(shaderProgram);
 100
 101          var buffer = gl.createBuffer();
 102         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 103     }
 104
 105     function drawCanvas()
 106     {
 107       initialize();
 108       draw();
 109     }
 110     </script>
 111   </head>
 112   <body onload="drawCanvas()">
 113
 114     <p>You should see a green triangle and its reflection.</p>
 115     <canvas id="canvas" style="left: 20px" width="200" height="200"></canvas>
 116
 117   </body>
 118 </html>