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

   1 <!DOCTYPE html>
   2 <body onload="runRepaintTest()">
   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 The canvases in the first two rows should have a single triangle. The canvases on the left should have two triangles superimposed on top of each other.
   6 If multisampling is supported, the odd columns should have smooth edges instead of jagged stair-stepping.
   7 </span>
   8 <br>
   9 <style>
  10 canvas {
  11     outline: 1px solid blue;
  12 }
  13 body {
  14     background-color: darkblue;
  15 }
  16 </style>
  17 <script id="2d-fragment-shader" type="x-shader/x-fragment">
  18 precision mediump float;
  19
  20 uniform vec4 u_color;
  21
  22 void main() {
  23   gl_FragColor = u_color;
  24 }
  25 </script>
  26 <script id="2d-vertex-shader" type="x-shader/x-vertex">
  27 attribute vec2 a_position;
  28
  29 uniform vec2 u_resolution;
  30
  31 void main() {
  32    // convert the rectangle from pixels to 0.0 to 1.0
  33    vec2 zeroToOne = a_position / u_resolution;
  34
  35    // convert from 0->1 to 0->2
  36    vec2 zeroToTwo = zeroToOne * 2.0;
  37
  38    // convert from 0->2 to -1->+1 (clipspace)
  39    vec2 clipSpace = zeroToTwo - 1.0;
  40
  41    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
  42 }
  43 </script>
  44 <script src="resources/webgl-test-utils.js"></script>
  45 <script>
  46
  47 var ctxs = []
  48
  49 if (window.testRunner) {
  50     testRunner.overridePreference("WebKitWebGLEnabled", "1");
  51     testRunner.dumpAsTextWithPixelResults();
  52     document.getElementById("description").style.position = "absolute";
  53     document.getElementById("description").style.top = "-5000px";
  54 }
  55
  56 for (var i=0; i<8; ++i) {
  57     var attrs = {
  58         'alpha': (i >= 4),
  59         'preserveDrawingBuffer': (i % 4) >= 2,
  60         'antialias': (i % 2) == 1
  61     };
  62     var can = document.createElement('canvas');
  63     can.width = can.height = 100;
  64     can.style.position = "absolute";
  65     can.style.left = 10 + (i % 4) * 120 + "px";
  66     can.style.top = (i < 4 ? 40 : 150) + "px";
  67     document.body.appendChild(can);
  68     if (i == 3)
  69         document.body.appendChild(document.createElement('br'));
  70     ctxs[i] = can.getContext("webgl", attrs);
  71     setup(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, offset) {
  97     var buffer = gl.createBuffer();
  98     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  99     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 100         80 + offset, 20,
 101         10 + offset, 10,
 102         10 + offset, 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
 111 function drawAll(offset) {
 112     for (var i=0; i<8; ++i)
 113         draw(ctxs[i], offset);
 114 }
 115
 116 drawAll(0);
 117
 118 function repaintTest() {
 119     drawAll(50);
 120     if (window.testRunner) {
 121         testRunner.notifyDone();
 122     }
 123 }
 124
 125 function runRepaintTest() {
 126     if (window.testRunner) {
 127         testRunner.waitUntilDone();
 128         testRunner.layoutAndPaintAsyncThen(repaintTest);
 129     } else {
 130         setTimeout(repaintTest, 100);
 131     }
 132 }
 133 </script>