LayoutTests/fast/canvas/webgl/webgl-composite-modes-repaint_t01.dart

/*
 * Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/** 
 * @description Checking API, no asserts
 * 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.  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. If
 * multisampling is supported, the odd columns should have smooth edges instead
 * of jagged stair-stepping.
 */
import "dart:html";
import "dart:web_gl" as wgl;
import 'dart:typed_data';
import "../../../testcommon.dart";
import "resources/webgl-test.dart";
import "resources/webgl-test-utils.dart" as wtu;
import "../../../../Utils/async_utils.dart";

main() {
  var style = new Element.html('''
      <style>
      canvas {
          outline: 1px solid blue;
      }
      body {
          background-color: darkblue;
      }
      </style>
      ''', treeSanitizer: new NullTreeSanitizer());
  document.head.append(style);

  document.body.setInnerHtml('''
      <script id="2d-fragment-shader" type="x-shader/x-fragment">
      precision mediump float;

      uniform vec4 u_color;

      void main() {
        gl_FragColor = u_color;
      }
      </script>
      <script id="2d-vertex-shader" type="x-shader/x-vertex">
      attribute vec2 a_position;

      uniform vec2 u_resolution;

      void main() {
         // convert the rectangle from pixels to 0.0 to 1.0
         vec2 zeroToOne = a_position / u_resolution;

         // convert from 0->1 to 0->2
         vec2 zeroToTwo = zeroToOne * 2.0;

         // convert from 0->2 to -1->+1 (clipspace)
         vec2 clipSpace = zeroToTwo - 1.0;

         gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
      }
      </script>
      ''', treeSanitizer: new NullTreeSanitizer());

  var ctxs = [];
  var positionLocation = {};

  setup(gl) {
    // setup a GLSL program
    var vertexShader = wtu.loadShaderFromScript(gl, "2d-vertex-shader");
    var fragmentShader = wtu.loadShaderFromScript(gl, "2d-fragment-shader");
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);

    // look up where the vertex data needs to go.
    positionLocation[gl] = gl.getAttribLocation(program, "a_position");

    // set the resolution
    var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
    gl.uniform2f(resolutionLocation, 100, 100);

    var colorLocation = gl.getUniformLocation(program, "u_color");
    gl.uniform4f(colorLocation, 0, 1, 0, 1);
  }

  for (var i=0; i<8; ++i) {
    var attrs = {
      'alpha': (i >= 4),
      'preserveDrawingBuffer': (i % 4) >= 2,
      'antialias': (i % 2) == 1
    };
    var can = document.createElement('canvas');
    can.width = can.height = 100;
    can.style.position = "absolute";
    can.style.left = "${10 + (i % 4) * 120}px";
    can.style.top = "${i < 4 ? 40 : 150}px";
    document.body.append(can);
    if (i == 3)
      document.body.append(document.createElement('br'));
    ctxs.add(can.getContext("experimental-webgl", attrs));
    setup(ctxs[i]);
  }

  draw(gl, offset) {
    var buffer = gl.createBuffer();
    gl.bindBuffer(wgl.ARRAY_BUFFER, buffer);
    gl.bufferData(wgl.ARRAY_BUFFER, new Float32List.fromList([
          80.0 + offset, 20.0,
          10.0 + offset, 10.0,
          10.0 + offset, 80.0]), wgl.STATIC_DRAW);

    gl.enableVertexAttribArray(positionLocation[gl]);
    gl.vertexAttribPointer(positionLocation[gl], 2, wgl.FLOAT, false, 0, 0);

    // draw
    gl.drawArrays(wgl.TRIANGLES, 0, 3);
  }

  drawAll(offset) {
    for (var i=0; i<8; ++i)
      draw(ctxs[i], offset);
  }

  drawAll(0);

  repaintTest() {
    drawAll(50);
    asyncEnd();
  }

  runRepaintTest() {
    setTimeout(repaintTest, 100);
  }

  asyncStart();
  runRepaintTest();
}