third_party/WebKit/LayoutTests/fast/canvas/webgl/webgl-composite-modes.html

   1 <!DOCTYPE html>
   2 <body>
   3 <span id="description" style="color: white">
   4 This test is only useful as a pixel test. You should see two rows with 4 canvases in each. The top row of canvases should have a black background, the bottom row should have a dark blue background.
   5 Each canvas should have a green triangle in it. If multisampling is supported, the odd columns should have smooth edges instead of jagged stair-stepping. Otherwise, all canvases within a row should be identical to each other.
   6 </span>
   7 <br>
   8 <style>
   9 canvas {
  10     outline: 1px solid blue;
  11 }
  12 body {
  13     background-color: darkblue;
  14 }
  15 </style>
  16 <script id="2d-fragment-shader" type="x-shader/x-fragment">
  17 precision mediump float;
  18
  19 uniform vec4 u_color;
  20
  21 void main() {
  22   gl_FragColor = u_color;
  23 }
  24 </script>
  25 <script id="2d-vertex-shader" type="x-shader/x-vertex">
  26 attribute vec2 a_position;
  27
  28 uniform vec2 u_resolution;
  29
  30 void main() {
  31    // convert the rectangle from pixels to 0.0 to 1.0
  32    vec2 zeroToOne = a_position / u_resolution;
  33
  34    // convert from 0->1 to 0->2
  35    vec2 zeroToTwo = zeroToOne * 2.0;
  36
  37    // convert from 0->2 to -1->+1 (clipspace)
  38    vec2 clipSpace = zeroToTwo - 1.0;
  39
  40    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
  41 }
  42 </script>
  43 <script src="resources/webgl-test-utils.js"></script>
  44 <script>
  45
  46 var ctxs = []
  47
  48 if (window.testRunner) {
  49     testRunner.overridePreference("WebKitWebGLEnabled", "1");
  50     testRunner.dumpAsTextWithPixelResults();
  51     document.getElementById("description").style.position = "absolute";
  52     document.getElementById("description").style.top = "-5000px";
  53 }
  54
  55 for (var i=0; i<8; ++i) {
  56     var attrs = {
  57         'alpha': (i >= 4),
  58         'preserveDrawingBuffer': (i % 4) >= 2,
  59         'antialias': (i % 2) == 1
  60     };
  61     var can = document.createElement('canvas');
  62     can.width = can.height = 100;
  63     can.style.position = "absolute";
  64     can.style.left = 10 + (i % 4) * 120 + "px";
  65     can.style.top = (i < 4 ? 40 : 150) + "px";
  66     document.body.appendChild(can);
  67     if (i == 3)
  68         document.body.appendChild(document.createElement('br'));
  69     ctxs[i] = can.getContext("webgl", attrs);
  70     setup(ctxs[i]);
  71     draw(ctxs[i]);
  72 }
  73
  74 function setup(gl) {
  75     // setup a GLSL program
  76     var wtu = WebGLTestUtils;
  77     var vertexShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-vertex-shader");
  78     var fragmentShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-fragment-shader");
  79     var program = gl.createProgram();
  80     gl.attachShader(program, vertexShader, gl.VERTEX_SHADER);
  81     gl.attachShader(program, fragmentShader, gl.FRAGMENT_SHADER);
  82     gl.linkProgram(program);
  83     gl.useProgram(program);
  84
  85     // look up where the vertex data needs to go.
  86     gl.myPositionLocation = gl.getAttribLocation(program, "a_position");
  87
  88     // set the resolution
  89     var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  90     gl.uniform2f(resolutionLocation, 100, 100);
  91
  92     var colorLocation = gl.getUniformLocation(program, "u_color");
  93     gl.uniform4f(colorLocation, 0, 1, 0, 1);
  94 }
  95
  96 function draw(gl) {
  97     var buffer = gl.createBuffer();
  98     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  99     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 100         80, 20,
 101         10, 10,
 102         10, 80]), gl.STATIC_DRAW);
 103
 104     gl.enableVertexAttribArray(gl.myPositionLocation);
 105     gl.vertexAttribPointer(gl.myPositionLocation, 2, gl.FLOAT, false, 0, 0);
 106
 107     // draw
 108     gl.drawArrays(gl.TRIANGLES, 0, 3);
 109 }
 110 </script>