Source code
Revision control
Copy as Markdown
Other Tools
<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../resources/js-test-style.css"/>
<script src="../../js/js-test-pre.js"></script>
<script src="../../js/webgl-test-utils.js"></script>
<script id='vs' type='x-shader/x-vertex'>
attribute vec2 aPosCoord;
void main(void) {
gl_Position = vec4(aPosCoord, 0.0, 1.0);
}
</script>
<script id='fs' type='x-shader/x-fragment'>
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script>
"use strict";
var posCoords_arr = new Float32Array(2 * 4);
var posCoords_buff = null;
function DrawQuad(gl, prog, x0, y0, x1, y1) {
gl.useProgram(prog);
if (!posCoords_buff) {
posCoords_buff = gl.createBuffer();
}
gl.bindBuffer(gl.ARRAY_BUFFER, posCoords_buff);
posCoords_arr[0] = x0;
posCoords_arr[1] = y0;
posCoords_arr[2] = x1;
posCoords_arr[3] = y0;
posCoords_arr[4] = x0;
posCoords_arr[5] = y1;
posCoords_arr[6] = x1;
posCoords_arr[7] = y1;
gl.bufferData(gl.ARRAY_BUFFER, posCoords_arr, gl.STREAM_DRAW);
gl.enableVertexAttribArray(prog.aPosCoord);
gl.vertexAttribPointer(prog.aPosCoord, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function DrawSquare(gl, prog, size) {
DrawQuad(gl, prog, -size, -size, size, size);
}
function Reset(gl) {
gl.canvas.width += 1;
gl.canvas.width -= 1;
}
var iColor;
var pixel;
var dataURL_pre;
var dataURL_post;
function Test(gl, prog, shouldFinish) {
gl.enable(gl.BLEND);
gl.blendFunc(gl.ZERO, gl.DST_ALPHA);
iColor = 64;
var fColor = iColor / 255.0;
//////////////////
debug('clear(R,G,B,0)');
Reset(gl);
gl.clearColor(fColor, fColor, fColor, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
dataURL_pre = gl.canvas.toDataURL();
//console.log('Before blending: ' + dataURL_pre);
DrawSquare(gl, prog, 0.7);
WebGLTestUtils.checkCanvasRect(gl, gl.drawingBufferWidth/2,
gl.drawingBufferHeight/2, 1, 1,
[iColor, iColor, iColor, 255],
'Should blend as if alpha is 1.0.');
dataURL_post = gl.canvas.toDataURL();
//console.log('After blending: ' + dataURL_post);
shouldBe("dataURL_post", "dataURL_pre");
//////////////////
debug('mask(R,G,B,0), clear(R,G,B,1)');
Reset(gl);
gl.colorMask(true, true, true, false);
gl.clearColor(fColor, fColor, fColor, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.colorMask(true, true, true, true);
dataURL_pre = gl.canvas.toDataURL();
//console.log('Before blending: ' + dataURL_pre);
DrawSquare(gl, prog, 0.7);
WebGLTestUtils.checkCanvasRect(gl, gl.drawingBufferWidth/2,
gl.drawingBufferHeight/2, 1, 1,
[iColor, iColor, iColor, 255],
'Should blend as if alpha is 1.0.');
dataURL_post = gl.canvas.toDataURL();
//console.log('After blending: ' + dataURL_post);
shouldBe("dataURL_post", "dataURL_pre");
////////////////
WebGLTestUtils.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
if (shouldFinish)
finishTest();
}
var gl;
function init() {
var canvas = document.getElementById('canvas');
var attribs = {
alpha: false,
antialias: false,
premultipliedAlpha: false,
};
gl = canvas.getContext('experimental-webgl', attribs);
shouldBeNonNull(gl);
shouldBe("gl.getParameter(gl.ALPHA_BITS)", "0");
var prog = WebGLTestUtils.setupProgram(gl, ['vs', 'fs']);
shouldBeNonNull(prog);
prog.aPosCoord = gl.getAttribLocation(prog, 'aPosCoord');
Test(gl, prog, false);
requestAnimationFrame(function(){ Test(gl, prog, true); });
}
</script>
</head>
<body onload="init()">
<canvas id='canvas'></canvas>
<br/>
<div id="description"></div>
<div id="console"></div>
</body>
</html>