third_party/WebKit/LayoutTests/fast/canvas/webgl/css-webkit-canvas-repaint.html

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