Test calling webgl function on non-preserved drawbuffer

by MikkoMononen

HTML

<div id="app">
    <div id="c-cont">
        <canvas id="canvas" width="400" height="300"></canvas>
    </div>
    <div id="but-cont">
        <div id="but">Test</div>
        <div id="counter">123</div>
    </div>
</div>

CSS

canvas {
    border: 1px solid black;
}

#but-cont {
    position:absolute;
    left: 0px;
    top: 0px;
    width:200px;
    height: 50px;
    background:rgba(255,0,0,0.3);
    padding: 4px;
}
#but {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #f00;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}
#but:hover {
    background:rgba(255,0,0,0.3);
}
#but:active {
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5);
}

#counter {
    display: inline-block;
    width: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

JavaScript

WebGLUtils = function() {

var requestAnimationFrameImpl_;
var getAnimationTimeImpl_;

/**
 * Creates a webgl context. If creation fails it will
 * change the contents of the container of the <canvas>
 * tag to an error message with the correct links for WebGL.
 * @param {Element} canvas. The canvas element to create a
 *     context from.
 * @param {WebGLContextCreationAttirbutes} opt_attribs Any
 *     creation attributes you want to pass in.
 * @param {function(string)} opt_onError An function to call
 *     if there is an error during creation.
 * @return {WebGLRenderingContext} The created context.
 */
var setupWebGL = function(canvas, opt_attribs, opt_onError) {
    
  opt_onError = opt_onError || function() {};

  if (canvas.addEventListener) {
    canvas.addEventListener("webglcontextcreationerror", function(event) {
          opt_onError(event.statusMessage);
        }, false);
  }
    
  var context = create3DContext(canvas, opt_attribs);
  if (!context) {
     opt_onError("");
  }
  return context;
};

/**
 * Creates a webgl context.
 * @param {!Canvas} canvas The canvas tag to get context
 *     from. If one is not passed in one will be created.
 * @return {!WebGLContext} The created context.
 */
var create3DContext = function(canvas, opt_attribs) {
  var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
  var context = null;
  for (var ii = 0; ii < names.length; ++ii) {
    try {
      context = canvas.getContext(names[ii], opt_attribs);
    } catch(e) {}
    if (context) {
      break;
    }
  }
  return context;
}

/**
 * Returns the animationTime in a cross browser way.
 * @return {number} The current animationTime
 */
var animationTime = function() {
  if (!getAnimationTimeImpl_) {
    getAnimationTimeImpl_ = function() {
      var attribNames = [
        "animationTime",
        "webkitAnimationTime",
        "mozAnimationTime",
        "oAnimationTime",
        "msAnimationTime"
      ];
      for (var ii = 0; ii <...