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

   1 <html>
   2     <head>
   3         <style>
   4             #target {
   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.overridePreference("WebKitWebGLEnabled", "1");
  99
 100             initialize();
 101             draw(0, 0.5, 0);
 102         </script>
 103     </head>
 104     <body>
 105         <div id="target"></div>
 106         <div id="console"></div>
 107     </body>
 108      <script>
 109         function log(str) {
 110             var li = document.createElement("li");
 111             li.appendChild(document.createTextNode(str));
 112             var console = document.getElementById("console");
 113             console.appendChild(li);
 114         }
 115         function assert(bool, text) {
 116             if (!bool)
 117                 log(text + "Failure");
 118         }
 119         window.onload = function() {
 120             if (window.testRunner && window.internals) {
 121                 window.testRunner.layoutAndPaintAsyncThen(function() {
 122                     assert(window.internals.isUseCounted(document, 753), "has -webkit-canvas UseCounter: "); // 753 == UseCounter::Feature::WebkitCanvas
 123                     testRunner.notifyDone();
 124                 });
 125             }
 126         }
 127         testRunner.waitUntilDone();
 128     </script>
 129 </html>