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

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